@extends('garage.layouts.app')

@section('title', 'Purchase invoices')

@push('styles')
@include('shared.garage-purchase-order-ui-styles')
<style>
.gpo-idx-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.gpo-idx-table-wrap { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; }
.gpo-idx-table { margin: 0; font-size: 0.8125rem; }
.gpo-idx-table thead th { background: #f8fafc; font-size: 0.65rem; text-transform: uppercase; color: #64748b; }
.gpo-po-badge { font-family: ui-monospace, monospace; font-size: 0.7rem; background: #f1f5f9; padding: 0.25rem 0.5rem; border-radius: 6px; font-weight: 700; }
.gpo-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: flex-end; }
</style>
@endpush

@section('content')
<div class="gpo-page container-fluid px-2 px-lg-3 py-2">
    <div class="gpo-hero mb-3 d-flex flex-wrap justify-content-between align-items-start gap-2">
        <div>
            <h1 class="mb-1"><i class="bi bi-receipt me-2" style="color:var(--bs-primary);"></i>Purchase invoices</h1>
            <p class="mb-0 text-muted small">Vendor purchase invoices — receive stock and record returns from the invoice detail page.</p>
        </div>
        <a href="{{ route('garage.purchase-invoices.create') }}" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg me-1"></i>New purchase invoice</a>
    </div>

    @if(session('success'))<div class="alert alert-success py-2 small">{{ session('success') }}</div>@endif
    @if(session('error'))<div class="alert alert-danger py-2 small">{{ session('error') }}</div>@endif

    <div class="bg-white border rounded-3 p-3 mb-3">
        <form method="GET" class="gpo-idx-filters">
            <select name="status" class="form-select form-select-sm" style="min-width:9rem;">
                <option value="">All statuses</option>
                @foreach(['draft','received','partial','paid','overdue','cancelled'] as $st)
                <option value="{{ $st }}" @selected($status === $st)>{{ ucfirst($st) }}</option>
                @endforeach
            </select>
            <input type="date" name="from_date" class="form-control form-control-sm" value="{{ $fromDate }}" style="width:auto;">
            <input type="date" name="to_date" class="form-control form-control-sm" value="{{ $toDate }}" style="width:auto;">
            <input type="text" name="search" class="form-control form-control-sm" placeholder="Invoice # or vendor…" value="{{ $search }}" style="min-width:12rem;">
            <button type="submit" class="btn btn-sm btn-outline-secondary">Filter</button>
            @if($status || $fromDate || $toDate || $search)
            <a href="{{ route('garage.purchase-invoices.index') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
            @endif
        </form>
    </div>

    <div class="gpo-idx-table-wrap">
        <div class="table-responsive">
            <table class="table gpo-idx-table mb-0">
                <thead>
                    <tr>
                        <th>Invoice #</th>
                        <th>Date</th>
                        <th>Vendor</th>
                        <th class="text-end">Total</th>
                        <th>Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($purchaseInvoices as $inv)
                    <tr>
                        <td><span class="gpo-po-badge">{{ $inv->bill_number }}</span></td>
                        <td class="text-muted">{{ \Carbon\Carbon::parse($inv->bill_date)->format('M d, Y') }}</td>
                        <td>{{ $inv->vendor_name ?? '—' }}</td>
                        <td class="text-end">{{ number_format($inv->total_amount, 2) }}</td>
                        <td><span class="badge bg-light text-dark border">{{ ucfirst($inv->status) }}</span></td>
                        <td class="text-end">
                            <div class="gpo-actions">
                                <a href="{{ route('garage.purchase-invoices.show', $inv->id) }}" class="btn btn-sm btn-outline-primary">View</a>
                                <a href="{{ route('garage.purchase-invoices.vouchers', $inv->id) }}" class="btn btn-sm btn-outline-secondary" title="Journal vouchers">Voucher</a>
                                @if($inv->status === 'draft')
                                <a href="{{ route('garage.purchase-invoices.edit', $inv->id) }}" class="btn btn-sm btn-outline-secondary">Edit</a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="text-center text-muted py-4">No purchase invoices found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($purchaseInvoices->hasPages())
        <div class="p-2 border-top">{{ $purchaseInvoices->links() }}</div>
        @endif
    </div>
</div>
@endsection