@extends('layouts.admin')
@section('title','Purchase orders')
@section('content')
@php
  $columns = [
    'po' => 'PO',
    'supplier' => 'Supplier',
    'location' => 'Location',
    'units' => 'Units',
    'value' => 'Value',
    'progress' => 'Progress',
    'status' => 'Status',
    'created' => 'Created',
    'actions' => 'Actions',
  ];
  $label = fn (string $v) => ucwords(str_replace(['_', '-'], ' ', $v));
  $statusTone = fn (string $s) => match ($s) {
      'draft' => 'muted',
      'ordered' => 'info',
      'partial' => 'warning',
      'received' => 'success',
      'canceled' => 'danger',
      default => 'muted',
  };
  $activeChips = collect([
      'status' => request('status'),
      'supplier_id' => request('supplier_id') ? ($suppliers->firstWhere('id', (int) request('supplier_id'))?->name) : null,
      'location_id' => request('location_id') ? ($locations->firstWhere('id', (int) request('location_id'))?->code) : null,
      'sort' => request('sort') && request('sort') !== 'newest' ? request('sort') : null,
  ])->filter();
@endphp

<x-admin.page
    title="Purchase orders"
    subtitle="Procurement command center — draft supplier POs, post incoming on order, receive with GRNI, and track open spend."
