@extends('Admin.layout')

@section('content')

<style>
    /* =========================================================
                              PAGE
    ========================================================= */

    .master-page-card {
        background: #19212c !important;
        border: 1px solid rgba(218, 184, 91, 0.30) !important;
        border-radius: 16px !important;
    }


    /* =========================================================
                             HEADER
    ========================================================= */

    .master-page-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 25px;
    }

    .master-back-btn {
        width: 38px;
        height: 38px;
        padding: 0 !important;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        background: #252b31 !important;
        border: 1px solid rgba(218, 184, 91, 0.30) !important;
        color: #f0d37b !important;

        border-radius: 8px !important;
    }

    .master-back-btn:hover {
        background: #303841 !important;
        color: #f5d77e !important;
    }

    .master-back-btn i {
        font-size: 18px;
    }


    /* =========================================================
                              TITLE
    ========================================================= */

    .master-page-title {
        color: #f0d37b !important;
        font-size: 20px;
        font-weight: 700;
        margin: 0;
    }

    .master-page-subtitle {
        color: #9fa7b3;
        font-size: 13px;
        margin-top: 3px;
    }


    /* =========================================================
                            FORM SECTION
    ========================================================= */

    .master-form-section {
        width: 100%;
    }


    /* =========================================================
                            FORM LABEL
    ========================================================= */

    .master-form-label {
        color: #d8dce3 !important;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 7px;
    }


    /* =========================================================
                            FORM INPUT
    ========================================================= */

    .master-form-control,
    .master-form-select {

        width: 100%;

        background: #111820 !important;

        color: #e8eaf0 !important;

        border: 1px solid rgba(218, 184, 91, 0.25) !important;

        border-radius: 8px !important;

        min-height: 42px;

        font-size: 14px;
    }

    .master-form-control::placeholder {
        color: #69717c !important;
    }

    .master-form-control:focus,
    .master-form-select:focus {

        background: #111820 !important;

        color: #ffffff !important;

        border-color: #f0d37b !important;

        box-shadow: 0 0 0 0.15rem rgba(240, 211, 123, 0.12) !important;
    }


    /* =========================================================
                             SELECT
    ========================================================= */

    .master-form-select option {
        background: #19212c;
        color: #ffffff;
    }


    /* =========================================================
                           INPUT GROUP
    ========================================================= */

    .master-input-group .input-group-text {

        background: #252b31 !important;

        color: #f0d37b !important;

        border: 1px solid rgba(218, 184, 91, 0.25) !important;

        border-right: 0 !important;

        border-radius: 8px 0 0 8px !important;

        font-size: 14px;

        font-weight: 600;
    }

    .master-input-group .master-form-control {
        border-radius: 0 8px 8px 0 !important;
    }


    /* =========================================================
                         SUCCESS / ERROR
    ========================================================= */

    .master-alert {
        border-radius: 8px;
        font-size: 13px;
        margin-bottom: 20px;
    }


    /* =========================================================
                            ACTIONS
    ========================================================= */

    .master-actions {

        display: flex;

        justify-content: flex-end;

        gap: 10px;

        margin-top: 30px;

        padding-top: 20px;

        border-top: 1px solid rgba(218, 184, 91, 0.12);
    }


    /* CANCEL */

    .master-cancel-btn {

        min-width: 110px;

        background: #252b31 !important;

        border: 1px solid #4b5158 !important;

        color: #d5d9df !important;

        border-radius: 8px !important;

        font-size: 13px;

        font-weight: 600;
    }

    .master-cancel-btn:hover {

        background: #303841 !important;

        color: #ffffff !important;
    }


    /* UPDATE */

    .master-update-btn {

        min-width: 130px;

        background: #f0cc68 !important;

        border: 1px solid #f0cc68 !important;

        color: #19212c !important;

        border-radius: 8px !important;

        font-size: 13px;

        font-weight: 600;
    }

    .master-update-btn:hover {

        background: #f5d77e !important;

        border-color: #f5d77e !important;

        color: #19212c !important;
    }


    /* =========================================================
                              MOBILE
    ========================================================= */

    @media (max-width: 576px) {

        .master-page-card {
            padding: 16px !important;
            border-radius: 12px !important;
        }

        .master-page-title {
            font-size: 18px;
        }

        .master-page-header {
            margin-bottom: 20px;
        }

        .master-actions {
            flex-direction: column-reverse;
        }

        .master-cancel-btn,
        .master-update-btn {
            width: 100%;
        }
    }
