@extends('dashboard.layouts.app')

@push('styles')
    <style>
        .payments-form-page {
            color: #090a0c;
            background: #f7f9fb;
        }

        .payments-form-page .page-shell {
            width: 100%;
            max-width: none;
            margin: 0;
        }

        .payments-form-page .ui-card,
        .section-card {
            border: 1px solid #e3e8ef;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
            overflow: hidden;
        }

        .payments-form-page .ui-card {
            margin-bottom: 1.15rem;
        }

        .workflow-card__header,
        .section-card__head {
            padding: 0.9rem 1.05rem;
            border-bottom: 1px solid #e6ebf1;
            background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
            color: #111827;
        }

        .workflow-card__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .section-card__head {
            position: relative;
        }

        .section-card__head::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: #94a3b8;
        }

        .workflow-card__title,
        .section-card__head {
            font-weight: 700;
        }

        .workflow-card__subtitle {
            margin-top: 0.15rem;
            color: #667085;
            font-size: 0.84rem;
        }

        .payments-form-page .workflow-card__body,
        .payments-form-page .section-card__body {
            padding: 18px;
        }

        .section-card {
            margin-bottom: 1rem;
        }

        .asset-form-grid,
        .allocation-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            column-gap: 1rem;
            row-gap: 1.05rem;
            align-items: start;
        }

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

        .party-grid .asset-col-4,
        .party-grid .asset-col-8,
        .setup-grid .asset-col-4,
        .setup-grid .asset-col-6 {
            grid-column: span 6 / span 6;
        }

        .allocation-grid .allocation-col-12 {
            grid-column: span 6 / span 6;
        }

        .allocation-grid .allocation-col-4 {
            grid-column: span 3 / span 3;
        }

        .allocation-grid .allocation-col-6 {
            grid-column: span 6 / span 6;
        }

        .allocation-grid .allocation-col-2 {
            grid-column: span 6 / span 6;
            justify-content: flex-end;
            align-items: flex-end;
        }

        .allocation-grid .allocation-col-2 .remove-allocation-btn {
            width: auto !important;
            min-width: 92px;
            min-height: 36px;
            padding-inline: 0.9rem;
        }

        .asset-form-grid > [class*="asset-col-"],
        .allocation-grid > [class*="allocation-col-"] {
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
        }

        .asset-form-grid > [class*="asset-col-"],
        .allocation-grid > [class*="allocation-col-"] {
            display: flex;
            flex-direction: column;
        }

        .asset-label {
            display: block;
            min-height: 1.15rem;
            margin-bottom: 0.38rem;
            font-weight: 600;
            color: #344054;
            font-size: 0.83rem;
            line-height: 1.2;
        }

        .asset-input,
        .asset-select,
        .payments-form-page .form-control,
        .payments-form-page .form-select {
            width: 100% !important;
            max-width: 100%;
            height: 42px;
            min-height: 42px;
            border: 1px solid #d7dee8 !important;
            border-radius: 10px !important;
            padding: 0.58rem 0.75rem;
            background: #fff;
            color: #111827;
            box-shadow: none !important;
            box-sizing: border-box;
            transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
        }

        textarea.asset-input {
            height: auto;
            min-height: 104px;
            resize: vertical;
        }

        .asset-input:hover,
        .asset-select:hover,
        .payments-form-page .form-control:hover,
        .payments-form-page .form-select:hover {
            border-color: #b9c4d2 !important;
            background: #fcfdff;
        }

        .asset-input:focus,
        .asset-select:focus,
        .payments-form-page .form-control:focus,
        .payments-form-page .form-select:focus {
            outline: none;
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
        }

        .payments-form-page .select2-container {
            width: 100% !important;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }

        .payments-form-page .select2,
        .payments-form-page .select2-container--default,
        .payments-form-page .select2-container--bootstrap,
        .payments-form-page .select2-container--bootstrap-5 {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
        }

        .payments-form-page .select2-container .select2-selection--single {
            height: 42px !important;
            min-height: 42px;
            border: 1px solid #d7dee8 !important;
            border-radius: 10px !important;
            display: block;
            align-items: center;
            position: relative;
            width: 100% !important;
            max-width: 100%;
            overflow: hidden;
            box-sizing: border-box;
            transition: border-color 0.16s ease, background-color 0.16s ease;
        }

        .payments-form-page .select2-container .select2-selection--single:hover {
            border-color: #b9c4d2 !important;
            background: #fcfdff;
        }

        .payments-form-page .select2-container .select2-selection__rendered {
            display: block;
            line-height: 40px !important;
            padding-left: 0.75rem !important;
            padding-right: 2.4rem !important;
            padding-top: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            box-sizing: border-box !important;
        }

        .payments-form-page .select2-container .select2-selection__arrow {
            position: absolute;
            top: 0;
            right: 0.45rem;
            min-height: 42px;
        }

        .payments-form-page .select2-container .select2-selection__clear {
            position: absolute;
            right: 1.75rem;
            top: 0;
            z-index: 2;
            line-height: 40px;
            display: none !important;
        }

        .step-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.55rem;
            height: 1.55rem;
            padding: 0 0.45rem;
            border-radius: 999px;
            background: #eef4ff;
            color: #2563eb;
            font-weight: 700;
            font-size: 0.75rem;
        }

        .party-helper {
            color: #667085;
            font-size: 0.74rem;
            line-height: 1.35;
            margin-top: 0.35rem;
            min-height: 1rem;
        }

        .field-error {
            color: #b42318;
            font-size: 0.76rem;
            font-weight: 600;
            line-height: 1.35;
            margin-top: 0.35rem;
            overflow-wrap: anywhere;
        }

        .asset-input.is-invalid,
        .asset-select.is-invalid,
        .payments-form-page .select2-container.is-invalid .select2-selection--single {
            border-color: #dc3545 !important;
        }

        .payment-error-summary {
            border: 1px solid #fecaca;
            border-radius: 10px;
            background: #fef2f2;
            color: #991b1b;
            padding: 0.9rem 1rem;
            margin-bottom: 1rem;
            font-size: 0.86rem;
            font-weight: 600;
        }

        .payment-error-summary ul {
            margin: 0.45rem 0 0;
            padding-left: 1.1rem;
        }

        .party-readonly {
            background: #f9fafb !important;
        }

        .allocation-row {
            border: 1px solid #e4e9f0;
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 0.9rem;
            background: #fcfdff;
        }

        .payments-form-page .rounded-pill {
            border-radius: 10px !important;
        }

        .payments-form-page .btn {
            box-shadow: none !important;
            font-weight: 600;
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
        }

        .payments-form-page .btn:hover {
            transform: translateY(-1px);
        }

        .actions-bar {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .payments-form-page form > .actions-bar {
            justify-content: flex-end;
        }

        .payments-form-page .allocation-grid .allocation-col-2 {
            align-items: flex-end !important;
            text-align: right;
        }

        .journal-preview {
            border: 1px solid #e3e8ef;
            border-radius: 10px;
            background: #fff;
            color: #111827;
            overflow: hidden;
        }

        .journal-preview__head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding: 0.95rem 1rem;
            border-bottom: 1px solid #e6ebf1;
            background: #fbfcfe;
        }

        .journal-preview__eyebrow,
        .journal-preview__desc {
            display: none;
        }

        .journal-preview__title {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 700;
        }

        .journal-status {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem 0.55rem;
            border-radius: 999px;
            background: #ecfdf5;
            color: #047857;
            font-weight: 700;
            font-size: 0.78rem;
            white-space: nowrap;
        }

        .journal-meta {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0;
            border-bottom: 1px solid #e6ebf1;
        }

        .journal-meta__item {
            padding: 0.85rem 1rem;
            border-right: 1px solid #e6ebf1;
            background: #fff;
        }

        .journal-meta__item:last-child {
            border-right: 0;
        }

        .journal-meta__label {
            display: block;
            margin-bottom: 0.25rem;
            color: #667085;
            font-size: 0.76rem;
            font-weight: 600;
        }

        .journal-meta__value,
        .journal-account__name,
        .journal-amount {
            font-weight: 700;
        }

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

        .journal-table-head,
        .journal-line {
            display: grid;
            grid-template-columns: 1.6fr 0.7fr 0.7fr;
            min-width: 540px;
        }

        .journal-table-head {
            padding: 0.65rem 1rem;
            background: #f8fafc;
            color: #667085;
            font-weight: 700;
            font-size: 0.78rem;
        }

        .journal-line {
            align-items: center;
            padding: 0.75rem 1rem;
            border-top: 1px solid #edf1f5;
        }

        .journal-line--total {
            background: #fbfcfe;
        }

        .journal-account {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
        }

        .journal-account__code {
            color: #667085;
            font-size: 0.78rem;
        }

        .journal-amount {
            font-variant-numeric: tabular-nums;
        }

        .journal-amount--debit {
            color: #b42318;
        }

        .journal-amount--credit {
            color: #027a48;
        }

        .journal-summary {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.8rem 1rem;
            border-top: 1px solid #e6ebf1;
            background: #fff;
            font-weight: 600;
        }

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

            .workflow-card__body,
            .section-card__body {
                padding: 0.9rem;
            }

            .allocation-grid .allocation-col-6 {
                grid-column: span 12 / span 12;
            }

            .allocation-grid .allocation-col-12,
            .allocation-grid .allocation-col-4 {
                grid-column: span 12 / span 12;
            }

            .journal-preview__head,
            .journal-summary {
                flex-direction: column;
                align-items: stretch;
            }

            .journal-meta {
                grid-template-columns: 1fr;
            }

            .journal-meta__item {
                border-right: 0;
                border-bottom: 1px solid #e6ebf1;
            }

            .journal-meta__item:last-child {
                border-bottom: 0;
            }
        }

        .payments-form-page .asset-form-grid > div,
        .payments-form-page .allocation-grid > div {
            min-width: 0;
        }

        .payments-form-page .select2-container,
        .payments-form-page .select2-selection--single {
            max-width: 100% !important;
            overflow: hidden !important;
        }

        .payments-form-page .select2-selection__rendered {
            max-width: 100% !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }

        #partyLookupWrap,
        #partyToLookupWrap {
            overflow: visible !important;
        }

        #partyLookupWrap > .select2-container,
        #partyToLookupWrap > .select2-container {
            display: block !important;
            width: 100% !important;
        }
    </style>
