@extends('garage.layouts.app')

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

@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-filters .form-select, .gpo-idx-filters .form-control { font-size: 0.8125rem; border-radius: 8px; }
.gpo-idx-table-wrap { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06); }
.gpo-idx-table { margin: 0; font-size: 0.8125rem; }
.gpo-idx-table thead th { background: #f8fafc; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.65rem; border-bottom: 1px solid #e2e8f0; padding: 0.65rem 0.75rem; }
.gpo-idx-table tbody td { padding: 0.65rem 0.75rem; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }
.gpo-idx-table tbody tr:last-child td { border-bottom: none; }
.gpo-idx-table tbody tr:hover { background: #f0fdfa; }
.gpo-po-badge { font-family: ui-monospace, monospace; font-size: 0.7rem; background: #f1f5f9; color: var(--bs-primary); padding: 0.25rem 0.5rem; border-radius: 6px; font-weight: 700; }
.gpo-btn-new { font-size: 0.8125rem; font-weight: 700; border-radius: 10px; border: none; background: var(--bs-primary); color: #fff; padding: 0.45rem 1rem; box-shadow: 0 4px 14px rgba(var(--bs-primary-rgb), .22); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.gpo-btn-new:hover { color: #fff; opacity: 0.95; }
</style>
@endpush

@section('content')
<div class="gpo-page container-fluid px-2 px-lg-3 py-2">
    <div class="gpo-hero mb-3">
        <div class="d-flex flex-wrap align-items-start justify-content-between gap-2">
            <div>
                <h1 class="mb-1"><i class="bi bi-bag-check me-2" style="color:var(--bs-primary);"></i>Purchase orders</h1>
                <p class="mb-0">Filter by status or date, then open a PO or start a new one from inventory.</p>
            </div>
            <a href="{{ route('garage.purchase-orders.create') }}" class="gpo-btn-new"><i class="bi bi-plus-lg"></i>New purchase order</a>
        </div>
    </div>

    <div class="bg-white border border-light rounded-3 p-3 mb-3" style="box-shadow: 0 2px 12px rgba(15,23,42,0.04);">
        <form method="GET" action="{{ route('garage.purchase-orders.index') }}" class="gpo-idx-filters">
            <select name="status" class="form-select form-select-sm" style="min-width: 9rem;">
                <option value="">All statuses</option>
                <option value="draft" @selected($status === 'draft')>Draft</option>
                <option value="sent" @selected($status === 'sent')>Sent</option>
                <option value="acknowledged" @selected($status === 'acknowledged')>Acknowledged</option>
                <option value="partial" @selected($status === 'partial')>Partial</option>
                <option value="received" @selected($status === 'received')>Received</option>
                <option value="cancelled" @selected($status === 'cancelled')>Cancelled</option>
            </select>
            <input type="date" name="from_date" class="form-control form-control-sm" style="width: auto;" value="{{ $fromDate }}" aria-label="From date">
            <input type="date" name="to_date" class="form-control form-control-sm" style="width: auto;" value="{{ $toDate }}" aria-label="To date">
            <div class="position-relative flex-grow-1" style="min-width: 12rem; max-width: 20rem;">
                <i class="bi bi-search position-absolute" style="left: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 0.85rem;"></i>
                <input type="text" class="form-control form-control-sm ps-4" name="search" placeholder="PO # or vendor…" value="{{ $search }}">
            </div>
            <button type="submit" class="btn btn-sm btn-outline-secondary"><i class="bi bi-funnel me-1"></i>Apply</button>
            @if($status || $fromDate || $toDate || $search)
            <a href="{{ route('garage.purchase-orders.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 style="width: 9rem;">PO #</th>
                        <th style="width: 7rem;">Date</th>
                        <th>Vendor</th>
                        <th style="width: 8rem;" class="text-end">Total</th>
                        <th style="width: 7rem;">Status</th>
                        <th style="width: 9rem;" class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($purchaseOrders as $purchaseOrder)
                    <tr>
                        <td><span class="gpo-po-badge">{{ $purchaseOrder->purchase_order_number }}</span></td>
                        <td class="text-muted">{{ \Carbon\Carbon::parse($purchaseOrder->purchase_order_date)->format('M d, Y') }}</td>
                        <td>
                            @if(!empty($purchaseOrder->vendor_ledger_id))
                                <a href="{{ route('garage.ledger-reports.ledger', $purchaseOrder->vendor_ledger_id) }}"
                                   class="fw-semibold text-dark text-decoration-none">
                                    {{ $purchaseOrder->vendor_name ?? '—' }}
                                </a>
                            @else
                                <span class="fw-semibold text-dark">{{ $purchaseOrder->vendor_name ?? '—' }}</span>
                            @endif
                        </td>
                        <td class="text-end fw-bold" style="color:var(--bs-primary);">PKR {{ number_format($purchaseOrder->total_amount, 2) }}</td>
                        <td>
                            @php
                                $statusColors = [
                                    'draft' => 'secondary',
                                    'sent' => 'info',
                                    'acknowledged' => 'primary',
                                    'partial' => 'warning',
                                    'received' => 'success',
                                    'cancelled' => 'danger',
                                ];
                                $statusColor = $statusColors[$purchaseOrder->status] ?? 'secondary';
                            @endphp
                            <span class="badge bg-{{ $statusColor }}">{{ ucfirst($purchaseOrder->status) }}</span>
                        </td>
                        <td class="text-end">
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('garage.purchase-orders.show', $purchaseOrder->id) }}" class="btn btn-outline-primary" title="View"><i class="bi bi-eye"></i></a>
                                @if(!empty($purchaseOrder->journal_voucher_id))
                                    <a href="{{ route('garage.purchase-orders.vouchers', $purchaseOrder->id) }}" class="btn btn-outline-primary" title="Vouchers"><i class="bi bi-receipt"></i></a>
                                @endif
                                @if($purchaseOrder->status === 'draft')
                                <a href="{{ route('garage.purchase-orders.edit', $purchaseOrder->id) }}" class="btn btn-outline-secondary" title="Edit"><i class="bi bi-pencil"></i></a>
                                @endif
                                @if($purchaseOrder->status !== 'received')
                                <form action="{{ route('garage.purchase-orders.destroy', $purchaseOrder->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this purchase order?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-5 text-muted">
                            <i class="bi bi-inbox fs-1 d-block mb-2 opacity-50"></i>
                            No purchase orders match your filters.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($purchaseOrders->hasPages())
        <div class="p-3 border-top bg-light">
            {{ $purchaseOrders->links() }}
        </div>
        @endif
    </div>
</div>
@endsection