@extends('admin.layout')
@section('title', 'Pesanan')
@section('subtitle', 'Semua pesanan customer ke mitra')

@php
    $orderMeta = [
        'searching'   => ['Mencari', 'amber'],
        'accepted'    => ['Diterima', 'blue'],
        'on_the_way'  => ['Menuju lokasi', 'blue'],
        'in_progress' => ['Dikerjakan', 'blue'],
        'completed'   => ['Selesai', 'green'],
        'cancelled'   => ['Dibatalkan', 'red'],
        'rejected'    => ['Ditolak', 'red'],
    ];
@endphp

@section('content')
    <div class="flex flex-wrap items-center gap-2 mb-4">
        <a href="{{ route('admin.orders', array_filter(['q' => request('q')])) }}"
           class="px-3.5 py-2 rounded-xl text-sm font-semibold transition {{ ! request('status') ? 'bg-brand text-white' : 'bg-white border border-line text-sub hover:text-brand' }}">Semua</a>
        @foreach ($orderMeta as $val => [$label, $tone])
            <a href="{{ route('admin.orders', array_filter(['status' => $val, 'q' => request('q')])) }}"
               class="px-3.5 py-2 rounded-xl text-sm font-semibold transition {{ request('status') === $val ? 'bg-brand text-white' : 'bg-white border border-line text-sub hover:text-brand' }}">{{ $label }}</a>
        @endforeach
        <form method="GET" class="ml-auto">
            @if (request('status'))<input type="hidden" name="status" value="{{ request('status') }}">@endif
            <input name="q" value="{{ request('q') }}" placeholder="Cari kode / judul…"
                   class="w-56 max-w-full rounded-xl border border-line px-3.5 py-2 text-sm outline-none focus:border-brand focus:ring-2 focus:ring-brand/20">
        </form>
    </div>

    <div class="bg-white rounded-2xl border border-line overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-canvas text-sub text-xs uppercase tracking-wide">
                    <tr>
                        <th class="text-left font-semibold px-5 py-3">Kode</th>
                        <th class="text-left font-semibold px-5 py-3">Layanan</th>
                        <th class="text-left font-semibold px-5 py-3">Customer</th>
                        <th class="text-left font-semibold px-5 py-3">Mitra</th>
                        <th class="text-left font-semibold px-5 py-3">Status</th>
                        <th class="text-left font-semibold px-5 py-3">Dibuat</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-line">
                    @forelse ($orders as $order)
                        <tr class="hover:bg-canvas transition">
                            <td class="px-5 py-3"><a href="{{ route('admin.orders.show', $order) }}" class="font-semibold text-brand hover:text-brand-dark">{{ $order->code }}</a></td>
                            <td class="px-5 py-3">
                                <div class="font-medium">{{ $order->title ?? '—' }}</div>
                                <div class="text-xs text-sub">{{ $order->category?->name }}</div>
                            </td>
                            <td class="px-5 py-3">{{ $order->customer?->name ?? '—' }}</td>
                            <td class="px-5 py-3">{{ $order->mitra?->name ?? '—' }}</td>
                            <td class="px-5 py-3">
                                @php [$lbl, $tone] = $orderMeta[$order->status->value ?? $order->status] ?? ['—','gray']; @endphp
                                <x-badge :color="$tone">{{ $lbl }}</x-badge>
                            </td>
                            <td class="px-5 py-3 text-sub whitespace-nowrap">{{ $order->created_at?->format('d M Y, H:i') }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="px-5 py-8 text-center text-sub">Tidak ada pesanan.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <x-pagination :paginator="$orders" unit="pesanan" />
@endsection