@extends('layouts.app')

@section('title', 'Invoices')

@section('content')
    @php
        $money = fn ($v) => \App\Support\Fmt::money($v);
        $plain = fn ($v) => rtrim(rtrim(number_format((float) $v, 2), '0'), '.');
        $statusClasses = fn (string $s) => match ($s) {
            'Pending' => 'bg-amber-500/15 text-amber-700',
            'Approved' => 'bg-emerald-500/15 text-emerald-700',
            'Paid' => 'bg-teal-500/15 text-teal-700',
            default => 'bg-rose-500/15 text-rose-700',
        };
        $tabs = ['All', 'Pending', 'Approved', 'Paid', 'Rejected'];
    @endphp

    <div class="flex flex-col gap-6">
        <div class="flex items-end justify-between gap-3">
            <div>
                <h1 class="text-lg font-semibold">Invoices</h1>
                <p class="text-xs text-muted-foreground">Record, approve and pay supplier invoices</p>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('inventory.invoices.csv', $filters) }}"
                   class="rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium hover:bg-accent">CSV</a>
                <a href="#inv-new"
                   class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
                    Record Invoice
                </a>
            </div>
        </div>

        @include('partials.flashes')

        <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
            @foreach ([
                ['label' => 'Total Invoices', 'value' => $total],
                ['label' => 'Pending', 'value' => $pending],
                ['label' => 'Approved', 'value' => $approved],
                ['label' => 'Paid', 'value' => $paid],
            ] as $stat)
                <div class="rounded-xl border border-border bg-card p-4">
                    <div class="flex flex-col">
                        <span class="text-lg font-semibold leading-tight tabular-nums">{{ $stat['value'] }}</span>
                        <span class="text-xs text-muted-foreground">{{ $stat['label'] }}</span>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="flex flex-wrap items-end gap-3 rounded-xl border border-border bg-card p-3">
            <div class="flex flex-wrap gap-1">
                @foreach ($tabs as $tab)
                    <a href="{{ route('inventory.invoices', $filters + ['tab' => $tab]) }}"
                       class="rounded-md px-3 py-1.5 text-xs font-medium {{ $filters['tab'] === $tab ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-accent' }}">
                        {{ $tab }}
                    </a>
                @endforeach
            </div>
            <form method="get" action="{{ route('inventory.invoices') }}" class="flex items-end gap-2">
                <input type="hidden" name="tab" value="{{ $filters['tab'] }}">
                <input type="search" name="q" value="{{ $filters['q'] }}" placeholder="Search invoice, supplier or ref..."
                       class="h-9 w-64 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Filter</button>
            </form>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                            <th class="px-3 py-2 font-medium">Invoice No.</th>
                            <th class="px-3 py-2 font-medium">Supplier Ref</th>
                            <th class="px-3 py-2 font-medium">Supplier</th>
                            <th class="px-3 py-2 font-medium">PO</th>
                            <th class="px-3 py-2 font-medium">Date</th>
                            <th class="px-3 py-2 text-right font-medium">Subtotal</th>
                            <th class="px-3 py-2 text-right font-medium">VAT</th>
                            <th class="px-3 py-2 text-right font-medium">Total</th>
                            <th class="px-3 py-2 font-medium">Status</th>
                            <th class="px-3 py-2 text-right font-medium">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $invoice)
                            <tr class="border-b last:border-0 hover:bg-accent/40">
                                <td class="px-3 py-2 font-mono text-xs font-semibold">{{ $invoice->invoice_no }}</td>
                                <td class="px-3 py-2 font-mono text-xs">{{ $invoice->supplier_ref ?: '—' }}</td>
                                <td class="px-3 py-2 font-medium">{{ $invoice->supplier?->company_name ?? '—' }}</td>
                                <td class="px-3 py-2">
                                    @if ($invoice->po_id)
                                        <span class="font-mono text-xs">{{ $invoice->po_id }}</span>
                                    @else
                                        <span class="text-xs text-muted-foreground">—</span>
                                    @endif
                                </td>
                                <td class="px-3 py-2">{{ \App\Support\Fmt::day($invoice->received_date) }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">{{ $money($invoice->subtotal()) }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">{{ $money($invoice->taxTotal()) }}</td>
                                <td class="px-3 py-2 text-right font-medium tabular-nums">{{ $money($invoice->grandTotal()) }}</td>
                                <td class="px-3 py-2">
                                    <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $statusClasses($invoice->status) }}">{{ $invoice->status }}</span>
                                </td>
                                <td class="px-3 py-2">
                                    <div class="flex items-center justify-end gap-1">
                                        <button type="button" onclick="document.getElementById('inv-{{ $invoice->id }}').classList.toggle('hidden')"
                                                class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">View</button>
                                        @if ($invoice->status === 'Pending')
                                            @include('inventory.partials.status-form', [
                                                'action' => route('inventory.invoices.status', $invoice),
                                                'status' => 'Approved', 'label' => 'Approve',
                                            ])
                                            @include('inventory.partials.status-form', [
                                                'action' => route('inventory.invoices.status', $invoice),
                                                'status' => 'Rejected', 'label' => 'Reject', 'outline' => true,
                                            ])
                                        @elseif ($invoice->status === 'Approved')
                                            <button type="button" onclick="document.getElementById('inv-{{ $invoice->id }}').classList.remove('hidden')"
                                                    class="rounded-md border border-emerald-300 px-2 py-1 text-xs text-emerald-700 hover:bg-emerald-50">Pay</button>
                                        @endif
                                    </div>
                                </td>
                            </tr>

                            <tr class="hidden" id="inv-{{ $invoice->id }}">
                                <td colspan="10" class="bg-muted/30 px-3 py-4">
                                    <div class="flex flex-col gap-3">
                                        <div class="flex items-center gap-2">
                                            <span class="font-mono text-sm font-semibold">{{ $invoice->invoice_no }}</span>
                                            <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $statusClasses($invoice->status) }}">{{ $invoice->status }}</span>
                                            <span class="text-xs text-muted-foreground">{{ $invoice->supplier?->company_name ?? '—' }}</span>
                                        </div>

                                        <div class="grid grid-cols-2 gap-3 text-xs sm:grid-cols-4">
                                            <div><span class="text-muted-foreground">Supplier Ref</span><div class="font-medium">{{ $invoice->supplier_ref ?: '—' }}</div></div>
                                            <div><span class="text-muted-foreground">Purchase Order</span><div class="font-medium">{{ $invoice->po_id ?: '—' }}</div></div>
                                            <div><span class="text-muted-foreground">Received Date</span><div class="font-medium">{{ \App\Support\Fmt::day($invoice->received_date) }}</div></div>
                                            <div><span class="text-muted-foreground">Total</span><div class="font-medium tabular-nums">{{ $money($invoice->grandTotal()) }}</div></div>
                                        </div>

                                        <div class="overflow-x-auto rounded-lg border border-border bg-card">
                                            <table class="w-full text-xs">
                                                <thead>
                                                    <tr class="border-b text-left uppercase text-muted-foreground">
                                                        <th class="px-3 py-1.5 font-medium">Item</th>
                                                        <th class="px-3 py-1.5 text-right font-medium">Qty</th>
                                                        <th class="px-3 py-1.5 text-right font-medium">Price</th>
                                                        <th class="px-3 py-1.5 text-right font-medium">VAT %</th>
                                                        <th class="px-3 py-1.5 text-right font-medium">Line Total</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($invoice->lines as $line)
                                                        <tr class="border-b last:border-0">
                                                            <td class="px-3 py-1.5">
                                                                <span class="font-medium">{{ $line->item_ref }}</span>
                                                                @if ($line->description)
                                                                    <span class="block text-muted-foreground">{{ $line->description }}</span>
                                                                @endif
                                                            </td>
                                                            <td class="px-3 py-1.5 text-right tabular-nums">{{ $plain($line->qty) }}</td>
                                                            <td class="px-3 py-1.5 text-right tabular-nums">{{ $plain($line->price) }}</td>
                                                            <td class="px-3 py-1.5 text-right tabular-nums">{{ $plain($line->tax_pct) }}%</td>
                                                            <td class="px-3 py-1.5 text-right tabular-nums">{{ $plain($line->lineTotal()) }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>

                                        @if ($invoice->isPaid())
                                            <p class="text-xs text-muted-foreground">
                                                Paid on {{ \App\Support\Fmt::day($invoice->payment_date) }}
                                                via {{ $invoice->payment_method }} &mdash; ref {{ $invoice->payment_reference }}
                                            </p>
                                        @endif

                                        @if ($invoice->notes)
                                            <p class="text-xs text-muted-foreground">{{ $invoice->notes }}</p>
                                        @endif

                                        <div class="flex flex-wrap items-center gap-2">
                                            @if ($invoice->status === 'Pending')
                                                @include('inventory.partials.status-form', [
                                                    'action' => route('inventory.invoices.status', $invoice),
                                                    'status' => 'Approved', 'label' => 'Approve',
                                                ])
                                                @include('inventory.partials.status-form', [
                                                    'action' => route('inventory.invoices.status', $invoice),
                                                    'status' => 'Rejected', 'label' => 'Reject', 'outline' => true,
                                                ])
                                                <form method="post" action="{{ route('inventory.invoices.destroy', $invoice) }}"
                                                      onsubmit="return confirm('Delete invoice {{ $invoice->invoice_no }}?')">
                                                    @csrf @method('DELETE')
                                                    <button class="rounded-lg border border-rose-300 px-3 py-2 text-sm text-rose-700 hover:bg-rose-50">Delete</button>
                                                </form>
                                            @elseif ($invoice->status === 'Approved')
                                                @include('inventory.partials.payment-form', [
                                                    'action' => route('inventory.invoices.payment', $invoice),
                                                    'today' => $today,
                                                ])
                                            @endif
                                        </div>

                                        <div class="border-t border-border pt-3">
                                            @include('inventory.partials.invoice-form', [
                                                'action' => route('inventory.invoices.update', $invoice),
                                                'method' => 'PUT',
                                                'prefix' => 'inv-edit-'.$invoice->id,
                                                'row' => $invoice,
                                                'suppliers' => $suppliers,
                                                'orders' => $orders,
                                                'today' => $today,
                                            ])
                                            <p class="mt-1 text-xs text-muted-foreground">Edit the invoice below and save your changes.</p>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="10" class="px-3 py-10 text-center text-sm text-muted-foreground">No invoices match your filters.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="border-t px-4 py-2 text-xs text-muted-foreground">
                {{ $rows->count() }} of {{ $total }} invoices
            </div>
        </div>

        <details id="inv-new" class="rounded-xl border border-border bg-card p-4">
            <summary class="cursor-pointer text-sm font-semibold">Record new invoice &mdash; {{ $nextInvoiceNo }}</summary>
            <div class="mt-3">
                @include('inventory.partials.invoice-form', [
                    'action' => route('inventory.invoices.store'),
                    'method' => 'POST',
                    'prefix' => 'inv-new',
                    'row' => null,
                    'suppliers' => $suppliers,
                    'orders' => $orders,
                    'today' => $today,
                ])
            </div>
        </details>
    </div>

    @include('inventory.partials.line-scripts')
@endsection