@extends('layouts.app')

@section('title', $invoice->invoice_number)

@section('content')
<div class="space-y-6" x-data="{ components: [{ payment_method: 'cash', amount: '{{ $invoice->balance_due }}', transaction_reference: '' }] }">
    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
        <div>
            <a href="{{ route('app.billing.invoices.index') }}" class="text-xs font-bold text-sky-600">← Back to invoices</a>
            <h1 class="text-2xl font-extrabold text-slate-950 dark:text-white mt-1">{{ $invoice->invoice_number }}</h1>
            <p class="text-sm text-slate-500">Issued {{ $invoice->invoice_date->format('d M Y') }} · {{ $invoice->customer?->full_name_en ?? $invoice->company?->name_en ?? 'General account' }}</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <span class="self-start rounded-full bg-slate-900 px-4 py-2 text-xs font-bold uppercase text-white">{{ str_replace('_', ' ', $invoice->status) }}</span>
            <span class="self-start rounded-full bg-emerald-100 px-4 py-2 text-xs font-bold uppercase text-emerald-800">{{ str_replace('_', ' ', $invoice->workflow_status) }} · V{{ $invoice->version }}</span>
        </div>
    </div>

    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        @foreach([
            ['Subtotal', $invoice->subtotal, 'text-slate-950'],
            ['VAT', $invoice->vat_amount, 'text-violet-600'],
            ['Paid', $invoice->paid_amount, 'text-emerald-600'],
            ['Balance', $invoice->balance_due, 'text-rose-600'],
        ] as [$label, $amount, $color])
            <div class="rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-4">
                <p class="text-[10px] font-bold uppercase tracking-wider text-slate-400">{{ $label }}</p>
                <p class="mt-1 text-xl font-extrabold {{ $color }} dark:text-white">AED {{ number_format((float) $amount, 2) }}</p>
            </div>
        @endforeach
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-[1fr_390px] gap-6">
        <div class="space-y-6">
            <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200 dark:border-slate-700 overflow-hidden shadow-sm">
                <div class="p-5 border-b border-slate-200 dark:border-slate-700"><h2 class="font-bold text-slate-900 dark:text-white">Invoice fee classification</h2><p class="text-xs text-slate-500">Government/pass-through money is separated from company revenue and VAT.</p></div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-slate-50 dark:bg-slate-900/50 text-[11px] uppercase text-slate-500"><tr><th class="p-4 text-left">Description</th><th class="p-4 text-left">Classification</th><th class="p-4 text-right">Amount</th></tr></thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                            @foreach($invoice->items as $item)
                                <tr><td class="p-4"><p class="font-semibold">{{ $item->description }}</p><p class="text-[11px] text-slate-400">{{ str_replace('_', ' ', $item->fee_type) }} · Qty {{ $item->quantity }} · VAT {{ number_format((float)($item->vat_rate ?? 0),2) }}%</p></td><td class="p-4"><span class="rounded-full px-2.5 py-1 text-[10px] font-bold uppercase {{ $item->revenue_classification === 'government_clearing' ? 'bg-amber-100 text-amber-800' : ($item->revenue_classification === 'vat_liability' ? 'bg-violet-100 text-violet-800' : 'bg-emerald-100 text-emerald-800') }}">{{ str_replace('_', ' ', $item->revenue_classification) }}</span></td><td class="p-4 text-right font-bold">AED {{ number_format((float) $item->total_amount + (float)$item->vat_amount, 2) }}</td></tr>
                            @endforeach
                            @if((float) $invoice->discount_amount > 0)<tr class="bg-rose-50"><td class="p-4 font-semibold text-rose-700" colspan="2">Approved service-revenue discount</td><td class="p-4 text-right font-bold text-rose-700">− AED {{ number_format((float) $invoice->discount_amount, 2) }}</td></tr>@endif
                            <tr class="bg-slate-950 text-white"><td class="p-4 font-extrabold" colspan="2">Invoice total</td><td class="p-4 text-right text-lg font-extrabold">AED {{ number_format((float) $invoice->total_amount, 2) }}</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200 dark:border-slate-700 p-5 shadow-sm">
                <h2 class="font-bold text-slate-900 dark:text-white">Payment history</h2>
                <div class="mt-4 space-y-3">
                    @forelse($invoice->payments as $payment)
                        <div class="rounded-2xl border border-slate-200 dark:border-slate-700 p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                            <div><p class="font-bold text-sm">{{ $payment->payment_number }}</p><p class="text-xs text-slate-400">{{ $payment->created_at->format('d M Y, H:i') }} · {{ $payment->components->pluck('payment_method')->map(fn($v) => str_replace('_', ' ', $v))->join(' + ') }}</p></div>
                            <div class="text-right"><p class="font-extrabold text-emerald-600">AED {{ number_format((float) $payment->amount, 2) }}</p>@if($payment->receipt)<a href="{{ route('app.billing.receipts.show', $payment->receipt->id) }}" class="text-xs font-bold text-sky-600">Receipt {{ $payment->receipt->receipt_number }}</a>@endif</div>
                        </div>
                    @empty
                        <div class="rounded-2xl border border-dashed border-slate-200 p-8 text-center text-xs text-slate-400">No payments collected yet.</div>
                    @endforelse
                </div>
            </div>

            <div class="bg-white rounded-3xl border border-slate-200 p-5 shadow-sm">
                <div class="flex items-center justify-between"><div><h2 class="font-bold text-slate-900">Revision history</h2><p class="text-xs text-slate-400">Immutable snapshots, changes, user and reason.</p></div><span class="text-xs font-bold text-emerald-700">{{ $invoice->revisions->count() }} version record(s)</span></div>
                <div class="mt-4 space-y-3">@forelse($invoice->revisions as $revision)<div class="rounded-2xl border border-slate-200 p-4"><div class="flex justify-between gap-3"><div><p class="font-bold">Version {{ $revision->version }} · {{ $revision->actor?->name }}</p><p class="text-xs text-slate-400">{{ $revision->created_at->format('d M Y, H:i') }} · {{ $revision->reason }}</p></div><span class="font-black">AED {{ number_format((float)data_get($revision->snapshot,'invoice.total_amount',0),2) }}</span></div>@if($revision->changes)<div class="mt-3 grid gap-2 md:grid-cols-2">@foreach($revision->changes as $field=>$change)<div class="rounded-xl bg-slate-50 p-2 text-[10px]"><b>{{ str_replace('_',' ',$field) }}</b><div class="text-slate-400">Old: {{ is_array($change['old']??null)?'line snapshot':($change['old']??'—') }}</div><div class="text-emerald-700">New: {{ is_array($change['new']??null)?'line snapshot':($change['new']??'—') }}</div></div>@endforeach</div>@endif</div>@empty<div class="rounded-xl bg-slate-50 p-6 text-center text-xs text-slate-400">No revision snapshots recorded for this legacy invoice.</div>@endforelse</div>
            </div>
        </div>

        <aside class="space-y-4 h-fit">
            <div class="bg-white rounded-3xl border border-slate-200 p-5 shadow-sm">
                <p class="text-[10px] font-bold uppercase tracking-[.18em] text-emerald-600">Invoice controls</p><div class="mt-3 grid grid-cols-2 gap-2">
                    <a href="{{ route('app.billing.invoices.pdf',$invoice) }}" class="rounded-xl border border-slate-200 px-3 py-2 text-center text-xs font-bold">Download PDF</a>
                    <button type="button" onclick="window.print()" class="rounded-xl border border-slate-200 px-3 py-2 text-center text-xs font-bold">Print</button>
                    @canModule('invoices.create')<form method="POST" action="{{ route('app.billing.invoices.duplicate',$invoice) }}">@csrf<button class="w-full rounded-xl border border-slate-200 px-3 py-2 text-xs font-bold">Duplicate</button></form>@endcanModule
                    @canModule('invoices.edit_draft')<a href="{{ route('app.billing.invoices.edit',$invoice) }}" class="rounded-xl border border-slate-200 px-3 py-2 text-center text-xs font-bold">Edit / Revise</a>@endcanModule
                    @if(in_array($invoice->workflow_status,['draft','pending_approval'])) @canModule('invoices.approve')<form method="POST" action="{{ route('app.billing.invoices.approve',$invoice) }}">@csrf<button class="w-full rounded-xl bg-amber-500 px-3 py-2 text-xs font-bold text-white">Approve</button></form>@endcanModule @endif
                    @if(in_array($invoice->workflow_status,['draft','approved'])) @canModule('invoices.approve')<form method="POST" action="{{ route('app.billing.invoices.issue',$invoice) }}">@csrf<button class="w-full rounded-xl bg-emerald-600 px-3 py-2 text-xs font-bold text-white">Issue & Post</button></form>@endcanModule @endif
                </div>
                @canModule('invoices.send')<form method="POST" action="{{ route('app.billing.invoices.send',$invoice) }}" class="mt-3 flex gap-2">@csrf<input type="hidden" name="channel" value="email"><input name="recipient" type="email" required value="{{ $invoice->customer?->contact?->email ?? $invoice->company?->email }}" placeholder="Customer email" class="min-w-0 flex-1 rounded-xl border-slate-200 text-xs"><button class="rounded-xl bg-slate-950 px-3 text-xs font-bold text-white">Email</button></form>@endcanModule
                @canModule('invoices.send')<div class="mt-2 grid grid-cols-2 gap-2"><form method="POST" action="{{ route('app.billing.invoices.send',$invoice) }}">@csrf<input type="hidden" name="channel" value="whatsapp"><input type="hidden" name="recipient" value="{{ $invoice->customer?->contact?->primary_mobile ?? $invoice->company?->mobile }}"><button class="w-full rounded-xl border border-emerald-200 px-3 py-2 text-xs font-bold text-emerald-700">WhatsApp</button></form><form method="POST" action="{{ route('app.billing.invoices.send',$invoice) }}">@csrf<input type="hidden" name="channel" value="sms"><input type="hidden" name="recipient" value="{{ $invoice->customer?->contact?->primary_mobile ?? $invoice->company?->mobile }}"><button class="w-full rounded-xl border border-sky-200 px-3 py-2 text-xs font-bold text-sky-700">SMS link</button></form></div>@endcanModule
                @if(in_array($invoice->workflow_status,['draft','pending_approval','approved','issued']) && (float)$invoice->paid_amount === 0.0) @canModule('invoices.cancel')<form method="POST" action="{{ route('app.billing.invoices.cancel',$invoice) }}" class="mt-3 flex gap-2">@csrf<input name="reason" required minlength="5" placeholder="Cancellation reason" class="min-w-0 flex-1 rounded-xl border-rose-200 text-xs"><button class="rounded-xl border border-rose-200 px-3 text-xs font-bold text-rose-700">Cancel</button></form>@endcanModule @endif
                @if($invoice->dispatches->isNotEmpty())<p class="mt-2 text-[10px] text-slate-400">Last send: {{ $invoice->dispatches->first()->channel }} · {{ $invoice->dispatches->first()->status }}</p>@endif
            </div>

            @if(in_array($invoice->workflow_status,['issued','partially_paid','paid','credit_note_issued']))
            <div class="bg-white rounded-3xl border border-slate-200 p-5 shadow-sm" x-data="{ noteType: 'credit' }"><div class="flex rounded-xl bg-slate-100 p-1"><button type="button" @click="noteType='credit'" :class="noteType==='credit'?'bg-white shadow':''" class="flex-1 rounded-lg py-1.5 text-[10px] font-bold">Credit Note</button><button type="button" @click="noteType='debit'" :class="noteType==='debit'?'bg-white shadow':''" class="flex-1 rounded-lg py-1.5 text-[10px] font-bold">Debit Note</button></div>
                <form method="POST" :action="noteType==='credit' ? '{{ route('app.billing.invoices.credit_notes.store',$invoice) }}' : '{{ route('app.billing.invoices.debit_notes.store',$invoice) }}'" class="mt-3 space-y-2">@csrf<input type="hidden" name="fee_type" value="service_revenue"><input name="amount" type="number" step="0.01" min="0.01" required placeholder="Adjustment before VAT" class="w-full rounded-xl border-slate-200 text-xs"><input name="vat_amount" type="number" step="0.01" min="0" value="0" placeholder="VAT adjustment" class="w-full rounded-xl border-slate-200 text-xs"><textarea name="reason" required placeholder="Reason for financial adjustment" class="w-full rounded-xl border-slate-200 text-xs"></textarea><button class="w-full rounded-xl border border-rose-200 py-2 text-xs font-bold text-rose-700" x-text="`Issue ${noteType} note`"></button></form>
            </div>
            @endif

            <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200 dark:border-slate-700 p-5 shadow-sm">
            <div class="flex items-center justify-between"><div><p class="text-[10px] font-bold uppercase tracking-[0.18em] text-sky-600">Secure collection</p><h2 class="font-extrabold text-slate-950 dark:text-white">Collect payment</h2></div><span class="text-xs font-bold text-rose-600">Due AED {{ number_format((float) $invoice->balance_due, 2) }}</span></div>

            @if(!in_array($invoice->status, ['cancelled','refunded']))
                <form method="POST" action="{{ route('app.billing.invoices.payments.store', $invoice->id) }}" class="mt-5 space-y-3">
                    @csrf
                    <template x-for="(component, index) in components" :key="index">
                        <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 p-3 space-y-2">
                            <div class="flex items-center justify-between"><span class="text-[10px] font-bold uppercase text-slate-400" x-text="`Tender ${index + 1}`"></span><button x-show="components.length > 1" type="button" @click="components.splice(index, 1)" class="text-xs font-bold text-rose-500">Remove</button></div>
                            <select x-model="component.payment_method" :name="`components[${index}][payment_method]`" class="w-full rounded-xl border-slate-200 bg-white text-sm">
                                <option value="cash">Cash</option><option value="card">Card</option><option value="bank_transfer">Bank transfer</option><option value="payment_link">Payment link</option><option value="cheque">Cheque</option><option value="wallet">Wallet</option>@if($invoice->company_id)<option value="corporate_credit">Corporate credit</option>@endif
                            </select>
                            <input x-model="component.amount" :name="`components[${index}][amount]`" type="number" step="0.01" min="0.01" placeholder="Amount" class="w-full rounded-xl border-slate-200 bg-white text-sm">
                            <input x-show="!['cash','corporate_credit'].includes(component.payment_method)" x-model="component.transaction_reference" :name="`components[${index}][transaction_reference]`" placeholder="Transaction reference" class="w-full rounded-xl border-slate-200 bg-white text-sm">
                        </div>
                    </template>
                    <button type="button" @click="components.push({ payment_method: 'card', amount: '', transaction_reference: '' })" class="w-full rounded-xl border border-dashed border-sky-300 py-2 text-xs font-bold text-sky-700">+ Add split tender</button>
                    <div class="rounded-xl bg-slate-950 text-white px-4 py-3 flex justify-between"><span class="text-xs font-bold">Payment total</span><span class="font-extrabold" x-text="`AED ${components.reduce((sum, item) => sum + (parseFloat(item.amount) || 0), 0).toFixed(2)}`"></span></div>
                    <button class="w-full rounded-xl bg-emerald-600 hover:bg-emerald-700 py-3 text-xs font-extrabold text-white">Record payment & issue receipt</button>
                </form>
            @else
                <div class="mt-5 rounded-2xl bg-rose-50 p-5 text-center text-xs text-rose-700">This invoice cannot receive payments.</div>
            @endif
            </div>
        </aside>
    </div>
</div>
@endsection