@extends('layouts.admin')

@section('title', 'Consignment Details')

@section('content')
<div class="p-4 md:p-6 space-y-6">

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Consignment Details</h1>
            <p class="text-sm text-gray-500">Tracking Code: {{ $consignment->code }}</p>
        </div>

        <div class="flex gap-2">
            <button onclick="window.print()" class="px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200">Print QR</button>
            <a href="{{ route('admin.consignments.index') }}" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
                Back
            </a>
        </div>
    </div>

    <!-- Main Card -->
    <div class="bg-white rounded-2xl shadow p-6 grid grid-cols-1 md:grid-cols-3 gap-6">

        <!-- QR Code -->
        <div class="flex flex-col items-center">
            @if($consignment->barcode_image)
                <img src="{{ Storage::url($consignment->barcode_image) }}"
                     class="w-56 h-56 object-contain border rounded-lg cursor-pointer"
                     onclick="window.open(this.src,'_blank')">
            @endif
            <p class="mt-2 text-sm text-gray-500">Scan to track consignment</p>
        </div>

        <!-- Info -->
        <div class="md:col-span-2 space-y-4">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-semibold">{{ $consignment->code }}</h2>
                <span class="px-3 py-1 rounded-full text-xs font-medium
                    @if($consignment->status=='pending') bg-yellow-100 text-yellow-800
                    @elseif($consignment->status=='in_transit') bg-blue-100 text-blue-800
                    @else bg-green-100 text-green-800 @endif">
                    {{ ucfirst(str_replace('_',' ',$consignment->status)) }}
                </span>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                <div>
                    <p class="text-gray-500">Departure</p>
                    <p class="font-medium">{{ $consignment->departure_location }}</p>
                </div>

                <div>
                    <p class="text-gray-500">Destination</p>
                    <p class="font-medium">
                        {{ optional($consignment->destinationAddress)->name ?? $consignment->destination }}
                    </p>
                </div>

                <div>
                    <p class="text-gray-500">Total Shipments</p>
                    <p class="font-medium">{{ $consignment->shipments->count() }}</p>
                </div>

                <div>
                    <p class="text-gray-500">Created At</p>
                    <p class="font-medium">{{ $consignment->created_at->format('d M Y, h:i A') }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Shipments Table -->
    <div class="bg-white rounded-2xl shadow overflow-hidden">
        <div class="px-6 py-4 border-b">
            <h3 class="text-lg font-semibold">Shipments in this Consignment ({{ $consignment->shipments->count() }})</h3>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-gray-50 text-gray-600 uppercase text-xs">
                    <tr>
                        <th class="p-3 text-left">Tracking</th>
                        <th class="p-3 text-left">Customer</th>
                        <th class="p-3 text-left">Weight</th>
                        <th class="p-3 text-left">Status</th>
                        <th class="p-3 text-left">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($consignment->shipments as $shipment)
                    <tr class="border-t">
                        <td class="p-3 font-medium">{{ $shipment->tracking_number ?? $shipment->id }}</td>
                        <td class="p-3">{{ $shipment->customer_name ?? 'N/A' }}</td>
                        <td class="p-3">{{ $shipment->weight ?? '0' }} kg</td>
                        <td class="p-3">
                            <span class="px-2 py-1 rounded text-xs bg-blue-100 text-blue-800">
                                {{ ucfirst(str_replace('_',' ',$shipment->status)) }}
                            </span>
                        </td>
                        <td class="p-3">
                            <a href="{{ route('admin.shipments.show', $shipment->id) }}"
                               class="text-indigo-600 hover:underline text-xs">View</a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection