@php
    $isDebit = $type === 'debit_note';
    $navLabel = $isDebit ? trans('dashboard.nav_debit_notes') : trans('dashboard.nav_credit_notes');
    $actionLabel = $isDebit ? trans('dashboard.new_debit_note_btn') : trans('dashboard.new_credit_note_btn');
    $reasonPlaceholder = $isDebit ? trans('dashboard.debit_note_reason_placeholder') : trans('dashboard.credit_note_reason_placeholder');

    $recentInvoicesData = $originals->map(fn ($orig) => [
        'uuid' => $orig->uuid,
        'invoice_number' => $orig->invoice_number,
        'buyer_name' => $orig->buyer_name,
        'total' => (float) $orig->total,
        'subtotal' => (float) $orig->subtotal,
        'vat_amount' => (float) $orig->vat_amount,
        'currency' => $orig->currency ?: 'SAR',
        'has_previous_notes' => false,
        'remaining_balance' => (float) $orig->subtotal,
        'lines' => $orig->invoice_data['lines'] ?? [],
        'buyer' => $orig->invoice_data['buyer'] ?? ['name' => $orig->buyer_name],
        'device_uuid' => $orig->device?->uuid,
    ])->values()->all();
@endphp

<script>
window.creditDebitNoteConfig = {
    original: @json($originalData),
    isDebit: @json($isDebit),
    reason: @json(old('reason', '')),
    findOriginalUrl: @json(route('dashboard.invoices.find_original')),
    debitPrefix: @json(trans('dashboard.debit_note_line_prefix')),
    creditPrefix: @json(trans('dashboard.credit_note_line_prefix')),
    searchErrorText: @json(trans('dashboard.invoice_search_error')),
    networkErrorText: @json(trans('dashboard.invoice_search_network_error')),
    recentInvoices: @json($recentInvoicesData),
};

function creditDebitNoteComponent(cfg) {
    return {
        original: cfg.original,
        searchTerm: '',
        isSearching: false,
        searchError: '',
        reason: cfg.reason || '',
        lines: (cfg.original && cfg.original.lines && cfg.original.lines.length > 0) ? JSON.parse(JSON.stringify(cfg.original.lines)) : [],
        isSubmitting: false,
        isDebit: cfg.isDebit,

        init() {
            if (this.original && this.lines.length === 0) {
                this.lines = [{
                    name: (this.isDebit ? cfg.debitPrefix : cfg.creditPrefix) + this.original.invoice_number,
                    quantity: 1,
                    unit_price: this.original.subtotal,
                    vat_rate: 15,
                    discount: 0
                }];
            }
        },

        async searchInvoice() {
            const term = this.searchTerm.trim();
            if (!term) return;
            this.isSearching = true;
            this.searchError = '';
            try {
                const res = await fetch(cfg.findOriginalUrl + '?term=' + encodeURIComponent(term), {
                    headers: { 'Accept': 'application/json' }
                });
                const data = await res.json();
                if (!res.ok) {
                    this.searchError = data.error || cfg.searchErrorText;
                    return;
                }
                this.selectInvoice(data);
            } catch(e) {
                this.searchError = cfg.networkErrorText;
            } finally {
                this.isSearching = false;
            }
        },

        selectInvoice(data) {
            this.original = data;
            this.lines = JSON.parse(JSON.stringify(data.lines || []));
            if (this.lines.length === 0) {
                this.lines = [{
                    name: (this.isDebit ? cfg.debitPrefix : cfg.creditPrefix) + data.invoice_number,
                    quantity: 1,
                    unit_price: data.subtotal,
                    vat_rate: 15,
                    discount: 0
                }];
            }
            this.searchError = '';
        },

        selectInvoiceByIndex(index) {
            const item = cfg.recentInvoices[index];
            if (item) {
                this.selectInvoice(item);
            }
        },

        clearInvoice() {
            this.original = null;
            this.lines = [];
            this.searchTerm = '';
            this.searchError = '';
        },

        get subtotal() {
            return this.lines.reduce((sum, line) => {
                const qty = parseFloat(line.quantity) || 0;
                const price = parseFloat(line.unit_price) || 0;
                const disc = parseFloat(line.discount) || 0;
                return sum + Math.max(0, (qty * price) - disc);
            }, 0);
        },

        get vat() {
            return this.lines.reduce((sum, line) => {
                const qty = parseFloat(line.quantity) || 0;
                const price = parseFloat(line.unit_price) || 0;
                const disc = parseFloat(line.discount) || 0;
                const net = Math.max(0, (qty * price) - disc);
                const rate = (line.vat_rate != null && line.vat_rate !== '') ? parseFloat(line.vat_rate) : 15;
                return sum + (net * (rate / 100));
            }, 0);
        },

        get total() {
            return this.subtotal + this.vat;
        }
    };
}
</script>

