@php
    $progressLabel = fn (?string $status) => $status ? str_replace('_', ' ', $status) : 'belum diupdate';
    $progressTone = fn (?string $status) => match ($status) {
        'sudah_diambil_atau_diterima', 'siap_diambil_atau_dikirim' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
        'sedang_dicuci', 'sedang_dikeringkan', 'sedang_finishing', 'sedang_dikemas' => 'bg-sky-50 text-sky-700 border-sky-200',
        default => 'bg-slate-50 text-slate-700 border-slate-200',
    };
@endphp

<x-admin-layout title="{{ $order->invoice_no }}" subtitle="Detail nota, pembayaran, progress item, dan timeline pelanggan.">
    <div class="grid gap-5 xl:grid-cols-[1fr_380px]">
        <div class="space-y-5">
            <section class="grid gap-4 md:grid-cols-4">
                <div class="rounded-lg bg-white p-4 shadow-sm">
                    <div class="text-xs uppercase text-slate-500">Pelanggan</div>
                    <div class="mt-1 font-semibold">{{ $order->customer?->name ?? 'Walk-in' }}</div>
                    <div class="text-sm text-slate-500">{{ $order->customer?->phone }}</div>
                </div>
                <div class="rounded-lg bg-white p-4 shadow-sm">
                    <div class="text-xs uppercase text-slate-500">Status</div>
                    <div class="mt-1 font-semibold">{{ str_replace('_', ' ', $order->status) }}</div>
                    <div class="text-sm text-slate-500">{{ $order->received_at?->format('d/m/Y H:i') }}</div>
                </div>
                <div class="rounded-lg bg-white p-4 shadow-sm">
                    <div class="text-xs uppercase text-slate-500">Pembayaran</div>
                    <div class="mt-1 font-semibold">{{ strtoupper($order->payment_status) }}</div>
                    <div class="text-sm text-slate-500">Sisa Rp {{ number_format($order->balance_due, 0, ',', '.') }}</div>
                </div>
                <div class="rounded-lg bg-white p-4 shadow-sm">
                    <div class="text-xs uppercase text-slate-500">Estimasi</div>
                    <div class="mt-1 font-semibold">{{ $order->estimated_done_at?->format('d/m/Y') ?? '-' }}</div>
                    <div class="text-sm text-slate-500">{{ $order->estimated_done_at?->format('H:i') }}</div>
                </div>
            </section>

            <section class="rounded-lg bg-white p-5 shadow-sm">
                <div class="mb-4 flex items-center justify-between">
                    <h2 class="font-semibold">Item & Progress Per Item</h2>
                    <a class="rounded-md border px-3 py-1 text-sm" href="{{ route('orders.receipt', $order) }}">Cetak Nota</a>
                </div>
                <div class="space-y-3">
                    @foreach ($order->details as $detail)
                        <div class="rounded-md border p-4">
                            <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                                <div>
                                    <div class="font-semibold">{{ $detail->product_name }} {{ $detail->is_reward_free_item ? '(Reward)' : '' }}</div>
                                    <div class="mt-1 text-sm text-slate-500">
                                        {{ rtrim(rtrim(number_format((float) $detail->quantity, 3, ',', '.'), '0'), ',') }}
                                        x Rp {{ number_format($detail->unit_price, 0, ',', '.') }}
                                        oleh {{ $detail->staff?->name ?? '-' }}
                                    </div>
                                </div>
                                <div class="text-right">
                                    <div class="font-semibold">Rp {{ number_format($detail->line_total, 0, ',', '.') }}</div>
                                    <span class="mt-1 inline-flex rounded-full border px-2 py-0.5 text-xs {{ $progressTone($detail->progress_status) }}">{{ $progressLabel($detail->progress_status) }}</span>
                                </div>
                            </div>
                            <form method="post" action="{{ route('orders.details.progress', [$order, $detail]) }}" class="mt-4 grid gap-3 md:grid-cols-[1fr_1fr_auto]">
                                @csrf
                                <select name="progress_status" class="rounded-md border px-3 py-2 text-sm">
                                    @foreach (\App\Models\Order::PROGRESS_STATUSES as $status)
                                        <option value="{{ $status }}" @selected($detail->progress_status === $status)>{{ str_replace('_', ' ', $status) }}</option>
                                    @endforeach
                                </select>
                                <input name="note" value="{{ $detail->progress_note }}" placeholder="Catatan item" class="rounded-md border px-3 py-2 text-sm">
                                <button class="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white">Update Item</button>
                            </form>
                        </div>
                    @endforeach
                </div>
                <div class="mt-4 border-t pt-4 text-right">
                    <div class="text-sm text-slate-500">Grand total</div>
                    <div class="text-xl font-semibold">Rp {{ number_format($order->grand_total, 0, ',', '.') }}</div>
                </div>
            </section>

            <section class="rounded-lg bg-white p-5 shadow-sm">
                <h2 class="font-semibold">Timeline Progress</h2>
                <ol class="mt-5 space-y-4">
                    @forelse ($order->progressLogs->sortBy('created_at') as $log)
                        <li class="relative border-l-2 border-slate-200 pl-5">
                            <span class="absolute -left-[7px] top-1 h-3 w-3 rounded-full bg-slate-900"></span>
                            <div class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
                                <div class="font-medium">{{ $progressLabel($log->progress_status) }}</div>
                                <div class="text-sm text-slate-500">{{ $log->created_at->format('d/m/Y H:i') }}</div>
                            </div>
                            @if ($log->note)
                                <div class="mt-1 text-sm text-slate-600">{{ $log->note }}</div>
                            @endif
                        </li>
                    @empty
                        <li class="text-sm text-slate-500">Belum ada timeline.</li>
                    @endforelse
                </ol>
            </section>

            <section class="rounded-lg bg-white p-5 shadow-sm">
                <h2 class="font-semibold">Histori Pembayaran</h2>
                <div class="mt-3 divide-y text-sm">
                    @forelse ($order->payments as $payment)
                        <div class="grid gap-2 py-3 md:grid-cols-[1fr_auto]">
                            <div>
                                <div class="font-medium">{{ strtoupper($payment->method) }} {{ $payment->reference ? '- '.$payment->reference : '' }}</div>
                                <div class="text-slate-500">{{ $payment->created_at->format('d/m/Y H:i') }} {{ $payment->note ? '- '.$payment->note : '' }}</div>
                            </div>
                            <div class="font-semibold">Rp {{ number_format($payment->amount, 0, ',', '.') }}</div>
                        </div>
                    @empty
                        <div class="py-3 text-slate-500">Belum ada pembayaran.</div>
                    @endforelse
                </div>
            </section>
        </div>

        <aside class="space-y-5">
            <form method="post" action="{{ route('orders.payments.store', $order) }}" class="rounded-lg bg-white p-5 shadow-sm">
                @csrf
                <h2 class="font-semibold">Tambah Pembayaran</h2>
                <div class="mt-2 rounded-md bg-slate-50 p-3 text-sm">Sisa tagihan: <strong>Rp {{ number_format($order->balance_due, 0, ',', '.') }}</strong></div>
                <label class="mt-4 block text-sm">Nominal<input name="amount" type="number" min="1" max="{{ (int) $order->balance_due }}" value="{{ (int) $order->balance_due }}" class="mt-1 w-full rounded-md border px-3 py-2"></label>
                <label class="mt-3 block text-sm">Metode<select name="method" class="mt-1 w-full rounded-md border px-3 py-2"><option value="cash">Cash</option><option value="transfer">Transfer</option><option value="qris">QRIS</option></select></label>
                <label class="mt-3 block text-sm">Referensi<input name="reference" placeholder="No. transfer / QRIS" class="mt-1 w-full rounded-md border px-3 py-2"></label>
                <label class="mt-3 block text-sm">Catatan<textarea name="note" class="mt-1 w-full rounded-md border px-3 py-2"></textarea></label>
                <button class="mt-4 w-full rounded-md bg-slate-900 px-4 py-2 font-medium text-white" @disabled($order->isPaid())>{{ $order->isPaid() ? 'Sudah Lunas' : 'Catat Pembayaran' }}</button>
            </form>

            <form method="post" action="{{ route('orders.status', $order) }}" class="rounded-lg bg-white p-5 shadow-sm">
                @csrf
                <h2 class="font-semibold">Update Status Inti</h2>
                <select name="status" class="mt-3 w-full rounded-md border px-3 py-2">
                    @foreach (\App\Models\Order::CORE_STATUSES as $status)
                        <option value="{{ $status }}" @selected($order->status === $status)>{{ $status }}</option>
                    @endforeach
                </select>
                <textarea name="note" placeholder="Catatan status" class="mt-3 w-full rounded-md border px-3 py-2"></textarea>
                <button class="mt-3 w-full rounded-md bg-slate-900 px-4 py-2 text-white">Simpan Status</button>
            </form>

            <form method="post" action="{{ route('orders.progress', $order) }}" class="rounded-lg bg-white p-5 shadow-sm">
                @csrf
                <h2 class="font-semibold">Update Progress Pelanggan</h2>
                <select name="progress_status" class="mt-3 w-full rounded-md border px-3 py-2">
                    @foreach (\App\Models\Order::PROGRESS_STATUSES as $status)
                        <option value="{{ $status }}">{{ str_replace('_', ' ', $status) }}</option>
                    @endforeach
                </select>
                <textarea name="note" placeholder="Catatan timeline" class="mt-3 w-full rounded-md border px-3 py-2"></textarea>
                <button class="mt-3 w-full rounded-md border px-4 py-2">Tambah Timeline</button>
            </form>

            <form method="post" action="{{ route('orders.whatsapp', $order) }}">
                @csrf
                <button class="w-full rounded-md border bg-white px-4 py-2">Kirim Update WhatsApp</button>
            </form>
            <a class="block rounded-md border bg-white px-4 py-2 text-center" href="{{ route('orders.receipt', $order) }}">Cetak Nota</a>
            <a class="block rounded-md border bg-white px-4 py-2 text-center" href="{{ route('digital-forms.create', $order) }}">Form Pemeriksaan</a>
        </aside>
    </div>
</x-admin-layout>
