@extends('layouts.admin')

@section('title', 'Shipment Invoice')

@section('content')
<div class="max-w-6xl mx-auto px-4 py-6">

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Shipment Invoice</h1>
            <p class="text-gray-500 mt-1 text-sm">
                Tracking #: <strong>{{ $shipment->tracking_number }}</strong>
            </p>
        </div>

        <a href="{{ route('admin.shipments.index') }}"
           class="px-4 py-2 rounded-xl bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium">
            ← Back to Shipments
        </a>
    </div>

    <!-- Invoice Card -->
    <div class="bg-white shadow-2xl rounded-2xl border border-gray-200 overflow-hidden">

        <!-- Header Banner -->
        <div class="px-6 py-4 bg-gradient-to-r from-indigo-600 to-blue-600 text-white">
            <h2 class="text-lg font-bold">Invoice Details</h2>
            <p class="text-sm opacity-90">Shipment summary and pricing breakdown</p>
        </div>

        <!-- Invoice Body -->
        <div class="p-6 space-y-6">

            <!-- Customer Info -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <h3 class="text-md font-semibold text-gray-700">Receiver Information</h3>
                    <p><strong>Name:</strong> {{ $shipment->receiver_name }}</p>
                    <p><strong>Address:</strong> {{ $shipment->receiver_address }}</p>
                </div>

                <div>
                    <h3 class="text-md font-semibold text-gray-700">Shipment Info</h3>
                    <p><strong>Weight:</strong> {{ $shipment->weight }} KG</p>
                    <p><strong>Tracking #:</strong> {{ $shipment->tracking_number }}</p>
                    <p><strong>Status:</strong> <span class="capitalize">{{ $shipment->status }}</span></p>
                    @if(isset($shipment->customer) && ($shipment->customer->type ?? null) === 'premium')
                        <p class="px-2 py-1 mt-1 inline-block bg-emerald-100 text-emerald-700 font-semibold rounded-xl">
                            ⭐ Premium Customer
                        </p>
                    @else
                        <p class="px-2 py-1 mt-1 inline-block bg-indigo-100 text-indigo-700 font-semibold rounded-xl">
                            Standard Customer
                        </p>
                    @endif
                </div>
            </div>

            <!-- Pricing -->
            <div class="mt-4">
                <h3 class="text-md font-semibold text-gray-700 mb-2">Pricing</h3>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div class="bg-gray-50 rounded-xl p-4 text-center">
                        <p class="text-gray-500 text-sm">Original Price</p>
                        <p class="text-gray-900 font-bold">£{{ number_format($shipment->original_price, 2) }}</p>
                    </div>
                    <div class="bg-gray-50 rounded-xl p-4 text-center">
                        <p class="text-gray-500 text-sm">Discount</p>
                        <p class="text-gray-900 font-bold">£{{ number_format($shipment->discount_amount ?? 0, 2) }}</p>
                    </div>
                    <div class="bg-gray-50 rounded-xl p-4 text-center">
                        <p class="text-gray-500 text-sm">Final Price</p>
                        <p class="text-gray-900 font-bold">£{{ number_format($shipment->final_price, 2) }}</p>
                    </div>
                    <div class="bg-gray-50 rounded-xl p-4 text-center">
                        <p class="text-gray-500 text-sm">Rate per KG</p>
                        @php
                            $ratePerKg = isset($shipment->customer) && ($shipment->customer->type ?? null) === 'premium' ? 3 : 4;
                        @endphp
                        <p class="text-gray-900 font-bold">£{{ $ratePerKg }}</p>
                    </div>
                </div>
            </div>

            <!-- Admin Notes -->
            @if($shipment->notes)
            <div class="mt-4">
                <h3 class="text-md font-semibold text-gray-700 mb-2">Admin Notes</h3>
                <p class="p-4 bg-gray-50 rounded-xl text-gray-700">{{ $shipment->notes }}</p>
            </div>
            @endif

            <!-- Action Buttons -->
            <div class="mt-6 flex flex-col md:flex-row gap-4">
                <a href="{{ route('admin.shipments.edit', $shipment->id) }}"
                   class="px-6 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-semibold shadow-lg text-center">
                   ✏️ Edit Shipment
                </a>

                
            </div>
        </div>
    </div>
</div>
@endsection