@php
    $inlineCatalogSchedule = (bool) ($inlineCatalogSchedule ?? false);
    $referralOptions = collect($referralOptions ?? []);
    $treasuries = collect($treasuries ?? []);
    $paymentGateways = collect($paymentGateways ?? []);
    $hasReferralOptions = $referralOptions->isNotEmpty();
    $canUseReferralPromoCode = (bool) ($canUseReferralPromoCode ?? false);
    $showReferralChoice = $hasReferralOptions && $canUseReferralPromoCode;
    $forceDemoSchedule = (bool) ($forceDemoSchedule ?? false);
    $paidDemoBooking = (bool) ($paidDemoBooking ?? false);
    $hideTeacherTypeField = $forceDemoSchedule || (bool) ($hideTeacherTypeField ?? false);
    $presetTeacherType = $presetTeacherType ?? null;
    $schedulePageTitle = $schedulePageTitle ?? 'Book your session';
    $schedulePageSubtitle = $schedulePageSubtitle ?? 'Choose the right option, pick a time, then complete payment in one place.';
    $scheduleDemoSummaryName = $scheduleDemoSummaryName ?? 'Demo';
@endphp

<div class="{{ $inlineCatalogSchedule ? 'catalog-inline-schedule' : '' }}">
    @unless($inlineCatalogSchedule)
    <div class="schedule-head">
        <div>
            <div class="schedule-title">{{ $schedulePageTitle }}</div>
            <p class="schedule-subtitle">{{ $schedulePageSubtitle }}</p>
        </div>

        <div class="schedule-head__actions">
            <a href="{{ route('student.payments.index') }}" class="schedule-icon-btn" title="Course payments" aria-label="Course payments">
                <i class="fa-solid fa-credit-card"></i>
            </a>
            <a href="{{ route('calendar') }}" class="schedule-icon-btn" title="Open calendar" aria-label="Open calendar">
                <i class="fa-regular fa-calendar"></i>
            </a>
        </div>
    </div>
    @endunless

    <div class="schedule-stats" aria-live="polite">
        <div class="schedule-stat">
            <span class="schedule-stat__icon schedule-stat__icon--amber"><i class="fa-solid fa-bolt"></i></span>
            <span>
                <strong id="slotCountLabel">Ready</strong>
                <small>Availability</small>
            </span>
        </div>
    </div>

    <form method="POST" action="{{ route('student.invoices.make') }}" enctype="multipart/form-data" id="scheduleReservationPaymentForm" class="schedule-main-form" data-no-loader="true" novalidate>
        @csrf
        <input type="hidden" name="staff_scheduleds_id" id="paymentScheduleId">
        <input type="hidden" name="enrollment_id" id="paymentEnrollmentId">
        <input type="hidden" name="after_payment" value="placement_test" id="scheduleAfterPayment" {{ $inlineCatalogSchedule ? '' : 'disabled' }}>
        <input type="hidden" id="reservationType" value="{{ $inlineCatalogSchedule ? 'track' : 'demo' }}">
        <input type="hidden" id="paidDemoBooking" value="{{ $paidDemoBooking ? '1' : '0' }}">
        <input type="hidden" id="scheduleDemoSummaryName" value="{{ $scheduleDemoSummaryName }}">

        @unless($inlineCatalogSchedule || $forceDemoSchedule)
        <div class="mode-switch" role="tablist" aria-label="Reservation type">
            <button type="button" class="mode-switch__item is-active" data-mode="demo">
                <i class="fa-solid fa-headset"></i>
                <span>Demo</span>
            </button>
            <button type="button" class="mode-switch__item" data-mode="track">
                <i class="fa-solid fa-route"></i>
                <span>Program</span>
            </button>
        </div>
        @else
            <input type="hidden" id="catalogTrackPreset" value="{{ $catalogTrackId ?? '' }}">
        @endunless

       

        <div class="schedule-layout-grid">
            {{-- Left Column: Form Controls Stacked Vertically --}}
            <div class="schedule-form-column">
                <section class="schedule-panel schedule-panel--form">
                    <div class="schedule-panel__head">
                        <div>
                            <div>Reservation Details</div>
                            <p>Start with the basics. Available slots update automatically.</p>
                        </div>
                    </div>

                    <div class="schedule-form-stack">
                        <div class="schedule-field js-track-select-field d-none package-picker">
                            <span>Program</span>
                            <div id="programCards" class="package-cards d-none"></div>
                            <select id="trackId" class="schedule-control"></select>
                        </div>

                        <div class="schedule-field js-track-field d-none">
                            <span>Program Mode</span>
                            <div id="programModeToggle" class="schedule-toggle"></div>
                            <select id="program_mode" name="program_mode" class="schedule-control d-none">
                                <option value="">Select Mode</option>
                            </select>
                        </div>

                        <div class="schedule-field js-track-field d-none">
                            <span>Program Audience</span>
                            <div id="programAudienceToggle" class="schedule-toggle"></div>
                            <select id="program_audience" name="program_audience" class="schedule-control d-none">
                                <option value="">Select Audience</option>
                            </select>
                            <input type="hidden" id="track_type_id" name="track_type_id">
                        </div>

                        <div class="schedule-field d-none">
                            <span>Level</span>
                            <select id="levelId" class="schedule-control"></select>
                        </div>

                        <div class="schedule-field {{ $hideTeacherTypeField || !$inlineCatalogSchedule ? 'd-none' : '' }}" id="teacherTypeField" data-hidden-by-context="{{ $hideTeacherTypeField ? '1' : '0' }}">
                            <span>Teacher Type</span>
                            <div id="teacherTypeToggle" class="schedule-toggle">
                                @foreach(\App\Models\Staff::TEACHER_TYPES as $value => $label)
                                    <button type="button" class="schedule-toggle__btn{{ $value === $presetTeacherType ? ' is-active' : '' }}" data-teacher-type="{{ $value }}">{{ $label }}</button>
                                @endforeach
                            </div>
                            <select id="teacherType" name="teacher_type" class="schedule-control d-none">
                                <option value="">Select Teacher Type</option>
                                @foreach(\App\Models\Staff::TEACHER_TYPES as $value => $label)
                                    <option value="{{ $value }}" @selected($value === $presetTeacherType)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>

                        @if($languageAssessmentPage ?? false)
                            @include('student.schedule.partials._ai-content')
                        @endif

                        {{-- Available Slots Section --}}
                        <div class="schedule-slots-section">
                            <div class="slots-section-title">
                                <div>
                                    <strong>Available Slots</strong>
                                    <p id="slotSubtitle">Pick the time that works for you.</p>
                                </div>
                                <span class="slot-status-pill" id="slotStatusPill">No search yet</span>
                            </div>
                            <div class="schedule-date-row">
                                <label class="schedule-field">
                                    <span class="schedule-field__label-with-note">
                                        <span>Start Date</span>
                                        <small>Choosing a later date may show more available slots.</small>
                                    </span>
                                    <input id="startDate" class="schedule-control" type="date" value="{{ now()->toDateString() }}">
                                </label>

                                <label class="schedule-field">
                                    <span>Preferred Time</span>
                                    <input id="filterFrom" class="schedule-control" type="time">
                                </label>
                            </div>

                            <div class="schedule-field js-track-field d-none package-picker">
                                <span>Schedule</span>
                                <div id="scheduleCards" class="schedule-toggle">
                                    <button type="button" class="schedule-toggle__btn" data-schedule-value="once">Once weekly</button>
                                    <button type="button" class="schedule-toggle__btn" data-schedule-value="twice">Twice weekly</button>
                                    <button type="button" class="schedule-toggle__btn" data-schedule-value="fourth">Four weekly</button>
                                </div>
                                <select id="scheduled" class="schedule-control d-none">
                                    <option value="once">Once weekly</option>
                                    <option value="twice">Twice weekly</option>
                                    <option value="fourth">Four weekly</option>
                                </select>
                            </div>

                            <div class="schedule-days-row js-schedule-day-field d-none" id="scheduleDayPicker">
                                <div class="schedule-day-picker-head">
                                    <span id="scheduleDayPickerTitle">Choose day</span>
                                    <small id="scheduleDayPickerHint">Select your weekly day.</small>
                                </div>
                                <div class="schedule-day-picker" id="scheduleDayButtons"></div>
                                <input type="hidden" id="dayOne" value="saturday">
                                <input type="hidden" id="dayTwo" value="">
                                <input type="hidden" id="dayThree" value="tuesday">
                                <input type="hidden" id="dayFour" value="wednesday">
                            </div>
                            <div class="schedule-fourth-note d-none" id="fourthScheduleNote"></div>

                            <div class="slot-toolbar">
                                <div class="slot-filter-panel" aria-label="Slot filters">
                                    <div class="slot-filter-panel__head">
                                        <strong>Filter slots</strong>
                                        <button type="button" class="slot-filter-clear" id="slotFilterClear">Clear</button>
                                    </div>
                                    <div class="slot-filter-panel__body">
                                        <div class="slot-filter-chips" role="group" aria-label="Filter by time of day">
                                            <button type="button" class="slot-filter-chip is-active" data-slot-period-filter="all">All</button>
                                            <button type="button" class="slot-filter-chip" data-slot-period-filter="morning">Morning</button>
                                            <button type="button" class="slot-filter-chip" data-slot-period-filter="night">Night</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="slotResults" class="slot-list">
                                <div class="empty-state">
                                    <span><i class="fa-regular fa-calendar-plus"></i></span>
                                    <strong>Pick a date to see slots</strong>
                                    <p>We will show available times automatically.</p>
                                </div>
                            </div>
                        </div>

                        {{-- Payment Section Fields --}}
                        <div class="schedule-payment-fields-section d-none" id="schedulePaymentFieldsSection">
                            <div class="section-title payment-section-title">
                                <span class="payment-section-title__icon"><i class="fa-solid fa-credit-card"></i></span>
                                <span>
                                    <strong>Payment Method</strong>
                                    <small>Choose how you want to pay</small>
                                </span>
                            </div>

                            <div class="schedule-payment-main-fields">
                            <label class="schedule-field" id="schedulePaymentLocationField">
                                <span class="payment-field-title">
                                    <span class="payment-section-title__icon"><i class="fa-solid fa-location-dot"></i></span>
                                    <span>
                                        <strong>Payment Location</strong>
                                        <small>Choose your payment location first</small>
                                    </span>
                                </span>
                                <div id="schedulePaymentLocationCards" class="payment-option-cards payment-option-cards--compact">
                                    <button type="button" class="payment-option-card" data-payment-location="inside_egypt">
                                        <span class="payment-option-card__icon"><i class="fa-solid fa-map-location-dot"></i></span>
                                        <span class="payment-option-card__content">
                                            <strong>Inside Egypt</strong>
                                        </span>
                                    </button>
                                    <button type="button" class="payment-option-card" data-payment-location="outside_egypt">
                                        <span class="payment-option-card__icon"><i class="fa-solid fa-globe"></i></span>
                                        <span class="payment-option-card__content">
                                            <strong>Outside Egypt</strong>
                                        </span>
                                    </button>
                                </div>
                                <select id="schedulePaymentLocation" class="schedule-control d-none">
                                    <option value="">Select payment location</option>
                                    <option value="inside_egypt">Inside Egypt</option>
                                    <option value="outside_egypt">Outside Egypt</option>
                                </select>
                            </label>

                            <label class="schedule-field d-none" id="schedulePaymentMethodField">
                                <span class="payment-field-title">
                                    <span class="payment-section-title__icon"><i class="fa-solid fa-credit-card"></i></span>
                                    <span>
                                        <strong>Payment Method</strong>
                                        <small>Online payment appears first, then manual payment options</small>
                                    </span>
                                </span>
                                <div id="schedulePaymentTypeCards" class="payment-option-cards">
                                    <button type="button" class="payment-option-card" data-payment-type="online">
                                        <span class="payment-option-card__icon"><i class="fa-regular fa-credit-card"></i></span>
                                        <span class="payment-option-card__content">
                                            <strong>MasterCard / Visa</strong>
                                            <small>Online Payment</small>
                                        </span>
                                    </button>
                                    <button type="button" class="payment-option-card" data-payment-type="instapay">
                                        <span class="payment-option-card__icon"><i class="fa-solid fa-file-arrow-up"></i></span>
                                        <span class="payment-option-card__content">
                                            <strong>Manual Payment</strong>
                                            <small>Bank, online transfer, or InstaPay receipt.</small>
                                        </span>
                                    </button>
                                </div>
                                <select name="payment_type" id="schedulePaymentType" class="schedule-control d-none">
                                    <option value="">Select payment method</option>
                                    <option value="online">MasterCard / Visa</option>
                                    <option value="instapay">Manual Payment</option>
                                </select>
                                <small id="schedulePaymentTypeFeedback"></small>
                            </label>

                            <label id="schedulePaymentGatewayField" class="schedule-field d-none">
                                <span class="payment-field-title">
                                    <span class="payment-section-title__icon"><i class="fa-solid fa-building-columns"></i></span>
                                    <span>
                                        <strong>Payment Gateway</strong>
                                        <small>Select the appropriate payment gateway for your location</small>
                                    </span>
                                </span>
                                <div id="schedulePaymentGatewayCards" class="payment-option-cards payment-option-cards--compact"></div>
                                <select name="payment_gateway" id="schedulePaymentGateway" class="schedule-control d-none">
                                    <option value="">Select payment gateway</option>
                                    @foreach ($paymentGateways as $gateway)
                                        <option value="{{ $gateway['value'] }}"
                                            data-bank-name="{{ $gateway['bank_name'] ?? '' }}"
                                            data-account-number="{{ $gateway['account_number'] ?? '' }}"
                                            data-account-name="{{ $gateway['account_name'] ?? '' }}"
                                            data-iban="{{ $gateway['iban'] ?? '' }}"
                                            data-payment-region="{{ $gateway['payment_region'] ?? 'both' }}"
                                            data-label="{{ $gateway['label'] ?? $gateway['value'] }}"
                                            data-currency="{{ $gateway['currency'] ?? '' }}">
                                            {{ $gateway['label'] ?? $gateway['bank_name'] ?? $gateway['value'] }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="bank-details d-none" id="schedulePaymentGatewayDetails" aria-live="polite"></div>
                            </label>

                            <label id="scheduleTreasuryField" class="schedule-field d-none">
                                <span class="payment-field-title">
                                    <span class="payment-section-title__icon"><i class="fa-solid fa-building-columns"></i></span>
                                    <span>
                                        <strong>Manual Account</strong>
                                        <small>Choose the account you want to transfer to</small>
                                    </span>
                                </span>
                                <div id="scheduleTreasuryCards" class="payment-option-cards payment-option-cards--accounts"></div>
                                <select name="treasury_id" id="scheduleTreasury" class="schedule-control d-none">
                                    <option value="">Select Bank Account</option>
                                    @foreach ($treasuries as $treasury)
                                        <option value="{{ $treasury['id'] }}"
                                            data-bank-name="{{ $treasury['bank_name'] ?? '' }}"
                                            data-account-number="{{ $treasury['account_number'] ?? '' }}"
                                            data-account-name="{{ $treasury['account_name'] ?? $treasury['name'] ?? '' }}"
                                            data-iban="{{ $treasury['iban'] ?? '' }}"
                                            data-payment-region="{{ $treasury['payment_region'] ?? 'both' }}"
                                            data-name="{{ $treasury['name'] ?? '' }}"
                                            data-currency="{{ $treasury['currency'] ?? '' }}">
                                            {{ $treasury['bank_name'] ?? $treasury['name'] }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="bank-details d-none" id="scheduleTreasuryDetails" aria-live="polite"></div>
                            </label>
                            </div>

                            @if ($showReferralChoice)
                                <div class="schedule-referral-choice">
                                    <label>
                                        <input type="radio" name="schedule_referral_source" value="existing" checked>
                                        <span>Referral reward</span>
                                    </label>
                                    <label>
                                        <input type="radio" name="schedule_referral_source" value="promo_code">
                                        <span>Referral promo code</span>
                                    </label>
                                </div>
                            @endif

                            @if ($hasReferralOptions)
                                <label id="scheduleReferralRewardField" class="schedule-field">
                                    <span>Referral reward</span>
                                    <div id="scheduleReferralRewardCards" class="payment-option-cards payment-option-cards--compact">
                                        <button type="button" class="payment-option-card" data-referral-id="">
                                            <strong>No referral reward</strong>
                                        </button>
                                        @foreach ($referralOptions as $referral)
                                            <button type="button" class="payment-option-card"
                                                data-referral-id="{{ $referral['id'] }}"
                                                data-discount-type="{{ $referral['discount_type'] }}"
                                                data-discount-value="{{ $referral['discount'] }}">
                                                <strong>{{ $referral['label'] }}</strong>
                                                <small>{{ $referral['discount'] }}{{ $referral['discount_type'] === 'percentage' ? '%' : '$' }}</small>
                                            </button>
                                        @endforeach
                                    </div>
                                    <select name="referral_discount_id" id="scheduleReferralReward" class="schedule-control d-none">
                                        <option value="">No referral reward</option>
                                        @foreach ($referralOptions as $referral)
                                            <option value="{{ $referral['id'] }}"
                                                data-discount-type="{{ $referral['discount_type'] }}"
                                                data-discount-value="{{ $referral['discount'] }}">
                                                {{ $referral['label'] }} - {{ $referral['discount'] }}{{ $referral['discount_type'] === 'percentage' ? '%' : '$' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </label>
                            @endif

                            @if ($canUseReferralPromoCode)
                                <label id="scheduleReferralPromoField" class="schedule-field">
                                    <span>Referral promo code</span>
                                    <div class="schedule-code-field">
                                        <input type="text" name="referral_promo_code" id="scheduleReferralPromoInput" class="schedule-control" placeholder="Optional">
                                        <button type="button" class="schedule-secondary-btn" id="scheduleReferralPromoButton">Apply</button>
                                    </div>
                                    <small id="scheduleReferralPromoFeedback"></small>
                                </label>
                            @endif

                            <label id="scheduleReceiptField" class="schedule-field d-none">
                                <span>Manual payment receipt</span>
                                <input type="file" name="invoice_img" id="scheduleReceiptInput" class="schedule-control" accept="image/*">
                            </label>
                        </div>
                    </div>
                </section>
            </div>

            {{-- Right Column: Live Sticky Summary & Pricing Sidebar --}}
            <div class="schedule-summary-column">
                <div class="schedule-summary-card">
                    <div class="summary-head">
                        <div>
                            <div><i class="fa-solid fa-receipt"></i> Your Booking</div>
                        </div>
                    </div>

                    <div class="summary-body">
                        <div class="summary-package-field schedule-field js-track-field d-none package-picker">
                            <span>Package</span>
                            <div id="packageCards" class="package-cards"></div>
                            <select id="packageId" class="schedule-control d-none"></select>
                        </div>
                        
                  

                        {{-- Selected Slot Highlight Box --}}
                        {{-- <div class="summary-slot-card" id="summarySlotCard">
                            <div class="summary-slot-header">
                                <span><i class="fa-regular fa-calendar-check"></i> Selected Slot</span>
                                <button type="button" class="btn-change-slot d-none" id="btnChangeSlot">
                                    <i class="fa-solid fa-rotate-left"></i> Change Slot
                                </button>
                            </div>
                            <div class="summary-slot-content">
                                <strong id="summarySlotDateTime">Pick an available slot</strong>
                                <small id="summarySlotStaff"></small>
                            </div>
                        </div> --}}

                        <hr class="summary-divider">

                        {{-- Real-Time Price Breakdown --}}
                        <div class="summary-price-breakdown" id="summaryPriceBreakdown">
                            <div class="price-line">
                                <span id="summaryLevelPriceLabel">Price per level</span>
                                <strong id="summaryLevelPrice">-</strong>
                            </div>
                            <div class="price-line">
                                <span id="summarySubtotalLabel">Subtotal</span>
                                <strong id="summarySubtotal">-</strong>
                            </div>
                            <div class="price-line price-discount">
                                <span>Discount</span>
                                <strong id="summaryDiscount">-</strong>
                            </div>
                            <div class="price-line price-discount d-none" id="summaryReferralLine">
                                <span>Referral reward</span>
                                <strong id="summaryReferralReward">-</strong>
                            </div>
                            <div class="price-line price-total">
                                <span>Total Price</span>
                                <strong id="summaryTotalPrice">Choose package</strong>
                            </div>
                        </div>

                        @include('components.currency-pricing', ['currencyWidgetId' => 'schedule-currency-price', 'currencyPriceSelector' => '#summaryTotalPrice', 'currencyDueSelector' => '#schedulePaymentPayNow'])
                        <div class="summary-payment-fields">
                            <div class="summary-payment-head">
                                <strong>Payment Details</strong>
                                <small>Deposit and promo code</small>
                            </div>

                            <label class="summary-side-field">
                                <span>Deposit</span>
                                <span class="payment-input-wrap">
                                    <i class="fa-solid fa-coins"></i>
                                    <input type="number" name="deposite" id="schedulePaymentDeposit" class="schedule-control" step="0.01" min="1" placeholder="Leave empty for full amount">
                                </span>
                                <small id="scheduleDepositFeedback"></small>
                            </label>

                            <div class="schedule-payment-amount-card" id="schedulePaymentAmountCard">
                                <div>
                                    <span>Total due</span>
                                    <strong id="schedulePaymentTotalDue">-</strong>
                                </div>
                                <div class="d-none" id="schedulePaymentPromoLine">
                                    <span>Promo discount</span>
                                    <strong id="schedulePaymentPromoDiscount">-</strong>
                                </div>
                                <div>
                                    <span>Deposit entered</span>
                                    <strong id="schedulePaymentDepositPreview">Full amount</strong>
                                </div>
                                <div class="is-pay-now">
                                    <span>Amount to pay now</span>
                                    <strong id="schedulePaymentPayNow">-</strong>
                                </div>
                            </div>

                            <label class="summary-side-field">
                                <span>Promo Code</span>
                                <div class="schedule-code-field">
                                    <span class="payment-input-wrap">
                                        <i class="fa-solid fa-tag"></i>
                                        <input type="text" name="promocode_id" id="schedulePromoInput" class="schedule-control" placeholder="Optional">
                                    </span>
                                    <button type="button" class="schedule-secondary-btn" id="schedulePromoButton">Apply</button>
                                </div>
                                <small id="schedulePromoFeedback"></small>
                            </label>
                        </div>
                    </div>

                    <div class="summary-footer">
                        <button type="submit" class="schedule-primary-btn w-100" id="btnConfirmAndPay">
                            <i class="fa-solid fa-lock"></i>
                            <span>Confirm Reservation & Pay</span>
                        </button>
                        <p class="summary-hint" id="formHint">Demo slots use tester availability.</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>