@extends('layouts.admin')
@section('title', 'Delivery')
@section('page-title', 'Delivery #' . $delivery->id)
@section('content')
<div class="space-y-4 max-w-2xl">
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <dl class="grid grid-cols-1 gap-3 sm:grid-cols-2">
            <div><dt class="text-xs font-medium text-slate-500">Order</dt><dd class="mt-0.5"><a href="{{ route('orders.show', $delivery->order) }}" class="font-mono text-slate-800">{{ $delivery->order->order_number }}</a></dd></div>
            <div><dt class="text-xs font-medium text-slate-500">Customer</dt><dd class="mt-0.5">{{ $delivery->order->customer->full_name ?? '-' }}</dd></div>
            <div><dt class="text-xs font-medium text-slate-500">Delivered date</dt><dd class="mt-0.5">{{ $delivery->delivered_date ? $delivery->delivered_date->format('d M Y') : '-' }}</dd></div>
            <div><dt class="text-xs font-medium text-slate-500">Delivered by</dt><dd class="mt-0.5">{{ $delivery->deliveredByUser->name ?? '-' }}</dd></div>
            <div><dt class="text-xs font-medium text-slate-500">Delivered to</dt><dd class="mt-0.5">{{ $delivery->delivered_to ?? '-' }}</dd></div>
            <div><dt class="text-xs font-medium text-slate-500">OTP code</dt><dd class="mt-0.5">{{ $delivery->otp_code ?? '-' }}</dd></div>
        </dl>
        @if($delivery->customer_remarks)<div class="mt-4"><dt class="text-xs font-medium text-slate-500">Customer remarks</dt><dd class="mt-1 text-sm text-slate-700">{{ $delivery->customer_remarks }}</dd></div>@endif
        @if($delivery->notes)<div class="mt-2"><dt class="text-xs font-medium text-slate-500">Notes</dt><dd class="mt-1 text-sm text-slate-700">{{ $delivery->notes }}</dd></div>@endif
    </div>
    <div class="flex gap-3">
        @can('edit deliveries')<a href="{{ route('deliveries.edit', $delivery) }}" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Edit</a>@endcan
        <a href="{{ route('orders.show', $delivery->order) }}" class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700">View Order</a>
        <a href="{{ route('deliveries.index') }}" class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700">Back to Deliveries</a>
    </div>
</div>
@endsection