<x-admin-layout title="Request Pelanggan" subtitle="Review request pickup/repeat, preview portal pelanggan, lalu konversi jika sudah valid.">
    <div class="space-y-4">
        @forelse ($requests as $request)
            @php
                $payload = $request->payload ?? [];
                $statusTone = match ($request->status) {
                    'baru' => 'border-amber-200 bg-amber-50 text-amber-700',
                    'direview' => 'border-sky-200 bg-sky-50 text-sky-700',
                    'dikonversi' => 'border-emerald-200 bg-emerald-50 text-emerald-700',
                    'dibatalkan' => 'border-red-200 bg-red-50 text-red-700',
                    default => 'border-slate-200 bg-slate-50 text-slate-700',
                };
            @endphp
            <article class="rounded-lg bg-white p-5 shadow-sm">
                <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                    <div>
                        <div class="flex flex-wrap items-center gap-2">
                            <h2 class="font-semibold">{{ $request->customer?->name }}</h2>
                            <span class="rounded-full border px-2 py-0.5 text-xs {{ $statusTone }}">{{ $request->status }}</span>
                            <span class="rounded-full border border-slate-200 bg-slate-50 px-2 py-0.5 text-xs text-slate-700">{{ $request->type }}</span>
                        </div>
                        <div class="mt-1 text-sm text-slate-500">{{ $request->customer?->phone }} - {{ $request->branch?->name ?? 'Tanpa cabang' }}</div>
                        <div class="text-sm text-slate-500">Dibuat {{ $request->created_at->format('d/m/Y H:i') }}</div>
                    </div>
                    <a class="rounded-md border px-4 py-2 text-sm" href="{{ route('customer-requests.portal-preview', $request) }}">Preview Portal</a>
                </div>

                <div class="mt-4 grid gap-3 rounded-md border bg-slate-50 p-4 text-sm md:grid-cols-2">
                    @if ($request->type === 'pickup')
                        <div><span class="text-slate-500">Alamat pickup</span><div class="font-medium">{{ $payload['pickup_address'] ?? $request->customer?->address ?? '-' }}</div></div>
                        <div><span class="text-slate-500">Jadwal</span><div class="font-medium">{{ $payload['pickup_date'] ?? '-' }} {{ $payload['pickup_time'] ?? '' }}</div></div>
                    @endif
                    @if ($request->type === 'repeat')
                        <div><span class="text-slate-500">Nota sumber</span><div class="font-medium">{{ $request->sourceOrder?->invoice_no ?? '-' }}</div></div>
                        <div><span class="text-slate-500">Tanggal nota</span><div class="font-medium">{{ $request->sourceOrder?->created_at?->format('d/m/Y') ?? '-' }}</div></div>
                    @endif
                    <div class="md:col-span-2"><span class="text-slate-500">Catatan pelanggan/admin</span><div class="font-medium whitespace-pre-line">{{ $request->note ?: ($payload['note'] ?? '-') }}</div></div>
                </div>

                @if (in_array($request->status, ['baru', 'direview'], true))
                    <div class="mt-4 grid gap-3 md:grid-cols-3">
                        @if ($request->status === 'baru')
                            <form method="post" action="{{ route('customer-requests.review', $request) }}" class="rounded-md border p-3">
                                @csrf
                                <input name="note" placeholder="Catatan review" class="w-full rounded-md border px-3 py-2 text-sm">
                                <button class="mt-2 w-full rounded-md border px-3 py-2 text-sm">Tandai Direview</button>
                            </form>
                        @endif
                        @if ($request->type === 'repeat')
                            <form method="post" action="{{ route('customer-requests.convert', $request) }}" class="rounded-md border p-3">
                                @csrf
                                <div class="text-sm text-slate-600">Konversi repeat akan menyalin item dari nota sumber.</div>
                                <button class="mt-2 w-full rounded-md bg-slate-900 px-3 py-2 text-sm font-medium text-white">Konversi Order</button>
                            </form>
                        @else
                            <div class="rounded-md border p-3 text-sm text-slate-600">
                                Pickup dikonversi lewat POS setelah barang diterima dan ditimbang.
                                <a href="{{ route('pos.create') }}" class="mt-2 block rounded-md bg-slate-900 px-3 py-2 text-center font-medium text-white">Buka POS</a>
                            </div>
                        @endif
                        <form method="post" action="{{ route('customer-requests.cancel', $request) }}" class="rounded-md border border-red-100 p-3">
                            @csrf
                            <input name="note" placeholder="Alasan batal" class="w-full rounded-md border px-3 py-2 text-sm">
                            <button class="mt-2 w-full rounded-md border border-red-200 px-3 py-2 text-sm text-red-700">Batalkan</button>
                        </form>
                    </div>
                @endif
            </article>
        @empty
            <div class="rounded-lg bg-white p-8 text-center text-sm text-slate-500 shadow-sm">Belum ada request pelanggan.</div>
        @endforelse

        {{ $requests->links() }}
    </div>
</x-admin-layout>
