@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;
    }


    /* =========================================================
                              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">
                GT Master
            </h5>

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

        </div>

    </div>


    {{-- FORM --}}

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

        <form action="{{ route('mastermanagement.store') }}"
              method="POST"
              id="masterForm">

            @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', 100000) }}"
                               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') == 'bank' ? 'selected' : '' }}>
                            Bank
                        </option>

                        <option value="customer"
                            {{ old('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') }}"
                               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"
                        class="btn master-update-btn"
                        id="updateBtn">

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

                    Update

                </button>

            </div>


        </form>

    </div>

</div>


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

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

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

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

            setTimeout(() => {

                btn.disabled = true;

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

            }, 0);

        });

    });
</script>

@endsection