</style>


<div class="card master-page-card p-3 p-md-4">


    {{-- HEADER --}}

    <div class="master-page-header">

        <a href="{{ route('master_management') }}"
           class="btn master-back-btn">

            <i class="ti ti-arrow-left"></i>

        </a>


        <div>

            <h5 class="master-page-title">
                Edit GT Master
            </h5>

            <div class="master-page-subtitle">
                Update GT master type and amount details
            </div>

        </div>

    </div>


    {{-- SUCCESS MESSAGE --}}

    @if(session('success'))

        <div class="alert alert-success master-alert">
            {{ session('success') }}
        </div>

    @endif


    {{-- ERROR MESSAGE --}}

    @if(session('error'))

        <div class="alert alert-danger master-alert">
            {{ session('error') }}
        </div>

    @endif


    {{-- VALIDATION ERRORS --}}

    @if($errors->any())

        <div class="alert alert-danger master-alert">

            @foreach($errors->all() as $error)

                <div>
                    {{ $error }}
                </div>

            @endforeach

        </div>

    @endif


    {{-- FORM --}}

    <div class="master-form-section">

        <form id="updateMasterForm"
              action="{{ route('mastermanagement.update', $masterManagement->id) }}"
              method="POST">

            @csrf


            <div class="row g-3">


                {{-- PER LAKHS --}}

                <div class="col-12 col-md-4">

                    <label class="master-form-label">
                        Per Lakhs
                        <span class="text-danger">*</span>
                    </label>

                    <div class="input-group master-input-group">

                        <span class="input-group-text">
                            ₹
                        </span>

                        <input type="text"
                               name="per_lakhs"
                               class="form-control master-form-control"
                               value="{{ old('per_lakhs', $masterManagement->per_lakhs) }}"
                               readonly>

                    </div>

                </div>


                {{-- TYPE --}}

                <div class="col-12 col-md-4">

                    <label class="master-form-label">
                        Type
                        <span class="text-danger">*</span>
                    </label>

                    <select class="form-select master-form-select"
                            name="type">

                        <option value="">
                            Select Type
                        </option>

                        <option value="bank"
                            {{ old('type', $masterManagement->type) == 'bank' ? 'selected' : '' }}>
                            Bank
                        </option>

                        <option value="customer"
                            {{ old('type', $masterManagement->type) == 'customer' ? 'selected' : '' }}>
                            Customer
                        </option>

                    </select>

                </div>


                {{-- AMOUNT --}}

                <div class="col-12 col-md-4">

                    <label class="master-form-label">
                        Amount
                        <span class="text-danger">*</span>
                    </label>

                    <div class="input-group master-input-group">

                        <span class="input-group-text">
                            ₹
                        </span>

                        <input type="number"
                               name="amount"
                               class="form-control master-form-control"
                               value="{{ old('amount', $masterManagement->amount) }}"
                               placeholder="Enter amount"
                               min="0"
                               step="0.01">

                    </div>

                </div>


            </div>


            {{-- ACTIONS --}}

            <div class="master-actions">


                {{-- CANCEL --}}

                <a href="{{ route('master_management') }}"
                   class="btn master-cancel-btn">

                    Cancel

                </a>


                {{-- UPDATE --}}

                <button type="submit"
                        id="updateBtn"
                        class="btn master-update-btn">

                    <i class="ti ti-device-floppy me-1"></i>

                    Update

                </button>


            </div>


        </form>

    </div>

</div>


<script>
    document.addEventListener('DOMContentLoaded', () => {

        const form = document.getElementById('updateMasterForm');

        form.addEventListener('submit', () => {

            const button = document.getElementById('updateBtn');

            button.disabled = true;

            button.innerHTML =
                '<span class="spinner-border spinner-border-sm me-1"></span> Updating...';

        });

    });
</script>

@endsection