@extends('layouts.app')
@section('title', 'Purchase Orders')
@section('breadcrumb')<span class="text-white">Purchase Orders</span>@endsection

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="mb-1">Purchase Orders</h1>
        <p>Manage supplier orders and warehouse receiving</p>
    </div>
    <a href="{{ route('purchase-orders.create') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> New Purchase Order
    </a>
</div>

@if(session('success'))
<div class="card p-4 mb-4 border-green-700 bg-green-900/20">
    <p class="text-green-400 text-sm"><i class="fas fa-check-circle mr-2"></i>{{ session('success') }}</p>
</div>
@endif

<form method="GET" action="{{ route('purchase-orders.index') }}" class="card p-4 mb-6">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 items-end">
        <div>
            <label>Status</label>
            <select name="status" class="input">
                <option value="">— All Statuses —</option>
                @foreach(['draft'=>'Draft','ordered'=>'Ordered','partial'=>'Partial','received'=>'Received','cancelled'=>'Cancelled'] as $k=>$v)
                <option value="{{ $k }}" {{ request('status')===$k ? 'selected' : '' }}>{{ $v }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label>Supplier</label>
            <select name="supplier_id" class="input">
                <option value="">— All Suppliers —</option>
                @foreach($suppliers as $s)
                <option value="{{ $s->id }}" {{ request('supplier_id')==$s->id ? 'selected' : '' }}>{{ $s->company ?: $s->full_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex gap-2">
            <button type="submit" class="btn btn-primary flex-1">Filter</button>
            <a href="{{ route('purchase-orders.index') }}" class="btn btn-secondary">Reset</a>
        </div>
    </div>
</form>

<div class="card overflow-hidden">
    @if($orders->count())
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="text-xs text-slate-400 uppercase border-b border-slate-700">
                    <th class="px-4 py-3 text-left">PO Number</th>
                    <th class="px-4 py-3 text-left">Supplier</th>
                    <th class="px-4 py-3 text-left">Order Date</th>
                    <th class="px-4 py-3 text-left">Expected</th>
                    <th class="px-4 py-3 text-right">Total Cost</th>
                    <th class="px-4 py-3 text-left">Status</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody>
                @foreach($orders as $po)
                <tr class="table-row border-b border-slate-800 hover:bg-slate-800/40">
                    <td class="px-4 py-3 font-mono text-blue-300 font-medium">{{ $po->po_number }}</td>
                    <td class="px-4 py-3 text-slate-300">{{ $po->supplier?->company ?: ($po->supplier?->full_name ?? '—') }}</td>
                    <td class="px-4 py-3 text-slate-400">{{ $po->order_date?->format('d M Y') ?? '—' }}</td>
                    <td class="px-4 py-3 text-slate-400">{{ $po->expected_date?->format('d M Y') ?? '—' }}</td>
                    <td class="px-4 py-3 text-right text-white font-medium">${{ number_format($po->totalCost(), 2) }}</td>
                    <td class="px-4 py-3"><span class="badge badge-{{ $po->statusColor() }}">{{ ucfirst($po->status) }}</span></td>
                    <td class="px-4 py-3 text-right">
                        <a href="{{ route('purchase-orders.show', $po) }}" class="text-slate-400 hover:text-white text-xs mr-2" title="View"><i class="fas fa-eye"></i></a>
                        @if(!in_array($po->status, ['received','cancelled']))
                        <a href="{{ route('purchase-orders.edit', $po) }}" class="text-blue-400 hover:text-blue-200 text-xs mr-2" title="Edit"><i class="fas fa-edit"></i></a>
                        <a href="{{ route('purchase-orders.receive', $po) }}" class="text-green-400 hover:text-green-300 text-xs mr-2" title="Receive Stock"><i class="fas fa-truck-loading"></i></a>
                        @endif
                        @if(auth()->user()->role?->name === 'office_admin' && !in_array($po->status, ['received']))
                        <form method="POST" action="{{ route('purchase-orders.destroy', $po) }}" class="inline"
                              onsubmit="return confirm('Delete {{ $po->po_number }}?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-red-400 hover:text-red-200 text-xs" title="Delete"><i class="fas fa-trash"></i></button>
                        </form>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @if($orders->hasPages())
        <div class="flex items-center justify-center gap-2 py-4">
            {{-- Previous Page Link --}}
            @if ($orders->onFirstPage())
                <span class="px-3 py-1 text-sm text-slate-600 bg-slate-800 rounded cursor-not-allowed">« Previous</span>
            @else
                <a href="{{ $orders->previousPageUrl() }}" class="px-3 py-1 text-sm text-slate-300 bg-slate-700 hover:bg-slate-600 rounded transition">« Previous</a>
            @endif

            {{-- Pagination Elements --}}
            <div class="flex gap-1">
                @foreach ($orders->getUrlRange(1, $orders->lastPage()) as $page => $url)
                    <a href="{{ $url }}" class="w-8 h-8 flex items-center justify-center text-sm rounded {{ $page == $orders->currentPage() ? 'bg-blue-600 text-white font-bold' : 'text-slate-400 hover:bg-slate-700' }}">
                        {{ $page }}
                    </a>
                @endforeach
            </div>

            {{-- Next Page Link --}}
            @if ($orders->hasMorePages())
                <a href="{{ $orders->nextPageUrl() }}" class="px-3 py-1 text-sm text-slate-300 bg-slate-700 hover:bg-slate-600 rounded transition">Next »</a>
            @else
                <span class="px-3 py-1 text-sm text-slate-600 bg-slate-800 rounded cursor-not-allowed">Next »</span>
            @endif
        </div>
        @endif
    @else
    <div class="p-12 text-center">
        <i class="fas fa-file-invoice text-slate-700 text-4xl mb-3 block"></i>
        <p class="text-slate-400">No purchase orders found.</p>
        <a href="{{ route('purchase-orders.create') }}" class="text-blue-400 text-sm hover:text-blue-300 mt-1 inline-block">Create your first PO</a>
    </div>
    @endif
</div>
@endsection