@extends('admin.layout')
@section('title', 'Pesanan ' . $order->code)
@section('subtitle', $order->title)

@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'],
    ];
    [$stLbl, $stTone] = $orderMeta[$order->status->value ?? $order->status] ?? ['—','gray'];
@endphp

@section('content')
    <a href="{{ route('admin.orders') }}" class="text-sm text-sub hover:text-brand font-semibold">‹ Kembali ke daftar pesanan</a>

    <div class="grid lg:grid-cols-3 gap-4 mt-4">
        <div class="lg:col-span-2 space-y-4">
            <div class="bg-white rounded-2xl border border-line p-5">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <div class="text-sm text-sub">{{ $order->code }}</div>
                        <h2 class="text-lg font-extrabold">{{ $order->title ?? $order->category?->name }}</h2>
                        <div class="mt-1 text-sm text-sub">{{ $order->category?->name }}</div>
                    </div>
                    <x-badge :color="$stTone">{{ $stLbl }}</x-badge>
                </div>
                @if ($order->description)<p class="mt-4 text-sm text-ink/80">{{ $order->description }}</p>@endif

                <dl class="mt-5 grid sm:grid-cols-2 gap-y-3 gap-x-6 text-sm">
                    <div class="flex justify-between border-b border-line pb-2"><dt class="text-sub">Dibuat</dt><dd class="font-semibold">{{ $order->created_at?->format('d M Y, H:i') }}</dd></div>
                    <div class="flex justify-between border-b border-line pb-2"><dt class="text-sub">Diterima</dt><dd class="font-semibold">{{ $order->accepted_at?->format('d M Y, H:i') ?? '—' }}</dd></div>
                    <div class="flex justify-between border-b border-line pb-2"><dt class="text-sub">Selesai</dt><dd class="font-semibold">{{ $order->completed_at?->format('d M Y, H:i') ?? '—' }}</dd></div>
                    <div class="flex justify-between border-b border-line pb-2"><dt class="text-sub">Dibatalkan</dt><dd class="font-semibold">{{ $order->cancelled_at?->format('d M Y, H:i') ?? '—' }}</dd></div>
                </dl>

                <div class="mt-4 rounded-xl bg-canvas border border-line p-3.5 text-sm">
                    <div class="text-sub text-xs font-semibold uppercase tracking-wide">Alamat</div>
                    <div class="mt-1">{{ $order->address_snapshot ?? $order->address?->detail ?? '—' }}</div>
                    @if ($order->lat)<div class="text-xs text-sub mt-1">{{ $order->lat }}, {{ $order->lng }}</div>@endif
                </div>
            </div>

            @if ($order->review)
                <div class="bg-white rounded-2xl border border-line p-5">
                    <h3 class="font-bold text-sm">Ulasan</h3>
                    <div class="mt-2 text-amber-500">{{ str_repeat('★', $order->review->rating) }}<span class="text-line">{{ str_repeat('★', 5 - $order->review->rating) }}</span></div>
                    @if ($order->review->body)<p class="mt-1.5 text-sm text-ink/80">{{ $order->review->body }}</p>@endif
                    @if (!empty($order->review->tags))
                        <div class="mt-2 flex flex-wrap gap-1.5">
                            @foreach ($order->review->tags as $tag)<x-badge color="orange">{{ $tag }}</x-badge>@endforeach
                        </div>
                    @endif
                </div>
            @endif

            @if ($conversation)
                <div class="bg-white rounded-2xl border border-line p-5">
                    <div class="flex items-center justify-between">
                        <h3 class="font-bold text-sm">Percakapan</h3>
                        <a href="{{ route('admin.conversations.show', $conversation) }}" class="text-sm font-semibold text-brand hover:text-brand-dark">Buka ›</a>
                    </div>
                    <div class="mt-3 space-y-2 max-h-72 overflow-y-auto">
                        @foreach ($conversation->messages->take(30) as $msg)
                            @php $fromCustomer = $msg->sender_id === $order->customer_id; @endphp
                            <div class="flex {{ $fromCustomer ? 'justify-start' : 'justify-end' }}">
                                <div class="max-w-[75%] rounded-2xl px-3.5 py-2 text-sm {{ $fromCustomer ? 'bg-canvas border border-line' : 'bg-brand text-white' }}">
                                    <div class="{{ $fromCustomer ? 'text-sub' : 'text-white/70' }} text-[10px] font-semibold mb-0.5">{{ $msg->sender?->name }}</div>
                                    {{ $msg->body }}
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>

        <div class="space-y-4">
            <div class="bg-white rounded-2xl border border-line p-5">
                <h3 class="font-bold text-sm mb-3">Customer</h3>
                @if ($order->customer)
                    <div class="flex items-center gap-3">
                        <span class="w-10 h-10 rounded-full bg-brand-soft text-brand-dark grid place-items-center text-sm font-bold">{{ $order->customer->initials() }}</span>
                        <div><div class="font-semibold">{{ $order->customer->name }}</div><div class="text-xs text-sub">{{ $order->customer->phone }}</div></div>
                    </div>
                @else <p class="text-sm text-sub">—</p> @endif
            </div>
            <div class="bg-white rounded-2xl border border-line p-5">
                <h3 class="font-bold text-sm mb-3">Mitra</h3>
                @if ($order->mitra)
                    <div class="flex items-center gap-3">
                        <span class="w-10 h-10 rounded-full bg-accent-soft text-accent grid place-items-center text-sm font-bold">{{ $order->mitra->initials() }}</span>
                        <div><div class="font-semibold">{{ $order->mitra->name }}</div><div class="text-xs text-sub">{{ $order->mitra->phone }}</div></div>
                    </div>
                    @if ($order->mitra->mitraProfile)
                        <a href="{{ route('admin.mitra.show', $order->mitra->mitraProfile) }}" class="mt-3 inline-block text-sm font-semibold text-brand hover:text-brand-dark">Lihat profil mitra ›</a>
                    @endif
                @else <p class="text-sm text-sub">Belum ada mitra.</p> @endif
            </div>
        </div>
    </div>
@endsection