@php
    $authStaffDepartment = auth()->user()?->staff?->department;
    $authStaffDepartmentSlug = $authStaffDepartment?->slug ?? '';
    // $isRetentionDepartment = $authStaffDepartmentSlug === 'retention';
    $canAddStudent = false;
    // $canManageInvoices = $isRetentionDepartment;

    if ($course->schedule_type === 'course') {
        $canAddStudent = (optional($course->academyProduct)->count_of_students ?? 0) > $course->courseStudent->count();
    } elseif ($course->schedule_type === 'track') {
        $canAddStudent = (optional($course->trackType)->count_of_students ?? 0) > $course->courseStudent->count();
    }
@endphp

<div class="ui-card ui-card--table">
    <div class="ui-card__header d-flex align-items-center justify-content-between gap-3 flex-wrap">
        <div>
            <h6 class="mb-0 ui-title">Assigned Students</h6>
            <p class="mb-0 ui-muted">Manage enrolment, invoices, and payment follow-up for this course.</p>
        </div>

        {{-- @if ($isRetentionDepartment) --}}
            @can('retention_courses_storeCourseToStudent')
                @if ($canAddStudent)
                    <button class="asset-btn asset-btn--primary" data-bs-toggle="modal"
                        data-bs-target="#assing_student_modal_to_schedule" id="assign_student">
                        Add Student
                    </button>
                @endif
            @endcan
        {{-- @endif --}}
    </div>

    <x-table
        :headers="['Student Name', 'Invoice & Payment', 'Assessments', 'Delete']"
        :paginator="$course_students"
        emptyMessage="No students assigned yet."
    >
        @foreach ($course_students as $course_student)
            @php
                $createdTime = \Carbon\Carbon::parse($course_student->created_at);
                $allowedHours = $HrSetting->allowed_period_to_pay_invoices;
                $hoursPassed = abs(\Carbon\Carbon::now()->diffInHours($createdTime));
                $invoice = $course_student->finanaceStudentInvoiceId;
                $transaction = $invoice?->transaction?->first();
                $studentName = trim(($course_student->student->first_name ?? '') . ' ' . ($course_student->student->last_name ?? ''));
                $examAssignments = collect($course_student->examAssignments ?? []);
                $selectedPackage = ($selectedPackagesByCourseStudentId ?? collect())->get($course_student->id);

                $currentUserStaff = auth()->user()->staff;
                $addedByStaff = $course_student->addedBy ? $course_student->addedBy->staff : null;
                $isPrivileged = false;

                if ($course_student->added_by == auth()->id()) {
                    $isPrivileged = true;
                } elseif ($addedByStaff && $currentUserStaff && $addedByStaff->manager_id == $currentUserStaff->id) {
                    $isPrivileged = true;
                } elseif ($addedByStaff && $addedByStaff->department && $currentUserStaff && $addedByStaff->department->department_head_id == $currentUserStaff->id) {
                    $isPrivileged = true;
                } elseif ($currentUserStaff && $currentUserStaff->jobTitle && ($currentUserStaff->jobTitle->slug == 'schedule-manager' || $currentUserStaff->jobTitle->sort == 1)) {
                    $isPrivileged = true;
                }

                $canDelete = $isPrivileged || (!$invoice
                    ? $hoursPassed > $allowedHours
                    : ($invoice->payment_status != 'paid' && $hoursPassed > $allowedHours));
            @endphp

            <tr>
                <td class="text-center">
                    <div class="d-flex flex-column align-items-center gap-2">
                        <a href="{{ $course_student->student?->id ? route('students.show', $course_student->student->id) : '#' }}"

                           class="ui-title text-decoration-none hover-underline text-primary fw-bold">
                            {{ $studentName ?: 'N/A' }}
                        </a>

                        @if ($hoursPassed > $allowedHours && (!$invoice || $invoice->payment_status != 'paid'))
                            <span class="ui-pill ui-pill--warn">Payment window exceeded</span>
                        @endif

                        @if ($course->schedule_type === 'track')
                            @if ($selectedPackage)
                                <span class="ui-pill ui-pill--info">
                                    {{ $selectedPackage->name }} ({{ $selectedPackage->levels_count }} levels)
                                </span>
                            @else
                                <span class="ui-muted small">No package selected</span>
                            @endif
                        @endif
                    </div>
                </td>

                <td class="text-center" onclick="event.stopPropagation()">
                    <div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
                        @if (!$invoice)
                            <small class="live-timer badge bg-danger text-white px-2 py-1 rounded"
                                data-start="{{ $createdTime->timestamp }}">
                                Loading...
                            </small>
                            {{-- @if ($canManageInvoices) --}}
                                <button class="btn btn-sm btn-outline-warning make-invoice-btn asset-btn asset-btn--warning p-3" data-bs-toggle="modal"
                                    data-bs-target="#request_invoice_modal"
                                    data-mode="create"
                                    data-action="{{ route('invoices.make') }}"
                                    data-student-id="{{ $course_student->student?->id ?? '#' }}"
                                    data-course-id="{{ $course->id }}"
                                    data-course-type="{{ $course->schedule_type }}"
                                    data-product-id="{{ $course->schedule_type == 'track' ? $course->track_id : $course->academy_product_id ?? $course->id }}"
                                    data-track-type-id="{{ $course->track_type_id ?? '' }}"
                                    data-selected-package-id="{{ $selectedPackage?->id ?? '' }}"
                                    data-student-name="{{ $studentName }}">
                                    Make Invoice
                                </button>
                            {{-- @endif --}}
                        @elseif($invoice?->payment_status == 'paid')
                            <button class="btn btn-sm btn-outline-success" style="cursor: not-allowed;">
                                Paid
                            </button>
                        @else
                            @if ($transaction?->payment_type == 'online')
                                <small class="live-timer badge bg-danger text-white px-2 py-1 rounded"
                                    data-start="{{ $createdTime->timestamp }}">
                                    Loading...
                                </small>

                                <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal"
                                    data-bs-target="#unPaidModal"
                                    data-student-name="{{ $studentName }}"
                                    data-phone="{{ $course_student->student->phone ?? '' }}"
                                    data-payment-url="{{ $transaction?->payment_url ?? '' }}">
                                    Pay, Online Payment
                                </button>

                                {{-- @if ($canManageInvoices) --}}
                                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
                                        data-bs-target="#request_invoice_modal"
                                        data-mode="change"
                                        data-action="{{ route('invoices.change_payment', $invoice->id) }}"
                                        data-invoice-id="{{ $invoice->id }}"
                                        data-student-id="{{ $course_student->student?->id ?? '#' }}"
                                        data-course-id="{{ $course->id }}"
                                        data-course-type="{{ $course->schedule_type }}"
                                        data-product-id="{{ $course->schedule_type == 'track' ? $course->track_id : $course->academy_product_id ?? $course->id }}"
                                        data-track-type-id="{{ $course->track_type_id ?? '' }}"
                                        data-selected-package-id="{{ $selectedPackage?->id ?? '' }}"
                                        data-student-name="{{ $studentName }}"
                                        data-payment-type="{{ $transaction?->payment_type ?? $invoice?->payment_type ?? '' }}"
                                        data-payment-gateway="{{ $transaction?->gateway ?? '' }}"
                                        data-treasury-id="{{ $transaction?->treasury_id ?? '' }}">
                                        Change Payment
                                    </button>
                                {{-- @endif --}}

                            @elseif ($transaction?->payment_type == 'instapay')
                                <small class="live-timer badge bg-danger text-white px-2 py-1 rounded"
                                    data-start="{{ $createdTime->timestamp }}">
                                    Loading...
                                </small>
                                <button class="btn btn-sm btn-outline-secondary" style="cursor: not-allowed;">
                                    Waiting Payment...
                                </button>

                                {{-- @if ($canManageInvoices) --}}
                                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
                                        data-bs-target="#request_invoice_modal"
                                        data-mode="change"
                                        data-action="{{ route('invoices.change_payment', $invoice->id) }}"
                                        data-invoice-id="{{ $invoice->id }}"
                                        data-student-id="{{ $course_student->student?->id ?? '#' }}"
                                        data-course-id="{{ $course->id }}"
                                        data-course-type="{{ $course->schedule_type }}"
                                        data-product-id="{{ $course->schedule_type == 'track' ? $course->track_id : $course->academy_product_id ?? $course->id }}"
                                        data-track-type-id="{{ $course->track_type_id ?? '' }}"
                                        data-selected-package-id="{{ $selectedPackage?->id ?? '' }}"
                                        data-student-name="{{ $studentName }}"
                                        data-payment-type="{{ $transaction?->payment_type ?? $invoice?->payment_type ?? '' }}"
                                        data-payment-gateway="{{ $transaction?->gateway ?? '' }}"
                                        data-treasury-id="{{ $transaction?->treasury_id ?? '' }}">
                                        Change Payment
                                    </button>
                                {{-- @endif --}}
                            @else
                                {{-- @if ($canManageInvoices) --}}
                                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
                                        data-bs-target="#request_invoice_modal"
                                        data-mode="change"
                                        data-action="{{ route('invoices.change_payment', $invoice->id) }}"
                                        data-invoice-id="{{ $invoice->id }}"
                                        data-student-id="{{ $course_student->student?->id ?? '#' }}"
                                        data-course-id="{{ $course->id }}"
                                        data-course-type="{{ $course->schedule_type }}"
                                        data-product-id="{{ $course->schedule_type == 'track' ? $course->track_id : $course->academy_product_id ?? $course->id }}"
                                        data-track-type-id="{{ $course->track_type_id ?? '' }}"
                                        data-selected-package-id="{{ $selectedPackage?->id ?? '' }}"
                                        data-student-name="{{ $studentName }}"
                                        data-payment-type="{{ $transaction?->payment_type ?? $invoice?->payment_type ?? '' }}"
                                        data-payment-gateway="{{ $transaction?->gateway ?? '' }}"
                                        data-treasury-id="{{ $transaction?->treasury_id ?? '' }}">
                                        Change Payment
                                    </button>
                                {{-- @endif --}}
                            @endif
                        @endif
                    </div>
                </td>

                <td class="text-center" onclick="event.stopPropagation()">
                    <div class="d-flex flex-column align-items-center gap-2">
                        <div class="d-flex flex-wrap justify-content-center gap-1">
                            <span class="ui-pill ui-pill--neutral">Exams: {{ $examAssignments->count() }}</span>
                        </div>

                        @if($canAssignCourseAssessments ?? false)
                            <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#assignAssessmentsModal{{ $course_student->id }}">
                                Assign / Update Exam
                            </button>
                        @else
                            <span class="ui-muted">No access</span>
                        @endif
                    </div>
                </td>

                <td class="text-center" onclick="event.stopPropagation()">
                    {{-- @if ($isRetentionDepartment) --}}
                        @can('retention_course_students_destroy')
                            @if ($invoice?->payment_status == 'paid')
                                <button class="btn btn-sm btn-outline-secondary" style="cursor: not-allowed;"
                                    title="Cannot delete paid student">
                                    <iconify-icon icon="lucide:trash-2"></iconify-icon>
                                </button>
                            @elseif($canDelete)
                                <x-table-action type="delete" :target="'#deleteModal' . $course_student->id" />
                            @else
                                <button class="btn btn-sm btn-outline-secondary" style="cursor: not-allowed;"
                                    title="Cannot delete student">
                                    <iconify-icon icon="lucide:trash-2"></iconify-icon>
                                </button>
                            @endif
                        @else
                            <span class="ui-muted">-</span>
                        @endif
                    {{-- @else
                        <span class="ui-muted">-</span>
                    @endif --}}
                </td>
            </tr>
        @endforeach
    </x-table>

    <div class="modal fade" id="unPaidModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">Online payment for <span id="modalStudentName"></span></div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="paymentLinkWrapper">
                        <label class="form-label text-muted small mb-1">Payment URL</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="paymentUrl" readonly>
                            <a href="#" target="_blank" class="btn btn-outline-primary" id="openPaymentUrl">
                                Open
                            </a>
                        </div>
                    </div>
                    <div class="alert alert-warning mb-0 d-none" id="missingPaymentUrl">
                        No payment URL is available for this transaction.
                    </div>
                    <input type="hidden" id="phone">
                </div>
            </div>
        </div>
    </div>

    @include('dashboard.academics.schedule_demo.assing_student_modal' , [ 'route' =>  route('courses_storeCourseToStudent')])
    {{-- @if ($canManageInvoices) --}}
        @include('dashboard.academics.courses.request_invoice_modal')
    {{-- @endif --}}


    @foreach ($course_students as $course_student)
        @php
            $isLastStudentInCourse = $course_students->count() <= 1;
            $studentName = trim(($course_student->student->first_name ?? '') . ' ' . ($course_student->student->last_name ?? ''));
        @endphp
        @if($canAssignCourseAssessments ?? false)
            <div class="modal fade" id="assignAssessmentsModal{{ $course_student->id }}" tabindex="-1"
                aria-labelledby="assignAssessmentsModalLabel{{ $course_student->id }}" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="assignAssessmentsModalLabel{{ $course_student->id }}">
                                Assign / Update Exam for {{ $studentName ?: 'Student' }}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row g-3">
                                <div class="col-md-12">
                                    <form method="POST" action="{{ route('courses.students.assign_exam', ['course' => $course->id, 'courseStudent' => $course_student->id]) }}" class="border rounded p-3 h-100">
                                        @csrf
                                        <label class="form-label">Exam</label>
                                        <select name="exam_id" class="form-select mb-3" required>
                                            <option value="">Choose exam</option>
                                            @foreach(($courseAssignableExams ?? collect()) as $exam)
                                                <option value="{{ $exam->id }}">{{ $exam->title }}{{ isset($exam->total_questions) ? ' - ' . $exam->total_questions . ' questions' : '' }}</option>
                                            @endforeach
                                        </select>
                                        <button type="submit" class="btn btn-primary btn-sm w-100" @disabled(($courseAssignableExams ?? collect())->isEmpty())>Assign / Update Exam</button>
                                    </form>
                                </div>
                            </div>

                            <hr>

                            <div class="row g-3">
                                <div class="col-md-12">
                                    <div class="ui-title mb-2">Assigned Exams</div>
                                    @forelse($course_student->examAssignments as $assignment)
                                        <div class="small border rounded p-2 mb-1">
                                            {{ $assignment->exam->title ?? 'Exam #' . $assignment->exam_id }}
                                            <span class="ui-pill ui-pill--neutral">{{ $assignment->status }}</span>
                                        </div>
                                    @empty
                                        <p class="ui-muted mb-0">No exams assigned.</p>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div class="modal fade" id="deleteModal{{ $course_student->id }}" tabindex="-1"
            aria-labelledby="deleteModalLabel{{ $course_student->id }}" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel{{ $course_student->id }}">Delete Student</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <p>Are you sure you want to delete <strong>{{ $course_student->student->first_name ?? '' }}
                                {{ $course_student->student->last_name ?? '' }}</strong> from
                            this course?</p>
                        @if ($isLastStudentInCourse)
                            <div class="alert alert-warning mt-3 mb-0 text-start">
                                This is the last student in this course. Choose what to do next.
                            </div>
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        @if ($isLastStudentInCourse)
                            <form action="{{ route('course_students_delete', $course_student->id) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <input type="hidden" name="last_student_action" value="delete_student_only">
                                <button type="submit" class="btn btn-outline-danger">Delete Student Only</button>
                            </form>
                            <form action="{{ route('course_students_delete', $course_student->id) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <input type="hidden" name="last_student_action" value="delete_course">
                                <button type="submit" class="btn btn-danger">Delete Course</button>
                            </form>
                        @else
                            <form action="{{ route('course_students_delete', $course_student->id) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-outline-danger">Delete</button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @endforeach