<div class="max-w-3xl mx-auto space-y-6"
     x-data="creditDebitNoteComponent(window.creditDebitNoteConfig)">

    {{-- Breadcrumb Navigation --}}
    <div class="flex items-center justify-between pb-2 border-b border-slate-200 dark:border-slate-800">
        <nav class="flex items-center gap-2 text-xs font-semibold text-slate-500 dark:text-slate-400">
            <a href="{{ route('dashboard.invoices.index', ['type' => $type]) }}"
               class="hover:text-brand-600 dark:hover:text-brand-400 transition flex items-center gap-1.5">
                <i class="fa-solid fa-arrow-right rtl:rotate-0 ltr:rotate-180 text-[10px]"></i>
                <span>{{ $navLabel }}</span>
            </a>
            <span class="text-slate-400 dark:text-slate-600">/</span>
            <span class="text-slate-900 dark:text-white font-bold">{{ $actionLabel }}</span>
        </nav>
    </div>

    {{-- Main Note Card Form --}}
    <div class="p-6 sm:p-8 rounded-3xl bg-white dark:bg-navy-900 border border-slate-200 dark:border-slate-800 shadow-sm space-y-6">

        {{-- Form Tag --}}
        <form action="{{ route('dashboard.invoices.store') }}" method="POST" @submit="isSubmitting = true" class="space-y-6">
            @csrf
            <input type="hidden" name="type" value="{{ $type }}">
            <input type="hidden" name="intent" value="issue">
            <input type="hidden" name="original_invoice_uuid" :value="original ? original.uuid : ''">
            <input type="hidden" name="device_id" :value="original ? original.device_uuid : '{{ $devices->first()?->uuid }}'">

            {{-- Hidden Buyer Payload from Original Invoice --}}
            <template x-if="original && original.buyer">
                <div>
                    <input type="hidden" name="buyer[name]" :value="original.buyer.name">
                    <input type="hidden" name="buyer[vat_number]" :value="original.buyer.vat_number || ''">
                    <input type="hidden" name="buyer[cr_number]" :value="original.buyer.cr_number || ''">
                </div>
            </template>

            {{-- 1. Original Invoice Section (الفاتورة الأصلية) --}}
            <div>
                <label class="block font-bold text-slate-900 dark:text-white text-xs mb-2">
                    {{ trans('dashboard.original_invoice_label') }}
                </label>

                {{-- State A: Searching for Original Invoice --}}
                <div x-show="!original" class="space-y-3">
                    <div class="flex items-center gap-2">
                        <input type="text"
                               x-model="searchTerm"
                               @keydown.enter.prevent="searchInvoice()"
                               placeholder="INV-2026-00002"
                               class="flex-1 rounded-xl bg-slate-50 dark:bg-navy-950 border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100 px-4 py-3 text-xs font-mono focus:border-brand-500 focus:outline-none transition">
                        <button type="button"
                                @click="searchInvoice()"
                                :disabled="isSearching || !searchTerm.trim()"
                                class="px-5 py-3 rounded-xl border border-slate-300 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 text-xs font-bold transition disabled:opacity-40 cursor-pointer">
                            <span x-show="!isSearching">{{ trans('dashboard.search_btn') }}</span>
                            <span x-show="isSearching" class="flex items-center gap-1.5">
                                <i class="fa-solid fa-circle-notch fa-spin text-xs"></i>
                                <span>{{ trans('dashboard.searching') }}</span>
                            </span>
                        </button>
                    </div>

                    {{-- Search Error --}}
                    <template x-if="searchError">
                        <p class="text-xs text-rose-500 font-semibold" x-text="searchError"></p>
                    </template>

                    {{-- Quick Select from recent eligible invoices --}}
                    @if($originals->isNotEmpty())
                        <div class="pt-2">
                            <span class="text-[11px] text-slate-400 block mb-1.5">
                                {{ trans('dashboard.quick_select_recent_invoices') }}
                            </span>
                            <div class="max-h-44 overflow-y-auto space-y-1 divide-y divide-slate-100 dark:divide-slate-800/60 rounded-xl border border-slate-200 dark:border-slate-800 p-1">
                                @foreach($originals as $index => $orig)
                                    <button type="button"
                                            @click="selectInvoiceByIndex({{ $index }})"
                                            class="w-full text-start p-2 rounded-lg hover:bg-emerald-50/50 dark:hover:bg-slate-800 flex items-center justify-between text-xs transition">
                                        <div>
                                            <span class="font-bold font-mono text-slate-900 dark:text-white">{{ $orig->invoice_number }}</span>
                                            <span class="text-slate-400 ms-2 text-[11px]">{{ $orig->buyer_name }}</span>
                                        </div>
                                        <span class="font-mono font-bold text-emerald-600 dark:text-emerald-400">{{ number_format($orig->total, 2) }} SAR</span>
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>

                {{-- State B: Original Invoice is Selected (Green Border Card) --}}
                <div x-show="original" x-cloak class="rounded-2xl border-2 border-emerald-500 p-4 bg-emerald-50/30 dark:bg-emerald-500/5 space-y-3">
                    <div class="flex items-center justify-between">
                        <button type="button"
                                @click="clearInvoice()"
                                class="text-xs font-bold text-emerald-700 dark:text-emerald-400 hover:underline cursor-pointer">
                            {{ trans('dashboard.change_original_invoice') }}
                        </button>
                        <div class="text-end">
                            <div class="font-black text-sm font-mono text-slate-900 dark:text-white" x-text="original ? original.invoice_number : ''"></div>
                            <div class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
                                <span x-text="original ? (original.total.toFixed(2) + ' SAR · ' + original.buyer_name) : ''"></span>
                            </div>
                        </div>
                    </div>

                    {{-- Previous credit notes warning (for credit notes only) --}}
                    <template x-if="!isDebit && original && original.has_previous_notes">
                        <div class="p-3 rounded-xl bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/30 text-amber-800 dark:text-amber-300 text-xs leading-relaxed">
                            <span>{{ trans('dashboard.previous_credit_notes_warning') }}</span>
                            <strong class="font-mono" x-text="original.remaining_balance.toFixed(2) + ' SAR'"></strong>
                            <span>{{ trans('dashboard.before_vat') }}</span>
                        </div>
                    </template>
                </div>
            </div>

            {{-- 2. Line Items Section (البنود – عدّل الكميات أو المبالغ حسب الحاجة) --}}
            <div x-show="original" x-cloak class="space-y-3 pt-2">
                <div class="flex items-center justify-between">
                    <label class="block font-bold text-slate-900 dark:text-white text-xs">
                        {{ trans('dashboard.credit_note_lines_title') }}
                    </label>
                </div>

                <div class="rounded-2xl border border-slate-200 dark:border-slate-800 overflow-hidden">
                    <table class="w-full text-xs">
                        <thead class="bg-slate-50 dark:bg-navy-950/60 text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-800 font-semibold">
                            <tr>
                                <th class="py-2.5 px-3 text-start">{{ trans('dashboard.line_name') }}</th>
                                <th class="py-2.5 px-3 text-center w-24">{{ trans('dashboard.qty_label') }}</th>
                                <th class="py-2.5 px-3 text-center w-32">{{ trans('dashboard.net_price') }}</th>
                                <th class="py-2.5 px-3 text-center w-28">{{ trans('dashboard.th_total') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-800/60 text-slate-700 dark:text-slate-300">
                            <template x-for="(line, idx) in lines" :key="idx">
                                <tr class="hover:bg-slate-50/50 dark:hover:bg-navy-950/30">
                                    <td class="py-3 px-3">
                                        <input type="hidden" :name="'lines[' + idx + '][name]'" :value="line.name">
                                        <input type="hidden" :name="'lines[' + idx + '][vat_rate]'" :value="line.vat_rate || 15">
                                        <input type="hidden" :name="'lines[' + idx + '][discount]'" :value="line.discount || 0">
                                        <input type="hidden" :name="'lines[' + idx + '][unit]'" :value="line.unit || 'PCE'">
                                        <div class="font-bold text-slate-900 dark:text-white text-xs" x-text="line.name"></div>
                                    </td>
                                    <td class="py-3 px-3 text-center">
                                        <input type="number"
                                               step="0.01"
                                               min="0"
                                               x-model="line.quantity"
                                               :name="'lines[' + idx + '][quantity]'"
                                               required
                                               class="w-20 rounded-xl bg-slate-50 dark:bg-navy-950 border border-slate-300 dark:border-slate-700 text-center font-bold text-xs p-2 text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-none">
                                    </td>
                                    <td class="py-3 px-3 text-center">
                                        <input type="number"
                                               step="0.01"
                                               min="0"
                                               x-model="line.unit_price"
                                               :name="'lines[' + idx + '][unit_price]'"
                                               required
                                               class="w-28 rounded-xl bg-slate-50 dark:bg-navy-950 border border-slate-300 dark:border-slate-700 text-center font-bold text-xs p-2 text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-none">
                                    </td>
                                    <td class="py-3 px-3 text-center font-bold font-mono text-xs whitespace-nowrap"
                                        :class="isDebit ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'"
                                        dir="ltr">
                                        <span x-text="(isDebit ? '+' : '-') + Math.max(0, (parseFloat(line.quantity || 0) * parseFloat(line.unit_price || 0)) - parseFloat(line.discount || 0)).toFixed(2)"></span>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- 3. Reason Input (السبب *) --}}
            <div x-show="original" x-cloak class="pt-2">
                <label class="block font-bold text-slate-900 dark:text-white text-xs mb-1.5">
                    <span>{{ trans('dashboard.credit_note_reason_label') }}</span>
                    <span class="text-rose-500">*</span>
                </label>
                <input type="text"
                       name="reason"
                       x-model="reason"
                       required
                       placeholder="{{ $reasonPlaceholder }}"
                       class="w-full rounded-xl bg-slate-50 dark:bg-navy-950 border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100 p-3 text-xs focus:border-brand-500 focus:outline-none transition">
                <p class="text-[11px] text-slate-400 mt-1">
                    {{ trans('dashboard.credit_note_reason_hint') }}
                </p>
            </div>

            {{-- 4. Totals Summary --}}
            <div x-show="original" x-cloak class="space-y-2 pt-3 border-t border-slate-100 dark:border-slate-800 text-xs text-slate-600 dark:text-slate-400">
                <div class="flex items-center justify-between">
                    <span>{{ trans('dashboard.subtotal_excl_vat') }}</span>
                    <span class="font-mono font-semibold text-slate-800 dark:text-slate-200" x-text="subtotal.toFixed(2)"></span>
                </div>
                <div class="flex items-center justify-between">
                    <span>{{ trans('dashboard.vat_15_pct') }}</span>
                    <span class="font-mono font-semibold text-slate-800 dark:text-slate-200" x-text="vat.toFixed(2)"></span>
                </div>
                <div class="flex items-center justify-between pt-2 border-t border-slate-100 dark:border-slate-800 font-bold text-sm text-slate-900 dark:text-white">
                    <span>{{ trans('dashboard.credit_note_total_label') }}</span>
                    <span class="font-mono font-extrabold"
                          :class="isDebit ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'"
                          dir="ltr"
                          x-text="(isDebit ? '+' : '-') + total.toFixed(2) + ' SAR'"></span>
                </div>
            </div>

            {{-- 5. Submit Action Button --}}
            <div x-show="original" x-cloak class="pt-4 flex flex-col sm:flex-row items-center justify-between gap-3">
                <span class="text-xs text-slate-400 flex items-center gap-1.5">
                    <i class="fa-solid fa-shield-halved text-emerald-500 text-xs"></i>
                    <span>{{ trans('dashboard.instant_sign_zatca_notice') }}</span>
                </span>
                <button type="submit"
                        :disabled="!original || lines.length === 0 || !reason.trim() || isSubmitting"
                        class="px-8 py-3 rounded-xl bg-brand-600 hover:bg-brand-500 disabled:opacity-40 text-white font-bold text-sm shadow-md transition flex items-center gap-2 cursor-pointer">
                    <i class="fa-solid fa-bolt" x-show="!isSubmitting"></i>
                    <i class="fa-solid fa-circle-notch fa-spin text-xs" x-show="isSubmitting"></i>
                    <span>{{ trans('dashboard.issue_credit_note_btn') }}</span>
                </button>
            </div>
        </form>
    </div>
</div>