@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    @php
        $isEdit = isset($purchase);
        $requestedOrderType = request('type') === 'purchase' || request('type') === 'po' ? 'purchase' : 'sale';
        $initialInvoiceType = old('invoice_type', $purchase->invoice_type ?? $requestedOrderType);
        $initialPartyType = old('party_type', $purchase->party_type ?? ($initialInvoiceType === 'purchase' ? 'company' : 'student'));
        $initialPartyType = $initialPartyType === 'employee' ? 'staff' : $initialPartyType;
        $isSaleOrder = $initialInvoiceType === 'sale';
        $isStudentSale = $isSaleOrder && $initialPartyType === 'student';
        $linkedStudentInvoices = collect();
        $linkedPurchaseInvoices = collect();

        if ($isEdit) {
            $linkedStudentInvoices = $purchase->studentInvoices
                ->merge($purchase->details->pluck('studentInvoice')->filter())
                ->when($purchase->studentInvoice, fn ($invoices) => $invoices->push($purchase->studentInvoice))
                ->unique('id')
                ->values();
            $linkedPurchaseInvoices = $purchase->purchaseInvoices->when(
                $purchase->purchaseInvoice,
                fn ($invoices) => $invoices->push($purchase->purchaseInvoice)
            )->unique('id')->values();
        }
        $hasInvoice = $isEdit && (
            $purchase->purchase_invoice_id
            || $purchase->student_invoice_id
            || $purchase->details->contains(fn ($detail) => !empty($detail->student_invoice_id))
            || $linkedStudentInvoices->isNotEmpty()
            || $linkedPurchaseInvoices->isNotEmpty()
        );
        $canAddOrderInvoice = $isEdit && $isSaleOrder && !$isStudentSale && !$hasInvoice && $linkedPurchaseInvoices->isEmpty();
        $canAddPurchaseInvoice = $isEdit && !$isSaleOrder && !$hasInvoice && $linkedPurchaseInvoices->isEmpty();
        $statusClass = $hasInvoice ? 'ui-pill--success' : 'ui-pill--warn';
        $statusLabel = $hasInvoice ? 'Invoiced' : 'Pending';
        $selectedStaffIds = old('staff_ids', $isEdit ? $purchase->requestedStaffs->pluck('id')->all() : []);
        $selectedVendorIds = old('vendor_ids', $isEdit ? $purchase->vendors->pluck('id')->all() : []);
        $selectedStaffPartyId = old('staff_party_id');
        if (!$selectedStaffPartyId && $isEdit && $initialPartyType === 'staff') {
            $selectedStaffPartyId = ($staffs ?? collect())->first(function ($staff) use ($purchase) {
                $staffName = trim((string) ($staff->full_name ?: trim(($staff->first_name ?? '') . ' ' . ($staff->last_name ?? ''))));
                return $staffName !== '' && $staffName === trim((string) $purchase->name);
            })?->id;
        }
        $oldDetails = old('details', $isEdit
            ? $purchase->details->map(fn ($detail) => [
                'product_name' => $detail->product_name,
                'category_name' => $detail->category_name,
                'booking_id' => $detail->booking_id,
                'course_id' => $detail->course_id,
                'serial_number' => $detail->serial_number,
                'part_no' => $detail->part_no,
                'price' => $detail->price,
                'quantity' => $detail->quantity,
                'tax_rate' => $detail->tax_rate,
            ])->all()
            : [
                ['product_name' => '', 'price' => '', 'quantity' => 1, 'tax_rate' => 14],
                ['product_name' => '', 'price' => '', 'quantity' => 1, 'tax_rate' => 14],
            ]);
        $selectedBookingIds = collect($oldDetails)->pluck('booking_id')->filter()->values()->all();
        $backRoute = $initialInvoiceType === 'purchase' ? route('purchase.orders.index') : route('purchase.index');
        $backLabel = $initialInvoiceType === 'purchase' ? 'Back to Purchase Orders' : 'Back to Sales Orders';
    @endphp

    <style>
        .invoice-create-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
            overflow: hidden;
        }

        .invoice-create-head {
            padding: 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .invoice-create-head__main {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            min-width: 0;
        }

        .invoice-create-head__icon {
            width: 52px;
            height: 52px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            font-size: 1.35rem;
            flex-shrink: 0;
        }

        .invoice-create-head__title {
            color: #111827;
            font-size: 1.12rem !important;
            font-weight: 950;
            margin: 0;
            line-height: 1.25;
        }

        .invoice-create-head__sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin: 0.2rem 0 0;
        }

        .invoice-create-body {
            padding: 1.25rem;
        }

        .form-section {
            border: 1px solid #eef2f7;
            border-radius: 20px;
            background: #fff;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .form-section__head {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding-bottom: 0.9rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__icon {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f8fafc;
            color: #2563eb;
            border: 1px solid #e5e7eb;
            flex-shrink: 0;
        }

        .form-section__title {
            color: #111827;
            font-size: 1rem !important;
            font-weight: 900;
            margin: 0;
        }

        .form-section__sub {
            color: #64748b;
            font-size: 0.86rem;
            line-height: 1.5;
            margin: 0.15rem 0 0;
        }

        .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .asset-col-12 { grid-column: span 12 / span 12; }
        .asset-col-8 { grid-column: span 8 / span 8; }
        .asset-col-6 { grid-column: span 6 / span 6; }
        .asset-col-4 { grid-column: span 4 / span 4; }
        .asset-col-3 { grid-column: span 3 / span 3; }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 750;
            color: #374151;
            font-size: 0.9rem;
        }

        .asset-input,
        .asset-select,
        .invoice-create-page .form-control,
        .invoice-create-page .form-select {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            padding: 0.68rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none !important;
        }

        .asset-input:focus,
        .asset-select:focus,
        .invoice-create-page .form-control:focus,
        .invoice-create-page .form-select:focus {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .invoice-create-page .select2-container {
            width: 100% !important;
            display: block;
        }

        .invoice-create-page .select2-container--default .select2-selection--multiple {
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            background: #fff;
            padding: 0.3rem 0.5rem;
            display: flex;
            align-items: center;
        }

        .invoice-create-page .select2-container--default.select2-container--focus .select2-selection--multiple,
        .invoice-create-page .select2-container--default.select2-container--open .select2-selection--multiple {
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .invoice-create-page .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.35rem;
            padding: 0;
            margin: 0;
            min-height: 30px;
            width: 100%;
        }

        .invoice-create-page .select2-container--default .select2-selection--multiple .select2-selection__choice {
            border: 1px solid #bfdbfe;
            background: #eff6ff;
            color: #1d4ed8;
            border-radius: 999px;
            padding: 0.22rem 0.55rem 0.22rem 1.45rem;
            font-size: 0.78rem;
            font-weight: 800;
            margin: 0;
        }

        .invoice-create-page .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            border: 0;
            color: #1d4ed8;
            left: 0.45rem;
            top: 50%;
            transform: translateY(-50%);
        }

        .invoice-create-page .select2-container--default .select2-search--inline .select2-search__field {
            min-height: 28px;
            margin: 0;
            font-size: 0.86rem;
            color: #111827;
        }

        .input-shell {
            position: relative;
        }

        .input-shell .input-icon {
            position: absolute;
            left: 0.85rem;
            top: 50%;
            transform: translateY(-50%);
            color: #64748b;
            font-size: 0.95rem;
            z-index: 2;
            pointer-events: none;
        }

        .input-shell .asset-input,
        .input-shell .asset-select {
            padding-left: 2.35rem;
        }

        .invoice-kind {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.75rem;
        }

        .invoice-kind input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .invoice-kind__option {
            border: 1px solid #dbe2ea;
            border-radius: 18px;
            padding: 0.95rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            min-height: 76px;
            transition: 0.18s ease;
        }

        .invoice-kind__icon {
            width: 42px;
            height: 42px;
            border-radius: 15px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f8fafc;
            color: #64748b;
            border: 1px solid #eef2f7;
            flex-shrink: 0;
        }

        .invoice-kind__title {
            display: block;
            color: #111827;
            font-weight: 900;
            line-height: 1.25;
        }

        .invoice-kind__sub {
            display: block;
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 650;
            margin-top: 0.15rem;
        }

        .invoice-kind input:checked + .invoice-kind__option {
            border-color: #2563eb;
            background: #eff6ff;
            box-shadow: 0 12px 26px rgba(37, 99, 235, 0.11);
        }

        .invoice-kind input:checked + .invoice-kind__option .invoice-kind__icon {
            background: #2563eb;
            color: #fff;
            border-color: #2563eb;
        }

        .vat-control {
            border: 1px solid #dbe2ea;
            border-radius: 18px;
            min-height: 48px;
            padding: 0.65rem 0.85rem;
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            background: #fff;
            color: #374151;
            font-weight: 850;
            transition: 0.18s ease;
        }

        .vat-control input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .vat-control__box {
            width: 38px;
            height: 24px;
            border-radius: 999px;
            background: #e5e7eb;
            border: 1px solid #d1d5db;
            position: relative;
            flex-shrink: 0;
            transition: 0.18s ease;
        }

        .vat-control__box::after {
            content: "";
            width: 18px;
            height: 18px;
            border-radius: 999px;
            background: #fff;
            position: absolute;
            left: 2px;
            top: 2px;
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
            transition: 0.18s ease;
        }

        .vat-control input:checked + .vat-control__box {
            background: #2563eb;
            border-color: #2563eb;
        }

        .vat-control input:checked + .vat-control__box::after {
            transform: translateX(14px);
        }

        .vat-control:has(input:checked) {
            border-color: #bfdbfe;
            background: #eff6ff;
            color: #1d4ed8;
        }

        .invoice-items {
            width: 100%;
            overflow-x: auto;
            border: 1px solid #eef2f7;
            border-radius: 18px;
        }

        .invoice-items table {
            min-width: 880px;
            margin: 0;
        }

        .invoice-items thead th {
            background: #f8fafc;
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 850;
            border-bottom: 1px solid #eef2f7;
            white-space: nowrap;
        }

        .invoice-items tbody td {
            border-color: #eef2f7;
            vertical-align: middle;
        }

        .invoice-items .form-control {
            min-height: 38px;
            border-radius: 12px !important;
            font-size: 0.86rem;
        }

        .invoice-row-total,
        .money {
            font-weight: 850;
            color: #111827;
            font-variant-numeric: tabular-nums;
        }

        .summary-panel,
        .journal-panel {
            border: 1px solid #eef2f7;
            border-radius: 18px;
            background: #fff;
            overflow: hidden;
        }

        .summary-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.85rem 1rem;
            border-bottom: 1px solid #eef2f7;
            color: #475569;
            font-weight: 750;
        }

        .summary-row:last-child {
            border-bottom: 0;
        }

        .summary-row--total {
            background: #f8fafc;
            color: #111827;
            font-weight: 950;
        }

        .journal-panel__head {
            padding: 0.9rem 1rem;
            background: #111827;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            font-weight: 850;
        }

        .journal-panel__body {
            overflow-x: auto;
        }

        .journal-panel table {
            min-width: 720px;
            margin: 0;
        }

        .journal-panel th {
            background: #f8fafc;
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 850;
            border-bottom: 1px solid #eef2f7;
        }

        .journal-panel td {
            border-color: #eef2f7;
            vertical-align: middle;
            font-weight: 750;
        }

        .journal-panel tfoot td {
            background: #f8fafc;
            font-weight: 900;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.38rem 0.78rem;
            font-size: 0.76rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--info {
            background: #eef2ff;
            color: #4338ca;
        }

        .ui-pill--success {
            background: #f0fdf4;
            color: #166534;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
            padding: 1rem 1.25rem;
            border-top: 1px solid #eef2f7;
            background: #f8fafc;
        }

        .asset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            min-height: 42px;
            border-radius: 999px;
            padding: 0.65rem 1rem;
            font-size: 0.86rem;
            font-weight: 850;
            text-decoration: none;
            transition: 0.18s ease;
            border: 1px solid transparent;
            white-space: nowrap;
            cursor: pointer;
        }

        .asset-btn--primary {
            background: #2563eb;
            color: #fff;
            border-color: #2563eb;
        }

        .asset-btn--primary:hover {
            background: #1d4ed8;
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18);
        }

        .asset-btn--secondary {
            background: #fff;
            color: #374151;
            border-color: #dbe2ea;
        }

        .asset-btn--secondary:hover {
            background: #f8fafc;
            color: #111827;
        }

        .asset-btn--soft {
            background: #eff6ff;
            color: #1d4ed8;
            border-color: #bfdbfe;
        }

        @media (max-width: 991.98px) {
            .asset-col-8,
            .asset-col-6,
            .asset-col-4,
            .asset-col-3 {
                grid-column: span 12 / span 12;
            }
        }

        @media (max-width: 575.98px) {
            .invoice-create-head,
            .invoice-create-body,
            .form-section,
            .form-actions {
                padding: 1rem;
            }

            .invoice-kind {
                grid-template-columns: 1fr;
            }

            .form-actions .asset-btn {
                width: 100%;
            }
        }
    </style>

    <div class="container-fluid app-bg invoice-create-page">
        <div class="page-shell">
            <div class="space-y-4">
                <x-page-title
                    title="{{ $isEdit ? 'Update Order' : ($initialInvoiceType === 'purchase' ? 'Create Purchase Order' : 'Create Sales Order') }}"
                    description="{{ $isEdit ? 'Update order type, party, items, totals, and posting details.' : ($initialInvoiceType === 'purchase' ? 'Create an internal purchase order for vendor billing.' : 'Create a sales order using the finance posting flow.') }}">
                    <a href="{{ $backRoute }}" class="asset-btn asset-btn--secondary" id="pageBackLink">
                        <i class="fas fa-arrow-left"></i>
                        <span id="pageBackLabel">{{ $backLabel }}</span>
                    </a>
                </x-page-title>

                <div class="ui-card">
                    <div class="invoice-create-head">
                        <div class="invoice-create-head__main">
                            <div class="invoice-create-head__icon">
                                <i class="fas fa-file-invoice-dollar"></i>
                            </div>
                            <div>
                                <h5 class="invoice-create-head__title" id="invTitle">{{ $isEdit ? 'Update Order' : ($initialInvoiceType === 'purchase' ? 'New Purchase Order' : 'New Sales Order') }}</h5>
                                <p class="invoice-create-head__sub" id="invFormId">{{ $purchase->purchase_number ?? ($initialInvoiceType === 'purchase' ? 'PO-DRAFT' : 'SO-DRAFT') }}</p>
                            </div>
                        </div>

                        <span class="ui-pill {{ $isEdit ? $statusClass : 'ui-pill--info' }}" id="invoiceModePill">
                            <i class="fas {{ $isEdit ? ($hasInvoice ? 'fa-file-invoice' : 'fa-clock') : 'fa-bolt' }}"></i>
                            {{ $isEdit ? $statusLabel : 'Draft Mode' }}
                        </span>
                    </div>

                    <form action="{{ $isEdit ? route('purchase.update', $purchase->id) : route('purchase.store') }}" method="POST" id="purchaseOrderForm">
                        @csrf
                        @if($isEdit)
                            @method('PUT')
                        @endif
                        <input type="hidden" name="invoice_type" id="invoice_type" value="{{ $initialInvoiceType }}">

                        <div class="invoice-create-body">
                            <div class="form-section">
                                <div class="form-section__head">
                                    <div class="form-section__icon">
                                        <i class="fas fa-random"></i>
                                    </div>
                                    <div>
                                        <h6 class="form-section__title">Order Type & Party</h6>
                                        <p class="form-section__sub">Choose order type, party, dates, and cost center.</p>
                                    </div>
                                </div>

                                <div class="asset-form-grid">
                                    <div class="asset-col-12">
                                        <label class="asset-label">Order Type</label>
                                        @if($isEdit)
                                            <div class="invoice-kind__option" style="cursor: default;">
                                                <span class="invoice-kind__icon">
                                                    <i class="fas {{ $isSaleOrder ? 'fa-receipt' : 'fa-shopping-cart' }}"></i>
                                                </span>
                                                <span>
                                                    <span class="invoice-kind__title">{{ $isSaleOrder ? 'Sales Order' : 'Purchase Order' }}</span>
                                                    <span class="invoice-kind__sub">Order type is fixed after creation</span>
                                                </span>
                                            </div>
                                        @endif
                                        <div class="invoice-kind {{ $isEdit ? 'd-none' : '' }}">
                                            <label>
                                                <input type="radio" name="invoice_type_picker" value="sale" @checked($initialInvoiceType === 'sale')>
                                                <span class="invoice-kind__option">
                                                    <span class="invoice-kind__icon"><i class="fas fa-receipt"></i></span>
                                                    <span>
                                                        <span class="invoice-kind__title">Sales Order</span>
                                                        <span class="invoice-kind__sub">Choose one of the system students</span>
                                                    </span>
                                                </span>
                                            </label>
                                            <label>
                                                <input type="radio" name="invoice_type_picker" value="purchase" @checked($initialInvoiceType === 'purchase')>
                                                <span class="invoice-kind__option">
                                                    <span class="invoice-kind__icon"><i class="fas fa-shopping-cart"></i></span>
                                                    <span>
                                                        <span class="invoice-kind__title">Purchase Order</span>
                                                        <span class="invoice-kind__sub">Supplier expense and posting flow</span>
                                                    </span>
                                                </span>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="asset-col-4">
                                        <label class="asset-label">Party Type</label>
                                        <div class="input-shell">
                                            <i class="fas fa-users input-icon"></i>
                                            <select name="party_type" id="party_type" class="asset-select">
                                                <option value="student" @selected($initialPartyType === 'student')>Students</option>
                                                <option value="staff" @selected($initialPartyType === 'staff')>Employee</option>
                                                <option value="company" @selected($initialPartyType === 'company')>Company</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="asset-col-8 student-only">
                                        <label class="asset-label" id="studentLabel">Students <span class="text-danger">*</span></label>
                                        <select name="student_id" id="student_id" class="asset-select general-select" data-placeholder="Select student">
                                            <option value=""></option>
                                            @foreach (($students ?? collect()) as $student)
                                                @php
                                                    $studentName = $student->full_name ?: trim(($student->first_name ?? '') . ' ' . ($student->last_name ?? ''));
                                                    $studentMeta = collect([$student->email])->filter()->implode(' - ');
                                                @endphp
                                                <option value="{{ $student->id }}"
                                                        data-student-name="{{ $studentName }}"
                                                        @selected(old('student_id', $purchase->student_id ?? null) == $student->id)>
                                                    {{ $studentName ?: 'Student #' . $student->id }}{{ $studentMeta ? ' - ' . $studentMeta : '' }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="asset-col-8 staff-party-wrap">
                                        <label class="asset-label">Employee <span class="text-danger">*</span></label>
                                        <select name="staff_party_id" id="staff_party_id" class="asset-select general-select" data-placeholder="Select employee">
                                            <option value=""></option>
                                            @foreach ($staffs as $staff)
                                                @php
                                                    $staffName = $staff->full_name ?: trim(($staff->first_name ?? '') . ' ' . ($staff->last_name ?? ''));
                                                @endphp
                                                <option value="{{ $staff->id }}"
                                                        data-party-name="{{ $staffName }}"
                                                        @selected($selectedStaffPartyId == $staff->id)>
                                                    {{ $staffName ?: 'Staff #' . $staff->id }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <input type="hidden" name="name" id="invParty" value="{{ old('name', $purchase->name ?? '') }}">

                                    <div class="asset-col-8 party-name-wrap">
                                        <label class="asset-label" id="invPartyLabel">Company Name <span class="text-danger">*</span></label>
                                        <div class="input-shell">
                                            <i class="fas fa-building input-icon"></i>
                                            <input type="text" id="companyPartyName" class="asset-input" value="{{ old('name', $purchase->name ?? '') }}" placeholder="Enter company name">
                                        </div>
                                    </div>

                                    <div class="asset-col-4">
                                        <label class="asset-label">Invoice Date</label>
                                        <div class="input-shell">
                                            <i class="fas fa-calendar input-icon"></i>
                                            <input type="date" name="required_by" id="invDate" class="asset-input" value="{{ old('required_by', !empty($purchase->required_by) ? \Carbon\Carbon::parse($purchase->required_by)->format('Y-m-d') : now()->toDateString()) }}">
                                        </div>
                                    </div>

                                    <div class="asset-col-4">
                                        <label class="asset-label">Due Date</label>
                                        <div class="input-shell">
                                            <i class="fas fa-calendar-check input-icon"></i>
                                            <input type="date" name="due_date" id="invDue" class="asset-input" value="{{ old('due_date', !empty($purchase->due_date) ? \Carbon\Carbon::parse($purchase->due_date)->format('Y-m-d') : now()->addDays(14)->toDateString()) }}">
                                        </div>
                                    </div>

                                    <div class="asset-col-4">
                                        <label class="asset-label">Cost Center <span class="text-danger">*</span></label>
                                        <div class="input-shell">
                                            <i class="fas fa-sitemap input-icon"></i>
                                            <select name="cost_center_id" id="invCC" class="asset-select" required>
                                                <option value="">Choose cost center</option>
                                                @foreach (($costCenters ?? collect()) as $costCenter)
                                                    <option value="{{ $costCenter->id }}" @selected(old('cost_center_id', $purchase->cost_center_id ?? null) == $costCenter->id)>
                                                        {{ $costCenter->title }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="asset-col-4 purchase-only">
                                        <label class="asset-label">Vendor Link</label>
                                        <select name="vendor_ids[]" id="vendor_ids" class="asset-select general-select" data-placeholder="Select vendors" multiple>
                                            @foreach ($vendors as $vendor)
                                                <option value="{{ $vendor->id }}" @selected(in_array($vendor->id, $selectedVendorIds))>
                                                    {{ $vendor->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="asset-col-4 purchase-only">
                                        <label class="asset-label">Requested By</label>
                                        <select name="staff_ids[]" id="staff_ids" class="asset-select general-select" data-placeholder="Select staff members" multiple>
                                            @foreach ($staffs as $staff)
                                                <option value="{{ $staff->id }}" @selected(in_array($staff->id, $selectedStaffIds))>
                                                    {{ $staff->full_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-section">
                                <div class="form-section__head">
                                    <div class="form-section__icon">
                                        <i class="fas fa-list"></i>
                                    </div>
                                    <div>
                                        <h6 class="form-section__title">Order Items</h6>
                                        <p class="form-section__sub">Add item descriptions, quantities, prices, and VAT.</p>
                                    </div>
                                </div>

                                <div class="invoice-items">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Description</th>
                                                <th style="width: 120px;">Qty</th>
                                                <th style="width: 150px;">Price</th>
                                                <th style="width: 150px;">Total</th>
                                                <th style="width: 56px;"></th>
                                            </tr>
                                        </thead>
                                        <tbody id="invRows">
                                            @foreach ($oldDetails as $index => $detail)
                                                <tr class="item-row">
                                                    <td>
                                                        <input name="details[{{ $index }}][product_name]" class="form-control" value="{{ $detail['product_name'] ?? '' }}" placeholder="Item description..." required>
                                                        <input type="hidden" name="details[{{ $index }}][category_name]" value="{{ $detail['category_name'] ?? '' }}">
                                                        <input type="hidden" name="details[{{ $index }}][booking_id]" value="{{ $detail['booking_id'] ?? '' }}">
                                                        <input type="hidden" name="details[{{ $index }}][course_id]" value="{{ $detail['course_id'] ?? '' }}">
                                                        <input type="hidden" name="details[{{ $index }}][serial_number]" value="{{ $detail['serial_number'] ?? '' }}">
                                                        <input type="hidden" name="details[{{ $index }}][part_no]" value="{{ $detail['part_no'] ?? '' }}">
                                                        <input type="hidden" name="details[{{ $index }}][tax_rate]" class="js-tax-rate" value="{{ $detail['tax_rate'] ?? 14 }}">
                                                    </td>
                                                    <td>
                                                        <input class="form-control js-quantity js-total-input" type="number" min="1" name="details[{{ $index }}][quantity]" value="{{ $detail['quantity'] ?? 1 }}" required>
                                                    </td>
                                                    <td>
                                                        <input class="form-control js-price js-total-input" type="number" step="0.01" min="0" name="details[{{ $index }}][price]" value="{{ $detail['price'] ?? '' }}" placeholder="0.00" required>
                                                    </td>
                                                    <td>
                                                        <span class="invoice-row-total js-row-amount">0.00</span>
                                                    </td>
                                                    <td class="text-center">
                                                        <button type="button" class="btn btn-sm btn-outline-danger rounded-circle js-remove-row" title="Remove item">
                                                            <i class="fas fa-times"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mt-3">
                                    <button type="button" class="asset-btn asset-btn--soft" id="addItemRow">
                                        <i class="fas fa-plus"></i>
                                        Add Item
                                    </button>

                                    <label class="vat-control mb-0">
                                        <input type="checkbox" name="apply_vat" id="invVat" value="1" @checked((bool) old('apply_vat', $purchase->apply_vat ?? false))>
                                        <span class="vat-control__box"></span>
                                        <span>Apply 14% VAT</span>
                                    </label>
                                </div>
                            </div>

                            <div class="form-section">
                                <div class="form-section__head">
                                    <div class="form-section__icon">
                                        <i class="fas fa-balance-scale"></i>
                                    </div>
                                    <div>
                                        <h6 class="form-section__title">Totals & Automatic Journal Entry</h6>
                                        <p class="form-section__sub">Preview totals and the balanced journal entry before posting.</p>
                                    </div>
                                </div>

                                <div class="row g-3">
                                    <div class="col-lg-4">
                                        <div class="summary-panel">
                                            <div class="summary-row">
                                                <span>Total Before Tax</span>
                                                <span class="money" id="invSub">0.00</span>
                                            </div>
                                            <div class="summary-row">
                                                <span>VAT</span>
                                                <span class="money" id="invTax">0.00</span>
                                            </div>
                                            <div class="summary-row summary-row--total">
                                                <span>Amount Due</span>
                                                <span class="money" id="invGrand">0.00</span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- <div class="col-lg-8">
                                        <div class="journal-panel">
                                            <div class="journal-panel__head">
                                                <span>Automatic journal entry on issue</span>
                                                <span class="ui-pill ui-pill--success">AUTO</span>
                                            </div>
                                            <div class="journal-panel__body">
                                                <table class="table">
                                                    <thead>
                                                        <tr>
                                                            <th>Account</th>
                                                            <th style="width: 130px;">Debit</th>
                                                            <th style="width: 130px;">Credit</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="invJe"></tbody>
                                                    <tfoot>
                                                        <tr>
                                                            <td>Total</td>
                                                            <td class="money" id="invJeD">0.00</td>
                                                            <td class="money" id="invJeC">0.00</td>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                        </div>
                                    </div> -->
                                </div>
                            </div>

                            @if($isEdit && $isSaleOrder)
                                <div class="form-section">
                                    <div class="form-section__head justify-content-between">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="form-section__icon">
                                                <i class="fas fa-file-invoice"></i>
                                            </div>
                                            <div>
                                                <h6 class="form-section__title">Sales Order Invoices</h6>
                                                <p class="form-section__sub">Create linked invoices and review all invoices associated with this sales order.</p>
                                            </div>
                                        </div>
                                        @if(!$hasInvoice)
                                            <button type="button" class="asset-btn asset-btn--primary" data-bs-toggle="modal" data-bs-target="{{ $isStudentSale ? '#addStudentSalesOrderInvoiceModal' : '#addSalesOrderInvoiceModal' }}" {{ (!$isStudentSale && !$canAddOrderInvoice) ? 'disabled' : '' }}>
                                                <i class="fas fa-plus"></i>
                                                Add Invoice
                                            </button>
                                        @endif
                                    </div>

                                    @if($isStudentSale)
                                        <div class="invoice-items mb-3">
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Item / Course</th>
                                                        <th>Booking ID</th>
                                                        <th>Course ID</th>
                                                        <th>Linked Invoice</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse($purchase->details as $detail)
                                                        <tr>
                                                            <td>{{ $loop->iteration }}</td>
                                                            <td><strong>{{ $detail->product_name ?: '--' }}</strong></td>
                                                            <td>{{ $detail->booking_id ?? '--' }}</td>
                                                            <td>{{ $detail->course_id ?? '--' }}</td>
                                                            <td>
                                                                @if($detail->studentInvoice)
                                                                    <a href="{{ route('student_invoices.show', $detail->studentInvoice->id) }}" class="ui-pill ui-pill--success">
                                                                        {{ $detail->studentInvoice->invoice_number }}
                                                                    </a>
                                                                @else
                                                                    <span class="text-muted">--</span>
                                                                @endif
                                                            </td>
                                                            <td>
                                                                @if($detail->booking_id && $detail->course_id)
                                                                    @if($detail->studentInvoice)
                                                                        <a href="{{ route('student_invoices.show', $detail->studentInvoice->id) }}" class="asset-btn asset-btn--secondary">
                                                                            <i class="fas fa-eye"></i>
                                                                            Open Invoice
                                                                        </a>
                                                                    @else
                                                                        <span class="text-muted">{{ $hasInvoice ? 'Invoice already exists' : 'Use Add Invoice' }}</span>
                                                                    @endif
                                                                @else
                                                                    <span class="text-muted">Missing booking data</span>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="6" class="text-center text-muted fw-bold py-4">No sales order items found.</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    @endif

                                    <div class="invoice-items">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Invoice Number</th>
                                                    <th>Type</th>
                                                    <th>Status</th>
                                                    <th>Total</th>
                                                    <th>Created / Date</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($linkedStudentInvoices as $invoice)
                                                    <tr>
                                                        <td>{{ $loop->iteration }}</td>
                                                        <td><strong>{{ $invoice->invoice_number }}</strong></td>
                                                        <td>Sales Invoice</td>
                                                        <td>{{ ucwords(str_replace('_', ' ', $invoice->payment_status ?? '--')) }}</td>
                                                        <td>{{ number_format((float) ($invoice->final_amount ?: $invoice->net_price ?: $invoice->total_price ?: 0), 2) }}</td>
                                                        <td>{{ optional($invoice->created_at)->format('M d, Y') ?: '--' }}</td>
                                                        <td>
                                                            <a href="{{ route('student_invoices.show', $invoice->id) }}" class="asset-btn asset-btn--secondary">
                                                                <i class="fas fa-eye"></i>
                                                                Open
                                                            </a>
                                                        </td>
                                                    </tr>
                                                @endforeach

                                                @foreach($linkedPurchaseInvoices as $invoice)
                                                    <tr>
                                                        <td>{{ $linkedStudentInvoices->count() + $loop->iteration }}</td>
                                                        <td><strong>{{ $invoice->invoice_number }}</strong></td>
                                                        <td>Order Invoice</td>
                                                        <td>{{ ucwords(str_replace('_', ' ', $invoice->status ?? '--')) }}</td>
                                                        <td>{{ number_format((float) ($invoice->total ?? 0), 2) }}</td>
                                                        <td>{{ optional($invoice->invoice_date)->format('M d, Y') ?: '--' }}</td>
                                                        <td>
                                                            <a href="{{ route('purchase.invoice.show', $invoice->id) }}" class="asset-btn asset-btn--secondary">
                                                                <i class="fas fa-eye"></i>
                                                                Open
                                                            </a>
                                                        </td>
                                                    </tr>
                                                @endforeach

                                                @if($linkedStudentInvoices->isEmpty() && $linkedPurchaseInvoices->isEmpty())
                                                    <tr>
                                                        <td colspan="7" class="text-center text-muted fw-bold py-4">No invoices linked to this sales order yet.</td>
                                                    </tr>
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            @endif

                            @if($isEdit && !$isSaleOrder)
                                <div class="form-section">
                                    <div class="form-section__head justify-content-between">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="form-section__icon">
                                                <i class="fas fa-file-invoice-dollar"></i>
                                            </div>
                                            <div>
                                                <h6 class="form-section__title">Purchase Order Invoice</h6>
                                                <p class="form-section__sub">Create and review the vendor invoice linked to this purchase order.</p>
                                            </div>
                                        </div>
                                        @if(!$hasInvoice)
                                            <button type="button" class="asset-btn asset-btn--primary" data-bs-toggle="modal" data-bs-target="#addPurchaseOrderInvoiceModal" {{ !$canAddPurchaseInvoice ? 'disabled' : '' }}>
                                                <i class="fas fa-plus"></i>
                                                Add Invoice
                                            </button>
                                        @endif
                                    </div>

                                    <div class="invoice-items">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Invoice Number</th>
                                                    <th>Status</th>
                                                    <th>Total</th>
                                                    <th>Paid</th>
                                                    <th>Remaining</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($linkedPurchaseInvoices as $invoice)
                                                    <tr>
                                                        <td>{{ $loop->iteration }}</td>
                                                        <td><strong>{{ $invoice->invoice_number }}</strong></td>
                                                        <td>{{ ucwords(str_replace('_', ' ', $invoice->status ?? '--')) }}</td>
                                                        <td>{{ number_format((float) ($invoice->total ?? 0), 2) }}</td>
                                                        <td>{{ number_format((float) ($invoice->paid_amount ?? 0), 2) }}</td>
                                                        <td>{{ number_format((float) ($invoice->remaining_amount ?? 0), 2) }}</td>
                                                        <td>
                                                            <a href="{{ route('purchase.invoice.show', $invoice->id) }}" class="asset-btn asset-btn--secondary">
                                                                <i class="fas fa-eye"></i>
                                                                Open
                                                            </a>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="7" class="text-center text-muted fw-bold py-4">No invoice linked to this purchase order yet.</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <div class="form-actions">
                            <a href="{{ $backRoute }}" class="asset-btn asset-btn--secondary">
                                Cancel
                            </a>
                            <button type="submit" class="asset-btn asset-btn--primary" id="invPostBtn">
                                <i class="fas fa-check"></i>
                                <span class="sale-only">{{ $isEdit ? 'Update Sales Order' : 'Create Sales Order' }}</span>
                                <span class="purchase-only">{{ $isEdit ? 'Update Purchase Order' : 'Create Purchase Order' }}</span>
                            </button>
                        </div>
                    </form>

                    @if($isEdit && $isStudentSale)
                        <div class="modal fade" id="addStudentSalesOrderInvoiceModal" tabindex="-1" aria-labelledby="addStudentSalesOrderInvoiceLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-centered">
                                <div class="modal-content">
                                    <form action="{{ route('invoices.store') }}" method="POST" id="addStudentSalesOrderInvoiceForm">
                                        @csrf
                                        <input type="hidden" name="purchase_id" value="{{ $purchase->id }}">

                                        <div class="modal-header">
                                            <div>
                                                <h5 class="modal-title fw-bold" id="addStudentSalesOrderInvoiceLabel">Add Sales Invoice</h5>
                                                <div class="text-muted small">Sales Order #{{ $purchase->purchase_number }}</div>
                                            </div>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>

                                        <div class="modal-body">
                                            @if($errors->has('invoice_date') || $errors->has('due_date') || $errors->has('vendor_invoice_number') || $errors->has('cost_center_id') || $errors->has('purchase_id') || $errors->has('purchase') || $errors->has('status') || $errors->has('posting_account'))
                                                <div class="alert alert-danger">
                                                    {{ $errors->first('invoice_date') ?: $errors->first('due_date') ?: $errors->first('vendor_invoice_number') ?: $errors->first('cost_center_id') ?: $errors->first('purchase_id') ?: $errors->first('purchase') ?: $errors->first('status') ?: $errors->first('posting_account') }}
                                                </div>
                                            @endif

                                            <div class="row g-3">
                                                <div class="col-md-6">
                                                    <label for="student_sales_invoice_reference" class="asset-label">Invoice Reference</label>
                                                    <input type="text" name="vendor_invoice_number" id="student_sales_invoice_reference" class="asset-input @error('vendor_invoice_number') is-invalid @enderror" value="{{ old('vendor_invoice_number') }}" placeholder="Optional external reference" {{ $hasInvoice ? 'disabled' : '' }}>
                                                    @error('vendor_invoice_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="student_sales_invoice_date" class="asset-label">Invoice Date <span class="text-danger">*</span></label>
                                                    <input type="date" name="invoice_date" id="student_sales_invoice_date" class="asset-input @error('invoice_date') is-invalid @enderror" value="{{ old('invoice_date', now()->toDateString()) }}" required {{ $hasInvoice ? 'disabled' : '' }}>
                                                    @error('invoice_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="student_sales_invoice_due_date" class="asset-label">Due Date</label>
                                                    <input type="date" name="due_date" id="student_sales_invoice_due_date" class="asset-input @error('due_date') is-invalid @enderror" value="{{ old('due_date', $purchase->due_date) }}" {{ $hasInvoice ? 'disabled' : '' }}>
                                                    @error('due_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="student_sales_invoice_cost_center_id" class="asset-label">Cost Center <span class="text-danger">*</span></label>
                                                    <select name="cost_center_id" id="student_sales_invoice_cost_center_id" class="asset-select @error('cost_center_id') is-invalid @enderror" required {{ $hasInvoice ? 'disabled' : '' }}>
                                                        <option value="">Choose cost center</option>
                                                        @foreach($costCenters as $costCenter)
                                                            <option value="{{ $costCenter->id }}" @selected(old('cost_center_id', $purchase->cost_center_id) == $costCenter->id)>
                                                                {{ $costCenter->title }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('cost_center_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                </div>
                                            </div>

                                            <div class="summary-panel mt-3">
                                                <div class="summary-row">
                                                    <span>Subtotal</span>
                                                    <strong>{{ number_format((float) $purchase->sub_total, 2) }}</strong>
                                                </div>
                                                <div class="summary-row">
                                                    <span>VAT</span>
                                                    <strong>{{ number_format((float) ($purchase->vat_amount ?? 0), 2) }}</strong>
                                                </div>
                                                <div class="summary-row summary-row--total">
                                                    <span>Invoice Total</span>
                                                    <strong>{{ number_format((float) $purchase->total, 2) }}</strong>
                                                </div>
                                            </div>

                                            @if($hasInvoice)
                                                <div class="alert alert-warning mt-3 mb-0">
                                                    This sales order already has an invoice linked to it.
                                                </div>
                                            @endif
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">Cancel</button>
                                            <button type="submit" class="asset-btn asset-btn--primary" {{ $hasInvoice ? 'disabled' : '' }}>
                                                <i class="fas fa-check"></i>
                                                Create Invoice
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if($isEdit && $isSaleOrder && !$isStudentSale)
                        <div class="modal fade" id="addSalesOrderInvoiceModal" tabindex="-1" aria-labelledby="addSalesOrderInvoiceLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-centered">
                                <div class="modal-content">
                                    <form action="{{ route('purchase.invoice.store', $purchase->id) }}" method="POST" id="addSalesOrderInvoiceForm">
                                        @csrf

                                        <div class="modal-header">
                                            <div>
                                                <h5 class="modal-title fw-bold" id="addSalesOrderInvoiceLabel">Add Invoice</h5>
                                                <div class="text-muted small">Sales Order #{{ $purchase->purchase_number }}</div>
                                            </div>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>

                                        <div class="modal-body">
                                            @if($errors->has('invoice_date') || $errors->has('due_date') || $errors->has('vendor_invoice_number') || $errors->has('cost_center_id') || $errors->has('purchase') || $errors->has('status') || $errors->has('posting_account'))
                                                <div class="alert alert-danger">
                                                    {{ $errors->first('invoice_date') ?: $errors->first('due_date') ?: $errors->first('vendor_invoice_number') ?: $errors->first('cost_center_id') ?: $errors->first('purchase') ?: $errors->first('status') ?: $errors->first('posting_account') }}
                                                </div>
                                            @endif

                                            <div class="row g-3">
                                                <div class="col-md-6">
                                                    <label for="sales_invoice_reference" class="asset-label">Invoice Reference</label>
                                                    <input type="text" name="vendor_invoice_number" id="sales_invoice_reference" class="asset-input @error('vendor_invoice_number') is-invalid @enderror" value="{{ old('vendor_invoice_number') }}" placeholder="Optional external reference" {{ !$canAddOrderInvoice ? 'disabled' : '' }}>
                                                    @error('vendor_invoice_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="sales_invoice_date" class="asset-label">Invoice Date <span class="text-danger">*</span></label>
                                                    <input type="date" name="invoice_date" id="sales_invoice_date" class="asset-input @error('invoice_date') is-invalid @enderror" value="{{ old('invoice_date', now()->toDateString()) }}" required {{ !$canAddOrderInvoice ? 'disabled' : '' }}>
                                                    @error('invoice_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="sales_invoice_due_date" class="asset-label">Due Date</label>
                                                    <input type="date" name="due_date" id="sales_invoice_due_date" class="asset-input @error('due_date') is-invalid @enderror" value="{{ old('due_date', $purchase->due_date) }}" {{ !$canAddOrderInvoice ? 'disabled' : '' }}>
                                                    @error('due_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="sales_invoice_cost_center_id" class="asset-label">Cost Center <span class="text-danger">*</span></label>
                                                    <select name="cost_center_id" id="sales_invoice_cost_center_id" class="asset-select @error('cost_center_id') is-invalid @enderror" required {{ !$canAddOrderInvoice ? 'disabled' : '' }}>
                                                        <option value="">Choose cost center</option>
                                                        @foreach($costCenters as $costCenter)
                                                            <option value="{{ $costCenter->id }}" @selected(old('cost_center_id', $purchase->cost_center_id) == $costCenter->id)>
                                                                {{ $costCenter->title }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('cost_center_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                </div>
                                            </div>

                                            <div class="summary-panel mt-3">
                                                <div class="summary-row">
                                                    <span>Subtotal</span>
                                                    <strong>{{ number_format((float) $purchase->sub_total, 2) }}</strong>
                                                </div>
                                                <div class="summary-row">
                                                    <span>VAT</span>
                                                    <strong>{{ number_format((float) ($purchase->vat_amount ?? 0), 2) }}</strong>
                                                </div>
                                                <div class="summary-row summary-row--total">
                                                    <span>Invoice Total</span>
                                                    <strong>{{ number_format((float) $purchase->total, 2) }}</strong>
                                                </div>
                                            </div>

                                            @if(!$canAddOrderInvoice)
                                                <div class="alert alert-warning mt-3 mb-0">
                                                    This sales order already has an invoice linked to it.
                                                </div>
                                            @endif
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">Cancel</button>
                                            <button type="submit" class="asset-btn asset-btn--primary" {{ !$canAddOrderInvoice ? 'disabled' : '' }}>
                                                <i class="fas fa-check"></i>
                                                Create Invoice
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if($isEdit && !$isSaleOrder)
                        <div class="modal fade" id="addPurchaseOrderInvoiceModal" tabindex="-1" aria-labelledby="addPurchaseOrderInvoiceLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-centered">
                                <div class="modal-content">
                                    <form action="{{ route('purchase.invoice.store', $purchase->id) }}" method="POST" id="addPurchaseOrderInvoiceForm">
                                        @csrf

                                        <div class="modal-header">
                                            <div>
                                                <h5 class="modal-title fw-bold" id="addPurchaseOrderInvoiceLabel">Add Purchase Invoice</h5>
                                                <div class="text-muted small">Purchase Order #{{ $purchase->purchase_number }}</div>
                                            </div>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>

                                        <div class="modal-body">
                                            @if($errors->has('invoice_date') || $errors->has('due_date') || $errors->has('vendor_invoice_number') || $errors->has('cost_center_id') || $errors->has('purchase') || $errors->has('status') || $errors->has('posting_account'))
                                                <div class="alert alert-danger">
                                                    {{ $errors->first('invoice_date') ?: $errors->first('due_date') ?: $errors->first('vendor_invoice_number') ?: $errors->first('cost_center_id') ?: $errors->first('purchase') ?: $errors->first('status') ?: $errors->first('posting_account') }}
                                                </div>
                                            @endif

                                            <div class="row g-3">
                                                <div class="col-md-6">
                                                    <label for="purchase_invoice_reference" class="asset-label">Vendor Invoice Reference</label>
                                                    <input type="text" name="vendor_invoice_number" id="purchase_invoice_reference" class="asset-input @error('vendor_invoice_number') is-invalid @enderror" value="{{ old('vendor_invoice_number') }}" placeholder="Optional vendor invoice number" {{ !$canAddPurchaseInvoice ? 'disabled' : '' }}>
                                                    @error('vendor_invoice_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="purchase_invoice_date" class="asset-label">Invoice Date <span class="text-danger">*</span></label>
                                                    <input type="date" name="invoice_date" id="purchase_invoice_date" class="asset-input @error('invoice_date') is-invalid @enderror" value="{{ old('invoice_date', now()->toDateString()) }}" required {{ !$canAddPurchaseInvoice ? 'disabled' : '' }}>
                                                    @error('invoice_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="purchase_invoice_due_date" class="asset-label">Due Date</label>
                                                    <input type="date" name="due_date" id="purchase_invoice_due_date" class="asset-input @error('due_date') is-invalid @enderror" value="{{ old('due_date', $purchase->due_date) }}" {{ !$canAddPurchaseInvoice ? 'disabled' : '' }}>
                                                    @error('due_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="purchase_invoice_cost_center_id" class="asset-label">Cost Center <span class="text-danger">*</span></label>
                                                    <select name="cost_center_id" id="purchase_invoice_cost_center_id" class="asset-select @error('cost_center_id') is-invalid @enderror" required {{ !$canAddPurchaseInvoice ? 'disabled' : '' }}>
                                                        <option value="">Choose cost center</option>
                                                        @foreach($costCenters as $costCenter)
                                                            <option value="{{ $costCenter->id }}" @selected(old('cost_center_id', $purchase->cost_center_id) == $costCenter->id)>
                                                                {{ $costCenter->title }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('cost_center_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                </div>
                                            </div>

                                            <div class="summary-panel mt-3">
                                                <div class="summary-row">
                                                    <span>Subtotal</span>
                                                    <strong>{{ number_format((float) $purchase->sub_total, 2) }}</strong>
                                                </div>
                                                <div class="summary-row">
                                                    <span>VAT</span>
                                                    <strong>{{ number_format((float) ($purchase->vat_amount ?? 0), 2) }}</strong>
                                                </div>
                                                <div class="summary-row summary-row--total">
                                                    <span>Invoice Total</span>
                                                    <strong>{{ number_format((float) $purchase->total, 2) }}</strong>
                                                </div>
                                            </div>

                                            @if(!$canAddPurchaseInvoice)
                                                <div class="alert alert-warning mt-3 mb-0">
                                                    This purchase order already has an invoice linked to it.
                                                </div>
                                            @endif
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">Cancel</button>
                                            <button type="submit" class="asset-btn asset-btn--primary" {{ !$canAddPurchaseInvoice ? 'disabled' : '' }}>
                                                <i class="fas fa-check"></i>
                                                Create Invoice
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    @if($isEdit && $isSaleOrder && !$isStudentSale && ($errors->has('invoice_date') || $errors->has('due_date') || $errors->has('vendor_invoice_number') || $errors->has('cost_center_id') || $errors->has('purchase') || $errors->has('status') || $errors->has('posting_account')))
        document.addEventListener('DOMContentLoaded', function () {
            const invoiceModal = document.getElementById('addSalesOrderInvoiceModal');
            if (invoiceModal && window.bootstrap) {
                window.bootstrap.Modal.getOrCreateInstance(invoiceModal).show();
            }
        });
    @endif
    @if($isEdit && $isStudentSale && ($errors->has('invoice_date') || $errors->has('due_date') || $errors->has('vendor_invoice_number') || $errors->has('cost_center_id') || $errors->has('purchase_id') || $errors->has('purchase') || $errors->has('status') || $errors->has('posting_account')))
        document.addEventListener('DOMContentLoaded', function () {
            const invoiceModal = document.getElementById('addStudentSalesOrderInvoiceModal');
            if (invoiceModal && window.bootstrap) {
                window.bootstrap.Modal.getOrCreateInstance(invoiceModal).show();
            }
        });
    @endif
    @if($isEdit && !$isSaleOrder && ($errors->has('invoice_date') || $errors->has('due_date') || $errors->has('vendor_invoice_number') || $errors->has('cost_center_id') || $errors->has('purchase') || $errors->has('status') || $errors->has('posting_account')))
        document.addEventListener('DOMContentLoaded', function () {
            const invoiceModal = document.getElementById('addPurchaseOrderInvoiceModal');
            if (invoiceModal && window.bootstrap) {
                window.bootstrap.Modal.getOrCreateInstance(invoiceModal).show();
            }
        });
    @endif

    (function () {
        const form = document.getElementById('purchaseOrderForm');
        const addButton = document.getElementById('addItemRow');
        const vatCheckbox = document.getElementById('invVat');
        const partyType = document.getElementById('party_type');
        const invoiceType = document.getElementById('invoice_type');
        const pageTitle = document.querySelector('.invoice-create-page .page-title .dashTitle');
        const pageDescription = document.querySelector('.invoice-create-page .page-title .dashText');
        const pageBackLink = document.getElementById('pageBackLink');
        const pageBackLabel = document.getElementById('pageBackLabel');
        const title = document.getElementById('invTitle');
        const draftRef = document.getElementById('invFormId');
        const partyInput = document.getElementById('invParty');
        const companyPartyName = document.getElementById('companyPartyName');
        const studentSelect = document.getElementById('student_id');
        const staffPartySelect = document.getElementById('staff_party_id');
        const rowsContainer = document.getElementById('invRows');
        const purchaseRowsTemplate = rowsContainer.innerHTML;
        const studentSalesItemsUrl = @json(route('purchase.student_sales_items', ['student' => '__STUDENT__']));
        const purchaseOrdersUrl = @json(route('purchase.orders.index'));
        const salesOrdersUrl = @json(route('purchase.index'));
        const initialSelectedBookingIds = @json($selectedBookingIds);
        const isEdit = @json($isEdit);
        let currentRowsMode = 'purchase';
        let lastLoadedStudentId = null;
        let salesItems = [];
        let initialSalesRowsApplied = false;
        let syncingType = false;

        function amountText(value) {
            return Number(value || 0).toLocaleString('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }

        function escapeHtml(value) {
            return String(value || '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        function activeInvoiceType() {
            return document.querySelector('input[name="invoice_type_picker"]:checked')?.value || invoiceType.value || 'sale';
        }

        function usesStudentParty() {
            return activeInvoiceType() === 'sale' && partyType.value === 'student';
        }

        function selectedOptionText(select) {
            if (!select || select.selectedIndex < 0) {
                return '';
            }

            const option = select.options[select.selectedIndex];

            return option ? (option.dataset.partyName || option.dataset.studentName || option.textContent || '').trim() : '';
        }

        function syncPartyNameValue() {
            if (!partyInput) {
                return;
            }

            if (partyType.value === 'staff') {
                partyInput.value = selectedOptionText(staffPartySelect);
                return;
            }

            if (partyType.value === 'company') {
                partyInput.value = companyPartyName ? companyPartyName.value.trim() : '';
                return;
            }

            partyInput.value = selectedOptionText(studentSelect);
        }

        function visibleRows() {
            return Array.from(document.querySelectorAll('#invRows .item-row'));
        }

        function renderMessageRow(message) {
            currentRowsMode = 'message';
            rowsContainer.innerHTML = '<tr class="sales-message-row">' +
                '<td colspan="5" class="text-center text-muted fw-bold py-4">' + message + '</td>' +
                '</tr>';
            recalcInvoice();
        }

        function itemMeta(item) {
            return [item.staff, item.track_type, item.level, item.start_date, item.end_date]
                .filter(Boolean)
                .join(' - ');
        }

        function salesItemOptions() {
            return salesItems.map(function (item) {
                const title = item.title || ('Booking #' + item.course_id);
                const meta = itemMeta(item);
                const label = title + (meta ? ' - ' + meta : '');

                return '<option value="' + item.id + '">' + escapeHtml(label) + '</option>';
            }).join('');
        }

        function salesRowHtml(index) {
            return '<tr class="item-row sales-item-row">' +
                '<td>' +
                    '<select class="form-select js-booking-select js-total-input" required>' +
                        '<option value="">Choose course / booking</option>' +
                        salesItemOptions() +
                    '</select>' +
                    '<small class="d-block text-muted mt-1 js-booking-meta">Select one course for this order row.</small>' +
                    '<input type="hidden" class="js-product-name" name="details[' + index + '][product_name]" value="">' +
                    '<input type="hidden" class="js-category-name" name="details[' + index + '][category_name]" value="Sales Booking">' +
                    '<input type="hidden" class="js-booking-id" name="details[' + index + '][booking_id]" value="">' +
                    '<input type="hidden" class="js-course-id" name="details[' + index + '][course_id]" value="">' +
                    '<input type="hidden" class="js-serial-number" name="details[' + index + '][serial_number]" value="">' +
                    '<input type="hidden" class="js-part-no" name="details[' + index + '][part_no]" value="">' +
                    '<input type="hidden" name="details[' + index + '][tax_rate]" class="js-tax-rate" value="' + (vatCheckbox.checked ? 14 : 0) + '">' +
                '</td>' +
                '<td><input class="form-control js-quantity js-total-input" type="number" min="1" name="details[' + index + '][quantity]" value="1" readonly required></td>' +
                '<td><input class="form-control js-price js-total-input" type="number" step="0.01" min="0" name="details[' + index + '][price]" value="" readonly required></td>' +
                '<td><span class="invoice-row-total js-row-amount">0.00</span></td>' +
                '<td class="text-center">' +
                    '<button type="button" class="btn btn-sm btn-outline-danger rounded-circle js-remove-row" title="Remove item">' +
                        '<i class="fas fa-times"></i>' +
                    '</button>' +
                '</td>' +
            '</tr>';
        }

        function updateSalesRowFromSelection(row) {
            const select = row.querySelector('.js-booking-select');
            const item = salesItems.find((salesItem) => String(salesItem.id) === String(select.value));
            const priceInput = row.querySelector('.js-price');
            const meta = row.querySelector('.js-booking-meta');

            if (!item) {
                row.querySelector('.js-product-name').value = '';
                row.querySelector('.js-booking-id').value = '';
                row.querySelector('.js-course-id').value = '';
                row.querySelector('.js-serial-number').value = '';
                row.querySelector('.js-part-no').value = '';
                priceInput.value = '';
                meta.textContent = 'Select one course for this order row.';
                recalcInvoice();
                updateSalesBookingOptions();
                return;
            }

            const title = item.title || ('Booking #' + item.course_id);
            row.querySelector('.js-product-name').value = title;
            row.querySelector('.js-booking-id').value = item.id;
            row.querySelector('.js-course-id').value = item.course_id;
            row.querySelector('.js-serial-number').value = item.id;
            row.querySelector('.js-part-no').value = item.course_id;
            priceInput.value = Number(item.price || 0).toFixed(2);
            meta.textContent = itemMeta(item) || 'Booking #' + item.id;
            recalcInvoice();
            updateSalesBookingOptions();
        }

        function selectedSalesBookingIds(exceptSelect = null) {
            return Array.from(document.querySelectorAll('.js-booking-select'))
                .filter((select) => select !== exceptSelect && select.value)
                .map((select) => String(select.value));
        }

        function updateSalesBookingOptions() {
            const selectedCount = new Set(selectedSalesBookingIds()).size;
            const hasEmptySelect = Array.from(document.querySelectorAll('.js-booking-select'))
                .some((select) => !select.value);

            document.querySelectorAll('.js-booking-select').forEach(function (select) {
                const selectedElsewhere = selectedSalesBookingIds(select);

                Array.from(select.options).forEach(function (option) {
                    if (!option.value) {
                        option.hidden = false;
                        option.disabled = false;
                        return;
                    }

                    const used = selectedElsewhere.includes(String(option.value));
                    option.hidden = used;
                    option.disabled = used;
                });
            });

            if (activeInvoiceType() === 'sale') {
                addButton.disabled = usesStudentParty() && (!studentSelect.value || hasEmptySelect || selectedCount >= salesItems.length);
            }
        }

        function addSalesRow(selectedBookingId = '') {
            if (!salesItems.length) {
                renderMessageRow('No bookings found for this student.');
                return;
            }

            const index = visibleRows().length;
            rowsContainer.insertAdjacentHTML('beforeend', salesRowHtml(index));
            const row = visibleRows()[visibleRows().length - 1];
            bindRow(row);
            updateRemoveButtonState(row);

            if (selectedBookingId) {
                row.querySelector('.js-booking-select').value = selectedBookingId;
                updateSalesRowFromSelection(row);
            }

            reindexRows();
            visibleRows().forEach(updateRemoveButtonState);
            updateSalesBookingOptions();
            recalcInvoice();
        }

        function renderSalesItems(items) {
            currentRowsMode = 'sale';
            salesItems = items;

            if (!items.length) {
                addButton.disabled = true;
                renderMessageRow('No bookings found for this student.');
                return;
            }

            addButton.disabled = false;
            rowsContainer.innerHTML = '';
            if (!initialSalesRowsApplied && initialSelectedBookingIds.length) {
                initialSelectedBookingIds.forEach(function (bookingId) {
                    addSalesRow(String(bookingId));
                });
                initialSalesRowsApplied = true;
            } else {
                addSalesRow();
            }
            updateSalesBookingOptions();
        }

        function fetchStudentSalesItems() {
            if (!usesStudentParty()) {
                return;
            }

            const studentId = studentSelect ? studentSelect.value : '';
            if (!studentId) {
                lastLoadedStudentId = null;
                salesItems = [];
                initialSalesRowsApplied = false;
                addButton.disabled = true;
                renderMessageRow('Select a student to show their bookings.');
                return;
            }

            if (lastLoadedStudentId === studentId) {
                return;
            }

            lastLoadedStudentId = studentId;
            renderMessageRow('Loading student bookings...');

            fetch(studentSalesItemsUrl.replace('__STUDENT__', studentId), {
                headers: {
                    'Accept': 'application/json'
                }
            })
                .then((response) => response.ok ? response.json() : Promise.reject(response))
                .then((data) => renderSalesItems(data.items || []))
                .catch(() => {
                    lastLoadedStudentId = null;
                    renderMessageRow('Could not load bookings for this student.');
                });
        }

        function restorePurchaseRows() {
            if (currentRowsMode === 'purchase') {
                return;
            }

            lastLoadedStudentId = null;
            salesItems = [];
            addButton.disabled = false;
            rowsContainer.innerHTML = purchaseRowsTemplate;
            currentRowsMode = 'purchase';
            visibleRows().forEach(function (row) {
                bindRow(row);
                updateRemoveButtonState(row);
            });
            recalcInvoice();
        }

        function syncInvoiceType() {
            const isSale = activeInvoiceType() === 'sale';

            if (syncingType || !partyType.value) {
                partyType.value = 'student';
            }

            const isStudentSale = isSale && partyType.value === 'student';
            const isStaffParty = partyType.value === 'staff';
            const isCompanyParty = partyType.value === 'company';
            document.querySelectorAll('.sale-only').forEach((el) => el.style.display = isSale ? '' : 'none');
            document.querySelectorAll('.purchase-only').forEach((el) => el.style.display = isSale ? 'none' : '');
            document.querySelectorAll('.student-only').forEach((el) => el.style.display = isStudentSale ? '' : 'none');
            document.querySelectorAll('.staff-party-wrap').forEach((el) => el.style.display = isStaffParty ? '' : 'none');
            document.querySelectorAll('.party-name-wrap').forEach((el) => el.style.display = isCompanyParty ? '' : 'none');
            document.querySelectorAll('.purchase-only input, .purchase-only select, .purchase-only textarea').forEach((el) => {
                el.disabled = isSale;
            });

            invoiceType.value = isSale ? 'sale' : 'purchase';
            if (!isEdit) {
                if (pageTitle) {
                    pageTitle.textContent = isSale ? 'Create Sales Order' : 'Create Purchase Order';
                }
                if (pageDescription) {
                    pageDescription.textContent = isSale
                        ? 'Create a sales order using the finance posting flow.'
                        : 'Create an internal purchase order for vendor billing.';
                }
                if (pageBackLink) {
                    pageBackLink.href = isSale ? salesOrdersUrl : purchaseOrdersUrl;
                }
                if (pageBackLabel) {
                    pageBackLabel.textContent = isSale ? 'Back to Sales Orders' : 'Back to Purchase Orders';
                }
                title.textContent = isSale ? 'New Sales Order' : 'New Purchase Order';
                draftRef.textContent = isSale ? 'SO-DRAFT' : 'PO-DRAFT';
            }

            if (studentSelect) {
                studentSelect.disabled = !isStudentSale;
                studentSelect.required = isStudentSale;
                if (window.jQuery && jQuery.fn.select2) {
                    jQuery(studentSelect).trigger('change.select2');
                }
            }

            if (staffPartySelect) {
                staffPartySelect.disabled = !isStaffParty;
                staffPartySelect.required = isStaffParty;
                if (window.jQuery && jQuery.fn.select2) {
                    jQuery(staffPartySelect).trigger('change.select2');
                }
            }

            if (companyPartyName) {
                companyPartyName.disabled = !isCompanyParty;
                companyPartyName.required = isCompanyParty;
            }

            syncPartyNameValue();

            addButton.style.display = '';
            addButton.disabled = isStudentSale && !studentSelect.value;

            if (isStudentSale) {
                fetchStudentSalesItems();
            } else {
                restorePurchaseRows();
            }
        }

        function buildJournalLines(subtotal, vat, total) {
            const isSale = activeInvoiceType() === 'sale';

            if (isSale) {
                const lines = [
                    ['Accounts Receivable', '1121', total, 0],
                    ['Deferred Program Revenue', '2111', 0, subtotal],
                ];

                if (vat > 0) {
                    lines.push(['VAT Payable', 'Not configured', 0, vat]);
                }

                return lines;
            }

            const lines = [
                ['Rent Expense', '31', subtotal, 0],
            ];

            if (vat > 0) {
                lines.push(['VAT Input', 'Not configured', vat, 0]);
            }

            lines.push(['Accounts Payable', '23', 0, total]);

            return lines;
        }

        function renderJournal(lines) {
            const journalBody = document.getElementById('invJe');
            const journalDebit = document.getElementById('invJeD');
            const journalCredit = document.getElementById('invJeC');

            if (!journalBody || !journalDebit || !journalCredit) {
                return;
            }

            journalBody.innerHTML = lines.map(function (line) {
                return '<tr>' +
                    '<td><div class="fw-bold text-dark">' + line[0] + '</div><small class="text-muted">' + line[1] + '</small></td>' +
                    '<td class="money">' + (line[2] ? amountText(line[2]) : '-') + '</td>' +
                    '<td class="money">' + (line[3] ? amountText(line[3]) : '-') + '</td>' +
                    '</tr>';
            }).join('');

            const debit = lines.reduce((sum, line) => sum + line[2], 0);
            const credit = lines.reduce((sum, line) => sum + line[3], 0);
            journalDebit.textContent = amountText(debit);
            journalCredit.textContent = amountText(credit);
        }

        function recalcInvoice() {
            let subtotal = 0;
            const applyVat = vatCheckbox.checked;

            visibleRows().forEach(function (row) {
                const rowAmount = row.querySelector('.js-row-amount');
                const taxRate = row.querySelector('.js-tax-rate');
                if (!rowAmount || !taxRate) {
                    return;
                }

                const price = parseFloat(row.querySelector('.js-price')?.value || 0);
                const quantity = parseInt(row.querySelector('.js-quantity')?.value || 0, 10);
                const amount = Number.isFinite(price * quantity) ? price * quantity : 0;

                subtotal += amount;
                rowAmount.textContent = amountText(amount);
                taxRate.value = applyVat ? 14 : 0;
            });

            const vat = applyVat ? subtotal * 0.14 : 0;
            const total = subtotal + vat;

            document.getElementById('invSub').textContent = amountText(subtotal);
            document.getElementById('invTax').textContent = amountText(vat);
            document.getElementById('invGrand').textContent = amountText(total);
            document.getElementById('invPostBtn').disabled = total <= 0 && activeInvoiceType() === 'purchase';

            renderJournal(buildJournalLines(subtotal, vat, total));
        }

        function reindexRows() {
            visibleRows().forEach(function (row, index) {
                row.querySelectorAll('input').forEach(function (input) {
                    if (input.name) {
                        input.name = input.name.replace(/details\[\d+\]/, 'details[' + index + ']');
                    }
                });
            });
        }

        function updateRemoveButtonState(row) {
            row.querySelector('.js-remove-row').disabled = visibleRows().length <= 1;
        }

        function bindRow(row) {
            row.querySelectorAll('.js-total-input').forEach(function (input) {
                input.addEventListener('input', recalcInvoice);
                input.addEventListener('change', recalcInvoice);
            });

            const bookingSelect = row.querySelector('.js-booking-select');
            if (bookingSelect) {
                bookingSelect.addEventListener('change', function () {
                    updateSalesRowFromSelection(row);
                });
            }

            const removeButton = row.querySelector('.js-remove-row');
            if (!removeButton) {
                return;
            }

            removeButton.addEventListener('click', function () {
                if (visibleRows().length <= 1) {
                    return;
                }

                row.remove();
                reindexRows();
                visibleRows().forEach(updateRemoveButtonState);
                updateSalesBookingOptions();
                recalcInvoice();
            });
        }

        addButton.addEventListener('click', function () {
            if (usesStudentParty()) {
                addSalesRow();
                return;
            }

            const firstRow = visibleRows()[0];
            const row = firstRow.cloneNode(true);

            row.querySelectorAll('input').forEach(function (input) {
                if (input.classList.contains('js-quantity')) {
                    input.value = 1;
                } else if (input.classList.contains('js-tax-rate')) {
                    input.value = vatCheckbox.checked ? 14 : 0;
                } else {
                    input.value = '';
                }
            });

            document.getElementById('invRows').appendChild(row);
            bindRow(row);
            reindexRows();
            visibleRows().forEach(updateRemoveButtonState);
            recalcInvoice();
        });

        document.querySelectorAll('input[name="invoice_type_picker"]').forEach(function (input) {
            input.addEventListener('change', function () {
                syncingType = true;
                syncInvoiceType();
                syncingType = false;
                recalcInvoice();
            });
        });

        vatCheckbox.addEventListener('change', recalcInvoice);
        partyType.addEventListener('change', function () {
            lastLoadedStudentId = null;
            syncInvoiceType();
            recalcInvoice();
        });
        if (studentSelect) {
            studentSelect.addEventListener('change', fetchStudentSalesItems);
            studentSelect.addEventListener('change', syncPartyNameValue);

            if (window.jQuery) {
                jQuery(studentSelect).on('change.select2 change', fetchStudentSalesItems);
                jQuery(studentSelect).on('change.select2 change', syncPartyNameValue);
            }
        }

        if (staffPartySelect) {
            staffPartySelect.addEventListener('change', syncPartyNameValue);

            if (window.jQuery) {
                jQuery(staffPartySelect).on('change.select2 change', syncPartyNameValue);
            }
        }

        if (companyPartyName) {
            companyPartyName.addEventListener('input', syncPartyNameValue);
        }

        form.addEventListener('submit', syncPartyNameValue);

        visibleRows().forEach(function (row) {
            bindRow(row);
            updateRemoveButtonState(row);
        });

        syncInvoiceType();
        recalcInvoice();
    })();
</script>
@endpush