>
    <x-slot:actions>
        <a href="{{ route('admin.inventory.index') }}" class="admin-btn">
            <i data-lucide="warehouse" class="h-3.5 w-3.5"></i>
            Inventory
        </a>
        <a href="{{ route('admin.purchase-orders.export', request()->query()) }}" class="admin-btn">
            <i data-lucide="download" class="h-3.5 w-3.5"></i>
            Export CSV
        </a>
        <a href="{{ route('admin.purchase-orders.create') }}" class="admin-btn admin-btn-primary">
            <i data-lucide="plus" class="h-3.5 w-3.5"></i>
            New PO
        </a>
    </x-slot:actions>

    <div class="order-ops-stat-rail mb-5">
        <a href="{{ route('admin.purchase-orders.index', ['status' => 'open']) }}" class="order-ops-stat {{ request('status') === 'open' ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Open pipeline</span>
            <span class="order-ops-stat-value">{{ number_format($stats['draft'] + $stats['ordered'] + $stats['partial']) }}</span>
            <span class="order-ops-stat-meta">AUD {{ number_format($stats['open_value_cents'] / 100, 0) }} open value</span>
        </a>
        <a href="{{ route('admin.purchase-orders.index', ['status' => 'draft']) }}" class="order-ops-stat {{ request('status') === 'draft' ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Draft</span>
            <span class="order-ops-stat-value">{{ number_format($stats['draft']) }}</span>
            <span class="order-ops-stat-meta">Ready to order</span>
        </a>
        <a href="{{ route('admin.purchase-orders.index', ['status' => 'ordered']) }}" class="order-ops-stat {{ request('status') === 'ordered' ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Ordered</span>
            <span class="order-ops-stat-value">{{ number_format($stats['ordered']) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($stats['incoming_units']) }} units incoming</span>
        </a>
        <a href="{{ route('admin.purchase-orders.index', ['status' => 'partial']) }}" class="order-ops-stat {{ request('status') === 'partial' ? 'is-active tone-warning' : 'tone-warning' }}">
            <span class="order-ops-stat-label">Partial</span>
            <span class="order-ops-stat-value">{{ number_format($stats['partial']) }}</span>
            <span class="order-ops-stat-meta">Awaiting remainder</span>
        </a>
        <a href="{{ route('admin.purchase-orders.index', ['status' => 'received']) }}" class="order-ops-stat {{ request('status') === 'received' ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Received</span>
            <span class="order-ops-stat-value">{{ number_format($stats['received']) }}</span>
            <span class="order-ops-stat-meta">Closed into stock</span>
        </a>
        <a href="{{ route('admin.purchase-orders.index', ['status' => 'overdue']) }}" class="order-ops-stat {{ request('status') === 'overdue' ? 'is-active tone-danger' : 'tone-danger' }}">
            <span class="order-ops-stat-label">Overdue</span>
            <span class="order-ops-stat-value">{{ number_format($stats['overdue'] ?? 0) }}</span>
            <span class="order-ops-stat-meta">Past expected delivery</span>
        </a>
    </div>

    <div class="order-ops-quick-filters mb-4">
        @foreach([
            ['label' => 'All', 'params' => []],
            ['label' => 'Open', 'params' => ['status' => 'open']],
            ['label' => 'Draft', 'params' => ['status' => 'draft']],
            ['label' => 'Ordered', 'params' => ['status' => 'ordered']],
            ['label' => 'Partial', 'params' => ['status' => 'partial']],
            ['label' => 'Received', 'params' => ['status' => 'received']],
            ['label' => 'Overdue', 'params' => ['status' => 'overdue']],
            ['label' => 'Canceled', 'params' => ['status' => 'canceled']],
        ] as $chip)
            @php $isActive = empty($chip['params']) ? ! request('status') : request('status') === ($chip['params']['status'] ?? null); @endphp
            <a href="{{ route('admin.purchase-orders.index', $chip['params']) }}" class="order-ops-chip {{ $isActive ? 'is-active' : '' }}">{{ $chip['label'] }}</a>
        @endforeach
    </div>

    @if($activeChips->isNotEmpty())
        <div class="mb-4 flex flex-wrap items-center gap-2">
            <span class="text-xs font-semibold uppercase tracking-wide text-[#8c9196]">Active</span>
            @foreach($activeChips as $key => $value)
                <span class="order-ops-chip is-active">{{ $label($key) }}: {{ $label((string) $value) }}</span>
            @endforeach
            <a href="{{ route('admin.purchase-orders.index') }}" class="text-xs font-medium text-[#2c6ecb] hover:underline">Clear all</a>
        </div>
    @endif

    <x-admin.advanced-table
        id="purchase-orders"
        :search-url="route('admin.purchase-orders.index')"
        search-placeholder="Search PO #, supplier, SKU, notes…"
        :columns="$columns"
        :filters-open="$activeChips->isNotEmpty()"
    >
        <x-slot:filters>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-status">Status</label>
                <div class="admin-select-wrap">
                    <select id="filter-status" name="status" form="po-filter" class="admin-select" onchange="document.getElementById('po-filter').submit()">
                        <option value="">Any</option>
                        @foreach(['open','draft','ordered','partial','received','overdue','canceled'] as $status)
                            <option value="{{ $status }}" @selected(request('status') === $status)>{{ $label($status) }}</option>
                        @endforeach
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-supplier">Supplier</label>
                <div class="admin-select-wrap">
                    <select id="filter-supplier" name="supplier_id" form="po-filter" class="admin-select" onchange="document.getElementById('po-filter').submit()">
                        <option value="">Any supplier</option>
                        @foreach($suppliers as $supplier)
                            <option value="{{ $supplier->id }}" @selected((int) request('supplier_id') === $supplier->id)>{{ $supplier->name }}</option>
                        @endforeach
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-location">Location</label>
                <div class="admin-select-wrap">
                    <select id="filter-location" name="location_id" form="po-filter" class="admin-select" onchange="document.getElementById('po-filter').submit()">
                        <option value="">Any warehouse</option>
                        @foreach($locations as $location)
                            <option value="{{ $location->id }}" @selected((int) request('location_id') === $location->id)>{{ $location->name }}</option>
                        @endforeach
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-sort">Sort</label>
                <div class="admin-select-wrap">
                    <select id="filter-sort" name="sort" form="po-filter" class="admin-select" onchange="document.getElementById('po-filter').submit()">
                        <option value="newest" @selected(request('sort', 'newest') === 'newest')>Newest</option>
                        <option value="oldest" @selected(request('sort') === 'oldest')>Oldest</option>
                        <option value="value_desc" @selected(request('sort') === 'value_desc')>Highest value</option>
                        <option value="expected" @selected(request('sort') === 'expected')>Expected delivery</option>
                        <option value="number" @selected(request('sort') === 'number')>Number</option>
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="flex items-end">
                <a href="{{ route('admin.purchase-orders.index') }}" class="admin-btn w-full justify-center">
                    <i data-lucide="x" class="h-3.5 w-3.5"></i> Clear
                </a>
            </div>
        </x-slot:filters>

        <x-slot:bulk>
            <span class="text-xs text-[#6d7175]">Cancel selected draft purchase orders.</span>
            <input type="hidden" name="action" form="po-bulk-form" value="cancel">
            <button type="submit" form="po-bulk-form" class="admin-btn">Cancel drafts</button>
        </x-slot:bulk>

        <thead>
            <tr>
                <th class="w-10"><input type="checkbox" data-po-check-all aria-label="Select all"></th>
                <th data-col="po">PO</th>
                <th data-col="supplier">Supplier</th>
                <th data-col="location">Location</th>
                <th data-col="units">Units</th>
                <th data-col="value">Value</th>
                <th data-col="progress">Progress</th>
                <th data-col="status">Status</th>
                <th data-col="created">Created</th>
                <th data-col="actions"></th>
            </tr>
        </thead>
        <tbody>
            @forelse($orders as $order)
                @php
                    $ordered = (int) $order->units_ordered;
                    $received = (int) $order->units_received;
                    $pct = $ordered > 0 ? (int) round(($received / $ordered) * 100) : 0;
                @endphp
                <tr>
                    <td>
                        <input type="checkbox" name="ids[]" value="{{ $order->id }}" form="po-bulk-form" data-po-row>
                    </td>
                    <td data-col="po">
                        <div class="font-medium text-[#202223]">{{ $order->number }}</div>
                        <div class="text-xs text-[#8c9196]">{{ $order->lines_count }} line{{ $order->lines_count === 1 ? '' : 's' }} · {{ $order->receipts_count }} receipt{{ $order->receipts_count === 1 ? '' : 's' }}</div>
                    </td>
                    <td data-col="supplier">
                        <div class="font-medium">{{ $order->supplier_name ?? $order->supplier?->name ?? '—' }}</div>
                        @if($order->supplier_reference)
                            <div class="text-xs text-[#8c9196]">Ref {{ $order->supplier_reference }}</div>
                        @elseif($order->supplier?->email)
                            <div class="text-xs text-[#8c9196]">{{ $order->supplier->email }}</div>
                        @endif
                    </td>
                    <td data-col="location">
                        <div class="font-medium">{{ $order->location?->code ?? '—' }}</div>
                        <div class="text-xs text-[#8c9196]">
                            @if($order->expected_at)
                                ETA {{ $order->expected_at->format('M j') }}
                                @if($order->isOverdue())
                                    <span class="text-red-700">· overdue</span>
                                @endif
                            @else
                                {{ $order->location?->name }}
                            @endif
                        </div>
                    </td>
                    <td data-col="units" class="tabular-nums text-sm">
                        <div>{{ number_format($received) }} / {{ number_format($ordered) }}</div>
                        <div class="text-xs text-[#8c9196]">received</div>
                    </td>
                    <td data-col="value" class="font-semibold tabular-nums">{{ $order->money() }}</td>
                    <td data-col="progress">
                        <div class="h-1.5 w-28 overflow-hidden rounded-full bg-[#e4e5e7]">
                            <div class="h-full rounded-full bg-[#202223]" style="width: {{ $pct }}%"></div>
                        </div>
                        <div class="mt-1 text-[11px] text-[#8c9196]">{{ $pct }}%</div>
                    </td>
                    <td data-col="status">
                        <x-admin.badge :tone="$statusTone($order->status)">{{ $label($order->status) }}</x-admin.badge>
                    </td>
                    <td data-col="created" class="text-xs text-[#6d7175]">
                        <div>{{ $order->created_at?->diffForHumans() }}</div>
                        <div>{{ $order->createdBy?->name ?? 'System' }}</div>
                    </td>
                    <td data-col="actions" class="text-right">
                        <div class="inline-flex flex-wrap items-center justify-end gap-2">
                            @if($order->canOrder())
                                <form method="post" action="{{ route('admin.purchase-orders.order', $order) }}">
                                    @csrf
                                    <button type="submit" class="text-xs font-medium text-[#202223] hover:underline">Order</button>
                                </form>
                            @endif
                            @if($order->canReceive())
                                <a href="{{ route('admin.purchase-orders.show', $order) }}#receive" class="text-xs font-medium text-[#202223] hover:underline">Receive</a>
                            @endif
                            <a href="{{ route('admin.purchase-orders.show', $order) }}" class="text-xs font-medium text-[#2c6ecb] hover:underline">Open</a>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="10" class="p-10 text-center text-sm text-[#8c9196]">No purchase orders match these filters.</td>
                </tr>
            @endforelse
        </tbody>
    </x-admin.advanced-table>

    <form id="po-filter" method="get" action="{{ route('admin.purchase-orders.index') }}" class="hidden">
        @if(request('q'))
            <input type="hidden" name="q" value="{{ request('q') }}">
        @endif
    </form>
    <form id="po-bulk-form" method="post" action="{{ route('admin.purchase-orders.bulk') }}" class="hidden">
        @csrf
    </form>

    <div class="mt-4">{{ $orders->links() }}</div>
</x-admin.page>

<script>
(() => {
  const all = document.querySelector('[data-po-check-all]');
  if (!all) return;
  all.addEventListener('change', () => {
    document.querySelectorAll('[data-po-row]').forEach((el) => { el.checked = all.checked; });
  });
})();
</script>
@endsection