@extends('layouts.app')

@section('title', 'Invoices')

@section('content')
<x-breadcrumb :items="[['label' => 'Invoices']]" />

<x-page-header title="Invoices" subtitle="Vendor invoices, matching and verification.">
    <x-slot name="actions">
        <form method="GET" action="{{ route('invoices.index') }}" class="d-flex align-items-center" style="gap:8px;">
            <div class="procure-search">
                <i class="fas fa-search"></i>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Invoice #, supplier...">
            </div>
            <select name="status" class="form-control form-control-sm" style="border-radius:8px;width:auto;" onchange="this.form.submit()">
                <option value="">All statuses</option>
                @foreach(['draft','received','under_review','matched','exception','approved','paid','cancelled'] as $st)
                    <option value="{{ $st }}" @selected(request('status') === $st)>{{ ucfirst(str_replace('_', ' ', $st)) }}</option>
                @endforeach
            </select>
        </form>
    </x-slot>
</x-page-header>

@if(($invoices ?? collect())->isEmpty())
    <div class="chart-card">
        <div class="chart-card-body">
            <x-empty-state icon="fas fa-file-invoice-dollar" title="No invoices" message="Imported or received vendor invoices will appear here." />
        </div>
    </div>
@else
    <div class="chart-card">
        <div class="chart-card-body" style="overflow-x:auto;">
            <table class="procure-table">
                <thead>
                    <tr>
                        <th>Invoice #</th>
                        <th>Supplier</th>
                        <th>PO</th>
                        <th>Date</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($invoices as $invoice)
                        <tr>
                            <td><a href="{{ route('invoices.show', $invoice) }}"><strong>{{ $invoice->invoice_number }}</strong></a></td>
                            <td>{{ $invoice->supplier->name ?? '—' }}</td>
                            <td>
                                @if($invoice->purchaseOrder)
                                    <a href="{{ route('purchase-orders.show', $invoice->purchaseOrder) }}">{{ $invoice->purchaseOrder->po_number }}</a>
                                @else
                                    —
                                @endif
                            </td>
                            <td>{{ optional($invoice->invoice_date)->format('Y-m-d') }}</td>
                            <td>{{ number_format($invoice->total_amount, 2) }} {{ $invoice->currency }}</td>
                            <td><x-status-badge :status="$invoice->status" /></td>
                            <td class="text-right">
                                <a href="{{ route('invoices.show', $invoice) }}" class="procure-btn"><i class="fas fa-eye"></i></a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if(method_exists($invoices, 'links'))
            <div class="px-3 pb-3">{{ $invoices->withQueryString()->links() }}</div>
        @endif
    </div>
@endif
@endsection