</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const unPaidModal = document.getElementById('unPaidModal');

        function setPaymentLinkModalData(studentName, phone, paymentUrl = '') {
            document.getElementById('modalStudentName').innerText = studentName || '';
            document.getElementById('phone').value = phone || '';

            const paymentUrlInput = document.getElementById('paymentUrl');
            const openPaymentUrl = document.getElementById('openPaymentUrl');
            const paymentLinkWrapper = document.getElementById('paymentLinkWrapper');
            const missingPaymentUrl = document.getElementById('missingPaymentUrl');
            const hasPaymentUrl = !!paymentUrl;

            if (paymentUrlInput) {
                paymentUrlInput.value = paymentUrl;
            }

            if (openPaymentUrl) {
                openPaymentUrl.href = hasPaymentUrl ? paymentUrl : '#';
                openPaymentUrl.classList.toggle('disabled', !hasPaymentUrl);
            }

            paymentLinkWrapper?.classList.toggle('d-none', !hasPaymentUrl);
            missingPaymentUrl?.classList.toggle('d-none', hasPaymentUrl);
        }

        window.showPaymentLinkModal = function ({ studentName = '', phone = '', paymentUrl = '' }) {
            setPaymentLinkModalData(studentName, phone, paymentUrl);

            if (unPaidModal) {
                bootstrap.Modal.getOrCreateInstance(unPaidModal).show();
            }
        };

        if (unPaidModal) {
            unPaidModal.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget;
                const studentName = button.getAttribute('data-student-name') || '';
                const phone = button.getAttribute('data-phone') || '';
                const paymentUrl = button.getAttribute('data-payment-url') || '';

                setPaymentLinkModalData(studentName, phone, paymentUrl);
            });
        }
    });


    {{-- Modal trigger handled via data-bs-toggle on the button --}}

    function updateTimers() {
        document.querySelectorAll('.live-timer').forEach(function (el) {
            let start = parseInt(el.dataset.start) * 1000; // timestamp → ms
            let now = Date.now();
            let diff = now - start;

            let seconds = Math.floor(diff / 1000);
            let minutes = Math.floor(seconds / 60);
            let hours = Math.floor(minutes / 60);
            let days = Math.floor(hours / 24);

            seconds %= 60;
            minutes %= 60;
            hours %= 24;

            el.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
        });
    }
    setInterval(updateTimers, 1000);
    updateTimers();

    document.addEventListener('DOMContentLoaded', function () {
        const modal = document.getElementById('request_invoice_modal');
        const form = document.getElementById('invoice_form');
        const treasuryEndpoint = '{{ route('invoices.instapay_treasuries') }}';
        const paymentGatewayEndpoint = '{{ route('invoices.payment_gateways') }}';
        const previewEndpoint  = '{{ route('invoices.preview_data') }}';
        const defaultInvoiceAction = '{{ route('invoices.make') }}';
        const invoiceModalTitle = document.getElementById('invoice_modal_title');
        const submitBtnLabel = document.getElementById('submit_btn_label');
        const invoiceIdInput = document.getElementById('invoice_id');
        const formModeInput = document.getElementById('form_mode');
        const depositWrapper = document.getElementById('deposit_wrapper');
        const promoWrapper = document.getElementById('promo_wrapper');
        const referralChoiceWrapper = document.getElementById('referral_choice_wrapper');
        const referralPromoWrapper = document.getElementById('referral_promo_wrapper');
        const currentPaymentTypeWrapper = document.getElementById('current_payment_type_wrapper');
        const currentPaymentTypeLabel = document.getElementById('current_payment_type_label');
        const studentNameDisplay = document.getElementById('student_name_display');
        const packageSelect = document.getElementById('package_id');
        const packageHiddenInput = document.getElementById('package_id_hidden');
        const levelsCountInput = document.getElementById('levels_count');
        const submitBtn = document.getElementById('submit_btn');
        const pricingAvailabilityMessage = document.getElementById('pricing_availability_message');

        // ── Preview helpers ──────────────────────────────────────────────────
        function setText(id, val) {
            const el = document.getElementById(id);
            if (el) el.textContent = val ?? '—';
        }

        function showPreviewLoading() {
            document.getElementById('invoice_preview_loading')?.classList.remove('d-none');
            document.getElementById('invoice_preview_content')?.classList.add('d-none');
            document.getElementById('invoice_preview_error')?.classList.add('d-none');
        }

        function showPreviewContent() {
            document.getElementById('invoice_preview_loading')?.classList.add('d-none');
            document.getElementById('invoice_preview_content')?.classList.remove('d-none');
            document.getElementById('invoice_preview_error')?.classList.add('d-none');
        }

        function showPreviewError() {
            document.getElementById('invoice_preview_loading')?.classList.add('d-none');
            document.getElementById('invoice_preview_content')?.classList.add('d-none');
            document.getElementById('invoice_preview_error')?.classList.remove('d-none');
        }

        window.invoicePricingState = {
            baseNetPrice: 0,
            promo: null,
            referralPromo: null,
            existingInvoice: false,
            existingNetPrice: null,
            remainingPrice: null,
            previewReferral: false,
        };

        window.invoiceAvailabilityState = {
            available: true,
            checking: false,
        };

        function setPricingAvailability(status, message = '') {
            window.invoiceAvailabilityState = {
                available: status === 'available',
                checking: status === 'checking',
            };

            if (pricingAvailabilityMessage) {
                pricingAvailabilityMessage.textContent = message;
                pricingAvailabilityMessage.classList.toggle('d-none', !message);
                pricingAvailabilityMessage.classList.toggle('alert-info', status === 'checking');
                pricingAvailabilityMessage.classList.toggle('alert-warning', status !== 'checking');
            }

            if (submitBtn) {
                submitBtn.disabled = status !== 'available';
            }
        }

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

            return [
                option.dataset.currency ? `Currency: ${option.dataset.currency}` : '',
                option.dataset.bankName ? `Bank: ${option.dataset.bankName}` : '',
                option.dataset.accountNumber ? `Account number: ${option.dataset.accountNumber}` : '',
            ].filter(Boolean).join(' | ');
        }

        function fillPaymentOption(option, item) {
            option.dataset.currency = item.currency || '';
            option.dataset.bankName = item.bank_name || '';
            option.dataset.accountNumber = item.account_number || '';
        }

        function syncPaymentDetails(select, target, fallback = '') {
            if (!target) return;

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

        function formatDiscountValue(type, value) {
            return type === 'percentage' ? `${value}%` : `${value}`;
        }

        function applySequentialDiscount(amount, type, value) {
            const numericValue = parseFloat(value) || 0;
            let nextAmount = amount;
            let appliedAmount = 0;

            if (type === 'percentage') {
                appliedAmount = nextAmount * (numericValue / 100);
                nextAmount -= appliedAmount;
            } else {
                appliedAmount = numericValue;
                nextAmount -= appliedAmount;
            }

            if (nextAmount < 0) {
                appliedAmount = amount;
                nextAmount = 0;
            }

            return { amount: nextAmount, appliedAmount };
        }

        function setReferralSource(source) {
            const rewardWrapper = document.getElementById('referrer_referrals_wrapper');
            const promoWrapperEl = document.getElementById('referral_promo_wrapper');
            const rewardRadio = document.getElementById('referral_source_reward');
            const promoRadio = document.getElementById('referral_source_promo');

            if (rewardRadio) rewardRadio.checked = source === 'reward';
            if (promoRadio) promoRadio.checked = source === 'promo';

            if (source === 'reward') {
                promoWrapperEl?.classList.add('d-none');
                const referralPromoInput = document.getElementById('referral_promo_code');
                const referralPromoFeedback = document.getElementById('referral_promo_feedback');
                window.invoicePricingState.referralPromo = null;
                if (referralPromoInput) referralPromoInput.value = '';
                if (referralPromoFeedback) referralPromoFeedback.innerHTML = '';
                rewardWrapper?.classList.remove('d-none');
            }

            if (source === 'promo') {
                rewardWrapper?.classList.add('d-none');
                const noReferralOption = document.querySelector('input[name="referral_discount_id"][value=""]');
                if (noReferralOption) noReferralOption.checked = true;
                promoWrapperEl?.classList.remove('d-none');
            }

            renderPricingState();
        }

        function selectedReferralDiscount() {
            const selectedReferral = document.querySelector('input[name="referral_discount_id"]:checked');

            if (!selectedReferral || !selectedReferral.value) {
                return null;
            }

            return {
                type: selectedReferral.dataset.discountType,
                value: parseFloat(selectedReferral.dataset.discountValue) || 0,
            };
        }

        function renderPricingState() {
            const state = window.invoicePricingState || {};
            let finalPriceNum = parseFloat(state.baseNetPrice) || 0;
            let promoAppliedAmount = 0;

            const referral = selectedReferralDiscount();
            if (referral) {
                finalPriceNum = applySequentialDiscount(finalPriceNum, referral.type, referral.value).amount;
            }

            if (state.referralPromo) {
                finalPriceNum = applySequentialDiscount(finalPriceNum, state.referralPromo.type, state.referralPromo.value).amount;
            }

            const baseBeforePromo = finalPriceNum;
            if (state.promo) {
                const promoResult = applySequentialDiscount(finalPriceNum, state.promo.type, state.promo.value);
                finalPriceNum = promoResult.amount;
                promoAppliedAmount = promoResult.appliedAmount;
            }

            const referralWrapper = document.getElementById('pi_referral_discount_wrapper');
            const activeReferral = state.referralPromo || referral;
            if (activeReferral && !state.existingInvoice) {
                setText('pi_referral_discount_type', activeReferral.type || '-');
                setText('pi_referral_discount_value', formatDiscountValue(activeReferral.type, activeReferral.value));
                setText('pi_referral_from', activeReferral.from || 'Selected reward');
                referralWrapper?.classList.remove('d-none');
            } else if (!state.previewReferral) {
                referralWrapper?.classList.add('d-none');
            }

            if (state.existingInvoice && state.existingNetPrice != null) {
                finalPriceNum = parseFloat(state.existingNetPrice) || 0;
            }

            const promoDiscountWrapper = document.getElementById('pi_promo_discount_wrapper');
            if (state.promo) {
                setText('pi_promo_code', state.promo.code ? `(${state.promo.code})` : '');
                setText('pi_promo_discount_type', state.promo.type || '-');
                setText('pi_promo_discount_value', formatDiscountValue(state.promo.type, state.promo.value));
                promoDiscountWrapper?.classList.remove('d-none');
            } else {
                promoDiscountWrapper?.classList.add('d-none');
            }

            const remainingWrapper = document.getElementById('pi_remaining_wrapper');
            if (state.remainingPrice != null) {
                document.getElementById('pi_remaining_price').dataset.currencyBaseAmount = Number(state.remainingPrice);
                setText('pi_remaining_price', `${(parseFloat(state.remainingPrice) || 0).toFixed(2)}`);
                remainingWrapper?.classList.remove('d-none');
            } else {
                document.getElementById('pi_remaining_price').dataset.currencyBaseAmount = '';
                remainingWrapper?.classList.add('d-none');
            }

            document.getElementById('pi_final_price').dataset.currencyBaseAmount = finalPriceNum;
            setText('pi_final_price', finalPriceNum.toFixed(2) + ' ' + (window.invoicePriceCurrency || ''));
            window.currentBaseNetPrice = finalPriceNum;

            const promoFeedbackEl = document.getElementById('promo_feedback');
            if (state.promo?.source === 'entered' && promoFeedbackEl) {
                const dValStr = formatDiscountValue(state.promo.type, state.promo.value);
                promoFeedbackEl.innerHTML = `
                    <div class="alert alert-success small py-2 px-3 mb-0 border-0 rounded-2">
                        <div class="fw-semibold text-success mb-1"><iconify-icon icon="lucide:check-circle" class="me-1"></iconify-icon>Promo Applied Successfully</div>
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-muted">Before Promo</span>
                            <span>${baseBeforePromo.toFixed(2)}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-muted">Discount (${dValStr})</span>
                            <span class="text-danger">-${promoAppliedAmount.toFixed(2)}</span>
                        </div>
                        <div class="d-flex justify-content-between border-top pt-1 mt-1 fw-bold">
                            <span>Final Price After All Discounts</span>
                            <span class="text-primary">${finalPriceNum.toFixed(2)}</span>
                        </div>
                    </div>
                `;
            }
        }

        function syncLevelsCountFromPackage() {
            if (!packageSelect || !levelsCountInput) {
                return;
            }

            const selectedOption = packageSelect.options[packageSelect.selectedIndex];
            levelsCountInput.value = selectedOption?.dataset?.levelsCount || '1';
            if (packageHiddenInput) {
                packageHiddenInput.value = packageSelect.value || '';
            }
        }

        function populatePreview(data) {
            const s = data.student   || {};
            const c = data.course    || {};
            const p = data.pricing   || {};
            window.invoicePriceCurrency = p.currency;
            document.dispatchEvent(new CustomEvent('currency-pricing-context', {detail: {id: 'retention-currency-price', context: {currency: p.currency, rates: p.currency_rates}}}));

            // ── Student ──
            setText('pi_student_name',   s.full_name);
            setText('pi_student_code',   s.student_code);
            setText('pi_student_mobile', s.mobile);
            setText('pi_student_email',  s.email);
            setText('pi_pricing_plan',   s.pricing_plan);

            // ── Course ──
            setText('pi_course_name',   c.course_name_en || '—');
            setText('pi_schedule_type', c.schedule_type);
            setText('pi_track',         c.track);
            setText('pi_track_level',   c.track_level);
            setText('pi_teacher_name', c.teacher_name);
            setText('pi_teacher_type', c.teacher_type_label);
            setText('pi_category',      c.category);

            // ── Pricing ──
            const basePriceNum = p.base_price != null ? parseFloat(p.base_price) : null;
            const priceVal = basePriceNum != null ? `${basePriceNum.toFixed(2)}` : '—';
            setText('pi_base_price',        priceVal + ' ' + (p.currency || ''));
            setText('pi_package_name',      p.package_name || '-');
            setText('pi_level_count',       p.level_count ?? p.levels_count ?? '-');
            const levelPriceNum = p.level_price != null ? parseFloat(p.level_price) : null;
            setText('pi_level_price',       levelPriceNum != null ? levelPriceNum.toFixed(2) + ' ' + (p.currency || '') : '-');
            setText('pi_covered_levels',    Array.isArray(p.covered_levels) && p.covered_levels.length ? p.covered_levels.join(', ') : '-');
            setText('pi_pricing_plan_type', p.pricing_plan_type);

            let finalPriceNum = p.net_price != null ? parseFloat(p.net_price) : basePriceNum;

            const discountWrapper = document.getElementById('pi_discount_wrapper');
            if (p.has_discount_plan) {
                setText('pi_discount_name', p.discount_plan_name);
                setText('pi_discount_type', p.discount_plan_type);
                const discVal = p.discount_plan_type === 'percentage'
                    ? `${p.discount_plan_value}%`
                    : `${p.discount_plan_value}`;
                setText('pi_discount_value', discVal);
                discountWrapper?.classList.remove('d-none');

                if (p.net_price == null && basePriceNum != null) {
                    const dVal = parseFloat(p.discount_plan_value) || 0;
                    if (p.discount_plan_type === 'percentage') {
                        finalPriceNum = basePriceNum - (basePriceNum * (dVal / 100));
                    } else {
                        finalPriceNum = basePriceNum - dVal;
                    }
                    if (finalPriceNum < 0) finalPriceNum = 0;
                }
            } else {
                discountWrapper?.classList.add('d-none');
            }

            const referralWrapper = document.getElementById('pi_referral_discount_wrapper');
            if (p.has_referral_discount) {
                setText('pi_referral_discount_type', p.referral_discount_type);
                const referralVal = p.referral_discount_type === 'percentage'
                    ? `${p.referral_discount_value}%`
                    : `${p.referral_discount_value}`;
                setText('pi_referral_discount_value', referralVal);
                setText('pi_referral_from', p.referral_from || '—');
                referralWrapper?.classList.remove('d-none');

                if (finalPriceNum != null) {
                    const referralDiscount = parseFloat(p.referral_discount_value) || 0;
                    if (p.referral_discount_type === 'percentage') {
                        finalPriceNum = finalPriceNum - (finalPriceNum * (referralDiscount / 100));
                    } else {
                        finalPriceNum = finalPriceNum - referralDiscount;
                    }
                    if (finalPriceNum < 0) finalPriceNum = 0;
                }
            } else {
                referralWrapper?.classList.add('d-none');
            }

            const referrerWrapper = document.getElementById('referrer_referrals_wrapper');
            const referrerList = document.getElementById('referrer_referrals_list');
            let hasReferralRewards = false;
            if (referrerWrapper && referrerList) {
                referrerList.innerHTML = '';
                const rewards = Array.isArray(p.referrer_referrals)
                    ? p.referrer_referrals.filter((reward) => reward.can_use !== false)
                    : [];
                hasReferralRewards = rewards.length > 0;
                if (rewards.length) {
                    referrerList.insertAdjacentHTML('beforeend', `
                        <label class="form-check d-flex align-items-center gap-2 mb-2">
                            <input class="form-check-input referral-reward-option" type="radio" name="referral_discount_id" value="" checked>
                            <span class="form-check-label small">No referral reward</span>
                        </label>
                    `);
                    rewards.forEach((reward) => {
                        const value = reward.discount_type === 'percentage'
                            ? `${reward.discount_value}%`
                            : `${reward.discount_value}`;
                        const label = reward.source_type === 'referred'
                            ? `Referral from ${reward.referrer_name || 'Unknown'}`
                            : `Reward from ${reward.referred_name || 'Unknown'}`;
                        referrerList.insertAdjacentHTML('beforeend', `
                            <label class="form-check d-flex align-items-center gap-2 mb-2">
                                <input class="form-check-input referral-reward-option" type="radio" name="referral_discount_id"
                                    value="${reward.id}" data-discount-type="${reward.discount_type}" data-discount-value="${reward.discount_value}">
                                <span class="form-check-label small">
                                    ${value} - ${label}
                                </span>
                            </label>
                        `);
                    });
                    referrerWrapper.classList.remove('d-none');
                } else {
                    referrerWrapper.classList.add('d-none');
                }
            }

            const referralPromoInput = document.getElementById('referral_promo_code');
            const referralPromoFeedback = document.getElementById('referral_promo_feedback');
            const canUseReferralPromo = !!(p.can_use_referral_promo_code && !p.existing_invoice);
            if (referralPromoWrapper && referralPromoInput && referralPromoFeedback) {
                referralPromoInput.value = '';
                referralPromoFeedback.innerHTML = '';
                if (canUseReferralPromo) {
                    referralPromoWrapper.classList.remove('d-none');
                } else {
                    referralPromoWrapper.classList.add('d-none');
                }
            }

            window.invoicePricingState = {
                baseNetPrice: finalPriceNum || 0,
                promo: p.has_promocode ? {
                    type: p.promocode_type,
                    value: parseFloat(p.promocode_value) || 0,
                    code: p.promocode_code || '',
                    source: 'existing',
                } : null,
                referralPromo: null,
                existingInvoice: !!p.existing_invoice,
                existingNetPrice: p.existing_invoice ? p.final_net_price : null,
                remainingPrice: p.remaining_price ?? null,
                previewReferral: !!p.has_referral_discount,
            };
            if (referralChoiceWrapper) {
                if (hasReferralRewards && canUseReferralPromo) {
                    referralChoiceWrapper.classList.remove('d-none');
                    setReferralSource('reward');
                } else {
                    referralChoiceWrapper.classList.add('d-none');
                    if (hasReferralRewards) {
                        setReferralSource('reward');
                    } else if (canUseReferralPromo) {
                        setReferralSource('promo');
                    }
                }
            }
            renderPricingState();
        }

        function updateFinalPriceWithSelectedReferral() {
            renderPricingState();
        }

        document.addEventListener('change', function (event) {
            if (event.target.matches('.referral-source-option')) {
                setReferralSource(event.target.value);
            }

            if (event.target.matches('.referral-reward-option')) {
                if (event.target.value) {
                    const referralPromoInput = document.getElementById('referral_promo_code');
                    const referralPromoFeedback = document.getElementById('referral_promo_feedback');
                    window.invoicePricingState.referralPromo = null;
                    if (referralPromoInput) referralPromoInput.value = '';
                    if (referralPromoFeedback) referralPromoFeedback.innerHTML = '';
                }
                updateFinalPriceWithSelectedReferral();
            }
        });

        async function loadPreviewData(studentId, courseId, courseType, invoiceId = '') {
            showPreviewLoading();
            setPricingAvailability('checking', 'Checking pricing plan availability...');
            try {
                const params = new URLSearchParams({
                    student_id: studentId,
                    staff_scheduleds_id: courseId,
                    type: courseType === 'track' ? 'track' : 'product',
                });
                if (invoiceId) {
                    params.set('invoice_id', invoiceId);
                }
                if (!invoiceId && packageSelect?.value) {
                    params.set('package_id', packageSelect.value);
                }
                const res = await fetch(`${previewEndpoint}?${params}`, {
                    headers: { 'Accept': 'application/json' }
                });
                const data = await res.json().catch(() => null);
                if (!res.ok) {
                    throw new Error((data && (data.error || data.message)) || 'Pricing plan combination is not available.');
                }
                populatePreview(data);
                setPricingAvailability('available');
                showPreviewContent();
            } catch (e) {
                console.error('Preview load error:', e);
                setPricingAvailability('unavailable', e.message || 'Pricing plan combination is not available.');
                showPreviewError();
            }
        }

        if (modal && form && studentNameDisplay) {
            modal.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget;

                form.reset();
                document.getElementById('invoice_img_wrapper').classList.add('d-none');
                referralChoiceWrapper?.classList.add('d-none');
                document.getElementById('referrer_referrals_wrapper')?.classList.add('d-none');
                const referrerList = document.getElementById('referrer_referrals_list');
                if (referrerList) referrerList.innerHTML = '';
                document.getElementById('treasury_wrapper')?.classList.add('d-none');
                document.getElementById('promo_feedback').innerHTML = '';
                window.invoicePricingState = {
                    baseNetPrice: 0,
                    promo: null,
                    referralPromo: null,
                    existingInvoice: false,
                    existingNetPrice: null,
                    remainingPrice: null,
                    previewReferral: false,
                };
                setPricingAvailability('checking', 'Checking pricing plan availability...');

                const treasurySelect = document.getElementById('treasury_id');
                const treasuryHelpText = document.getElementById('treasury_help_text');
                const gatewayHelpText = document.getElementById('payment_gateway_help_text');
                if (treasurySelect) {
                    treasurySelect.required = false;
                    treasurySelect.innerHTML = '<option value="">Select treasury</option>';
                }
                if (treasuryHelpText) {
                    treasuryHelpText.textContent = 'Choose the treasury that will receive this InstaPay transfer.';
                }
                if (gatewayHelpText) {
                    gatewayHelpText.textContent = '';
                }

                const studentId = button.getAttribute('data-student-id');
                const courseId = button.getAttribute('data-course-id');
                const courseType = button.getAttribute('data-course-type');
                const productId = button.getAttribute('data-product-id');
                const trackTypeId = button.getAttribute('data-track-type-id') || '';
                const studentName = button.getAttribute('data-student-name');
                const mode = button.getAttribute('data-mode') || 'create';
                const action = button.getAttribute('data-action') || defaultInvoiceAction;
                const invoiceId = button.getAttribute('data-invoice-id') || '';
                const currentPaymentType = button.getAttribute('data-payment-type') || '';
                const currentPaymentGateway = button.getAttribute('data-payment-gateway') || '';
                const currentTreasuryId = button.getAttribute('data-treasury-id') || '';
                const selectedPackageId = button.getAttribute('data-selected-package-id') || '';
                const paymentTypeTextMap = {
                    online: 'Online payment',
                    instapay: 'InstaPay'
                };

                form.dataset.action = action;
                formModeInput.value = mode;
                invoiceIdInput.value = invoiceId;

                form.querySelector('[name="student_id"]').value = studentId;
                form.querySelector('[name="staff_scheduleds_id"]').value = courseId;
                form.querySelector('[name="type"]').value = courseType === 'track' ? 'track' : 'product';
                form.querySelector('[name="product_id"]').value = productId;
                form.querySelector('[name="track_type_id"]').value = trackTypeId;
                if (packageSelect) {
                    packageSelect.value = selectedPackageId;
                    if (packageHiddenInput) {
                        packageHiddenInput.value = selectedPackageId;
                    }
                }
                syncLevelsCountFromPackage();

                if (mode === 'change') {
                    invoiceModalTitle.textContent = 'Change payment for';
                    submitBtnLabel.textContent = 'Change payment';
                    depositWrapper.classList.add('d-none');
                    promoWrapper.classList.add('d-none');
                    referralChoiceWrapper?.classList.add('d-none');
                    referralPromoWrapper?.classList.add('d-none');
                    currentPaymentTypeWrapper.classList.remove('d-none');
                    currentPaymentTypeLabel.textContent = paymentTypeTextMap[currentPaymentType] || currentPaymentType || 'Unknown';
                    const depositInput = form.querySelector('input[name="deposite"]');
                    if (depositInput) depositInput.value = '';
                    const promoInput = document.getElementById('promocode');
                    if (promoInput) promoInput.value = '';
                    const referralPromoInput = document.getElementById('referral_promo_code');
                    if (referralPromoInput) referralPromoInput.value = '';
                } else {
                    invoiceModalTitle.textContent = 'Create invoice for';
                    submitBtnLabel.textContent = 'Create invoice';
                    depositWrapper.classList.remove('d-none');
                    promoWrapper.classList.remove('d-none');
                    currentPaymentTypeWrapper.classList.add('d-none');
                    currentPaymentTypeLabel.textContent = 'N/A';
                }

                studentNameDisplay.textContent = studentName;

                if (treasurySelect) {
                    treasurySelect.dataset.selected = currentTreasuryId;
                }

                const paymentTypeField = document.getElementById('payment_type');
                if (paymentTypeField) {
                    paymentTypeField.value = currentPaymentType;
                    paymentTypeField.dispatchEvent(new Event('change'));
                }

                const paymentGatewayField = document.getElementById('payment_gateway');
                if (paymentGatewayField) {
                    paymentGatewayField.dataset.selected = currentPaymentGateway;
                }

                syncLevelsCountFromPackage();

                // ── Load preview data ────────────────────────────────────────
                if (studentId && courseId) {
                    loadPreviewData(studentId, courseId, courseType, invoiceId);
                }
            });
        }




        const paymentType = document.getElementById('payment_type');
        if (paymentType) {
            paymentType.addEventListener('change', async function () {
                const imageWrapper = document.getElementById('invoice_img_wrapper');
                const imageInput = document.getElementById('invoice_img');
                const gatewayWrapper = document.getElementById('payment_gateway_wrapper');
                const gatewaySelect = document.getElementById('payment_gateway');
                const gatewayHelpText = document.getElementById('payment_gateway_help_text');
                const treasuryWrapper = document.getElementById('treasury_wrapper');
                const treasurySelect = document.getElementById('treasury_id');
                const treasuryHelpText = document.getElementById('treasury_help_text');

                if (!imageWrapper || !imageInput) return;

                if (this.value === 'instapay') {
                    imageWrapper.classList.remove('d-none');
                    imageInput.required = true;
                    gatewayWrapper?.classList.add('d-none');
                    if (gatewaySelect) {
                        gatewaySelect.value = '';
                        gatewaySelect.required = false;
                        syncPaymentDetails(gatewaySelect, gatewayHelpText);
                    }
                    treasuryWrapper?.classList.remove('d-none');

                    if (!treasurySelect) return;

                    treasurySelect.required = false;
                    treasurySelect.disabled = true;
                    treasurySelect.innerHTML = '<option value="">Loading treasuries...</option>';

                    try {
                        const response = await fetch(treasuryEndpoint, {
                            headers: { 'Accept': 'application/json' }
                        });
                        const payload = await response.json();

                        if (!response.ok) {
                            throw new Error(payload.message || payload.error || 'Could not load treasuries');
                        }

                        const treasuries = Array.isArray(payload.data) ? payload.data : [];

                        treasurySelect.innerHTML = '<option value="">Select treasury</option>';

                        if (!treasuries.length) {
                            treasurySelect.innerHTML = '<option value="">No manual bank treasuries available</option>';
                            if (treasuryHelpText) {
                                treasuryHelpText.textContent = 'No active manual bank treasury is available right now.';
                            }
                            return;
                        }

                        treasuries.forEach(treasury => {
                            const option = document.createElement('option');
                            option.value = treasury.id;
                            option.textContent = treasury.label || treasury.name;
                            fillPaymentOption(option, treasury);
                            treasurySelect.appendChild(option);
                        });

                        if (treasurySelect.dataset.selected) {
                            treasurySelect.value = treasurySelect.dataset.selected;
                        }

                        syncPaymentDetails(treasurySelect, treasuryHelpText, 'Choose the manual bank treasury that will receive this transfer.');
                    } catch (error) {
                        treasurySelect.innerHTML = '<option value="">Could not load treasuries</option>';
                        toastr.error(error.message || 'Could not load InstaPay treasuries');
                    } finally {
                        treasurySelect.disabled = false;
                    }
                } else {
                    imageWrapper.classList.add('d-none');
                    imageInput.required = false;
                    imageInput.value = '';
                    if (this.value === 'online') {
                        gatewayWrapper?.classList.remove('d-none');
                        if (gatewaySelect) {
                            gatewaySelect.required = true;
                            if (gatewaySelect.options.length <= 1) {
                                gatewaySelect.innerHTML = '<option value="">Loading payment gateways...</option>';

                                try {
                                    const response = await fetch(paymentGatewayEndpoint, {
                                        headers: { 'Accept': 'application/json' }
                                    });
                                    const payload = await response.json();

                                    if (!response.ok) {
                                        throw new Error(payload.message || payload.error || 'Could not load payment gateways');
                                    }

                                    const gateways = Array.isArray(payload.data) ? payload.data : [];
                                    gatewaySelect.innerHTML = '<option value="">Select payment gateway</option>';

                                    gateways.forEach(gateway => {
                                    const option = document.createElement('option');
                                    option.value = gateway.value;
                                    option.textContent = gateway.label;
                                    fillPaymentOption(option, gateway);
                                    gatewaySelect.appendChild(option);
                                });

                                if (gatewaySelect.dataset.selected) {
                                    gatewaySelect.value = gatewaySelect.dataset.selected;
                                }
                                syncPaymentDetails(gatewaySelect, gatewayHelpText);
                            } catch (error) {
                                gatewaySelect.innerHTML = '<option value="">Could not load payment gateways</option>';
                                toastr.error(error.message || 'Could not load payment gateways');
                            }
                            } else {
                                syncPaymentDetails(gatewaySelect, gatewayHelpText);
                            }
                        }
                    } else {
                        gatewayWrapper?.classList.add('d-none');
                        if (gatewaySelect) {
                            gatewaySelect.value = '';
                            gatewaySelect.required = false;
                            syncPaymentDetails(gatewaySelect, gatewayHelpText);
                        }
                    }
                    treasuryWrapper?.classList.add('d-none');

                    if (treasurySelect) {
                        treasurySelect.required = false;
                        treasurySelect.disabled = false;
                        treasurySelect.innerHTML = '<option value="">Select treasury</option>';
                        syncPaymentDetails(treasurySelect, treasuryHelpText, 'Choose the treasury that will receive this InstaPay transfer.');
                    }
                }
            });
        }

        document.getElementById('treasury_id')?.addEventListener('change', function () {
            syncPaymentDetails(this, document.getElementById('treasury_help_text'), 'Choose the manual bank treasury that will receive this transfer.');
        });

        document.getElementById('payment_gateway')?.addEventListener('change', function () {
            syncPaymentDetails(this, document.getElementById('payment_gateway_help_text'));
        });

        if (packageSelect) {
            packageSelect.addEventListener('change', function () {
                syncLevelsCountFromPackage();
                const studentId = form?.querySelector('[name="student_id"]')?.value || '';
                const courseId = form?.querySelector('[name="staff_scheduleds_id"]')?.value || '';
                const courseType = form?.querySelector('[name="type"]')?.value || 'track';
                const invoiceId = form?.querySelector('[name="invoice_id"]')?.value || '';

                if (studentId && courseId && !invoiceId) {
                    loadPreviewData(studentId, courseId, courseType, invoiceId);
                }
            });
        }




        const checkPromoBtn = document.getElementById('check_promo_btn');
        const promoInput = document.getElementById('promocode');
        const promoFeedback = document.getElementById('promo_feedback');

        if (checkPromoBtn && promoInput && promoFeedback) {
            promoInput.addEventListener('input', function () {
                if (!this.value.trim()) {
                    window.invoicePricingState.promo = null;
                    promoFeedback.innerHTML = '';
                    renderPricingState();
                }
            });

            checkPromoBtn.addEventListener('click', function () {
                const code = promoInput.value.trim();

                if (!code) {
                    window.invoicePricingState.promo = null;
                    renderPricingState();
                    promoFeedback.innerHTML = '<span class="text-danger">Enter a promo code</span>';
                    toastr.warning('Promo code empty');
                    return;
                }

                fetch(`/invoices/check-promocode/${encodeURIComponent(code)}`, {
                    headers: { 'Accept': 'application/json' }
                })
                    .then(async r => {
                        const data = await r.json().catch(() => null);

                        if (!r.ok) {
                            const msg = (data && (data.error || data.message)) || `Request failed (${r.status})`;
                            promoFeedback.innerHTML = `<span class="text-danger">${msg}</span>`;
                            toastr.warning('Promo code rejected', { code, status: r.status, data });
                            window.invoicePricingState.promo = null;
                            renderPricingState();
                            return;
                        }

                        window.invoicePricingState.promo = {
                            type: data.type,
                            value: parseFloat(data.discount) || 0,
                            code,
                            source: 'entered',
                        };
                        renderPricingState();
                    })
                    .catch(err => {
                        promoFeedback.innerHTML = '<span class="text-danger">Could not validate promo code. Try again later.</span>';
                    });
            });
        }

        const checkReferralPromoBtn = document.getElementById('check_referral_promo_btn');
        const referralPromoInput = document.getElementById('referral_promo_code');
        const referralPromoFeedback = document.getElementById('referral_promo_feedback');

        if (checkReferralPromoBtn && referralPromoInput && referralPromoFeedback) {
            referralPromoInput.addEventListener('input', function () {
                if (!this.value.trim()) {
                    window.invoicePricingState.referralPromo = null;
                    referralPromoFeedback.innerHTML = '';
                    renderPricingState();
                }
            });

            checkReferralPromoBtn.addEventListener('click', function () {
                const code = referralPromoInput.value.trim();
                const studentId = form?.querySelector('[name="student_id"]')?.value || '';

                if (!code) {
                    window.invoicePricingState.referralPromo = null;
                    renderPricingState();
                    referralPromoFeedback.innerHTML = '<span class="text-danger">Enter a referral promo code</span>';
                    toastr.warning('Referral promo code empty');
                    return;
                }

                if (!studentId) {
                    referralPromoFeedback.innerHTML = '<span class="text-danger">Student is missing.</span>';
                    toastr.warning('Student is missing');
                    return;
                }

                fetch(`/invoices/check-referral-promo-code/${encodeURIComponent(code)}?student_id=${encodeURIComponent(studentId)}`, {
                    headers: { 'Accept': 'application/json' }
                })
                    .then(async r => {
                        const data = await r.json().catch(() => null);

                        if (!r.ok) {
                            const msg = (data && (data.error || data.message)) || `Request failed (${r.status})`;
                            referralPromoFeedback.innerHTML = `<span class="text-danger">${msg}</span>`;
                            window.invoicePricingState.referralPromo = null;
                            renderPricingState();
                            return;
                        }

                        window.invoicePricingState.referralPromo = {
                            type: data.type,
                            value: parseFloat(data.discount) || 0,
                            code,
                            from: data.referrer_name ? `Promo code from ${data.referrer_name}` : 'Referral promo code',
                        };
                        const noReferralOption = document.querySelector('input[name="referral_discount_id"][value=""]');
                        if (noReferralOption) noReferralOption.checked = true;
                        setReferralSource('promo');
                        referralPromoFeedback.innerHTML = `<span class="text-success">${data.success || 'Referral promo code applied.'}</span>`;
                        renderPricingState();
                    })
                    .catch(() => {
                        referralPromoFeedback.innerHTML = '<span class="text-danger">Could not validate referral promo code. Try again later.</span>';
                    });
            });
        }


        if (form) {
            form.addEventListener('submit', function (e) {
                e.preventDefault();

                const paymentType = document.getElementById('payment_type');
                const invoiceImg = document.getElementById('invoice_img');
                const submitBtn = document.getElementById('submit_btn');
                const spinner = submitBtn ? submitBtn.querySelector('.spinner-border') : null;

                if (window.invoiceAvailabilityState && !window.invoiceAvailabilityState.available) {
                    toastr.error('Pricing plan combination is not available.');
                    return;
                }

                if (paymentType && paymentType.value === 'instapay' && invoiceImg && !invoiceImg.files.length) {
                    toastr.error('Please upload the transfer receipt image');
                    return;
                }

                const treasurySelect = document.getElementById('treasury_id');
                if (paymentType && paymentType.value === 'instapay' && treasurySelect && !treasurySelect.value) {
                    toastr.error('Please select the manual bank treasury');
                    return;
                }

                if (!submitBtn || !spinner) return;

                submitBtn.disabled = true;
                spinner.classList.remove('d-none');

                const formData = new FormData(form);
                const selectedReferral = document.querySelector('input[name="referral_discount_id"]:checked');
                formData.set('referral_discount_id', selectedReferral?.value || '');
                if (!window.invoicePricingState.referralPromo) {
                    formData.set('referral_promo_code', '');
                }

                fetch(form.dataset.action || defaultInvoiceAction, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    }
                })
                    .then(async r => {
                        const raw = await r.text();
                        if (!r.ok) throw new Error(raw || 'Request failed');
                        return JSON.parse(raw);
                    })
                    .then(res => {
                        if (res.status === 'success') {
                            if (res.payment) {
                                toastr.success(res.message || 'Invoice saved successfully. The student can complete payment from the student portal.');
                                const modalInstance = bootstrap.Modal.getInstance(document.getElementById('request_invoice_modal'));
                                modalInstance?.hide();
                                location.reload();
                            } else {
                                toastr.success((res.message || 'Invoice saved successfully!') + ' Invoice ID: ' + res.invoice_id);
                                const modalInstance = bootstrap.Modal.getInstance(document.getElementById('request_invoice_modal'));
                                modalInstance?.hide();
                                location.reload();
                            }
                        } else if (res.error) {
                            toastr.error(res.error);
                        }
                    })
                    .catch(err => {
                        toastr.error(err.message || 'An error occurred');
                    })
                    .finally(() => {
                        submitBtn.disabled = !(window.invoiceAvailabilityState?.available ?? true);
                        spinner.classList.add('d-none');
                    });
            });
        }

    });
</script>