@php
    $isEdit = $invoice->exists;
    $formItems = collect($initialItems ?? old('items', []));
@endphp

<form method="POST" action="{{ $isEdit ? route('finance.invoices.update', $invoice) : route('finance.invoices.store') }}" class="card p-5">
    @csrf
    @if($isEdit)
        @method('PUT')
    @endif

    <div class="grid grid-1 gap-4 mb-4">
        <div>
            <label class="label">Invoice Number *</label>
            <input class="field" name="invoice_number" value="{{ old('invoice_number', $invoice->invoice_number) }}" placeholder="AB-2026-001" required maxlength="100" autocomplete="off">
        </div>
        {{-- Status is hidden from the UI: new invoices default to unpaid (pending);
             on edit the stored status is preserved untouched. --}}
        <input type="hidden" name="status" value="{{ old('status', $invoice->status ?: 'pending') }}">
    </div>

    <div class="grid grid-4 gap-4 mb-4">
        <div>
            <label class="label">Invoice Type *</label>
            <select class="field" name="invoice_type" id="invoice-type" required>
                <option value="regular" @selected(old('invoice_type', $invoice->invoice_type ?? 'regular') === 'regular')>Invoice</option>
                <option value="incentive" @selected(old('invoice_type', $invoice->invoice_type ?? 'regular') === 'incentive')>Incentive Invoice</option>
            </select>
        </div>
        <div class="incentive-field" hidden>
            <label class="label">Period Type *</label>
            <select class="field" name="incentive_period_type" id="incentive-period-type">
                <option value="month" @selected(old('incentive_period_type', $invoice->incentive_period_type ?? 'month') === 'month')>Month</option>
                <option value="quarter" @selected(old('incentive_period_type', $invoice->incentive_period_type) === 'quarter')>Quarter</option>
                <option value="year" @selected(old('incentive_period_type', $invoice->incentive_period_type) === 'year')>Year</option>
            </select>
        </div>
        <div class="incentive-field" hidden>
            <label class="label">Year *</label>
            <input class="field" type="number" name="incentive_period_year" id="incentive-period-year" min="2000" max="2100" value="{{ old('incentive_period_year', $invoice->incentive_period_year ?? now()->year) }}">
        </div>
        <div class="incentive-field incentive-month-field" hidden>
            <label class="label">Month *</label>
            <select class="field" name="incentive_period_month" id="incentive-period-month">
                @for($month = 1; $month <= 12; $month++)
                    <option value="{{ $month }}" @selected((int) old('incentive_period_month', $invoice->incentive_period_month ?? now()->month) === $month)>
                        {{ \Carbon\Carbon::create(null, $month, 1)->format('F') }}
                    </option>
                @endfor
            </select>
        </div>
        <div class="incentive-field incentive-quarter-field" hidden>
            <label class="label">Quarter *</label>
            <select class="field" name="incentive_period_quarter" id="incentive-period-quarter">
                @for($quarter = 1; $quarter <= 4; $quarter++)
                    <option value="{{ $quarter }}" @selected((int) old('incentive_period_quarter', $invoice->incentive_period_quarter ?? now()->quarter) === $quarter)>Q{{ $quarter }}</option>
                @endfor
            </select>
        </div>
    </div>

    <div class="grid grid-2 gap-4 mb-4">
        <div>
            <label class="label">Company / Supplier *</label>
            <input class="field" name="supplier_name" list="supplier-options" value="{{ old('supplier_name', $invoice->supplier_name ?? $invoice->client_name) }}" required maxlength="255" autocomplete="off">
        </div>
        <div>
            <label class="label">Country *</label>
            <div style="display:flex;gap:8px">
                <select class="field" name="country" required style="flex:1">
                    @foreach($countries as $country)
                        <option value="{{ $country }}" @selected(old('country', $invoice->country ?: 'Pakistan') === $country)>{{ $country }}</option>
                    @endforeach
                </select>
                <button class="btn" type="button" onclick="document.getElementById('new-country-panel').hidden = ! document.getElementById('new-country-panel').hidden" style="white-space:nowrap">+ New</button>
            </div>
            <div id="new-country-panel" class="mt-3" hidden>
                <div style="display:flex;gap:8px">
                    <input class="field" name="country_name" form="country-create-form" placeholder="Country name" maxlength="100" autocomplete="off">
                    <button class="btn btn-primary" form="country-create-form" style="white-space:nowrap">Add Country</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card p-4 mb-4" style="background:var(--bg-2)">
        <div class="flex items-center justify-between gap-3 mb-4 flex-wrap">
            <div>
                <div class="section-title">Invoice Products</div>
                <div class="text-xs" style="color:var(--muted)">Add every product that belongs to the same supplier invoice number.</div>
            </div>
            <button class="btn btn-primary" type="button" id="add-invoice-item">+ Add Product</button>
        </div>
        <div id="invoice-items">
            @foreach($formItems as $index => $item)
                <div class="invoice-item card p-4 mb-3" data-item-row>
                    <div class="flex items-center justify-between gap-3 mb-3">
                        <strong>Product Line <span data-line-number>{{ $index + 1 }}</span></strong>
                        <button class="btn btn-danger" type="button" data-remove-item @disabled($formItems->count() === 1)>Remove</button>
                    </div>
                    <div class="grid grid-4 gap-4" data-line-fields>
                        <div>
                            <label class="label">Product *</label>
                            <select class="field" name="items[{{ $index }}][product_name]" required>
                                <option value="">Select product</option>
                                @foreach($products as $product)
                                    <option value="{{ $product->name }}" @selected(data_get($item, 'product_name') === $product->name)>
                                        {{ $product->name }}
                                        @if($product->sku)
                                            ({{ $product->sku }})
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="label">Number of Vouchers *</label>
                            <input class="field" type="number" name="items[{{ $index }}][voucher_count]" value="{{ data_get($item, 'voucher_count', 1) }}" min="1" max="1000000" step="1" required>
                        </div>
                        <div data-money-field>
                            <label class="label">Amount *</label>
                            <input class="field" type="number" name="items[{{ $index }}][amount]" value="{{ data_get($item, 'amount') }}" min="0.01" max="999999999999.99" step="0.01" required>
                        </div>
                        <div data-money-field>
                            <label class="label">Fee</label>
                            <input class="field" type="number" name="items[{{ $index }}][fee_amount]" value="{{ data_get($item, 'fee_amount', 0) }}" min="0" max="999999999999.99" step="0.01">
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="grid grid-1 gap-4 mb-4">
        <div>
            <label class="label">Currency *</label>
            <select class="field" id="invoice-currency" name="currency" required>
                @foreach(['PKR', 'USD', 'AUD'] as $currency)
                    <option value="{{ $currency }}" @selected(old('currency', $invoice->currency ?: 'PKR') === $currency)>{{ $currency }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="grid grid-3 gap-4 mb-4">
        <div>
            <label class="label">Issue Date *</label>
            <input class="field" type="date" name="issue_date" value="{{ old('issue_date', $invoice->issue_date?->toDateString()) }}" required>
        </div>
        <div>
            <label class="label">Due Date *</label>
            <input class="field" type="date" name="due_date" value="{{ old('due_date', $invoice->due_date?->toDateString() ?? now()->addDays(14)->toDateString()) }}" required>
        </div>
        <div>
            <label class="label">Notes</label>
            <input class="field" name="notes" value="{{ old('notes', $invoice->notes) }}" maxlength="2000" placeholder="Optional">
        </div>
    </div>

    <datalist id="supplier-options">
        @foreach($suppliers as $supplier)
            <option value="{{ $supplier }}"></option>
        @endforeach
    </datalist>
    <div class="flex justify-end gap-2">
        <a href="{{ $isEdit ? route('finance.invoices.show', $invoice) : route('finance.invoices') }}" class="btn">Cancel</a>
        <button class="btn btn-primary">{{ $isEdit ? 'Update Invoice' : '+ Add Invoice' }}</button>
    </div>
</form>

<form id="country-create-form" method="POST" action="{{ route('finance.invoices.countries.store') }}">
    @csrf
</form>

<template id="invoice-item-template">
    <div class="invoice-item card p-4 mb-3" data-item-row>
        <div class="flex items-center justify-between gap-3 mb-3">
            <strong>Product Line <span data-line-number></span></strong>
            <button class="btn btn-danger" type="button" data-remove-item>Remove</button>
        </div>
        <div class="grid grid-4 gap-4" data-line-fields>
            <div>
                <label class="label">Product *</label>
                <select class="field" data-name="product_name" required>
                    <option value="">Select product</option>
                    @foreach($products as $product)
                        <option value="{{ $product->name }}">
                            {{ $product->name }}
                            @if($product->sku)
                                ({{ $product->sku }})
                            @endif
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="label">Number of Vouchers *</label>
                <input class="field" type="number" data-name="voucher_count" value="1" min="1" max="1000000" step="1" required>
            </div>
            <div data-money-field>
                <label class="label">Amount *</label>
                <input class="field" type="number" data-name="amount" value="0" min="0" max="999999999999.99" step="0.01" required>
            </div>
            <div data-money-field>
                <label class="label">Fee</label>
                <input class="field" type="number" data-name="fee_amount" value="0" min="0" max="999999999999.99" step="0.01">
            </div>
        </div>
    </div>
</template>

<script>
    (() => {
        const type = document.getElementById('invoice-type');
        const periodType = document.getElementById('incentive-period-type');
        const fields = [...document.querySelectorAll('.incentive-field')];
        const monthFields = [...document.querySelectorAll('.incentive-month-field')];
        const quarterFields = [...document.querySelectorAll('.incentive-quarter-field')];
        const requiredFields = [
            document.getElementById('incentive-period-type'),
            document.getElementById('incentive-period-year'),
        ];

        const sync = () => {
            const isIncentive = type?.value === 'incentive';
            const period = periodType?.value || 'month';

            fields.forEach((field) => {
                field.hidden = !isIncentive;
            });
            monthFields.forEach((field) => {
                field.hidden = !isIncentive || period !== 'month';
            });
            quarterFields.forEach((field) => {
                field.hidden = !isIncentive || period !== 'quarter';
            });

            requiredFields.forEach((field) => {
                if (!field) return;
                if (isIncentive) field.setAttribute('required', 'required');
                else field.removeAttribute('required');
            });
            document.getElementById('incentive-period-month')?.toggleAttribute('required', isIncentive && period === 'month');
            document.getElementById('incentive-period-quarter')?.toggleAttribute('required', isIncentive && period === 'quarter');

            document.querySelectorAll('[data-money-field]').forEach((field) => {
                field.hidden = isIncentive;
                field.querySelectorAll('input').forEach((input) => {
                    if (isIncentive) {
                        input.value = '0';
                        input.min = '0';
                    } else if (input.dataset.name === 'amount' || input.name?.endsWith('[amount]')) {
                        input.min = '0.01';
                    }
                });
            });

            document.querySelectorAll('[data-line-fields]').forEach((grid) => {
                grid.classList.toggle('grid-4', !isIncentive);
                grid.classList.toggle('grid-2', isIncentive);
            });
        };

        type?.addEventListener('change', sync);
        periodType?.addEventListener('change', sync);
        sync();
    })();

    (() => {
        const container = document.getElementById('invoice-items');
        const addButton = document.getElementById('add-invoice-item');
        const template = document.getElementById('invoice-item-template');

        if (!container || !addButton || !template) {
            return;
        }

        const renumber = () => {
            const rows = [...container.querySelectorAll('[data-item-row]')];

            rows.forEach((row, index) => {
                row.querySelector('[data-line-number]').textContent = String(index + 1);
                row.querySelectorAll('[data-name]').forEach((field) => {
                    field.name = `items[${index}][${field.dataset.name}]`;
                });
                row.querySelectorAll('select[name], input[name]').forEach((field) => {
                    const match = field.name.match(/\]\[(.+)\]$/);
                    if (match) {
                        field.name = `items[${index}][${match[1]}]`;
                    }
                });
            });

            rows.forEach((row) => {
                const removeButton = row.querySelector('[data-remove-item]');
                if (removeButton) {
                    removeButton.disabled = rows.length === 1;
                }
            });
        };

        addButton.addEventListener('click', () => {
            const fragment = template.content.cloneNode(true);
            container.appendChild(fragment);
            renumber();
            document.getElementById('invoice-type')?.dispatchEvent(new Event('change', { bubbles: true }));
        });

        container.addEventListener('click', (event) => {
            const button = event.target.closest('[data-remove-item]');
            if (!button) {
                return;
            }

            const row = button.closest('[data-item-row]');
            if (!row || container.querySelectorAll('[data-item-row]').length === 1) {
                return;
            }

            row.remove();
            renumber();
        });

        renumber();
    })();
</script>