@extends('layouts.admin')

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

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

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <h1 class="text-3xl font-bold text-gray-900">Parcel Details</h1>

        <div class="flex gap-2">
            <button onclick="window.print()"
                class="px-4 py-2 bg-gradient-to-r from-gray-300 to-gray-400 text-gray-800 font-medium rounded-lg shadow hover:from-gray-400 hover:to-gray-500 transition">
                Print Barcode
            </button>

            @if($shipment->consignment)
            <a href="{{ route('admin.consignments.show', $shipment->consignment->id) }}"
                class="px-4 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-lg shadow hover:from-indigo-700 hover:to-blue-700 transition">
                Back to Consignment
            </a>
            @endif
        </div>
    </div>

    <!-- Parcel Info Card -->
    <div class="bg-white rounded-3xl shadow-lg p-6 space-y-6">

        <!-- Parcel Header -->
        <div class="flex flex-col md:flex-row md:justify-between md:items-center">
            <div>
                <h2 class="text-2xl md:text-3xl font-bold text-gray-800">{{ $shipment->tracking_number }}</h2>
                <p class="text-gray-500 text-sm">Parcel ID: PCL-{{ $shipment->id }}</p>
            </div>

            <span class="px-4 py-1 rounded-full text-sm font-semibold
                @if($shipment->status == 'pending') bg-yellow-100 text-yellow-800
                @elseif($shipment->status == 'in-transit') bg-blue-100 text-blue-800
                @elseif($shipment->status == 'delivered') bg-green-100 text-green-800
                @else bg-gray-200 text-gray-700 @endif">
                {{ ucfirst(str_replace('_',' ', $shipment->status)) }}
            </span>
        </div>

        <!-- QR Code / Consignment -->
        <div class="text-center">
            <p class="text-gray-500 mb-2 uppercase text-xs tracking-wider">Consignment QR Code</p>

            @if($shipment->consignment && $shipment->consignment->barcode_image && Storage::disk('public')->exists($shipment->consignment->barcode_image))
            <img src="{{ Storage::url($shipment->consignment->barcode_image) }}"
                class="mx-auto h-36 md:h-48 object-contain rounded-xl shadow-lg"
                alt="Consignment QR Code">
            @else
            <div class="inline-block p-6 bg-gray-100 rounded-xl text-gray-400 text-sm">
                QR Code not available
                <br>
                Path: {{ $shipment->consignment?->barcode_image ?? 'Not assigned' }}
            </div>
            @endif

            <p class="mt-2 text-gray-700 font-medium tracking-wide">{{ $shipment->tracking_number }}</p>
        </div>

        <!-- Parcel Details Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-4">

            <div>
                <p class="text-gray-500 text-sm">Customer</p>
                <p class="font-semibold flex items-center gap-2">
                    {{ $shipment->user->name ?? 'N/A' }}
                    @if(optional($shipment->user)->is_premium)
                    <span class="px-2 py-0.5 bg-yellow-100 text-yellow-700 text-xs font-medium rounded-full shadow-sm">
                        Premium
                    </span>
                    @endif
                </p>
            </div>

            <div>
                <p class="text-gray-500 text-sm">Weight</p>
                <p class="font-semibold">{{ $shipment->weight }} kg</p>
            </div>

            <div>
                <p class="text-gray-500 text-sm">Consignment</p>
                <p class="font-semibold">
                    @if($shipment->consignment)
                    <a href="{{ route('admin.consignments.show', $shipment->consignment->id) }}" class="text-blue-600 hover:underline font-medium">
                        {{ $shipment->consignment->code }}
                    </a>
                    @else
                    Not Assigned
                    @endif
                </p>
            </div>

            <div>
                <p class="text-gray-500 text-sm">Price</p>
                <p class="font-semibold text-gray-800">₦{{ number_format($shipment->final_price, 2) }}</p>
            </div>

            <div>
                <p class="text-gray-500 text-sm">Receiver</p>
                <p class="font-semibold">{{ $shipment->receiver_name }}</p>
            </div>

            <div>
                <p class="text-gray-500 text-sm">Destination</p>
                <p class="font-semibold">{{ $shipment->receiver_address }}</p>
            </div>

        </div>

        <!-- Status Sync -->
        @if($shipment->consignment)
        <div class="mt-6 p-4 bg-blue-50 border border-blue-200 text-blue-800 rounded-xl shadow-sm">
            <strong>Status Sync:</strong> This parcel's status is automatically synced from consignment
            <span class="font-semibold">{{ $shipment->consignment->code }}</span>
        </div>
        @endif

    </div>

    <!-- Activity Log -->
<div class="bg-white rounded-3xl shadow-lg p-6">
    <h3 class="text-xl font-bold mb-6 text-gray-800">Activity Log</h3>

    <div class="relative border-l-2 border-gray-200 pl-12 space-y-8">
        <!-- Status Sync -->
        <div class="timeline-item relative">
            <span class="absolute -left-6 top-2 w-6 h-6 bg-blue-600 rounded-full border-2 border-white shadow"></span>
            <p class="font-semibold">Status: {{ ucfirst($shipment->status) }}</p>
            <p class="text-gray-500 text-sm">Status synced from consignment</p>
            <p class="text-gray-400 text-xs">{{ $shipment->updated_at->format('d M Y, h:i A') }}</p>
        </div>

        <!-- Added to Consignment -->
        <div class="timeline-item relative">
            <span class="absolute -left-6 top-2 w-6 h-6 bg-indigo-600 rounded-full border-2 border-white shadow"></span>
            <p class="font-semibold">Added to Consignment</p>
            <p class="text-gray-500 text-sm">Parcel added to consignment {{ optional($shipment->consignment)->code }}</p>
            <p class="text-gray-400 text-xs">{{ optional($shipment->consignment)->created_at?->format('d M Y, h:i A') }}</p>
        </div>

        <!-- Payment Confirmed -->
        <div class="timeline-item relative">
            <span class="absolute -left-6 top-2 w-6 h-6 bg-green-600 rounded-full border-2 border-white shadow"></span>
            <p class="font-semibold">Payment Confirmed</p>
            <p class="text-gray-500 text-sm">Customer payment received (₦{{ number_format($shipment->final_price, 2) }})</p>
            <p class="text-gray-400 text-xs">{{ optional($shipment->invoice)->paid_at?->format('d M Y, h:i A') }}</p>
        </div>

        <!-- Shipment Created -->
        <div class="timeline-item relative">
            <span class="absolute -left-6 top-2 w-6 h-6 bg-gray-600 rounded-full border-2 border-white shadow"></span>
            <p class="font-semibold">Shipment Created</p>
            <p class="text-gray-500 text-sm">Parcel created</p>
            <p class="text-gray-400 text-xs">{{ $shipment->created_at->format('d M Y, h:i A') }}</p>
        </div>

        @if(empty($shipment->activities))
            <p class="text-gray-500 text-sm mt-4">No additional activity logs available.</p>
        @endif
    </div>
</div>



</div>
@endsection