@extends('layout.layout')

@section('content')
    <div class="app-bg payments-page">
        <div class="page-shell">
            @include('components.alert')

            <div class="payments-head">
                <div>
                    <div class="payments-title">Course Payments</div>
                    <p class="payments-subtitle">Review your enrolled courses and complete pending payments.</p>
                </div>
                <a href="{{ route('student.schedule.index') }}" class="payments-icon-btn" title="Reserve schedule" aria-label="Reserve schedule">
                    <i class="fa-regular fa-calendar-plus"></i>
                </a>
            </div>

            @php
                $paidCount = $courses->filter(fn ($course) => data_get($course, 'invoice.payment_status') === 'paid')->count();
                $pendingCount = $courses->filter(fn ($course) => data_get($course, 'invoice.id') && data_get($course, 'invoice.payment_status') !== 'paid')->count();
                $unpaidCount = $courses->filter(fn ($course) => ! data_get($course, 'invoice.id'))->count();
            @endphp

            <div class="payment-summary">
                <div class="payment-summary__item">
                    <span class="payment-summary__icon payment-summary__icon--blue"><i class="fa-solid fa-layer-group"></i></span>
                    <div>
                        <strong>{{ $courses->count() }}</strong>
                        <small>Total courses</small>
                    </div>
                </div>
                <div class="payment-summary__item">
                    <span class="payment-summary__icon payment-summary__icon--green"><i class="fa-solid fa-circle-check"></i></span>
                    <div>
                        <strong>{{ $paidCount }}</strong>
                        <small>Paid</small>
                    </div>
                </div>
                <div class="payment-summary__item">
                    <span class="payment-summary__icon payment-summary__icon--amber"><i class="fa-solid fa-clock"></i></span>
                    <div>
                        <strong>{{ $pendingCount + $unpaidCount }}</strong>
                        <small>Needs attention</small>
                    </div>
                </div>
            </div>

            <section class="ui-card payments-table-card">
                <div class="payments-table-head">
                    <div>
                        <div class="payments-table-title mb-0">Course Payment Records</div>
                        <p class="payments-table-sub mb-0">
                            Course name, schedule, invoice, payment status, and payment actions.
                        </p>
                    </div>

                    <span class="ui-pill ui-pill--info">
                        {{ $courses->count() }} Course(s)
                    </span>
                </div>

                @if ($courses->isEmpty())
                    <div class="payments-empty">
                        <span><i class="fa-regular fa-folder-open"></i></span>
                        <strong>No courses found.</strong>
                    </div>
                @else
                    <div class="payments-table-wrap">
                        <table class="table payments-table mb-0">
                            <thead>
                                <tr>
                                    @if(isset($hasMultipleChildren) && $hasMultipleChildren)
                                        <th class="text-center">Student</th>
                                    @endif
                                    <th>Course</th>
                                    <th>Schedule</th>
                                    <th>Invoice</th>
                                    <th>Payment</th>
                                    <th class="text-end">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($courses as $course)
                                    @php
                                        $invoice = $course['invoice'];
                                        $transaction = $course['transaction'];
                                        $status = $invoice['payment_status'] ?? null;
                                        $paymentType = $transaction['payment_type'] ?? null;
                                        $pricing = $course['pricing'] ?? [];
                                        $amountDue = (float) data_get($invoice, 'amount_due', data_get($pricing, 'amount_due', 0));
                                        $invoiceTotal = (float) data_get($invoice, 'net_price', data_get($pricing, 'net_price', 0));
                                        $paidAmount = max(0, round($invoiceTotal - $amountDue, 2));
                                        $isPaid = ($invoice['payment_status'] ?? null) === 'paid' || $amountDue <= 0;
                                        $isDepositInvoice = in_array($status, ['deposite', 'paid_deposite'], true);
                                        $hasPendingOnlinePayment = $paymentType === 'online'
                                            && in_array($transaction['status'] ?? null, ['pending', 'created'], true)
                                            && filled($transaction['payment_url'] ?? null);
                                        $hasPendingManualReceipt = $paymentType === 'instapay'
                                            && in_array($transaction['status'] ?? null, ['pending', 'created'], true)
                                            && ! empty($transaction['has_receipt']);
                                        $placement = $course['placement_test'] ?? [];
                                    @endphp
                                    <tr
                                        data-currency="{{ $pricing['currency'] ?? $invoice['currency'] ?? '' }}"
                                        data-currency-rates="{{ json_encode($pricing['currency_rates'] ?? []) }}"
                                        data-base-price="{{ (float) data_get($pricing, 'base_price', 0) }}"
                                        data-plan-discount-type="{{ data_get($pricing, 'discount_type') }}"
                                        data-plan-discount-value="{{ (float) data_get($pricing, 'discount_value', 0) }}"
                                        data-net-price="{{ (float) data_get($pricing, 'net_price', 0) }}"
                                        data-paid-amount="{{ $paidAmount }}"
                                        data-amount-due="{{ $amountDue }}"
                                        data-package-name="{{ data_get($pricing, 'package_name') }}"
                                        data-level-count="{{ data_get($pricing, 'level_count') }}"
                                        data-level-price="{{ (float) data_get($pricing, 'level_price', 0) }}"
                                        data-total-package-price="{{ (float) data_get($pricing, 'total_package_price', 0) }}"
                                        data-total-after-discount="{{ (float) data_get($pricing, 'total_after_discount', 0) }}"
                                        data-covered-levels="{{ implode(', ', $course['covered_levels'] ?? []) }}"
                                        data-teacher-name="{{ $course['teacher_name'] ?? '' }}" data-teacher-type-label="{{ $course['teacher_type_label'] ?? 'Native-like' }}"
                                        data-start-date="{{ $course['start_date'] ?? '' }}"
                                        data-end-date="{{ $course['end_date'] ?? '' }}"
                                        data-next-session="{{ $course['next_session_at'] ?? '' }}">
                                        @if(isset($hasMultipleChildren) && $hasMultipleChildren)
                                            <td class="text-center align-middle">
                                                @if(isset($course['student_name']))
                                                    <span class="ui-pill ui-pill--neutral">
                                                        {{ $course['student_name'] }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                        @endif
                                        <td>
                                            <div class="payment-course-cell">
                                                <strong>{{ $course['course_name'] ?? '-' }}</strong>
                                                <span>
                                                    {{ ucfirst($course['course_type'] ?? 'course') }}
                                                    @if (!empty($course['covered_levels']))
                                                        - {{ implode(', ', $course['covered_levels']) }}
                                                    @elseif ($course['level_name'])
                                                        - {{ $course['level_name'] }}
                                                    @endif
                                                </span>
                                                @if ($course['package_name'])
                                                    <small>{{ $course['package_name'] }}</small>
                                                @endif
                                                @if ($course['teacher_name'])
                                                    <small>{{ $course['teacher_name'] }} <span class="badge bg-light text-dark">{{ $course['teacher_type_label'] ?? 'Native-like' }}</span></small>
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            <small class="payment-meta-cell">
                                                @forelse (($course['schedule_items'] ?? []) as $scheduleItem)
                                                    <small>
                                                        {{ $scheduleItem['level_name'] ?? $scheduleItem['course_name'] ?? 'Schedule' }}:
                                                        {{ $scheduleItem['start_date'] ?? '-' }} to {{ $scheduleItem['end_date'] ?? '-' }}
                                                    </small>
                                                @empty
                                                    <small>{{ $course['start_date'] ?? '-' }} to {{ $course['end_date'] ?? '-' }}</small>
                                                    <small>Next: {{ $course['next_session_at'] ?? 'No upcoming session' }}</small>
                                                @endforelse
                                            </small>
                                        </td>
                                        <td>
                                            @if ($invoice['id'])
                                                <div class="payment-meta-cell">
                                                    <span>{{ $invoice['invoice_number'] }}</span>
                                                    <small>Total {{ number_format((float) $invoice['net_price'], 2) }} {{ $pricing['currency'] ?? $invoice['currency'] ?? '' }}</small>
                                                    @if ($isDepositInvoice)
                                                        <small>Deposit invoice - Due {{ number_format($amountDue, 2) }} {{ $pricing['currency'] ?? $invoice['currency'] ?? '' }}</small>
                                                    @endif
                                                    @if ($invoice['package_name'])
                                                        <small>{{ $invoice['package_name'] }} package</small>
                                                    @endif
                                                </div>
                                            @else
                                                <span class="ui-pill ui-pill--neutral">No invoice</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if ($isPaid)
                                                <span class="ui-pill ui-pill--success">Paid</span>
                                            @elseif ($status)
                                                <div class="payment-meta-cell">
                                                    <span class="ui-pill ui-pill--warn">
                                                        {{ $isDepositInvoice ? 'Deposit' : str_replace('_', ' ', ucfirst($status)) }}
                                                    </span>
                                                    @if ($isDepositInvoice)
                                                        <small>Remaining {{ number_format($amountDue, 2) }} {{ $pricing['currency'] ?? $invoice['currency'] ?? '' }}</small>
                                                    @endif
                                                    <small>
                                                        {{ $paymentType ? ucfirst($paymentType) : 'No method' }}
                                                        @if ($transaction['status'])
                                                            - {{ ucfirst($transaction['status']) }}
                                                        @endif
                                                    </small>
                                                </div>
                                            @else
                                                <span class="ui-pill ui-pill--warn">Unpaid</span>
                                            @endif
                                        </td>
                                        <td class="text-end">
                                            <div class="payment-actions justify-content-end">
                                                @if ($isPaid)
                                                    @if(data_get($placement, 'show_pending_action'))
                                                        <a href="{{ data_get($placement, 'url') }}" class="payments-primary-btn">
                                                            <i class="fa-regular fa-calendar-check"></i>
                                                            <span>Pending Placement Test</span>
                                                        </a>
                                                    @elseif(data_get($placement, 'waiting_report'))
                                                        <span class="payment-action-note">
                                                            Waiting report
                                                        </span>
                                                    @else
                                                        <span class="payment-action-note">
                                                            {{ data_get($placement, 'assessment_type') === 'demo' ? 'Placement demo booked' : (data_get($placement, 'assessment_type') === 'ai' ? 'AI placement booked' : 'No action needed') }}
                                                        </span>
                                                    @endif
                                                @elseif ($invoice['id'] && $hasPendingOnlinePayment)
                                                    <a href="{{ $transaction['payment_url'] }}" class="payments-primary-btn">
                                                        <i class="fa-solid fa-arrow-up-right-from-square"></i>
                                                        <span>Continue payment</span>
                                                    </a>
                                                    <button type="button"
                                                        class="payments-secondary-btn"
                                                        data-open-payment
                                                        data-course-id="{{ $course['course_id'] }}"
                                                        data-course-name="{{ $course['course_name'] }}"
                                                        data-has-invoice="1"
                                                        data-has-transaction="{{ $transaction['id'] ? '1' : '0' }}">
                                                        <i class="fa-solid fa-repeat"></i>
                                                        <span>Change method</span>
                                                    </button>
                                                @elseif ($invoice['id'] && $paymentType === 'online')
                                                    <button type="button"
                                                        class="payments-primary-btn"
                                                        data-open-payment
                                                        data-course-id="{{ $course['course_id'] }}"
                                                        data-course-name="{{ $course['course_name'] }}"
                                                        data-has-invoice="1"
                                                        data-has-transaction="{{ $transaction['id'] ? '1' : '0' }}">
                                                        <i class="fa-solid fa-link"></i>
                                                        <span>{{ $isDepositInvoice ? 'Pay remaining' : 'Pay now' }}</span>
                                                    </button>
                                                @elseif ($invoice['id'] && $hasPendingManualReceipt)
                                                    <span class="payment-action-note">Receipt pending approval</span>
                                                    <button type="button"
                                                        class="payments-secondary-btn"
                                                        data-open-payment
                                                        data-course-id="{{ $course['course_id'] }}"
                                                        data-course-name="{{ $course['course_name'] }}"
                                                        data-has-invoice="1"
                                                        data-has-transaction="{{ $transaction['id'] ? '1' : '0' }}">
                                                        <i class="fa-solid fa-repeat"></i>
                                                        <span>Change method</span>
                                                    </button>
                                                @elseif ($invoice['id'] && $isDepositInvoice)
                                                    <button type="button"
                                                        class="payments-primary-btn"
                                                        data-open-payment
                                                        data-course-id="{{ $course['course_id'] }}"
                                                        data-course-name="{{ $course['course_name'] }}"
                                                        data-has-invoice="1"
                                                        data-has-transaction="{{ $transaction['id'] ? '1' : '0' }}">
                                                        <i class="fa-solid fa-credit-card"></i>
                                                        <span>Pay remaining</span>
                                                    </button>
                                                @elseif ($invoice['id'] && $paymentType === 'instapay')
                                                    <form method="POST" action="{{ route('student.invoices.upload-receipt', $invoice['id']) }}" enctype="multipart/form-data" class="receipt-form">
                                                        @csrf
                                                        @if (!empty($treasuries) && $treasuries->isNotEmpty())
                                                            <select name="treasury_id" class="form-select form-select-sm mb-2" required>
                                                                <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-currency="{{ $treasury['currency'] ?? '' }}">
                                                                        {{ $treasury['bank_name'] }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            <small class="text-muted d-block mb-2 js-payment-details"></small>
                                                        @endif
                                                        <label class="receipt-upload">
                                                            <i class="fa-solid fa-receipt"></i>
                                                            <span>Upload receipt</span>
                                                            <input type="file" name="invoice_img" accept="image/*" required onchange="this.form.requestSubmit()">
                                                        </label>
                                                    </form>
                                                    <button type="button"
                                                        class="payments-secondary-btn"
                                                        data-open-payment
                                                        data-course-id="{{ $course['course_id'] }}"
                                                        data-course-name="{{ $course['course_name'] }}"
                                                        data-has-invoice="1"
                                                        data-has-transaction="{{ $transaction['id'] ? '1' : '0' }}">
                                                        <i class="fa-solid fa-repeat"></i>
                                                        <span>Change method</span>
                                                    </button>
                                                @elseif ($invoice['id'])
                                                    <button type="button"
                                                        class="payments-primary-btn"
                                                        data-open-payment
                                                        data-course-id="{{ $course['course_id'] }}"
                                                        data-course-name="{{ $course['course_name'] }}"
                                                        data-has-invoice="1"
                                                        data-has-transaction="{{ $transaction['id'] ? '1' : '0' }}">
                                                        <i class="fa-solid fa-credit-card"></i>
                                                        <span>Choose payment method</span>
                                                    </button>
                                                @else
                                                    <button type="button"
                                                        class="payments-primary-btn"
                                                        data-open-payment
                                                        data-course-id="{{ $course['course_id'] }}"
                                                        data-course-name="{{ $course['course_name'] }}"
                                                        data-has-invoice="0"
                                                        data-has-transaction="0">
                                                        <i class="fa-solid fa-credit-card"></i>
                                                        <span>Choose payment method</span>
                                                    </button>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </section>
        </div>
    </div>

    <div class="payment-modal-backdrop d-none" id="paymentModal" aria-hidden="true">
        <div class="payment-modal" role="dialog" aria-modal="true" aria-labelledby="paymentModalTitle">
            <div class="payment-modal__head">
                <div>
                    <div id="paymentModalTitle">Choose Payment Method</div>
                    <p id="paymentModalCourse">Select how you want to pay this course.</p>
                </div>
                <button type="button" class="payments-icon-btn payments-icon-btn--sm" data-close-payment aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>

            <div class="payment-modal__body">
                <div class="invoice-preview-panel">
                    <div class="invoice-preview-card">
                        <div class="invoice-preview-card__head">
                            <i class="fa-regular fa-user text-primary"></i>
                            <span>Course Information</span>
                        </div>
                        <div class="invoice-preview-grid">
                            <div>
                                <small>Course</small>
                                <strong id="piCourseName">-</strong>
                            </div>
                            <div>
                                <small>Type</small>
                                <span id="piCourseType">-</span>
                            </div>
                            <div>
                                <small>Level</small>
                                <span id="piCourseLevel">-</span>
                            </div>
                            <div>
                                <small>Package</small>
                                <span id="piPackage">-</span>
                            </div>
                            <div class="invoice-preview-span">
                                <small>Covered levels</small>
                                <span id="piCoveredLevels">-</span>
                            </div>
                            <div>
                                <small>Teacher</small>
                                <span id="piCourseTeacher">-</span>
                            </div>
                        </div>
                    </div>

                    <div class="invoice-preview-card">
                        <div class="invoice-preview-card__head">
                            <i class="fa-regular fa-calendar text-success"></i>
                            <span>Schedule</span>
                        </div>
                        <div class="invoice-preview-grid">
                            <div>
                                <small>Start</small>
                                <span id="piStartDate">-</span>
                            </div>
                            <div>
                                <small>End</small>
                                <span id="piEndDate">-</span>
                            </div>
                            <div class="invoice-preview-span">
                                <small>Next session</small>
                                <span id="piNextSession">-</span>
                            </div>
                        </div>
                    </div>

                    <div class="invoice-preview-card">
                        <div class="invoice-preview-card__head">
                            <i class="fa-solid fa-receipt text-primary"></i>
                            <span>Invoice & Discounts</span>
                        </div>
                        <div class="invoice-preview-grid">
                            <div>
                                <small>Invoice</small>
                                <span id="piInvoiceNumber">No invoice</span>
                            </div>
                            <div>
                                <small>Status</small>
                                <span id="piInvoiceStatus">Unpaid</span>
                            </div>
                            <div>
                                <small>Invoice total</small>
                                <span id="piInvoiceFullTotal">-</span>
                            </div>
                            <div>
                                <small>Previously paid</small>
                                <span id="piPaidBefore">-</span>
                            </div>
                            <div>
                                <small>Remaining due</small>
                                <span id="piRemainingDue">-</span>
                            </div>
                            <div>
                                <small>Per-level price</small>
                                <span id="piLevelPrice">-</span>
                            </div>
                            <div>
                                <small>Package total</small>
                                <span id="piPackageTotal">-</span>
                            </div>
                            <div>
                                <small>Total after package discount</small>
                                <span id="piPackageAfterDiscount">-</span>
                            </div>
                            <div>
                                <small>Base price</small>
                                <span id="piBasePrice">-</span>
                            </div>
                            <div>
                                <small>Plan discount</small>
                                <span id="piPlanDiscount">-</span>
                            </div>
                            <div>
                                <small>Referral discount</small>
                                <span id="piReferralDiscount">-</span>
                            </div>
                            <div>
                                <small>Promo discount</small>
                                <span id="piPromoDiscount">-</span>
                            </div>
                            <div class="invoice-preview-span invoice-preview-total">
                                <small>Paying now</small>
                                @include('components.currency-pricing', ['currencyWidgetId' => 'payments-currency-price', 'currencyPriceSelector' => '#piInvoiceTotal', 'currencyPaymentSelectors' => ['#piInvoiceTotal'], 'currencyScopeSelector' => '#paymentModal'])
                                <strong id="piInvoiceTotal">-</strong>
                            </div>
                        </div>
                    </div>
                </div>

                <form method="POST" action="{{ route('student.invoices.make') }}" enctype="multipart/form-data" class="payment-form">
                    @csrf
                    <input type="hidden" name="staff_scheduleds_id" id="paymentScheduleId">

                    @php
                        $referralOptions = collect($referralOptions ?? []);
                        $treasuries = collect($treasuries ?? []);
                        $paymentGateways = collect($paymentGateways ?? []);
                        $hasReferralOptions = $referralOptions->isNotEmpty();
                        $canUseReferralPromoCode = (bool) ($canUseReferralPromoCode ?? false);
                        $showReferralChoice = $hasReferralOptions && $canUseReferralPromoCode;
                    @endphp

                    <div class="payment-form-panel">
                    <div class="mb-3">
                        <label class="form-label fw-semibold small mb-1">Payment location <span class="text-danger">*</span></label>
                        <select class="form-select form-select-sm" id="paymentLocationSelect" required>
                            <option value="">Select location first</option>
                            <option value="inside_egypt">Inside Egypt</option>
                            <option value="outside_egypt">Outside Egypt</option>
                        </select>
                    </div>

                    <div class="mb-3 d-none" id="paymentMethodField">
                        <label class="form-label fw-semibold small mb-1">Payment method <span class="text-danger">*</span></label>
                        <select name="payment_type" class="form-select form-select-sm" id="paymentTypeSelect" required>
                            <option value="">Select payment method</option>
                            <option value="online">MasterCard / Visa</option>
                            <option value="instapay">Manual Payment</option>
                        </select>
                        <small class="text-muted">Manual Payment includes bank transfer, online transfer, and InstaPay receipt upload.</small>
                    </div>

                    <div class="mb-3 d-none" id="paymentGatewayField">
                        <label class="form-label fw-semibold small mb-1">Payment gateway <span class="text-danger">*</span></label>
                        <select name="payment_gateway" class="form-select form-select-sm" id="paymentGatewaySelect">
                            <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-currency="{{ $gateway['currency'] ?? '' }}">
                                    {{ $gateway['bank_name'] }}
                                </option>
                            @endforeach
                        </select>
                        {{-- <small class="text-muted d-block mt-1" id="paymentGatewayDetails"></small> --}}
                    </div>

                    <div class="mb-3 d-none" id="treasuryField">
                        <label class="form-label fw-semibold small mb-1">Bank Account <span class="text-danger">*</span></label>
                        <select name="treasury_id" class="form-select form-select-sm" id="treasurySelect">
                            <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-currency="{{ $treasury['currency'] ?? '' }}">
                                    {{ $treasury['bank_name'] }}
                                </option>
                            @endforeach
                        </select>
                        <small class="text-muted d-block mt-1" id="treasuryDetails"></small>
                    </div>

                    <div id="firstInvoiceFields">
                        <div class="mb-3">
                            <label class="form-label fw-semibold small mb-1">Deposit (optional)</label>
                            <input type="number" step="0.01" min="1" name="deposite" class="form-control form-control-sm"
                                placeholder="Example: 50">
                            <small class="text-muted">Leave empty to pay the full remaining balance</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold small mb-1">Promo code</label>
                            <div class="input-group input-group-sm">
                                <input type="text" name="promocode_id" id="promocodeInput" class="form-control" placeholder="Enter the code">
                                <button class="btn btn-outline-primary" type="button" id="checkPromoBtn">Apply</button>
                            </div>
                            <div id="promoFeedback" class="mt-2"></div>
                        </div>

                        @if ($showReferralChoice)
                            <div class="mb-3" id="referral_choice_wrapper">
                                <label class="form-label fw-semibold small mb-1">Referral discount source</label>
                                <div class="border rounded-3 p-2 bg-white">
                                    <label class="form-check d-flex align-items-center gap-2 mb-2">
                                        <input class="form-check-input referral-source-option" type="radio" name="referral_source" value="existing" checked>
                                        <span class="form-check-label small">Use referral reward</span>
                                    </label>
                                    <label class="form-check d-flex align-items-center gap-2 mb-0">
                                        <input class="form-check-input referral-source-option" type="radio" name="referral_source" value="promo_code">
                                        <span class="form-check-label small">Use referral promo code</span>
                                    </label>
                                </div>
                            </div>
                        @endif

                        @if ($hasReferralOptions)
                            <div class="mb-3" data-referral-existing>
                                <label class="form-label fw-semibold small mb-1">Use referral reward</label>
                                <select name="referral_discount_id" class="form-select form-select-sm">
                                    <option value="">Select referral reward</option>
                                    @foreach ($referralOptions as $referralOption)
                                        <option value="{{ $referralOption['id'] }}"
                                            data-discount-type="{{ $referralOption['discount_type'] }}"
                                            data-discount-value="{{ $referralOption['discount'] }}">
                                            {{ $referralOption['label'] }}
                                            - {{ $referralOption['discount'] }}{{ $referralOption['discount_type'] === 'percentage' ? '%' : '$' }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Choose one referral reward to apply to this invoice.</small>
                            </div>
                        @endif

                        @if ($canUseReferralPromoCode)
                            <div class="mb-3" data-referral-promo-code>
                                <label class="form-label fw-semibold small mb-1">Referral Promo Code</label>
                                <div class="input-group input-group-sm">
                                    <input type="text" name="referral_promo_code" id="referralPromoInput" class="form-control" placeholder="Enter student code">
                                    <button class="btn btn-outline-primary" type="button" id="checkReferralPromoBtn">Apply</button>
                                </div>
                                <small class="text-muted d-block mt-1">Available only for eligible first paid invoices.</small>
                                <div id="referralPromoFeedback" class="mt-2"></div>
                            </div>
                        @endif
                    </div>

                    <div class="mb-3 d-none" id="receiptField">
                        <label class="form-label fw-semibold small mb-1">Manual payment receipt <span class="text-danger">*</span></label>
                        <input type="file" name="invoice_img" id="invoiceImg" accept="image/*" class="form-control form-control-sm">
                        <small class="text-muted" id="receiptLabel">JPG or PNG, up to 2 MB.</small>
                    </div>
                    </div>

                    <div class="payment-modal__actions">
                        <button type="button" class="payments-secondary-btn" data-close-payment>Cancel</button>
                        <button type="submit" class="payments-primary-btn payments-primary-btn--success">
                            <i class="fa-solid fa-check"></i>
                            <span>Submit</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .payments-page {
            background: #f6f8fb;
            color: #111827;
        }

        .payments-head {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 0.85rem;
        }

        .payments-title {
            margin: 0;
            font-size: 1rem;
            font-weight: 850;
            color: #0f172a;
        }

        .payments-subtitle {
            margin: 0.25rem 0 0;
            color: #64748b;
        }

        .payment-summary {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.85rem;
            margin-bottom: 1rem;
        }

        .payment-summary__item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            min-width: 0;
            padding: 0.9rem;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
        }

        .payment-summary__icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }

        .payment-summary__icon--blue {
            color: #071b3d;
            background: #eff6ff;
        }

        .payment-summary__icon--green {
            color: #047857;
            background: #ecfdf5;
        }

        .payment-summary__icon--amber {
            color: #b45309;
            background: #fffbeb;
        }

        .payment-summary strong,
        .payment-summary small {
            display: block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .payment-summary strong {
            color: #0f172a;
            font-size: 1rem;
            font-weight: 850;
        }

        .payment-summary small {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 700;
        }

        .payments-table-wrap {
            overflow-x: auto;
        }

        .payments-table {
            width: 100%;
            min-width: 1040px;
            border-collapse: collapse;
        }

        .payments-table-card {
            min-width: 0;
        }

        .payments-table-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #eef2f7;
            flex-wrap: wrap;
        }

        .payments-table-title {
            font-size: 1.05rem !important;
            font-weight: 900;
            color: #111827;
        }

        .payments-table-sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin-top: 0.2rem;
        }

        .payments-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
            padding: 1.25rem;
            overflow: hidden;
        }

        .payments-table th,
        .payments-table td {
            padding: 1rem;
            border-bottom: 1px solid #eef2f7;
            vertical-align: middle;
        }

        .payments-table thead th {
            color: #475569;
            background: #f8fafc;
            font-size: 0.76rem;
            font-weight: 850;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .payments-table tbody tr {
            transition: background 0.16s ease;
        }

        .payments-table tbody tr:hover {
            background: #fbfdff;
        }

        .payment-course-cell,
        .payment-meta-cell {
            display: grid;
            gap: 0.2rem;
            min-width: 0;
        }

        .payment-course-cell strong,
        .payment-meta-cell span {
            color: #0f172a;
            font-weight: 800;
        }

        .payment-course-cell span,
        .payment-course-cell small,
        .payment-meta-cell small,
        .payment-action-note {
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 650;
        }

        .payment-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: center;
        }

        .payments-primary-btn,
        .payments-secondary-btn,
        .receipt-upload,
        .payments-icon-btn {
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            min-height: 40px;
            padding: 0.55rem 0.8rem;
            font-size: 0.78rem;
            font-weight: 850;
            text-decoration: none;
            cursor: pointer;
            transition: 0.16s ease;
        }

        .payments-primary-btn {
            border: 0;
            background: #071b3d;
            color: #fff;
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
        }

        .payments-secondary-btn,
        .receipt-upload,
        .payments-icon-btn {
            border: 1px solid #dbe3ef;
            background: #fff;
            color: #334155;
        }

        .payments-primary-btn:hover,
        .payments-secondary-btn:hover,
        .receipt-upload:hover,
        .payments-icon-btn:hover {
            transform: translateY(-1px);
        }

        .payments-primary-btn:hover {
            color: #fff;
            background: #0f1724;
        }

        .payments-secondary-btn:hover,
        .receipt-upload:hover,
        .payments-icon-btn:hover {
            border-color: #b9c6d8;
            color: #111827;
        }

        .payments-icon-btn {
            width: 44px;
            height: 44px;
            padding: 0;
        }

        .payments-icon-btn--sm {
            width: 38px;
            height: 38px;
        }

        .receipt-upload input {
            display: none;
        }

        .payments-empty {
            display: grid;
            justify-items: center;
            gap: 0.6rem;
            padding: 3rem 1rem;
            color: #64748b;
        }

        .payments-empty span {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            background: #f1f5f9;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #475569;
        }

        .payment-action-note {
            display: inline-flex;
            align-items: center;
            min-height: 40px;
        }

        .payment-modal-backdrop {
            position: fixed;
            inset: 0;
            z-index: 1050;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            background: rgba(15, 23, 42, 0.45);
        }

        .payment-modal {
            width: min(1120px, 100%);
            max-height: calc(100vh - 2rem);
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
            overflow: auto;
        }

        .payment-modal__head,
        .payment-modal__actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem;
            border-bottom: 1px solid #eef2f7;
        }

        .payment-modal__actions {
            justify-content: flex-end;
            border-top: 1px solid #eef2f7;
            border-bottom: 0;
        }

        .payment-modal__head div {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 850;
        }

        .payment-modal__head p {
            margin: 0.2rem 0 0;
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 650;
        }

        .payment-modal__body {
            display: grid;
            grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.9fr);
            gap: 1rem;
            padding: 0.5rem 1rem 1rem;
            align-items: start;
        }

        .invoice-preview-panel {
            display: grid;
            gap: 1rem;
        }

        .invoice-preview-card {
            border: 0;
            border-radius: 8px;
            background: #f8fafc;
            overflow: hidden;
        }

        .invoice-preview-card__head {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.85rem 1rem 0.35rem;
            color: #111827;
            font-size: 0.8rem;
            font-weight: 850;
        }

        .invoice-preview-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.65rem;
            padding: 0.6rem 1rem 1rem;
            font-size: 0.8rem;
        }

        .invoice-preview-grid small,
        .invoice-preview-grid span,
        .invoice-preview-grid strong {
            display: block;
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .invoice-preview-grid small {
            color: #64748b;
            font-size: 0.74rem;
            font-weight: 700;
        }

        .invoice-preview-grid span {
            color: #334155;
            font-weight: 700;
        }

        .invoice-preview-grid strong {
            color: #111827;
            font-weight: 900;
        }

        .invoice-preview-span {
            grid-column: 1 / -1;
        }

        .invoice-preview-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            margin-top: 0.35rem;
            padding-top: 0.7rem;
            border-top: 1px solid #e2e8f0;
        }

        .invoice-preview-total strong {
            color: #071b3d;
            font-size: 1rem;
        }

        .payment-form {
            display: grid;
        }

        .payment-form-panel {
            padding: 1rem;
            border-radius: 8px;
            background: #f8fafc;
        }

        .payment-form-panel .form-label {
            color: #334155;
        }

        .payment-form-panel .form-control,
        .payment-form-panel .form-select,
        .payment-form-panel .input-group-text {
            border-color: #dbe3ef;
            color: #111827;
        }

        .payment-form-panel .form-control:focus,
        .payment-form-panel .form-select:focus {
            border-color: #071b3d;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09);
        }

        .payment-form-panel .form-check-input {
            margin-top: 0;
        }

        .payments-primary-btn--success {
            background: #16a34a;
            box-shadow: 0 10px 18px rgba(22, 163, 74, 0.18);
        }

        .payments-primary-btn--success:hover {
            background: #15803d;
        }

        @media (max-width: 767px) {
            .payments-head {
                align-items: flex-start;
            }

            .payment-summary {
                grid-template-columns: 1fr;
            }

            .payment-modal__body {
                grid-template-columns: 1fr;
            }

            .payments-table {
                min-width: 900px;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const modal = document.getElementById('paymentModal');
            const scheduleInput = document.getElementById('paymentScheduleId');
            const receiptField = document.getElementById('receiptField');
            const receiptInput = document.getElementById('invoiceImg');
            const receiptLabel = document.getElementById('receiptLabel');
            const firstInvoiceFields = document.getElementById('firstInvoiceFields');
            const modalCourse = document.getElementById('paymentModalCourse');
            const form = document.querySelector('.payment-form');
            const paymentLocationSelect = document.getElementById('paymentLocationSelect');
            const paymentMethodField = document.getElementById('paymentMethodField');
            const paymentTypeSelect = document.getElementById('paymentTypeSelect');
            const paymentGatewayField = document.getElementById('paymentGatewayField');
            const paymentGatewaySelect = document.getElementById('paymentGatewaySelect');
            const treasuryField = document.getElementById('treasuryField');
            const treasurySelect = document.getElementById('treasurySelect');
            const paymentGatewayDetails = document.getElementById('paymentGatewayDetails');
            const treasuryDetails = document.getElementById('treasuryDetails');
            const referralSourceOptions = document.querySelectorAll('.referral-source-option');
            const existingReferralField = document.querySelector('[data-referral-existing]');
            const promoReferralField = document.querySelector('[data-referral-promo-code]');
            const promoInput = document.getElementById('promocodeInput');
            const depositInput = document.querySelector('.payment-form input[name="deposite"]');
            const promoFeedback = document.getElementById('promoFeedback');
            const checkPromoBtn = document.getElementById('checkPromoBtn');
            const referralPromoInput = document.getElementById('referralPromoInput');
            const referralPromoFeedback = document.getElementById('referralPromoFeedback');
            const checkReferralPromoBtn = document.getElementById('checkReferralPromoBtn');
            const csrfToken = document.querySelector('input[name="_token"]')?.value || '';
            const promoCheckUrl = '{{ route('student.invoices.check-promocode') }}';
            const referralPromoCheckUrl = '{{ route('student.invoices.check-referral-promo-code') }}';
            const preview = {
                courseName: document.getElementById('piCourseName'),
                courseType: document.getElementById('piCourseType'),
                courseLevel: document.getElementById('piCourseLevel'),
                package: document.getElementById('piPackage'),
                coveredLevels: document.getElementById('piCoveredLevels'),
                teacher: document.getElementById('piCourseTeacher'),
                startDate: document.getElementById('piStartDate'),
                endDate: document.getElementById('piEndDate'),
                nextSession: document.getElementById('piNextSession'),
                invoiceNumber: document.getElementById('piInvoiceNumber'),
                invoiceStatus: document.getElementById('piInvoiceStatus'),
                invoiceFullTotal: document.getElementById('piInvoiceFullTotal'),
                paidBefore: document.getElementById('piPaidBefore'),
                remainingDue: document.getElementById('piRemainingDue'),
                invoiceTotal: document.getElementById('piInvoiceTotal'),
                levelPrice: document.getElementById('piLevelPrice'),
                packageTotal: document.getElementById('piPackageTotal'),
                packageAfterDiscount: document.getElementById('piPackageAfterDiscount'),
                basePrice: document.getElementById('piBasePrice'),
                planDiscount: document.getElementById('piPlanDiscount'),
                referralDiscount: document.getElementById('piReferralDiscount'),
                promoDiscount: document.getElementById('piPromoDiscount'),
            };
            const pricingState = {
                basePrice: 0,
                netPrice: 0,
                paidAmount: 0,
                amountDue: 0,
                planDiscountType: '',
                planDiscountValue: 0,
                referralDiscountType: '',
                referralDiscountValue: 0,
                promoDiscountType: '',
                promoDiscountValue: 0,
                hasInvoice: false,
                packageName: '',
                coveredLevels: '',
                levelCount: 0,
                levelPrice: 0,
                totalPackagePrice: 0,
                totalAfterDiscount: 0,
            };
            const validationState = {
                promo: { code: '', valid: false },
                referralPromo: { code: '', valid: false },
            };

            function selectedPaymentLocation() {
                return paymentLocationSelect?.value || '';
            }

            function selectedPaymentType() {
                return paymentTypeSelect?.value || '';
            }

            function optionMatchesLocation(option) {
                const location = selectedPaymentLocation();
                const region = option?.dataset?.paymentRegion || 'both';

                return Boolean(option?.value) && Boolean(location) && (region === 'both' || region === location);
            }

            function syncOptionsForLocation(select) {
                Array.from(select?.options || []).forEach(option => {
                    if (!option.value) {
                        option.hidden = false;
                        return;
                    }

                    option.hidden = !optionMatchesLocation(option);
                });

                if (select?.value && !optionMatchesLocation(select.selectedOptions?.[0])) {
                    select.value = '';
                }
            }

            function paymentDetailsText(option) {
                if (!option || !option.value) {
                    return '';
                }

                const details = [
                    option.dataset.currency ? `Currency: ${option.dataset.currency}` : '',
                    option.dataset.bankName ? `Bank Name: ${option.dataset.bankName}` : '',
                    option.dataset.accountName ? `Account Name: ${option.dataset.accountName}` : '',
                    option.dataset.accountNumber ? `Account Number: ${option.dataset.accountNumber}` : '',
                    option.dataset.iban ? `IBAN: ${option.dataset.iban}` : '',
                ].filter(Boolean);

                return details.join(' | ');
            }

            function syncPaymentDetails(select, target) {
                if (!select || !target) {
                    return;
                }

                target.textContent = paymentDetailsText(select.selectedOptions?.[0]);
            }

            function selectedReferralSource() {
                return document.querySelector('input[name="referral_source"]:checked')?.value || 'existing';
            }

            function syncReceiptField() {
                const hasLocation = Boolean(selectedPaymentLocation());
                syncOptionsForLocation(paymentGatewaySelect);
                syncOptionsForLocation(treasurySelect);

                if (!hasLocation) {
                    paymentTypeSelect.value = '';
                }

                const needsReceipt = hasLocation && selectedPaymentType() === 'instapay';
                const needsGateway = hasLocation && selectedPaymentType() === 'online';
                const hasTreasuryOptions = Array.from(treasurySelect.options || []).some(optionMatchesLocation);
                const hasGatewayOptions = Array.from(paymentGatewaySelect.options || []).some(optionMatchesLocation);

                paymentMethodField.classList.toggle('d-none', !hasLocation);
                receiptField.classList.toggle('d-none', !needsReceipt);
                receiptInput.required = needsReceipt;
                treasuryField.classList.toggle('d-none', !needsReceipt || !hasTreasuryOptions);
                treasurySelect.required = needsReceipt && hasTreasuryOptions;
                paymentGatewayField.classList.toggle('d-none', !needsGateway || !hasGatewayOptions);
                paymentGatewaySelect.required = needsGateway && hasGatewayOptions;
                if (!needsGateway) {
                    paymentGatewaySelect.value = '';
                }
                if (!needsReceipt) {
                    treasurySelect.value = '';
                }
                syncPaymentDetails(paymentGatewaySelect, paymentGatewayDetails);
                syncPaymentDetails(treasurySelect, treasuryDetails);
            }

            function syncReferralFields() {
                const source = selectedReferralSource();
                const useExisting = !promoReferralField || source === 'existing';
                const usePromoCode = !existingReferralField || source === 'promo_code';

                if (existingReferralField) {
                    existingReferralField.classList.toggle('d-none', !useExisting);
                    if (!useExisting) {
                        existingReferralField.querySelector('select').value = '';
                    }
                }

                if (promoReferralField) {
                    promoReferralField.classList.toggle('d-none', !usePromoCode);
                    if (!usePromoCode) {
                        promoReferralField.querySelector('input').value = '';
                        resetReferralPromoValidation();
                    }
                }

                syncSelectedReferralDiscount();
            }

            function feedbackHtml(type, message) {
                const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
                return `<div class="alert ${alertClass} py-2 px-3 mb-0 small">${message}</div>`;
            }

            function resetPromoValidation() {
                validationState.promo = { code: '', valid: false };
                pricingState.promoDiscountType = '';
                pricingState.promoDiscountValue = 0;
                if (promoFeedback) {
                    promoFeedback.innerHTML = '';
                }
                updatePricePreview();
            }

            function resetReferralPromoValidation() {
                validationState.referralPromo = { code: '', valid: false };
                if (selectedReferralSource() === 'promo_code') {
                    pricingState.referralDiscountType = '';
                    pricingState.referralDiscountValue = 0;
                }
                if (referralPromoFeedback) {
                    referralPromoFeedback.innerHTML = '';
                }
                updatePricePreview();
            }

            async function postValidation(url, code) {
                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                    },
                    body: JSON.stringify({ code }),
                });
                const payload = await response.json().catch(() => ({}));

                if (!response.ok) {
                    throw new Error(payload.message || 'Code is invalid.');
                }

                return payload;
            }

            async function checkPromoCode() {
                const code = promoInput?.value.trim() || '';
                resetPromoValidation();

                if (!code) {
                    promoFeedback.innerHTML = feedbackHtml('error', 'Please enter promo code first.');
                    return false;
                }

                checkPromoBtn.disabled = true;
                checkPromoBtn.textContent = 'Checking...';

                try {
                    const payload = await postValidation(promoCheckUrl, code);
                    validationState.promo = { code, valid: true };
                    pricingState.promoDiscountType = payload.type || '';
                    pricingState.promoDiscountValue = Number(payload.discount || 0);
                    updatePricePreview();
                    promoFeedback.innerHTML = feedbackHtml('success', `${payload.message || 'Promo Code is Accepted.'} Discount: ${payload.discount}${payload.type === 'percentage' ? '%' : '$'}`);
                    return true;
                } catch (error) {
                    promoFeedback.innerHTML = feedbackHtml('error', error.message);
                    return false;
                } finally {
                    checkPromoBtn.disabled = false;
                    checkPromoBtn.textContent = 'Apply';
                }
            }

            async function checkReferralPromoCode() {
                const code = referralPromoInput?.value.trim() || '';
                resetReferralPromoValidation();

                if (!code) {
                    referralPromoFeedback.innerHTML = feedbackHtml('error', 'Please enter referral promo code first.');
                    return false;
                }

                checkReferralPromoBtn.disabled = true;
                checkReferralPromoBtn.textContent = 'Checking...';

                try {
                    const payload = await postValidation(referralPromoCheckUrl, code);
                    validationState.referralPromo = { code, valid: true };
                    pricingState.referralDiscountType = payload.type || '';
                    pricingState.referralDiscountValue = Number(payload.discount || 0);
                    updatePricePreview();
                    const owner = payload.referrer_name ? ` From: ${payload.referrer_name}.` : '';
                    referralPromoFeedback.innerHTML = feedbackHtml('success', `${payload.message || 'Referral promo code is accepted.'} Discount: ${payload.discount}${payload.type === 'percentage' ? '%' : '$'}.${owner}`);
                    return true;
                } catch (error) {
                    referralPromoFeedback.innerHTML = feedbackHtml('error', error.message);
                    return false;
                } finally {
                    checkReferralPromoBtn.disabled = false;
                    checkReferralPromoBtn.textContent = 'Apply';
                }
            }

            function clearFirstInvoiceFields() {
                firstInvoiceFields.querySelectorAll('input[type="text"], input[type="number"]').forEach(input => {
                    input.value = '';
                });
                firstInvoiceFields.querySelectorAll('select').forEach(select => {
                    select.value = '';
                });
                resetPromoValidation();
                resetReferralPromoValidation();
            }

            function setPreviewText(key, value) {
                if (preview[key]) {
                    preview[key].textContent = value?.trim() || '-';
                }
            }

            function money(value) {
                return `${Number(value || 0).toFixed(2)} ${pricingState.currency || ''}`;
            }

            function discountLabel(type, value) {
                value = Number(value || 0);
                if (!type || value <= 0) {
                    return '-';
                }

                return `${value}${type === 'percentage' ? '%' : '$'}`;
            }

            function discountAmount(price, type, value) {
                value = Number(value || 0);
                if (!type || value <= 0) {
                    return 0;
                }

                return type === 'percentage'
                    ? (price * value) / 100
                    : value;
            }

            function selectedReferralOption() {
                const select = existingReferralField?.querySelector('select');
                return select?.selectedOptions?.[0] || null;
            }

            function syncSelectedReferralDiscount() {
                if (!existingReferralField || existingReferralField.classList.contains('d-none')) {
                    if (selectedReferralSource() !== 'promo_code') {
                        pricingState.referralDiscountType = '';
                        pricingState.referralDiscountValue = 0;
                    }
                    updatePricePreview();
                    return;
                }

                const option = selectedReferralOption();
                pricingState.referralDiscountType = option?.dataset.discountType || '';
                pricingState.referralDiscountValue = Number(option?.dataset.discountValue || 0);
                updatePricePreview();
            }

            function updatePricePreview() {
                const remainingDue = Number(pricingState.hasInvoice
                    ? pricingState.amountDue
                    : (pricingState.netPrice || pricingState.amountDue || 0));
                let finalPrice = remainingDue;
                const referralAmount = Math.min(finalPrice, discountAmount(finalPrice, pricingState.referralDiscountType, pricingState.referralDiscountValue));
                finalPrice = Math.max(0, finalPrice - referralAmount);
                const promoAmount = Math.min(finalPrice, discountAmount(finalPrice, pricingState.promoDiscountType, pricingState.promoDiscountValue));
                finalPrice = Math.max(0, finalPrice - promoAmount);
                const requestedAmount = depositInput?.value === '' ? null : Number(depositInput?.value);
                const payingNow = requestedAmount && requestedAmount > 0
                    ? Math.min(finalPrice, requestedAmount)
                    : finalPrice;

                setPreviewText('basePrice', money(pricingState.basePrice));
                setPreviewText('invoiceFullTotal', money(pricingState.netPrice));
                setPreviewText('paidBefore', money(pricingState.paidAmount));
                setPreviewText('remainingDue', money(remainingDue));
                setPreviewText('levelPrice', pricingState.levelPrice > 0 ? money(pricingState.levelPrice) : '-');
                setPreviewText('packageTotal', pricingState.totalPackagePrice > 0 ? money(pricingState.totalPackagePrice) : '-');
                setPreviewText('packageAfterDiscount', pricingState.totalAfterDiscount > 0 ? money(pricingState.totalAfterDiscount) : '-');
                setPreviewText('planDiscount', discountLabel(pricingState.planDiscountType, pricingState.planDiscountValue));
                setPreviewText('referralDiscount', referralAmount > 0 ? `${discountLabel(pricingState.referralDiscountType, pricingState.referralDiscountValue)} (${money(referralAmount)})` : '-');
                setPreviewText('promoDiscount', promoAmount > 0 ? `${discountLabel(pricingState.promoDiscountType, pricingState.promoDiscountValue)} (${money(promoAmount)})` : '-');
                preview.invoiceTotal.dataset.currencyBaseAmount = payingNow;
                setPreviewText('invoiceTotal', money(payingNow));
            }

            function updateInvoicePreview(button) {
                const row = button.closest('tr');
                const courseCell = row?.querySelector('.payment-course-cell');
                const metaCells = row ? Array.from(row.querySelectorAll('.payment-meta-cell')) : [];
                const courseTypeText = courseCell?.querySelector('span')?.textContent.trim() || '-';
                const scheduleText = metaCells[0]?.querySelector('span')?.textContent.trim() || '-';
                const [fallbackStartDate = '-', fallbackEndDate = '-'] = scheduleText.split(' to ');

                setPreviewText('courseName', button.dataset.courseName || courseCell?.querySelector('strong')?.textContent || '-');
                setPreviewText('courseType', courseTypeText.split('-')[0] || '-');
                setPreviewText('courseLevel', courseTypeText.includes('-') ? courseTypeText.split('-').slice(1).join('-') : '-');
                setPreviewText('package', row?.dataset.packageName || '-');
                setPreviewText('coveredLevels', row?.dataset.coveredLevels || '-');
                setPreviewText('teacher', row?.dataset.teacherName ? `${row.dataset.teacherName} · ${row.dataset.teacherTypeLabel || 'Native-like'}` : '-');
                setPreviewText('startDate', row?.dataset.startDate || fallbackStartDate);
                setPreviewText('endDate', row?.dataset.endDate || fallbackEndDate);
                setPreviewText('nextSession', row?.dataset.nextSession || (metaCells[0]?.querySelector('small')?.textContent || '').replace('Next:', '') || '-');
                setPreviewText('invoiceNumber', metaCells[1]?.querySelector('span')?.textContent || 'No invoice');
                setPreviewText('invoiceStatus', row?.querySelector('td:nth-last-child(2)')?.innerText.trim().replace(/\s+/g, ' - ') || 'Unpaid');
                pricingState.currency = row?.dataset.currency || '';
                document.dispatchEvent(new CustomEvent('currency-pricing-context', {detail: {id: 'payments-currency-price', context: {currency: pricingState.currency, rates: JSON.parse(row?.dataset.currencyRates || '{}')}}}));
                pricingState.basePrice = Number(row?.dataset.basePrice || 0);
                pricingState.netPrice = Number(row?.dataset.netPrice || 0);
                pricingState.paidAmount = Number(row?.dataset.paidAmount || 0);
                pricingState.amountDue = Number(row?.dataset.amountDue || 0);
                pricingState.hasInvoice = button.dataset.hasInvoice === '1';
                pricingState.planDiscountType = row?.dataset.planDiscountType || '';
                pricingState.planDiscountValue = Number(row?.dataset.planDiscountValue || 0);
                pricingState.packageName = row?.dataset.packageName || '';
                pricingState.coveredLevels = row?.dataset.coveredLevels || '';
                pricingState.levelCount = Number(row?.dataset.levelCount || 0);
                pricingState.levelPrice = Number(row?.dataset.levelPrice || 0);
                pricingState.totalPackagePrice = Number(row?.dataset.totalPackagePrice || 0);
                pricingState.totalAfterDiscount = Number(row?.dataset.totalAfterDiscount || 0);
                if (depositInput) {
                    depositInput.max = pricingState.amountDue > 0 ? pricingState.amountDue.toFixed(2) : '';
                    depositInput.placeholder = pricingState.amountDue > 0 ? pricingState.amountDue.toFixed(2) : 'Example: 50';
                }
                pricingState.referralDiscountType = '';
                pricingState.referralDiscountValue = 0;
                pricingState.promoDiscountType = '';
                pricingState.promoDiscountValue = 0;
                syncSelectedReferralDiscount();
                updatePricePreview();
            }

            document.querySelectorAll('[data-open-payment]').forEach(button => {
                button.addEventListener('click', () => {
                    const hasInvoice = button.dataset.hasInvoice === '1';
                    const hasTransaction = button.dataset.hasTransaction === '1';
                    scheduleInput.value = button.dataset.courseId;
                    modalCourse.textContent = button.dataset.courseName
                        ? `Paying for ${button.dataset.courseName}`
                        : 'Select how you want to pay this course.';
                    paymentTypeSelect.value = '';
                    paymentGatewaySelect.value = '';
                    treasurySelect.value = '';
                    firstInvoiceFields.classList.toggle('d-none', hasTransaction);
                    if (hasTransaction) {
                        clearFirstInvoiceFields();
                    }
                    modal.classList.remove('d-none');
                    modal.setAttribute('aria-hidden', 'false');
                    updateInvoicePreview(button);
                    syncReceiptField();
                    syncReferralFields();
                });
            });

            document.querySelectorAll('[data-close-payment]').forEach(button => {
                button.addEventListener('click', () => {
                    modal.classList.add('d-none');
                    modal.setAttribute('aria-hidden', 'true');
                });
            });

            paymentLocationSelect?.addEventListener('change', syncReceiptField);
            paymentTypeSelect?.addEventListener('change', syncReceiptField);
            paymentGatewaySelect?.addEventListener('change', () => syncPaymentDetails(paymentGatewaySelect, paymentGatewayDetails));
            treasurySelect?.addEventListener('change', () => syncPaymentDetails(treasurySelect, treasuryDetails));
            document.querySelectorAll('.receipt-form select[name="treasury_id"]').forEach((select) => {
                const details = select.closest('.receipt-form')?.querySelector('.js-payment-details');
                select.addEventListener('change', () => syncPaymentDetails(select, details));
                syncPaymentDetails(select, details);
            });
            referralSourceOptions.forEach(input => input.addEventListener('change', syncReferralFields));
            existingReferralField?.querySelector('select')?.addEventListener('change', syncSelectedReferralDiscount);
            checkPromoBtn?.addEventListener('click', checkPromoCode);
            checkReferralPromoBtn?.addEventListener('click', checkReferralPromoCode);
            promoInput?.addEventListener('input', resetPromoValidation);
            depositInput?.addEventListener('input', updatePricePreview);
            referralPromoInput?.addEventListener('input', resetReferralPromoValidation);

            receiptInput.addEventListener('change', () => {
                receiptLabel.textContent = receiptInput.files?.[0]?.name || 'Upload receipt image';
            });

            form?.addEventListener('submit', event => {
                const promoCode = promoInput?.value.trim() || '';
                const referralPromoCode = referralPromoInput && !promoReferralField?.classList.contains('d-none')
                    ? referralPromoInput.value.trim()
                    : '';

                if (!selectedPaymentLocation()) {
                    event.preventDefault();
                    paymentLocationSelect?.reportValidity();
                    return;
                }

                if (selectedPaymentType() === 'online' && paymentGatewaySelect?.required && !paymentGatewaySelect?.value) {
                    event.preventDefault();
                    paymentGatewaySelect?.reportValidity();
                    return;
                }

                if (promoCode && (!validationState.promo.valid || validationState.promo.code !== promoCode)) {
                    event.preventDefault();
                    promoFeedback.innerHTML = feedbackHtml('error', 'Please apply and validate the promo code first.');
                    return;
                }

                if (referralPromoCode && (!validationState.referralPromo.valid || validationState.referralPromo.code !== referralPromoCode)) {
                    event.preventDefault();
                    referralPromoFeedback.innerHTML = feedbackHtml('error', 'Please apply and validate the referral promo code first.');
                }
            });

            syncReceiptField();
            syncReferralFields();
        });
    </script>
@endpush