@extends('admin.layouts.master')
@section('title', 'New Booking')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    {{-- Select2 CSS --}}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />

    <style>
        :root {
            --primary: #4338ca;
            --primary-light: #e0e7ff;
            --success: #059669;
            --danger: #dc2626;
            --gray-100: #f1f5f9;
            --gray-200: #e2e8f0;
            --gray-500: #64748b;
            --gray-800: #1e293b;
            --radius-md: 12px;
            --radius-lg: 16px;
            --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
            --transition: all 0.25s ease;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #f8fafc;
            color: var(--gray-800);
        }

        /* --- CARDS & LAYOUT --- */
        .modern-card {
            background: #fff;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            margin-bottom: 24px;
            transition: var(--transition);
        }

        .modern-card:hover {
            box-shadow: var(--shadow-md);
            border-color: #cbd5e1;
        }

        .card-header-clean {
            padding: 20px 24px;
            background: #fff;
            border-bottom: 1px solid var(--gray-100);
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 16px 16px 0 0;
        }

        .card-body-clean {
            padding: 24px;
        }

        .header-icon-box {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            margin-right: 12px;
        }

        .icon-blue {
            background: #eef2ff;
            color: var(--primary);
        }

        .icon-orange {
            background: #fff7ed;
            color: #ea580c;
        }

        /* --- FORM ELEMENTS --- */
        .form-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--gray-500);
            font-weight: 700;
            margin-bottom: 6px;
        }

        .form-control,
        .form-select {
            display: block;
            width: 100%;
            padding: 0.75rem 1rem;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--gray-800);
            background-color: #fff;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-md);
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary);
            outline: 0;
            box-shadow: 0 0 0 4px var(--primary-light);
        }

        .form-control[readonly] {
            background-color: #f1f5f9;
            color: #64748b;
            cursor: not-allowed;
            border-color: #e2e8f0;
        }

        /* --- SELECT2 CUSTOMIZATION --- */
        .select2-container--bootstrap-5 .select2-selection {
            border-color: var(--gray-200) !important;
            border-radius: var(--radius-md) !important;
            min-height: 50px !important;
            padding: 0.5rem 0.75rem !important;
            background-color: #f8fafc;
        }

        .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
            color: var(--gray-800) !important;
            font-weight: 500;
            line-height: 1.8 !important;
        }

        .select2-container--bootstrap-5 .select2-dropdown {
            border-color: var(--gray-200);
            border-radius: 12px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .select2-search__field {
            border-radius: 8px !important;
            padding: 8px 12px !important;
        }

        /* --- VALIDATION FIX FOR SELECT2 --- */
        /* This applies the red border to the VISIBLE Select2 container */
        .select2-selection.is-invalid {
            border-color: var(--danger) !important;
            background-color: #fef2f2 !important;
        }

        /* Standard validation styles */
        .is-invalid {
            border-color: var(--danger) !important;
            background-image: none !important;
        }

        .error-msg {
            color: var(--danger);
            font-size: 0.75rem;
            margin-top: 4px;
            display: none;
            font-weight: 600;
        }

        .shake-field {
            animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
            border-color: var(--danger) !important;
            background: #fef2f2 !important;
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0)
            }

            20%,
            60% {
                transform: translateX(-4px)
            }

            40%,
            80% {
                transform: translateX(4px)
            }
        }

        /* --- STUDENT SELECTED STATE --- */
        .selected-student-card {
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            border-radius: 10px;
            padding: 1rem;
            display: none;
            align-items: center;
            justify-content: space-between;
            animation: fadeIn 0.3s ease;
        }

        .avatar-circle {
            width: 42px;
            height: 42px;
            background: #16a34a;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            margin-right: 12px;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-5px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* --- INVOICE PANEL --- */
        .receipt-panel {
            position: sticky;
            top: 20px;
            background: #fff;
            border-radius: 20px;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--gray-200);
            overflow: hidden;
        }

        .receipt-header {
            background: var(--gray-800);
            padding: 24px;
            color: white;
            position: relative;
        }

        .receipt-header::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 0;
            right: 0;
            height: 20px;
            background: radial-gradient(circle, transparent 70%, #fff 75%) 0 -10px;
            background-size: 20px 20px;
            transform: rotate(180deg);
        }

        .receipt-body {
            padding: 32px 24px 24px 24px;
        }

        .amount-display {
            background: #f8fafc;
            border: 2px solid var(--gray-200);
            border-radius: var(--radius-md);
            padding: 12px;
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--gray-800);
            width: 100%;
            text-align: right;
            transition: var(--transition);
        }

        .amount-display:focus {
            border-color: var(--primary);
            outline: none;
            background: #fff;
        }

        /* --- BUTTONS & RADIO --- */
        .btn-submit {
            background: var(--primary);
            color: #fff;
            width: 100%;
            padding: 16px;
            font-size: 1rem;
            font-weight: 700;
            border: none;
            border-radius: 10px;
            transition: 0.2s;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }

        .btn-submit:hover:not(:disabled) {
            background: #4338ca;
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3);
        }

        .btn-submit:disabled {
            background: #94a3b8;
            cursor: not-allowed;
        }

        /* Toggles */
        .type-toggle {
            background: var(--gray-100);
            padding: 5px;
            border-radius: var(--radius-md);
            display: flex;
            margin-bottom: 24px;
        }

        .type-btn {
            flex: 1;
            text-align: center;
            padding: 10px;
            border-radius: 8px;
            font-weight: 700;
            color: var(--gray-500);
            cursor: pointer;
            transition: var(--transition);
            border: 1px solid transparent;
        }

        .type-btn.active {
            background: #fff;
            color: var(--primary);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            border-color: var(--gray-200);
        }

        /* Radio Grid */
        .radio-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }

        .radio-option input {
            display: none;
        }

        .radio-content {
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-md);
            padding: 12px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            height: 100%;
            background: #fff;
        }

        .radio-content:hover {
            border-color: var(--primary);
            transform: translateY(-2px);
        }

        .radio-option input:checked+.radio-content {
            border-color: var(--primary);
            background: var(--primary-light);
            color: var(--primary);
            box-shadow: 0 0 0 2px var(--primary-light);
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid pb-5">

        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 fw-bold text-dark mb-1">New Booking</h1>
                <p class="text-muted small mb-0">Create new enrollments and manage invoices.</p>
            </div>
            <a href="#" onclick="history.back()"
                class="btn btn-white border fw-bold shadow-sm rounded-3 px-4 py-2 hover-lift">
                <i class="ri-close-line me-1"></i> Cancel
            </a>
        </div>

        <form id="bookingForm" novalidate>
            @csrf
            <div class="row g-4">

                {{-- LEFT COLUMN --}}
                <div class="col-xl-8">

                    {{-- 1. STUDENT SELECTOR --}}
                    <div class="modern-card">
                        <div class="card-header-clean">
                            <div class="d-flex align-items-center">
                                <div class="header-icon-box icon-blue"><i class="ri-user-search-line"></i></div>
                                <div>
                                    <h5 class="fw-bold mb-0">Select Student</h5>
                                    <span class="text-xs text-muted">Search by Name, ID, or Phone</span>
                                </div>
                            </div>
                            <button type="button" class="btn btn-light text-primary fw-bold btn-sm border"
                                data-bs-toggle="modal" data-bs-target="#addStudentModal">
                                <i class="ri-add-line"></i> New Student
                            </button>
                        </div>
                        <div class="card-body-clean">
                            <input type="hidden" name="student_id" id="studentIdRaw">

                            {{-- Select2 Container --}}
                            <div id="studentSearchContainer">
                                <select id="studentSelect" class="form-select w-100"></select>
                                <div class="error-msg" id="err-student">Please select a student.</div>
                            </div>

                            {{-- Selected View (Hidden Initially) --}}
                            <div class="selected-student-card" id="studentSelectedView">
                                <div class="d-flex align-items-center">
                                    <div class="avatar-circle"><i class="ri-user-smile-line"></i></div>
                                    <div>
                                        <h6 class="fw-bold text-dark mb-0" id="selName">Student Name</h6>
                                        <div class="text-xs text-success fw-bold" id="selMeta">ID: 000 • +91 0000000000
                                        </div>
                                    </div>
                                </div>
                                <button type="button"
                                    class="btn btn-sm btn-white text-danger border shadow-sm rounded-pill px-3"
                                    id="btnClearStudent">
                                    Change
                                </button>
                            </div>
                        </div>
                    </div>

                    {{-- 2. BOOKING DETAILS --}}
                    <div class="modern-card">
                        <div class="card-header-clean">
                            <div class="d-flex align-items-center">
                                <div class="header-icon-box icon-orange"><i class="ri-book-open-line"></i></div>
                                <div>
                                    <h5 class="fw-bold mb-0">Booking Details</h5>
                                    <span class="text-xs text-muted">Configure course or package details</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-body-clean">
                            <input type="hidden" name="booking_type" id="bookingType" value="course">

                            <div class="type-toggle">
                                <div class="type-btn active" onclick="switchType('course')"><i
                                        class="ri-book-2-line me-1"></i> Single Course</div>
                                <div class="type-btn" onclick="switchType('package')"><i class="ri-stack-line me-1"></i>
                                    Package Bundle</div>
                            </div>

                            {{-- Course Section --}}
                            <div id="courseSection">
                                <div class="row g-4 mb-4">
                                    <div class="col-md-6">
                                        <label class="form-label">Course Name <span class="text-danger">*</span></label>
                                        <select class="form-select" name="course_id" id="courseSelect">
                                            <option></option>
                                            @foreach ($courses as $course)
                                                <option value="{{ $course->id }}">{{ $course->name }}</option>
                                            @endforeach
                                        </select>
                                        <div class="error-msg" id="err-course">Required</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Batch Slot <span class="text-danger">*</span></label>
                                        <select class="form-select" name="course_batch_id" id="batchSelect" disabled>
                                            <option value="">Select Course First</option>
                                        </select>
                                        <div class="error-msg" id="err-batch">Required</div>
                                    </div>
                                </div>
                            </div>

                            {{-- Package Section --}}
                            <div id="packageSection" style="display: none;">
                                <div class="mb-4">
                                    <label class="form-label">Select Package <span class="text-danger">*</span></label>
                                    <select class="form-select" name="course_package_id" id="packageSelect">
                                        <option></option>
                                        @foreach ($packages as $pkg)
                                            <option value="{{ $pkg->id }}">{{ $pkg->name }}
                                                (₹{{ number_format($pkg->package_price) }})
                                            </option>
                                        @endforeach
                                    </select>
                                    <div class="error-msg" id="err-package">Required</div>
                                </div>

                                <div id="packageLoader" class="text-center py-3 text-muted small" style="display:none">
                                    <div class="spinner-border spinner-border-sm text-primary mb-2"></div><br>Loading
                                    course components...
                                </div>
                                <div id="packageSubCoursesContainer" class="bg-light rounded-3 border p-3"
                                    style="display:none;"></div>
                            </div>

                            {{-- Lead Source --}}
                            <div class="mt-4 pt-4 border-top">
                                <label class="form-label mb-2">Lead Source</label>
                                <div class="radio-grid">
                                    <label class="radio-option">
                                        <input type="radio" name="source" value="walkin" checked>
                                        <div class="radio-content p-2"><i class="ri-store-2-line fs-5 d-block mb-1"></i>
                                            <span class="text-xs fw-bold">Walk-in</span>
                                        </div>
                                    </label>
                                    <label class="radio-option">
                                        <input type="radio" name="source" value="phone">
                                        <div class="radio-content p-2"><i class="ri-phone-line fs-5 d-block mb-1"></i>
                                            <span class="text-xs fw-bold">Phone</span>
                                        </div>
                                    </label>
                                    <label class="radio-option">
                                        <input type="radio" name="source" value="social">
                                        <div class="radio-content p-2"><i
                                                class="ri-facebook-circle-line fs-5 d-block mb-1"></i> <span
                                                class="text-xs fw-bold">Social</span></div>
                                    </label>
                                    <label class="radio-option">
                                        <input type="radio" name="source" value="referral">
                                        <div class="radio-content p-2"><i
                                                class="ri-user-voice-line fs-5 d-block mb-1"></i> <span
                                                class="text-xs fw-bold">Referral</span></div>
                                    </label>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                {{-- RIGHT COLUMN: Invoice --}}
                <div class="col-lg-4">
                    <div class="receipt-panel">
                        <div class="receipt-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold fs-5"><i class="ri-bill-line me-2"></i>Summary</span>
                                <span class="badge bg-white text-dark bg-opacity-75">DRAFT</span>
                            </div>
                        </div>
                        <div class="receipt-body">

                            <div class="d-flex justify-content-between mb-2 text-muted small fw-bold">
                                <span>BASE FEE</span>
                                <span id="txtBase">₹0</span>
                                <input type="hidden" name="base_price" id="basePrice" value="0">
                            </div>

                            <div class="mb-2">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label class="form-label mb-0 text-muted">Exam Fee</label>
                                </div>
                                <input type="number" name="exam_fee" id="examFee" readonly
                                    class="form-control text-end fw-bold" placeholder="0" min="0" value="0">
                            </div>

                            <div class="mb-3">
                                <label class="form-label text-success">Discount Amount</label>
                                <input type="number" name="discount_amount" id="discountAmount"
                                    class="form-control text-end text-success fw-bold" placeholder="0" min="0">
                            </div>

                            <hr class="border-dashed my-3" style="border-top: 2px dashed #e2e8f0;">

                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <span class="h5 fw-bold mb-0 text-dark">Total Payable</span>
                                <span class="h4 fw-800 text-primary mb-0" id="txtTotal">₹0</span>
                            </div>

                            <div class="mb-4 bg-light p-3 rounded-3 border">
                                <label class="form-label text-dark mb-2">Collecting Now (₹) <span
                                        class="text-danger">*</span></label>
                                <input type="number" name="paid_amount" id="paidAmount" readonly
                                    class="amount-display text-primary border-primary" placeholder="0.00" required>
                                <div class="error-msg text-end" id="err-paid">Amount is required</div>
                            </div>

                            <label class="form-label mb-2">Payment Method</label>
                            <div class="radio-grid mb-4" style="grid-template-columns: repeat(4, 1fr);">
                                <label class="radio-option">
                                    <input type="radio" name="payment_mode" value="cash" checked>
                                    <div class="radio-content p-2"><i class="ri-cash-line"></i>
                                        <div class="text-xs mt-1">Cash</div>
                                    </div>
                                </label>
                                <label class="radio-option">
                                    <input type="radio" name="payment_mode" value="upi">
                                    <div class="radio-content p-2"><i class="ri-qr-code-line"></i>
                                        <div class="text-xs mt-1">UPI</div>
                                    </div>
                                </label>
                                <label class="radio-option">
                                    <input type="radio" name="payment_mode" value="card">
                                    <div class="radio-content p-2"><i class="ri-bank-card-line"></i>
                                        <div class="text-xs mt-1">Card</div>
                                    </div>
                                </label>
                                <label class="radio-option">
                                    <input type="radio" name="payment_mode" value="bank">
                                    <div class="radio-content p-2"><i class="ri-bank-line"></i>
                                        <div class="text-xs mt-1">Bank</div>
                                    </div>
                                </label>
                            </div>

                            <button type="submit" class="btn-submit" id="btnSubmit">
                                <span>Confirm Booking</span> <i class="ri-arrow-right-line"></i>
                            </button>

                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>

    {{-- Add Student Modal (Same as before) --}}
    <div class="modal fade" id="addStudentModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg" style="border-radius:20px">
                <div class="modal-header border-0 pb-0 pt-4 px-4">
                    <h5 class="fw-bold">Add New Student</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <form id="quickStudentForm">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">Full Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Phone Number <span class="text-danger">*</span></label>
                            <input type="number" name="phone" class="form-control" required>
                        </div>
                        <button type="submit" class="btn btn-primary w-100 fw-bold py-2" id="btnSaveStudent">Save &
                            Select</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    {{-- Select2 JS --}}
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {

            // --- HELPER: Error Styling ---
            function showError(id) {
                let el = $(id);
                // 1. Show Error Text
                el.next('.error-msg').show();

                // 2. Handle Select2 vs Standard Input
                if (el.hasClass('select2-hidden-accessible')) {
                    // It is a Select2 element -> Target the next sibling container
                    let container = el.next('.select2-container').find('.select2-selection');
                    container.addClass('is-invalid shake-field');
                    setTimeout(() => container.removeClass('shake-field'), 500);
                } else {
                    // Standard Input
                    el.addClass('is-invalid shake-field');
                    setTimeout(() => el.removeClass('shake-field'), 500);
                }
            }

            function clearErrors() {
                $('.error-msg').hide();
                $('.is-invalid').removeClass('is-invalid');
                $('.shake-field').removeClass('shake-field');

                // Clear Select2 borders
                $('.select2-selection').removeClass('is-invalid shake-field');
            }

            // Remove error on input change
            $('input, select').on('input change select2:select', function() {
                $(this).removeClass('is-invalid');
                $(this).next('.error-msg').hide();

                // For Select2
                if ($(this).hasClass('select2-hidden-accessible')) {
                    $(this).next('.select2-container').find('.select2-selection').removeClass('is-invalid');
                }
            });

            // --- 1. SETUP SELECT2 ---
            $('#courseSelect').select2({
                theme: 'bootstrap-5',
                placeholder: "Select Course",
                width: '100%'
            });
            $('#batchSelect').select2({
                theme: 'bootstrap-5',
                placeholder: "Select Course First",
                width: '100%'
            });
            $('#packageSelect').select2({
                theme: 'bootstrap-5',
                placeholder: "Select Bundle",
                width: '100%'
            });

            // Student AJAX Select2
            $('#studentSelect').select2({
                theme: 'bootstrap-5',
                placeholder: "Search Student (Name, ID, Phone)",
                width: '100%',
                allowClear: true,
                minimumInputLength: 1,
                ajax: {
                    url: "{{ route('admin.api.students.search') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data, function(item) {
                                return {
                                    text: `${item.name} (${item.phone})`,
                                    id: item.uuid,
                                    student: item
                                }
                            })
                        };
                    },
                    cache: true
                }
            });

            // Handle Student Selection
            $('#studentSelect').on('select2:select', function(e) {
                let s = e.params.data.student;
                $('#studentIdRaw').val(s.uuid);
                $('#selName').text(s.name);
                $('#selMeta').text(`ID: ${s.student_code || 'N/A'} • ${s.phone}`);

                $('#studentSearchContainer').hide();
                $('#studentSelectedView').css('display', 'flex');
                $('#err-student').hide();
            });

            $('#btnClearStudent').click(function() {
                $('#studentSelect').val(null).trigger('change');
                $('#studentIdRaw').val('');
                $('#studentSelectedView').hide();
                $('#studentSearchContainer').show();
            });

            // --- 2. SWITCH LOGIC ---
            window.switchType = function(type) {
                $('.type-btn').removeClass('active');
                if (type === 'course') {
                    $('.type-btn').first().addClass('active');
                    $('#courseSection').show();
                    $('#packageSection').hide();
                } else {
                    $('.type-btn').last().addClass('active');
                    $('#courseSection').hide();
                    $('#packageSection').show();
                }
                $('#bookingType').val(type);

                // Reset Selects
                $('#courseSelect, #packageSelect').val(null).trigger('change');
                $('#batchSelect').empty().prop('disabled', true);
                $('#packageSubCoursesContainer').hide().empty();

                resetMath();
            };

            // --- 3. COURSE LOGIC ---
            $('#courseSelect').on('select2:select', function(e) {
                let id = e.params.data.id;
                let $batch = $('#batchSelect');

                $batch.prop('disabled', true).empty().append('<option>Loading...</option>');

                $.get(`/admin/api/courses/${id}/details`, function(res) {
                    $('#basePrice').val(res.base_fee);
                    if (res.exam_fee) $('#examFee').val(res.exam_fee);
                    calcTotal();
                });

                $.get(`/admin/api/courses/${id}/batches`, function(res) {
                    $batch.empty().append(
                        '<option value="" selected disabled>Select Batch</option>');
                    res.forEach(b => {
                        $batch.append(new Option(`${b.text} (${b.seats_left} Left)`, b.id));
                    });
                    $batch.prop('disabled', false).trigger('change');
                });
                $('#err-course').hide();
            });

            // --- 4. PACKAGE LOGIC ---
            $('#packageSelect').on('select2:select', function(e) {
                let id = e.params.data.id;
                let $container = $('#packageSubCoursesContainer');
                let $loader = $('#packageLoader');

                resetMath();
                $container.hide().empty();
                $loader.show();
                $('#err-package').hide();

                $.get(`/admin/api/packages/${id}/details`, function(res) {
                    $('#basePrice').val(res.base_price);
                    calcTotal();
                    $loader.hide();
                    $container.show();

                    if (res.courses && res.courses.length > 0) {
                        res.courses.forEach(course => {
                            let html = `
                            <div class="mb-3 border-bottom pb-3 last-no-border">
                                <label class="form-label text-primary text-xs fw-bold">${course.name}</label>
                                <select class="form-select form-select-sm pkg-batch-select" name="package_batches[${course.id}]" data-course-id="${course.id}" style="width:100%">
                                    <option value="">Loading batches...</option>
                                </select>
                            </div>`;
                            $container.append(html);

                            let $subSelect = $container.find(
                                `select[data-course-id="${course.id}"]`);

                            $.get(`/admin/api/courses/${course.id}/batches`, function(
                                batches) {
                                $subSelect.empty().append(
                                    '<option value="" selected disabled>Select Slot</option>'
                                );
                                if (batches.length) batches.forEach(b => $subSelect
                                    .append(new Option(b.text, b.id)));
                                else $subSelect.append(
                                    '<option disabled>No open slots</option>');

                                $subSelect.select2({
                                    theme: 'bootstrap-5',
                                    width: '100%',
                                    placeholder: 'Select Slot'
                                });
                            });
                        });
                    }
                });
            });

            // --- 5. CALCULATIONS ---
            function calcTotal() {
                let base = parseFloat($('#basePrice').val()) || 0;
                let exam = parseFloat($('#examFee').val()) || 0;
                let disc = parseFloat($('#discountAmount').val()) || 0;
                let total = Math.max(0, (base + exam) - disc);

                $('#txtBase').text('₹' + base.toLocaleString());
                $('#txtTotal').text('₹' + total.toLocaleString());
                $('#paidAmount').val(total);
            }

            function resetMath() {
                $('#basePrice, #discountAmount, #examFee, #paidAmount').val(0);
                calcTotal();
            }

            $('#discountAmount, #examFee, #paidAmount').on('keyup change', calcTotal);

            // --- 6. VALIDATION & SUBMIT ---
            $('#bookingForm').on('submit', function(e) {
                e.preventDefault();
                clearErrors();

                let isValid = true;

                // Student
                if (!$('#studentIdRaw').val()) {
                    $('#err-student').show();
                    // Find the Select2 span inside container and animate
                    $('#studentSearchContainer .select2-selection').addClass('is-invalid shake-field');
                    isValid = false;
                }

                let type = $('#bookingType').val();

                if (type === 'course') {
                    if (!$('#courseSelect').val()) {
                        showError('#courseSelect');
                        isValid = false;
                    }
                    if (!$('#batchSelect').val()) {
                        showError('#batchSelect');
                        isValid = false;
                    }
                } else {
                    if (!$('#packageSelect').val()) {
                        showError('#packageSelect');
                        isValid = false;
                    }
                    // Dynamic selects
                    $('.pkg-batch-select').each(function() {
                        if (!$(this).val()) {
                            $(this).next('.select2-container').find('.select2-selection').addClass(
                                'is-invalid shake-field');
                            isValid = false;
                        }
                    });
                }

                if (!$('#paidAmount').val()) {
                    showError('#paidAmount');
                    isValid = false;
                }

                if (!isValid) {
                    // Auto clean animation after 500ms but keep border
                    setTimeout(() => {
                        $('.shake-field').removeClass('shake-field');
                    }, 500);
                    return;
                }

                // Submit
                let btn = $('#btnSubmit');
                let oldHtml = btn.html();
                btn.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm me-2"></span> Processing...');

                $.ajax({
                    url: "{{ route('admin.bookings.store') }}",
                    type: "POST",
                    data: $(this).serialize(),
                    success: function(res) {
                        Swal.fire({
                                icon: 'success',
                                title: 'Confirmed!',
                                text: 'Redirecting to invoice...',
                                timer: 1500,
                                showConfirmButton: false
                            })
                            .then(() => window.location.href = res.redirect_url);
                    },
                    error: function(err) {
                        btn.prop('disabled', false).html(oldHtml);
                        let errMsg = err.responseJSON?.message || 'Failed';
                        Swal.fire('Error', errMsg, 'error');
                    }
                });
            });

            // Quick Student Add Logic
            $('#quickStudentForm').on('submit', function(e) {
                e.preventDefault();
                // Add logic here if needed
                $('#addStudentModal').modal('hide');
            });
        });
    </script>
@endpush