@extends('Admin.layout')

@section('content')

    <style>
        /* ===============================
                           ADD BANK PAGE
                        ================================ */

        .bank-page-card {
            background: rgba(10, 22, 40, .55) !important;
            border: 1px solid var(--glass-border) !important;
            border-radius: 12px;
            color: var(--ink);
        }

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

        .bank-page-header {
            padding: .25rem .15rem .75rem;
        }

        .bank-page-title {
            color: var(--gold-soft) !important;
            font-weight: 700;
            font-size: 1rem;
        }

        .bank-page-subtitle {
            color: var(--ink-dim);
            font-size: .75rem;
            display: block;
            margin-top: .2rem;
        }

        /* ===============================
                           BACK BUTTON
                        ================================ */

        .back-btn {
            width: 36px;
            height: 36px;

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

            background: #19212c !important;
            color: #f0d37b !important;

            border: 1px solid rgba(218, 184, 91, .45) !important;
            border-radius: 8px;

            text-decoration: none;
            transition: all .2s ease;
        }

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

        .back-btn:hover {
            background: #f0cc68 !important;
            color: #19212c !important;
            border-color: #f0cc68 !important;
        }

        /* ===============================
                           BANK DETAILS SECTION
                        ================================ */

        .bank-section {
            width: 100%;
            max-width: 600px;

            margin-left: auto;
            margin-right: auto;

            background: rgba(10, 22, 40, .38);
            border: 1px solid var(--glass-border);
            border-radius: 10px;
        }

        .bank-section-title {
            color: var(--gold-soft) !important;
            font-size: .85rem;
            font-weight: 700;
        }

        .bank-icon {
            color: var(--gold-soft);
            font-size: 1.1rem;
        }

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

        .bank-form-label {
            color: var(--ink-dim) !important;
            font-size: .75rem;
            font-weight: 500;
            margin-bottom: .35rem;
        }

        .bank-required {
            color: #ff5b5b;
        }

        .bank-form-control,
        .bank-form-select {
            background: rgba(255, 255, 255, .035) !important;
            border: 1px solid var(--glass-border) !important;

            color: var(--ink) !important;

            border-radius: 7px;
            font-size: .8rem;
            min-height: 36px;
        }

        .bank-form-control::placeholder {
            color: var(--ink-dim) !important;
            opacity: .55;
        }

        .bank-form-control:focus,
        .bank-form-select:focus {
            background: rgba(255, 255, 255, .045) !important;

            border-color: rgba(226, 182, 92, .5) !important;

            box-shadow:
                0 0 0 .15rem rgba(226, 182, 92, .08) !important;

            color: var(--ink) !important;
        }

        .bank-form-select option {
            background: #0a1628;
            color: var(--ink);
        }

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

        .bank-actions {
            border-top: 1px solid var(--glass-border);
            padding-top: 1rem;
        }

        .bank-cancel-btn {
            color: var(--ink-dim) !important;

            border: 1px solid var(--glass-border) !important;
            background: rgba(255, 255, 255, .025) !important;

            border-radius: 7px;
            transition: all .2s ease;
        }

        .bank-cancel-btn:hover {
            color: var(--ink) !important;
            background: rgba(255, 255, 255, .06) !important;
            border-color: rgba(255, 255, 255, .15) !important;
        }

        .bank-save-btn {
            background: var(--gold) !important;
            border-color: var(--gold) !important;

            color: #111 !important;

            font-weight: 700;
            border-radius: 7px;

            transition: all .2s ease;
        }

        .bank-save-btn:hover {
            background: var(--gold-soft) !important;
            border-color: var(--gold-soft) !important;
            color: #111 !important;
        }

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

        @media (max-width: 767.98px) {

            .bank-page-card {
                border-radius: 9px;
            }

            .bank-page-header {
                padding-bottom: .65rem;
            }

            .bank-page-title {
                font-size: .95rem;
            }

            .bank-page-subtitle {
                font-size: .7rem;
            }

            .bank-section {
                max-width: 100%;
                padding: .75rem !important;
                border-radius: 9px;
            }

            .bank-section-title {
                font-size: .8rem;
            }

            .bank-actions {
                margin-top: 1rem !important;
            }

            .bank-actions .btn {
                width: 100%;
            }

            .back-btn {
                width: 34px;
                height: 34px;
            }
        }
    </style>


    <div class="card p-2 p-md-3 bank-page-card">

        <!-- HEADER -->
        <div class="bank-page-header mb-2">

            <div class="d-flex align-items-center">

                <a href="{{ route('bank') }}" class="btn back-btn me-2 flex-shrink-0">

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

                </a>

                <div>

                    <h5 class="mb-0 bank-page-title">
                        Add Bank
                    </h5>

                    <small class="bank-page-subtitle">
                        Add a bank for customer disbursement
                    </small>

                </div>

            </div>

        </div>


        <!-- CENTERED BANK SECTION -->
        <div class="bank-section p-2 p-md-3">

            <!-- SECTION HEADER - LEFT ALIGNED -->
            <div class="d-flex align-items-center gap-2 mb-3">

                <i class="ti ti-building-bank bank-icon"></i>

                <h6 class="mb-0 bank-section-title">
                    Bank Details
                </h6>

            </div>


            <!-- FORM - NORMAL LEFT ALIGNMENT -->
            <form action="{{ route('store_bank') }}" method="POST" id="bankForm">
                @csrf

                <div class="row g-2 g-md-3">

                    <!-- BANK NAME -->
                    <div class="col-12">

                        <label class="bank-form-label">
                            Bank Name
                            <span class="bank-required">*</span>
                        </label>

                        <input type="text" name="bank_name"
                            class="form-control form-control-sm bank-form-control @error('bank_name') is-invalid @enderror"
                            placeholder="Enter bank name" value="{{ old('bank_name') }}">

                        @error('bank_name')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror

                    </div>

                </div>

                <!-- ACTIONS -->
                <div class="bank-actions mt-4">

                    <div class="d-flex flex-column flex-md-row justify-content-end gap-2">

                        <button type="reset" class="btn btn-sm bank-cancel-btn px-4">

                            <i class="ti ti-x me-1"></i>
                            Reset

                        </button>

                        <button type="submit" class="btn btn-sm bank-save-btn px-4" id="saveBankBtn">

                            <i class="ti ti-building-bank me-1"></i>
                            Save Bank

                        </button>

                    </div>

                </div>

            </form>

        </div>

    </div>

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

            const form = document.getElementById('bankForm');
            const button = document.getElementById('saveBankBtn');

            if (form && button) {

                form.addEventListener('submit', function () {

                    button.disabled = true;

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

                });

            }

        });
    </script>

@endsection