@endpush

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


    <div class="container-fluid app-bg payments-form-page">
        <div class="page-shell">
            <div class="space-y-4">
                <x-page-title
                    title="{{ $payment->exists ? 'Edit Payment' : 'New Payment' }}"
                    description="Create or update payment details.">
                    <div class="actions-bar">
                        <a href="{{ route('payments.index') }}" class="btn btn-outline-secondary rounded-pill">Back</a>
                    </div>
                </x-page-title>

                <form
                    action="{{ $payment->exists ? route('payments.update', $payment->id) : route('payments.store') }}"
                    method="POST"
                    id="paymentForm"
                    novalidate
                >
                    @csrf
                    @if($payment->exists)
                        @method('PUT')
                    @endif

                    @if($errors->any())
                        <div class="payment-error-summary">
                            <div>Please complete the highlighted payment fields.</div>
                            <ul>
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="ui-card mb-3">
                        <div class="workflow-card__header">
                            <div>
                                <div class="workflow-card__title mb-0">{{ $payment->exists ? 'Edit Payment' : 'Create Payment' }}</div>
                                <div class="workflow-card__subtitle">Fill the payment data and review the journal entry before posting.</div>
                            </div>
                        </div>

                        <div class="workflow-card__body">
                            
                            <div class="section-card">
                                <div class="section-card__head d-flex justify-content-between align-items-center gap-2">
                                    <span>Parties / Beneficiaries</span>
                                </div>
                                <div class="section-card__body">
                                    <div class="asset-form-grid party-grid">
                                    
                                        <div class="asset-col-4">
                                            <label class="asset-label">Party Type (From) <span class="text-danger">*</span></label>
                                            <select name="party_type" id="partyTypeSelect" class="asset-select general-select @error('party_type') is-invalid @enderror">
                                                <option value="" @selected(old('party_type', $payment->party_type) === '')>Choose Party Type</option>
                                                @foreach($partyTypes as $partyType)
                                                    <option value="{{ $partyType }}" @selected(old('party_type', $payment->party_type) === $partyType)>{{ ucfirst($partyType) }}</option>
                                                @endforeach
                                            </select>
                                            @error('party_type')<div class="field-error">{{ $message }}</div>@enderror
                                        </div>

                                        <div class="asset-col-8" id="partyLookupWrap">
                                            <label class="asset-label">Party Name (From) <span class="text-danger">*</span></label>
                                            @php
                                                $selectedPartyId = old('party_id', $payment->party_id);
                                                $selectedPartyLabel = old('party_name', $payment->party_name);
                                                $selectedPartyRef = old('party_ref', $payment->party_ref);
                                                $hasPrefilledInvoiceParty = $prefillInvoice && $selectedPartyId;
                                                $keepNativePartySelect = $selectedPartyId && ($errors->any() || $hasPrefilledInvoiceParty);
                                            @endphp
                                            <select name="party_id"
                                                    @unless($keepNativePartySelect) id="partyIdSelect" @endunless
                                                    class="asset-select {{ $keepNativePartySelect ? '' : 'general-select' }} @error('party_id') is-invalid @enderror"
                                                    data-keep-native="{{ $keepNativePartySelect ? '1' : '0' }}"
                                                    data-selected-id="{{ $selectedPartyId }}"
                                                    data-selected-label="{{ $selectedPartyLabel }}"
                                                    data-selected-ref="{{ $selectedPartyRef }}">
                                                <option value="">Select party</option>
                                                @if($selectedPartyId)
                                                    <option value="{{ $selectedPartyId }}" selected>{{ $selectedPartyLabel ?: ('Selected #' . $selectedPartyId) }}</option>
                                                @endif
                                            </select>

                                            @error('party_id')<div class="field-error">{{ $message }}</div>@enderror
                                            <div class="party-helper">The list changes by party type. Company uses manual entry only.</div>
                                        </div>


                                        <div class="asset-col-8 d-none" id="companyNameWrap">
                                            <label class="asset-label">Party Name (From) <span class="text-danger">*</span></label>
                                            <input type="text" name="party_name" id="companyNameInput" class="asset-input @error('party_name') is-invalid @enderror" value="{{ old('party_name', $payment->party_name) }}" placeholder="Enter company name">
                                            @error('party_name')<div class="field-error">{{ $message }}</div>@enderror
                                            <div class="party-helper">Company is type-only in this stage and does not use an entity row.</div>
                                        </div>

                                        <div class="asset-col-4">
                                            <label class="asset-label">Party Type (To)</label>
                                            <select name="counterparty_type" id="partyToTypeSelect" class="asset-select general-select">
                                                <option value="">Select type</option>
                                                @foreach($partyTypes as $partyType)
                                                    <option value="{{ $partyType }}" @selected(old('counterparty_type') === $partyType)>{{ ucfirst($partyType) }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="asset-col-8" id="partyToLookupWrap">
                                            <label class="asset-label">Party Name (To)</label>
                                            <select name="counterparty_id" id="partyToIdSelect" class="asset-select general-select" data-selected-id="{{ old('counterparty_id') }}">
                                                <option value="">Select party</option>
                                            </select>
                                            <input type="hidden" name="counterparty_name" id="partyToNameInput" value="{{ old('counterparty_name') }}">
                                            <div class="party-helper">The list changes by party type. Company uses manual entry only.</div>
                                        </div>

                                        <div class="asset-col-8 d-none" id="partyToCompanyNameWrap">
                                            <label class="asset-label">Party Name (To)</label>
                                            <input type="text" id="partyToCompanyNameInput" class="asset-input" value="{{ old('counterparty_name') }}" placeholder="Enter company name">
                                            <div class="party-helper">Company is type-only in this stage and does not use an entity row.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="section-card">
                                <div class="section-card__head d-flex justify-content-between align-items-center gap-2">
                                    <span>Payment Setup</span>
                                </div>
                                <div class="section-card__body">
                                    <div class="asset-form-grid setup-grid">
                                        <input type="hidden" name="currency" value="{{ old('currency', $payment->currency ?? 'EGP') }}">

                                        <div class="asset-col-4">
                                            <label class="asset-label">Payment Date <span class="text-danger">*</span></label>
                                            <input type="date" name="payment_date" class="asset-input @error('payment_date') is-invalid @enderror" value="{{ old('payment_date', optional($payment->payment_date)->format('Y-m-d') ?? date('Y-m-d')) }}">
                                            @error('payment_date')<div class="field-error">{{ $message }}</div>@enderror
                                        </div>

                                        <div class="asset-col-4">
                                            <label class="asset-label">Direction <span class="text-danger">*</span></label>
                                            <select name="direction" id="directionSelect" class="asset-select general-select @error('direction') is-invalid @enderror">
                                                @foreach($directions as $direction)
                                                    <option value="{{ $direction }}" @selected(old('direction', $payment->direction) === $direction)>{{ ucfirst($direction) }}</option>
                                                @endforeach
                                            </select>
                                            @error('direction')<div class="field-error">{{ $message }}</div>@enderror
                                        </div>

                                        <div class="asset-col-4">
                                            <label class="asset-label">Amount <span class="text-danger">*</span></label>
                                            <input type="number" name="amount" id="amountInput" class="asset-input @error('amount') is-invalid @enderror" step="0.01" min="0.01" value="{{ old('amount', $payment->amount) }}">
                                            @error('amount')<div class="field-error">{{ $message }}</div>@enderror
                                        </div>

                                        <div class="asset-col-4">
                                            <label class="asset-label">Payment Method <span class="text-danger">*</span></label>
                                            <select name="payment_method" id="paymentMethodSelect" class="asset-select general-select @error('payment_method') is-invalid @enderror">
                                                @foreach($paymentMethods as $paymentMethod)
                                                    <option value="{{ $paymentMethod }}" @selected(old('payment_method', $payment->payment_method ?? 'cash') === $paymentMethod)>
                                                        {{ ucwords(str_replace('_', ' ', $paymentMethod)) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('payment_method')<div class="field-error">{{ $message }}</div>@enderror
                                        </div>

                                        <div class="asset-col-4">
                                            <label class="asset-label">Reference No</label>
                                            <input type="text" name="reference_no" class="asset-input" value="{{ old('reference_no', $payment->reference_no) }}" placeholder="Optional reference">
                                        </div>

                                        <div class="asset-col-4">
                                            <label class="asset-label">Cost Center <span class="text-danger">*</span></label>
                                            <select name="cost_center_id" id="paymentCostCenterSelect" class="asset-select general-select @error('cost_center_id') is-invalid @enderror">
                                                <option value="">Select cost center</option>
                                                @foreach($costCenters as $costCenter)
                                                    <option value="{{ $costCenter->id }}" @selected(old('cost_center_id', $payment->cost_center_id) == $costCenter->id)>
                                                        {{ $costCenter->code }} - {{ $costCenter->title }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('cost_center_id')<div class="field-error">{{ $message }}</div>@enderror
                                        </div>

                                        <div class="asset-col-6">
                                            <label class="asset-label">From Account <span class="text-danger">*</span></label>
                                            <select name="from_account_id" id="fromAccountSelect" class="asset-select general-select @error('from_account_id') is-invalid @enderror">
                                                <option value="">Select account</option>
                                                @foreach($leafAccounts as $account)
                                                    @php
                                                        $requiresCostCenter = str_contains(strtolower((string) $account->account_type), 'revenue')
                                                            || str_contains(strtolower((string) $account->account_type), 'income')
                                                            || str_contains(strtolower((string) $account->account_type), 'expense')
                                                            || str_contains(strtolower((string) $account->account_type), 'cost')
                                                            || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'revenue')
                                                            || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'income')
                                                            || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'expense')
                                                            || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'cost');
                                                    @endphp
                                                    <option value="{{ $account->id }}" data-requires-cost-center="{{ $requiresCostCenter ? '1' : '0' }}" @selected(old('from_account_id', $payment->from_account_id) == $account->id)>{{ $account->code }} - {{ $account->title }}</option>
                                                @endforeach
                                            </select>
                                            @error('from_account_id')<div class="field-error">{{ $message }}</div>@enderror
                                        </div>

                                        <div class="asset-col-6">
                                            <label class="asset-label">To Account <span class="text-danger">*</span></label>
                                            <select name="to_account_id" id="toAccountSelect" class="asset-select general-select @error('to_account_id') is-invalid @enderror">
                                                <option value="">Select account</option>
                                                @foreach($leafAccounts as $account)
                                                    @php
                                                        $requiresCostCenter = str_contains(strtolower((string) $account->account_type), 'revenue')
                                                            || str_contains(strtolower((string) $account->account_type), 'income')
                                                            || str_contains(strtolower((string) $account->account_type), 'expense')
                                                            || str_contains(strtolower((string) $account->account_type), 'cost')
                                                            || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'revenue')
                                                            || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'income')
                                                            || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'expense')
                                                            || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'cost');
                                                    @endphp
                                                    <option value="{{ $account->id }}" data-requires-cost-center="{{ $requiresCostCenter ? '1' : '0' }}" @selected(old('to_account_id', $payment->to_account_id) == $account->id)>{{ $account->code }} - {{ $account->title }}</option>
                                                @endforeach
                                            </select>
                                            @error('to_account_id')<div class="field-error">{{ $message }}</div>@enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="section-card" id="unpaidInvoicesSection" style="display:none;">
                                <div class="section-card__head d-flex justify-content-between align-items-center gap-2">
                                    <span>Unpaid Invoices</span>
                                </div>
                                <div class="section-card__body" id="allocationsWrap">
                                    @php $currentAllocations = old('allocations', $payment->allocations->toArray() ?: ($prefillAllocation ? [$prefillAllocation] : [[]])); @endphp
                                    @foreach($currentAllocations as $index => $allocation)
                                        <div class="allocation-row">
                                            <div class="allocation-grid">
                                                <div class="allocation-col-12">
                                                    <label class="asset-label">Unpaid Invoice</label>
                                                    <select id="allocationInvoiceSelect{{ $index }}" name="allocations[{{ $index }}][allocatable_id]" class="asset-select general-select @error("allocations.$index.allocatable_id") is-invalid @enderror">
                                                        <option value="">Select invoice</option>
                                                        @foreach($studentInvoices as $invoice)
                                                            @php
                                                                $invoiceTotal = (float) ($invoice->net_price ?? $invoice->total_price ?? $invoice->total ?? 0);
                                                                $invoicePaid = (float) ($invoice->paid_amount ?? 0);
                                                                $invoiceRemaining = (float) ($invoice->remaining_amount ?? $invoiceTotal);
                                                            @endphp
                                                            <option
                                                                value="{{ $invoice->id }}"
                                                                data-allocatable-type="{{ get_class($invoice) }}"
                                                                data-student-id="{{ $invoice->student_id }}"
                                                                data-net-price="{{ number_format($invoiceTotal, 2, '.', '') }}"
                                                                data-paid="{{ number_format($invoicePaid, 2, '.', '') }}"
                                                                data-remaining="{{ number_format($invoiceRemaining, 2, '.', '') }}"
                                                                @selected((int) ($allocation['allocatable_id'] ?? 0) === $invoice->id)
                                                            >
                                                                {{ $invoice->invoice_number }} - Net {{ number_format($invoiceTotal, 2) }} - Paid {{ number_format($invoicePaid, 2) }} - Remain {{ number_format($invoiceRemaining, 2) }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error("allocations.$index.allocatable_id")<div class="field-error">{{ $message }}</div>@enderror
                                                    <input type="hidden" name="allocations[{{ $index }}][allocatable_type]" value="{{ $allocation['allocatable_type'] ?? \App\Models\StudentInvoice::class }}">
                                                    <input type="hidden" name="allocations[{{ $index }}][remaining_before]" value="{{ old("allocations.$index.remaining_before", $allocation['remaining_before'] ?? '') }}">
                                                    <input type="hidden" name="allocations[{{ $index }}][remaining_after]" value="{{ old("allocations.$index.remaining_after", $allocation['remaining_after'] ?? '') }}">
                                                </div>

                                                <div class="allocation-col-4">
                                                    <label class="asset-label">Type</label>
                                                    <select id="allocationSettlementTypeSelect{{ $index }}" name="allocations[{{ $index }}][settlement_type]" class="asset-select general-select">
                                                        <option value="total" @selected(old("allocations.$index.settlement_type", $allocation['settlement_type'] ?? 'total') === 'total')>Total Payment</option>
                                                        <option value="partial" @selected(old("allocations.$index.settlement_type", $allocation['settlement_type'] ?? 'total') === 'partial')>Partial Payment</option>
                                                    </select>
                                                </div>

                                                <div class="allocation-col-4">
                                                    <label class="asset-label">Allocated Amount</label>
                                                    <input id="allocationAllocatedAmountInput{{ $index }}" type="number" name="allocations[{{ $index }}][allocated_amount]" class="asset-input @error("allocations.$index.allocated_amount") is-invalid @enderror" step="0.01" min="0.01" value="{{ old("allocations.$index.allocated_amount", $allocation['allocated_amount'] ?? '') }}">
                                                    @error("allocations.$index.allocated_amount")<div class="field-error">{{ $message }}</div>@enderror
                                                </div>

                                                <div class="allocation-col-6">
                                                    <label class="asset-label">Notes</label>
                                                    <input type="text" name="allocations[{{ $index }}][notes]" class="asset-input" value="{{ old("allocations.$index.notes", $allocation['notes'] ?? '') }}" placeholder="Optional allocation note">
                                                </div>

                                                <div class="allocation-col-2 d-flex align-items-end">
                                                    <button type="button" class="btn btn-outline-danger w-100 remove-allocation-btn" @disabled($index === 0)>Remove</button>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                    <div id="invoiceEmptyMessage" class="alert alert-info d-none mb-0">
                                        There is no unpaid invoice related to this student yet.
                                    </div>
                                </div>
                            </div>

                            <div class="section-card">
                                <div class="section-card__head d-flex justify-content-between align-items-center gap-2">
                                    <span>Journal Preview</span>
                                </div>
                                <div class="section-card__body">
                                    <div class="journal-preview">
                                        <div class="journal-preview__head">
                                            <div>
                                                <div class="journal-preview__eyebrow">Live Preview</div>
                                                <div class="journal-preview__title">Accounting journal entry that will be posted</div>
                                                <p class="journal-preview__desc">This is the exact debit and credit structure created when you post the payment. The entry stays balanced as long as the amount and accounts are set.</p>
                                            </div>
                                            <div class="journal-status" id="journalBalanceBadge">
                                                <i class="fas fa-check"></i>
                                                Balanced
                                            </div>
                                        </div>

                                        <div class="journal-meta">
                                            <div class="journal-meta__item">
                                                <span class="journal-meta__label">Party</span>
                                                <div class="journal-meta__value" id="previewPartyValue">{{ old('party_name', $payment->party_name) ?: 'Select a party first' }}</div>
                                            </div>
                                            <div class="journal-meta__item">
                                                <span class="journal-meta__label">Direction / Source</span>
                                                <div class="journal-meta__value" id="previewDirectionValue">{{ ucfirst(old('direction', $payment->direction ?? 'incoming')) }} / Manual</div>
                                            </div>
                                            <div class="journal-meta__item">
                                                <span class="journal-meta__label">Journal Amount</span>
                                                <div class="journal-meta__value" id="previewAmountValue">{{ number_format((float) old('amount', $payment->amount ?? 0), 2) }} {{ old('currency', $payment->currency ?? 'EGP') }}</div>
                                            </div>
                                        </div>

                                        <div class="journal-table-wrap">
                                            <div class="journal-table-head">
                                                <div>Account</div>
                                                <div>Debit</div>
                                                <div>Credit</div>
                                            </div>

                                            <div class="journal-line">
                                                <div class="journal-account">
                                                    <span class="journal-account__name" id="previewFromAccountName">Select an account</span>
                                                    <span class="journal-account__code" id="previewFromAccountCode"></span>
                                                </div>
                                                <div class="journal-amount journal-amount--debit" id="previewDebitAmount">0.00</div>
                                                <div class="journal-amount">-</div>
                                            </div>

                                            <div class="journal-line">
                                                <div class="journal-account">
                                                    <span class="journal-account__name" id="previewToAccountName">Select an account</span>
                                                    <span class="journal-account__code" id="previewToAccountCode"></span>
                                                </div>
                                                <div class="journal-amount">-</div>
                                                <div class="journal-amount journal-amount--credit" id="previewCreditAmount">0.00</div>
                                            </div>

                                            <div class="journal-line journal-line--total">
                                                <div>Total</div>
                                                <div class="journal-amount" id="previewTotalDebit">0.00</div>
                                                <div class="journal-amount" id="previewTotalCredit">0.00</div>
                                            </div>
                                        </div>

                                        <div class="journal-summary">
                                            <div id="previewBalanceText">Debit and credit will match once an amount is entered.</div>
                                            <div class="text-muted small">Posting creates one journal entry with two lines.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="section-card mb-0">
                                <div class="section-card__head">Notes</div>
                                <div class="section-card__body">
                                    <div class="asset-form-grid">
                                        <div class="asset-col-12">
                                            <label class="asset-label">Internal Notes</label>
                                            <textarea name="notes" class="asset-input" rows="4" placeholder="Optional internal note">{{ old('notes', $payment->notes) }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="actions-bar mt-3">
                        <button type="submit" name="submit_action" value="draft" class="btn btn-outline-secondary rounded-pill">
                            Save Draft
                        </button>
                        <button type="submit" name="submit_action" value="post" class="btn btn-primary rounded-pill">
                            Post Payment
                        </button>
                        <a href="{{ route('payments.index') }}" class="btn btn-outline-danger rounded-pill">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    (function () {
        const partyTypeSelect = document.getElementById('partyTypeSelect');
        const partyIdSelect = document.getElementById('partyIdSelect');
        const nativePartyIdSelect = document.querySelector('select[name="party_id"][data-keep-native="1"]');
        const fromPartyIdSelect = partyIdSelect || nativePartyIdSelect;
        const companyNameInput = document.getElementById('companyNameInput');
        const companyNameWrap = document.getElementById('companyNameWrap');
        const partyLookupWrap = document.getElementById('partyLookupWrap');
        const partyToTypeSelect = document.getElementById('partyToTypeSelect');
        const partyToIdSelect = document.getElementById('partyToIdSelect');
        const partyToNameInput = document.getElementById('partyToNameInput');
        const partyToLookupWrap = document.getElementById('partyToLookupWrap');
        const partyToCompanyNameWrap = document.getElementById('partyToCompanyNameWrap');
        const partyToCompanyNameInput = document.getElementById('partyToCompanyNameInput');
        const amountInput = document.getElementById('amountInput');
        const directionSelect = document.getElementById('directionSelect');
        const fromAccountSelect = document.getElementById('fromAccountSelect');
        const toAccountSelect = document.getElementById('toAccountSelect');
        const paymentForm = document.getElementById('paymentForm');
        const paymentCostCenterSelect = document.getElementById('paymentCostCenterSelect');
        const journalBalanceBadge = document.getElementById('journalBalanceBadge');
        const previewPartyValue = document.getElementById('previewPartyValue');
        const previewDirectionValue = document.getElementById('previewDirectionValue');
        const previewAmountValue = document.getElementById('previewAmountValue');
        const previewFromAccountName = document.getElementById('previewFromAccountName');
        const previewFromAccountCode = document.getElementById('previewFromAccountCode');
        const previewToAccountName = document.getElementById('previewToAccountName');
        const previewToAccountCode = document.getElementById('previewToAccountCode');
        const previewDebitAmount = document.getElementById('previewDebitAmount');
        const previewCreditAmount = document.getElementById('previewCreditAmount');
        const previewTotalDebit = document.getElementById('previewTotalDebit');
        const previewTotalCredit = document.getElementById('previewTotalCredit');
        const previewBalanceText = document.getElementById('previewBalanceText');
        const addAllocationBtn = document.getElementById('addAllocationBtn');
        const allocationsWrap = document.getElementById('allocationsWrap');
        const invoiceEmptyMessage = document.getElementById('invoiceEmptyMessage');
        let allocationIndex = allocationsWrap ? allocationsWrap.querySelectorAll('.allocation-row').length : 0;
        let studentInvoiceOptions = [];
        let invoiceRequestCounter = 0;
        let invoiceListRequestCounter = 0;

        document.addEventListener('mousedown', function (event) {
            if (event.target.closest('.payments-form-page .select2-selection__clear')) {
                event.preventDefault();
                event.stopPropagation();
                event.stopImmediatePropagation();
            }
        }, true);

        document.addEventListener('click', function (event) {
            if (event.target.closest('.payments-form-page .select2-selection__clear')) {
                event.preventDefault();
                event.stopPropagation();
                event.stopImmediatePropagation();
            }
        }, true);

        function formatMoney(value) {
            const amount = Number(value || 0);

            if (Number.isNaN(amount)) {
                return '0.00';
            }

            return amount.toLocaleString('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
            });
        }

        function capitalize(value) {
            if (!value) {
                return 'N/A';
            }

            return String(value)
                .replace(/_/g, ' ')
                .replace(/\b\w/g, character => character.toUpperCase());
        }

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

        function bindSelectChange(select, handler) {
            if (!select) {
                return;
            }

            if (window.jQuery) {
                $(select).off('change.paymentParty').on('change.paymentParty', handler);
                return;
            }

            select.addEventListener('change', handler);
        }

        function normalizeSelect2Widths(scope = document) {
            if (!window.jQuery || !jQuery.fn.select2) {
                return;
            }

            $(scope).find('.general-select').not('#partyIdSelect, #partyToIdSelect').each(function () {
                const container = $(this).next('.select2-container');
                container.css({
                    width: '100%',
                    maxWidth: '100%',
                    minWidth: 0,
                });
                container.toggleClass('is-invalid', this.classList.contains('is-invalid'));
            });
        }

        function initializePaymentSelects(scope = document) {
            if (!window.jQuery || !jQuery.fn.select2) {
                return;
            }

            $(scope).find('.general-select').each(function () {
                destroySelect2IfReady(this);

                $(this).select2({
                    width: '100%',
                    allowClear: false,
                });
            });

            normalizeSelect2Widths(scope);
        }

        function destroySelect2IfReady(select) {
            if (!select || !window.jQuery || !jQuery.fn.select2) {
                return;
            }

            if ($(select).hasClass('select2-hidden-accessible')) {
                $(select).select2('destroy');
            }
        }

        function getSelectedAccountMeta(select) {
            if (!select || select.selectedIndex < 0) {
                return {
                    name: 'Select an account',
                    code: '',
                };
            }

            const selected = select.options[select.selectedIndex];
            const text = (selected ? selected.textContent : '').trim();
            if (!text || text === 'Select account') {
                return {
                    name: 'Select an account',
                    code: '',
                };
            }

            const [code, ...titleParts] = text.split(' - ');
            return {
                name: titleParts.length ? titleParts.join(' - ') : text,
                code: titleParts.length ? code : '',
            };
        }

        function getAllocatedAmountTotal() {
            if (!allocationsWrap) {
                return 0;
            }

            return Array.from(allocationsWrap.querySelectorAll('input[id^="allocationAllocatedAmountInput"]'))
                .reduce((total, input) => {
                    const value = Number(input.value || 0);

                    return total + (Number.isNaN(value) ? 0 : value);
                }, 0);
        }

        function getAllocationRows() {
            return allocationsWrap ? Array.from(allocationsWrap.querySelectorAll('.allocation-row')) : [];
        }

        function getAllocationInvoiceSelect(row) {
            return row ? row.querySelector('select[id^="allocationInvoiceSelect"]') : null;
        }

        function isAllocationInvoiceSelect(element) {
            return element
                && element.tagName === 'SELECT'
                && element.id
                && element.id.startsWith('allocationInvoiceSelect');
        }

        function getAllocationSettlementTypeSelect(row) {
            return row ? row.querySelector('select[id^="allocationSettlementTypeSelect"]') : null;
        }

        function getAllocationAllocatedAmountInput(row) {
            return row ? row.querySelector('input[id^="allocationAllocatedAmountInput"]') : null;
        }

        function isAllocationSettlementTypeSelect(element) {
            return element
                && element.tagName === 'SELECT'
                && element.id
                && element.id.startsWith('allocationSettlementTypeSelect');
        }

        function shouldLoadStudentInvoices() {
            const isCompany = partyTypeSelect && partyTypeSelect.value === 'company';

            return partyTypeSelect
                && directionSelect
                && partyTypeSelect.value
                && (isCompany || fromPartyIdSelect)
                && ['incoming', 'outgoing'].includes(directionSelect.value);
        }

        function toggleUnpaidInvoicesSection() {
            const section = document.getElementById('unpaidInvoicesSection');
            if (!section) return;
            const hasPartyType = partyTypeSelect && partyTypeSelect.value;
            section.style.display = hasPartyType ? '' : 'none';
        }

        function setInvoiceMessage(message = '') {
            if (!invoiceEmptyMessage) {
                return;
            }

            invoiceEmptyMessage.textContent = message || 'There is no unpaid invoice related to this party yet.';
            invoiceEmptyMessage.classList.toggle('d-none', !message);
        }

        function invoiceOptionHtml(item, selectedId = '') {
            const selected = String(item.id) === String(selectedId) ? 'selected' : '';
            const netPrice = Number(item.net_price || 0).toFixed(2);
            const paid = Number(item.paid || 0).toFixed(2);
            const remaining = Number(item.remaining || 0).toFixed(2);
            const label = item.label || `${item.invoice_number} - Net ${formatMoney(item.net_price)} - Paid ${formatMoney(item.paid)} - Remain ${formatMoney(item.remaining)}`;

            return `
                <option
                    value="${escapeHtml(item.id)}"
                    data-allocatable-type="${escapeHtml(item.allocatable_type || @js(\App\Models\StudentInvoice::class))}"
                    data-student-id="${escapeHtml(item.student_id || '')}"
                    data-net-price="${escapeHtml(netPrice)}"
                    data-paid="${escapeHtml(paid)}"
                    data-remaining="${escapeHtml(remaining)}"
                    ${selected}
                >${escapeHtml(label)}</option>
            `;
        }

        function invoiceItemFromOption(option) {
            if (!option || !option.value) {
                return null;
            }

            return {
                id: option.value,
                allocatable_type: option.dataset.allocatableType,
                invoice_number: option.textContent.trim().split(' - ')[0] || option.value,
                student_id: option.dataset.studentId || '',
                net_price: Number(option.dataset.netPrice || 0),
                paid: Number(option.dataset.paid || 0),
                remaining: Number(option.dataset.remaining || 0),
                label: option.textContent.trim(),
            };
        }

        function upsertInvoiceOptionItem(item) {
            if (!item || !item.id) {
                return;
            }

            const index = studentInvoiceOptions.findIndex(option => String(option.id) === String(item.id));
            if (index >= 0) {
                studentInvoiceOptions[index] = item;
                return;
            }

            studentInvoiceOptions.push(item);
        }

        function updateInvoiceSelectOption(select, item) {
            if (!select || !item || !item.id) {
                return null;
            }

            let option = Array.from(select.options).find(current => String(current.value) === String(item.id));
            if (!option) {
                option = new Option('', item.id, false, true);
                select.appendChild(option);
            }

            option.textContent = item.label || `${item.invoice_number} - Net ${formatMoney(item.net_price)} - Paid ${formatMoney(item.paid)} - Remain ${formatMoney(item.remaining)}`;
            option.dataset.studentId = item.student_id || '';
            option.dataset.allocatableType = item.allocatable_type || @js(\App\Models\StudentInvoice::class);
            option.dataset.netPrice = Number(item.net_price || 0).toFixed(2);
            option.dataset.paid = Number(item.paid || 0).toFixed(2);
            option.dataset.remaining = Number(item.remaining || 0).toFixed(2);
            option.selected = true;
            select.value = String(item.id);

            if (window.jQuery && jQuery.fn.select2) {
                $(select).trigger('change.select2');
                normalizeSelect2Widths(select.closest('.allocation-row') || allocationsWrap || document);
            }

            return option;
        }

        function replaceInvoiceOptions(options) {
            studentInvoiceOptions = Array.isArray(options) ? options : [];

            getAllocationRows().forEach(row => {
                const select = getAllocationInvoiceSelect(row);
                if (!select) {
                    return;
                }

                const currentValue = select.value;
                const currentOptionItem = invoiceItemFromOption(select.options[select.selectedIndex]);
                const hasCurrentValue = studentInvoiceOptions.some(item => String(item.id) === String(currentValue)
                    && (item.allocatable_type || @js(\App\Models\StudentInvoice::class)) === currentOptionItem?.allocatable_type);
                if (currentValue && !hasCurrentValue) {
                    const amount = getAllocationAllocatedAmountInput(row);
                    if (amount) amount.value = '';
                }
                select.innerHTML = [
                    '<option value="">Select invoice</option>',
                    ...studentInvoiceOptions.map(item => invoiceOptionHtml(item, hasCurrentValue ? currentValue : '')),
                ].join('');

                if (window.jQuery && jQuery.fn.select2) {
                    $(select).val(hasCurrentValue ? currentValue : '').trigger('change.select2');
                    normalizeSelect2Widths(row);
                }

                applySettlementToRow(row, true);
                if (currentValue) {
                    loadSelectedInvoiceData(row, true);
                }
            });

            refreshAllocations(true);
        }

        function loadStudentInvoices() {
            const requestKey = ++invoiceListRequestCounter;
            if (!shouldLoadStudentInvoices()) {
                replaceInvoiceOptions([]);
                setInvoiceMessage('');
                return;
            }

            const partyType = partyTypeSelect.value;
            const partyId = partyType === 'company' ? '' : fromPartyIdSelect.value;
            const partyName = partyType === 'company'
                ? (companyNameInput?.value || '')
                : (document.getElementById('partyNameInput')?.value || fromPartyIdSelect.dataset.selectedLabel || '');
            const partyRef = partyType === 'company'
                ? ''
                : (document.getElementById('partyRefInput')?.value || fromPartyIdSelect.dataset.selectedRef || '');

            if (partyType !== 'company' && !partyId) {
                replaceInvoiceOptions([]);
                setInvoiceMessage('Select a party to load unpaid invoices.');
                return;
            }

            if (partyType === 'company' && !partyName.trim()) {
                replaceInvoiceOptions([]);
                setInvoiceMessage('Enter a company name to load unpaid invoices.');
                return;
            }

            setInvoiceMessage('Loading unpaid invoices...');

            const params = new URLSearchParams({
                party_type: partyType,
                party_id: partyId,
                party_name: partyName,
                party_ref: partyRef,
            });

            const url = directionSelect.value === 'outgoing'
                ? @js(route('payments.purchase_invoices')) : @js(route('payments.student_invoices'));
            fetch(`${url}?${params.toString()}`)
                .then(response => {
                    if (!response.ok) throw new Error('Could not load invoices.');
                    return response.json();
                })
                .then(payload => {
                    if (requestKey !== invoiceListRequestCounter) return;
                    const options = payload.options || [];
                    replaceInvoiceOptions(options);
                    setInvoiceMessage(options.length ? '' : 'There is no unpaid invoice related to this party yet.');
                })
                .catch(() => {
                    if (requestKey !== invoiceListRequestCounter) return;
                    replaceInvoiceOptions([]);
                    setInvoiceMessage('Could not load invoices for this party. Please try again.');
                });
        }

        function loadSelectedInvoiceData(row, force = false) {
            const select = getAllocationInvoiceSelect(row);
            const invoiceId = select ? select.value : '';

            if (!row || !select || !invoiceId) {
                applySettlementToRow(row, force);
                refreshJournalPreview();
                return Promise.resolve(null);
            }

            const requestKey = String(++invoiceRequestCounter);
            const listRequestKey = invoiceListRequestCounter;
            row.dataset.invoiceRequestKey = requestKey;

            const url = directionSelect.value === 'outgoing'
                ? @js(route('payments.purchase_invoice')) : @js(route('payments.student_invoice'));
            return fetch(`${url}?invoice_id=${encodeURIComponent(invoiceId)}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Could not load selected invoice.');
                    }

                    return response.json();
                })
                .then(payload => {
                    if (listRequestKey !== invoiceListRequestCounter || row.dataset.invoiceRequestKey !== requestKey || select.value !== String(invoiceId)) {
                        return null;
                    }

                    const invoice = payload.invoice || null;
                    if (!invoice) {
                        return null;
                    }

                    upsertInvoiceOptionItem(invoice);
                    updateInvoiceSelectOption(select, invoice);
                    applySettlementToRow(row, force);
                    refreshDuplicateInvoiceOptions();
                    fillPaymentAmountFromAllocations();
                    refreshJournalPreview();

                    return invoice;
                })
                .catch(() => {
                    applySettlementToRow(row, force);
                    refreshJournalPreview();
                    return null;
                });
        }

        function getRowInvoiceMeta(row) {
            const select = getAllocationInvoiceSelect(row);
            const option = select && select.selectedIndex >= 0 ? select.options[select.selectedIndex] : null;

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

            const remaining = Number(option.dataset.remaining || 0);
            const netPrice = Number(option.dataset.netPrice || 0);
            const paid = Number(option.dataset.paid || 0);
            const invoiceAmount = remaining > 0 ? remaining : netPrice;

            return {
                id: option.value,
                netPrice: Number.isNaN(netPrice) ? 0 : netPrice,
                paid: Number.isNaN(paid) ? 0 : paid,
                remaining: Number.isNaN(remaining) ? 0 : remaining,
                invoiceAmount: Number.isNaN(invoiceAmount) ? 0 : invoiceAmount,
            };
        }

        function fillPaymentAmountFromAllocations() {
            const total = getAllocatedAmountTotal();

            if (amountInput && total > 0) {
                amountInput.value = total.toFixed(2);
            }
        }

        function refreshDuplicateInvoiceOptions() {
            const selectedIds = getAllocationRows()
                .map(row => getAllocationInvoiceSelect(row)?.value)
                .filter(Boolean);
            const shouldRestrictToStudent = partyTypeSelect
                && fromPartyIdSelect
                && directionSelect
                && partyTypeSelect.value === 'student'
                && directionSelect.value === 'incoming';
            const selectedStudentId = shouldRestrictToStudent ? String(fromPartyIdSelect.value || '') : '';

            getAllocationRows().forEach(row => {
                const select = getAllocationInvoiceSelect(row);
                if (!select) {
                    return;
                }

                Array.from(select.options).forEach(option => {
                    if (!option.value) {
                        return;
                    }

                    const belongsToSelectedStudent = !shouldRestrictToStudent
                        || (selectedStudentId !== '' && String(option.dataset.studentId || '') === selectedStudentId);
                    const isDuplicate = option.value !== select.value && selectedIds.includes(option.value);
                    option.disabled = !belongsToSelectedStudent || isDuplicate;
                    option.hidden = !belongsToSelectedStudent;
                });

                const selectedOption = select.options[select.selectedIndex];
                if (selectedOption && selectedOption.value && selectedOption.disabled) {
                    select.value = '';
                    applySettlementToRow(row, true);
                }
            });

            if (window.jQuery && jQuery.fn.select2) {
                $('select[id^="allocationInvoiceSelect"]').trigger('change.select2');
                normalizeSelect2Widths(allocationsWrap);
            }
        }

        function getRowSettlementType(row) {
            return getAllocationSettlementTypeSelect(row)?.value || 'total';
        }

        function applySettlementToRow(row, force = false) {
            const input = getAllocationAllocatedAmountInput(row);
            const meta = getRowInvoiceMeta(row);
            const invoiceSelect = getAllocationInvoiceSelect(row);
            const typeInput = row.querySelector('input[name$="[allocatable_type]"]');
            if (typeInput) {
                typeInput.value = invoiceSelect?.selectedOptions[0]?.dataset.allocatableType
                    || (directionSelect.value === 'outgoing' ? @js(\App\Models\PurchaseInvoice::class) : @js(\App\Models\StudentInvoice::class));
            }
            const settlementType = getRowSettlementType(row);

            
            if (!input) {
                return;
            }

            if (!meta) {
                input.removeAttribute('max');
                input.disabled = false;
                input.readOnly = false;
                input.removeAttribute('disabled');
                input.removeAttribute('readonly');
                return;
            }

            input.max = meta.invoiceAmount.toFixed(2);
            input.disabled = false;
            input.removeAttribute('disabled');
            input.readOnly = settlementType === 'total';

            if (settlementType === 'total') {
                input.value = meta.invoiceAmount.toFixed(2);
                
            }

            const amount = Number(input.value || 0);
            if (amount > meta.invoiceAmount + 0.001) {
                input.value = meta.invoiceAmount.toFixed(2);
            }
        }

        function handleAllocationSettlementTypeChange(select) {
            const row = select.closest('.allocation-row');
            const input = getAllocationAllocatedAmountInput(row);

            if (input && select.value === 'partial') {
                input.disabled = false;
                input.readOnly = false;
                input.removeAttribute('disabled');
                input.removeAttribute('readonly');
            }

            loadSelectedInvoiceData(row, true).then(() => refreshAllocations(true));
        }

        function refreshAllocations(forceSettlement = false) {
            getAllocationRows().forEach(row => applySettlementToRow(row, forceSettlement));
            refreshDuplicateInvoiceOptions();
            if (forceSettlement && getAllocationRows().some(row => getRowSettlementType(row) === 'total')) {
                fillPaymentAmountFromAllocations();
            }
            refreshJournalPreview();
        }

        function refreshJournalPreview() {
            const paymentAmount = Number(amountInput ? amountInput.value : 0) || 0;
            const allocatedAmount = getAllocatedAmountTotal();
            const journalAmount = allocatedAmount > 0 ? allocatedAmount : paymentAmount;
            const currency = document.querySelector('[name="currency"]')?.value || 'EGP';
            const direction = directionSelect ? directionSelect.value : '';
            const sourceType = 'manual';
            const party = partyTypeSelect && partyTypeSelect.value === 'company'
                ? companyNameInput.value.trim()
                : (fromPartyIdSelect && fromPartyIdSelect.selectedIndex > 0 ? fromPartyIdSelect.options[fromPartyIdSelect.selectedIndex].textContent.trim() : '');
            const fromMeta = getSelectedAccountMeta(fromAccountSelect);
            const toMeta = getSelectedAccountMeta(toAccountSelect);

            if (previewPartyValue) {
                previewPartyValue.textContent = party || 'Select a party first';
            }

            if (previewDirectionValue) {
                previewDirectionValue.textContent = `${capitalize(direction)} / ${capitalize(sourceType)}`;
            }

            if (previewAmountValue) {
                previewAmountValue.textContent = `${formatMoney(journalAmount)} ${currency}`;
            }

            if (previewFromAccountName) {
                previewFromAccountName.textContent = fromMeta.name;
            }

            if (previewFromAccountCode) {
                previewFromAccountCode.textContent = fromMeta.code;
            }

            if (previewToAccountName) {
                previewToAccountName.textContent = toMeta.name;
            }

            if (previewToAccountCode) {
                previewToAccountCode.textContent = toMeta.code;
            }

            if (previewDebitAmount) {
                previewDebitAmount.textContent = journalAmount > 0 ? formatMoney(journalAmount) : '0.00';
            }

            if (previewCreditAmount) {
                previewCreditAmount.textContent = journalAmount > 0 ? formatMoney(journalAmount) : '0.00';
            }

            if (previewTotalDebit) {
                previewTotalDebit.textContent = journalAmount > 0 ? formatMoney(journalAmount) : '0.00';
            }

            if (previewTotalCredit) {
                previewTotalCredit.textContent = journalAmount > 0 ? formatMoney(journalAmount) : '0.00';
            }

            if (previewBalanceText) {
                previewBalanceText.textContent = journalAmount > 0
                    ? `Debit ${formatMoney(journalAmount)} = Credit ${formatMoney(journalAmount)}.`
                    : 'Debit and credit will match once an allocated amount is entered.';
            }

            if (journalBalanceBadge) {
                const ready = journalAmount > 0 && fromMeta.name !== 'Select an account' && toMeta.name !== 'Select an account';
                journalBalanceBadge.innerHTML = ready
                    ? '<i class="fas fa-check"></i> Ready to post'
                    : '<i class="fas fa-clock"></i> Waiting for setup';
            }
        }

        function setPartyUi(type, lookupWrap, companyWrap, select, companyInput, hiddenNameInput = null) {
            const isCompany = type === 'company';
            companyWrap.classList.toggle('d-none', !isCompany);
            lookupWrap.classList.toggle('d-none', isCompany);

            if (isCompany) {
                select.value = '';
                if (hiddenNameInput) {
                    hiddenNameInput.value = companyInput ? companyInput.value : '';
                }
            } else if (companyInput) {
                companyInput.value = '';
                if (hiddenNameInput) {
                    hiddenNameInput.value = '';
                }
            }
            refreshJournalPreview();
        }

        function updatePartyNameFromSelection(select, hiddenNameInput = null) {
            const selected = select.options[select.selectedIndex];
            if (hiddenNameInput) {
                hiddenNameInput.value = selected && select.value ? (selected.dataset.label || selected.textContent.trim()) : '';
            }

            if (!selected) {
                refreshJournalPreview();
                return;
            }
            refreshJournalPreview();
        }

        function ensureSelectedPartyOption(select, selectedId) {
            if (!select || !selectedId || Array.from(select.options).some(option => String(option.value) === String(selectedId))) {
                return;
            }

            const fallbackLabel = select.dataset.selectedLabel || `Selected #${selectedId}`;
            const option = new Option(fallbackLabel, selectedId, true, true);
            option.dataset.label = fallbackLabel;
            option.dataset.ref = select.dataset.selectedRef || '';
            select.appendChild(option);
        }

        function loadPartyOptions(type, selectedId, select, hiddenNameInput = null) {
            if (select?.dataset.keepNative === '1') {
                ensureSelectedPartyOption(select, selectedId || select.dataset.selectedId);
                updatePartyNameFromSelection(select, hiddenNameInput);
                if (select === partyIdSelect) {
                    loadStudentInvoices();
                }
                return;
            }

            if (!type || type === 'company') {
                select.innerHTML = '<option value="">Select party</option>';
                if (hiddenNameInput && type !== 'company') {
                    hiddenNameInput.value = '';
                }
                // destroy any existing select2 ajax instance
                if (window.jQuery && jQuery.fn.select2) {
                    destroySelect2IfReady(select);
                }
                return;
            }

            // For student: use Select2 AJAX search so all students are reachable
            if (type === 'student' && window.jQuery && jQuery.fn.select2) {
                // destroy previous instance first
                destroySelect2IfReady(select);

                select.innerHTML = '<option value="">Search student by name or ID…</option>';

                // If we have a pre-selected student, inject that option first
                if (selectedId) {
                    const selectedLabel = select.dataset.selectedLabel || selectedId;
                    const selectedRef   = select.dataset.selectedRef || '';
                    select.innerHTML = `<option value="${escapeHtml(selectedId)}" data-label="${escapeHtml(selectedLabel)}" data-ref="${escapeHtml(selectedRef)}" selected>${escapeHtml(selectedLabel)}</option>`;
                }

                $(select).select2({
                    placeholder: 'Search student by name or ID…',
                    allowClear: false,
                    minimumInputLength: 0,
                    ajax: {
                        url: '{{ route('payments.parties') }}',
                        dataType: 'json',
                        delay: 300,
                        data: function (params) {
                            return {
                                type: 'student',
                                search: params.term || '',
                                limit: 50,
                            };
                        },
                        processResults: function (payload) {
                            return {
                                results: (payload.options || []).map(item => ({
                                    id: item.id,
                                    text: item.label,
                                    reference: item.reference || '',
                                })),
                            };
                        },
                        cache: true,
                    },
                    templateResult: function (item) {
                        if (item.loading) return item.text;
                        return item.text;
                    },
                });

                $(select).on('select2:select select2:clear', function () {
                    const chosen = $(select).select2('data')[0];
                    if (chosen && chosen.id) {
                        // store label & ref on the element for other functions
                        select.dataset.selectedLabel = chosen.text || '';
                        select.dataset.selectedRef   = chosen.reference || '';
                    }
                    updatePartyNameFromSelection(select, hiddenNameInput);
                    if (select === partyIdSelect) {
                        loadStudentInvoices();
                        refreshAllocations(true);
                    }
                });

                normalizeSelect2Widths(select.closest('.asset-form-grid') || document);
                updatePartyNameFromSelection(select, hiddenNameInput);

                if (select === partyIdSelect) {
                    loadStudentInvoices();
                }
                return;
            }

            // For teacher / staff: same Select2 AJAX pattern
            if (window.jQuery && jQuery.fn.select2) {
                destroySelect2IfReady(select);

                const placeholder = type === 'teacher' ? 'Search teacher by name or ID…' : 'Search staff by name or ID…';
                select.innerHTML = '<option value="">'+placeholder+'</option>';

                if (selectedId) {
                    const selectedLabel = select.dataset.selectedLabel || selectedId;
                    const selectedRef   = select.dataset.selectedRef || '';
                    select.innerHTML = `<option value="${escapeHtml(selectedId)}" data-label="${escapeHtml(selectedLabel)}" data-ref="${escapeHtml(selectedRef)}" selected>${escapeHtml(selectedLabel)}</option>`;
                }

                $(select).select2({
                    placeholder: placeholder,
                    allowClear: false,
                    minimumInputLength: 0,
                    ajax: {
                        url: '{{ route('payments.parties') }}',
                        dataType: 'json',
                        delay: 300,
                        data: function (params) {
                            return {
                                type: type,
                                search: params.term || '',
                                limit: 50,
                            };
                        },
                        processResults: function (payload) {
                            return {
                                results: (payload.options || []).map(item => ({
                                    id: item.id,
                                    text: item.label,
                                    reference: item.reference || '',
                                })),
                            };
                        },
                        cache: true,
                    },
                });

                $(select).on('select2:select select2:clear', function () {
                    const chosen = $(select).select2('data')[0];
                    if (chosen && chosen.id) {
                        select.dataset.selectedLabel = chosen.text || '';
                        select.dataset.selectedRef   = chosen.reference || '';
                    }
                    updatePartyNameFromSelection(select, hiddenNameInput);
                    if (select === partyIdSelect) {
                        loadStudentInvoices();
                        refreshAllocations(true);
                    }
                });

                normalizeSelect2Widths(select.closest('.asset-form-grid') || document);
                updatePartyNameFromSelection(select, hiddenNameInput);

                if (select === partyIdSelect) {
                    loadStudentInvoices();
                }
                return;
            }

            // Fallback (no jQuery/select2): plain fetch
            const selectedLabel = select.dataset.selectedLabel || '';
            select.innerHTML = '<option value="">Loading...</option>';
            ensureSelectedPartyOption(select, selectedId);

            fetch(`{{ route('payments.parties') }}?type=${encodeURIComponent(type)}&limit=50`)
                .then(response => response.json())
                .then(payload => {
                    const options = ['<option value="">Select party</option>'];
                    let hasSelectedOption = false;

                    (payload.options || []).forEach(item => {
                        const selected = String(item.id) === String(selectedId) ? 'selected' : '';
                        hasSelectedOption = hasSelectedOption || selected !== '';
                        options.push(`<option value="${escapeHtml(item.id)}" data-label="${escapeHtml(item.label)}" data-ref="${escapeHtml(item.reference || '')}" ${selected}>${escapeHtml(item.label)}</option>`);
                    });

                    if (selectedId && !hasSelectedOption && selectedLabel) {
                        options.push(`<option value="${escapeHtml(selectedId)}" data-label="${escapeHtml(selectedLabel)}" data-ref="${escapeHtml(select.dataset.selectedRef || '')}" selected>${escapeHtml(selectedLabel)}</option>`);
                    }

                    select.innerHTML = options.join('');
                    if (selectedId) {
                        select.value = String(selectedId);
                    }
                    updatePartyNameFromSelection(select, hiddenNameInput);
                    if (select === partyIdSelect) {
                        loadStudentInvoices();
                    }
                })
                .catch(() => {
                    select.innerHTML = '<option value="">Select party</option>';
                    ensureSelectedPartyOption(select, selectedId);
                    updatePartyNameFromSelection(select, hiddenNameInput);
                    if (select === partyIdSelect) {
                        loadStudentInvoices();
                    }
                });
        }

        function allocationTemplate(index) {
            return `
                <div class="allocation-row">
                    <div class="allocation-grid">
                        <div class="allocation-col-12">
                            <label class="asset-label">Unpaid Invoice</label>
                            <select id="allocationInvoiceSelect${index}" name="allocations[${index}][allocatable_id]" class="asset-select general-select">
                                <option value="">Select invoice</option>
                                @foreach($studentInvoices as $invoice)
                                    @php
                                        $invoiceTotal = (float) ($invoice->net_price ?? $invoice->total_price ?? $invoice->total ?? 0);
                                        $invoicePaid = (float) ($invoice->paid_amount ?? 0);
                                        $invoiceRemaining = (float) ($invoice->remaining_amount ?? $invoiceTotal);
                                    @endphp
                                    <option
                                        value="{{ $invoice->id }}"
                                        data-allocatable-type="{{ get_class($invoice) }}"
                                        data-student-id="{{ $invoice->student_id }}"
                                        data-net-price="{{ number_format($invoiceTotal, 2, '.', '') }}"
                                        data-paid="{{ number_format($invoicePaid, 2, '.', '') }}"
                                        data-remaining="{{ number_format($invoiceRemaining, 2, '.', '') }}"
                                    >
                                        {{ $invoice->invoice_number }} - Net {{ number_format($invoiceTotal, 2) }} - Paid {{ number_format($invoicePaid, 2) }} - Remain {{ number_format($invoiceRemaining, 2) }}
                                    </option>
                                @endforeach
                            </select>
                            <input type="hidden" name="allocations[${index}][allocatable_type]" value="{{ \App\Models\StudentInvoice::class }}">
                        </div>
                        <div class="allocation-col-4">
                            <label class="asset-label">Type</label>
                            <select id="allocationSettlementTypeSelect${index}" name="allocations[${index}][settlement_type]" class="asset-select general-select">
                                <option value="total" selected>Total Payment</option>
                                <option value="partial">Partial Payment</option>
                            </select>
                        </div>
                        <div class="allocation-col-4">
                            <label class="asset-label">Allocated Amount</label>
                            <input id="allocationAllocatedAmountInput${index}" type="number" name="allocations[${index}][allocated_amount]" class="asset-input" step="0.01" min="0.01">
                        </div>
                        <div class="allocation-col-6">
                            <label class="asset-label">Notes</label>
                            <input type="text" name="allocations[${index}][notes]" class="asset-input" placeholder="Optional allocation note">
                        </div>
                        <div class="allocation-col-2 d-flex align-items-end">
                            <button type="button" class="btn btn-outline-danger w-100 remove-allocation-btn">Remove</button>
                        </div>
                    </div>
                </div>
            `;
        }

        document.addEventListener('DOMContentLoaded', function () {
            initializePaymentSelects();

            const initialType = partyTypeSelect ? partyTypeSelect.value : '';
            const initialPartyId = fromPartyIdSelect ? (fromPartyIdSelect.dataset.selectedId || fromPartyIdSelect.value) : '';
            setPartyUi(initialType, partyLookupWrap, companyNameWrap, fromPartyIdSelect, companyNameInput);
            loadPartyOptions(initialType, initialPartyId, fromPartyIdSelect);
            if (initialType === 'company') loadStudentInvoices();
            toggleUnpaidInvoicesSection();

            const initialToType = partyToTypeSelect ? partyToTypeSelect.value : '';
            const initialToPartyId = partyToIdSelect ? (partyToIdSelect.dataset.selectedId || partyToIdSelect.value) : '';
            setPartyUi(initialToType, partyToLookupWrap, partyToCompanyNameWrap, partyToIdSelect, partyToCompanyNameInput, partyToNameInput);
            loadPartyOptions(initialToType, initialToPartyId, partyToIdSelect, partyToNameInput);

            bindSelectChange(partyTypeSelect, function () {
                setPartyUi(partyTypeSelect.value, partyLookupWrap, companyNameWrap, fromPartyIdSelect, companyNameInput);
                loadPartyOptions(partyTypeSelect.value, '', fromPartyIdSelect);
                loadStudentInvoices();
                toggleUnpaidInvoicesSection();
                refreshAllocations(true);
                refreshJournalPreview();
            });

            bindSelectChange(fromPartyIdSelect, function () {
                updatePartyNameFromSelection(fromPartyIdSelect);
                loadStudentInvoices();
                refreshAllocations(true);
            });

            if (companyNameInput) {
                companyNameInput.addEventListener('input', function () {
                    if (partyTypeSelect && partyTypeSelect.value === 'company') {
                        loadStudentInvoices();
                        refreshJournalPreview();
                    }
                });
            }

            bindSelectChange(partyToTypeSelect, function () {
                setPartyUi(partyToTypeSelect.value, partyToLookupWrap, partyToCompanyNameWrap, partyToIdSelect, partyToCompanyNameInput, partyToNameInput);
                loadPartyOptions(partyToTypeSelect.value, '', partyToIdSelect, partyToNameInput);
                refreshJournalPreview();
            });

            bindSelectChange(partyToIdSelect, function () {
                updatePartyNameFromSelection(partyToIdSelect, partyToNameInput);
            });

            if (partyToCompanyNameInput) {
                partyToCompanyNameInput.addEventListener('input', function () {
                    if (partyToTypeSelect && partyToTypeSelect.value === 'company' && partyToNameInput) {
                        partyToNameInput.value = this.value;
                    }
                    refreshJournalPreview();
                });
            }

            if (amountInput) {
                amountInput.addEventListener('input', refreshJournalPreview);
            }

            if (allocationsWrap) {
                allocationsWrap.addEventListener('input', function (event) {
                    if (event.target.matches('input[id^="allocationAllocatedAmountInput"]')) {
                        const row = event.target.closest('.allocation-row');
                        applySettlementToRow(row);
                        refreshJournalPreview();
                    }
                });

                allocationsWrap.addEventListener('change', function (event) {
                    if (isAllocationInvoiceSelect(event.target)) {
                        if (window.jQuery) {
                            return;
                        }
                        const row = event.target.closest('.allocation-row');
                        loadSelectedInvoiceData(row, true).then(() => refreshAllocations(true));
                    }

                    if (isAllocationSettlementTypeSelect(event.target)) {
                        if (window.jQuery) {
                            return;
                        }
                        handleAllocationSettlementTypeChange(event.target);
                    }
                });

                if (window.jQuery) {
                    $(allocationsWrap)
                        .off('change.paymentInvoice', 'select[id^="allocationInvoiceSelect"]')
                        .on('change.paymentInvoice', 'select[id^="allocationInvoiceSelect"]', function () {
                            const row = this.closest('.allocation-row');
                            loadSelectedInvoiceData(row, true).then(() => refreshAllocations(true));
                        });

                    $(allocationsWrap)
                        .off('change.paymentSettlementType', 'select[id^="allocationSettlementTypeSelect"]')
                        .on('change.paymentSettlementType', 'select[id^="allocationSettlementTypeSelect"]', function () {
                            handleAllocationSettlementTypeChange(this);
                        });
                }
            }

            bindSelectChange(directionSelect, function () {
                loadStudentInvoices();
                refreshAllocations(true);
                refreshJournalPreview();
            });
            bindSelectChange(fromAccountSelect, function () {
                refreshJournalPreview();
            });
            bindSelectChange(toAccountSelect, function () {
                refreshJournalPreview();
            });

            if (addAllocationBtn && allocationsWrap) {
                addAllocationBtn.addEventListener('click', function () {
                    const wrapper = document.createElement('div');
                    wrapper.innerHTML = allocationTemplate(allocationIndex);
                    allocationsWrap.appendChild(wrapper.firstElementChild);
                    allocationIndex += 1;

                    if (window.jQuery && jQuery.fn.select2) {
                        initializePaymentSelects(allocationsWrap);
                    }

                    if (shouldLoadStudentInvoices()) {
                        replaceInvoiceOptions(studentInvoiceOptions);
                    }

                    refreshJournalPreview();
                    refreshAllocations(true);
                });
            }

            if (allocationsWrap) {
                allocationsWrap.addEventListener('click', function (event) {
                    const removeButton = event.target.closest('.remove-allocation-btn');
                    if (!removeButton) {
                        return;
                    }

                    const rows = allocationsWrap.querySelectorAll('.allocation-row');
                    if (rows.length > 1) {
                        removeButton.closest('.allocation-row').remove();
                        refreshAllocations();
                    }
                });
            }

            refreshAllocations();
            getAllocationRows()
                .filter(row => getAllocationInvoiceSelect(row)?.value)
                .forEach(row => loadSelectedInvoiceData(row, true));
            refreshJournalPreview();
        });
    })();
</script>
@endpush