@extends('layouts.admin')

@section('content')
@php
    $isPaid = $shipment->invoice && strtolower($shipment->invoice->status) === 'paid';
    $exchangeRate = 950; // adjust NGN/GBP
@endphp

<div class="max-w-6xl mx-auto p-4 md:p-6">

    {{-- Breadcrumb --}}
    <div class="text-sm text-gray-500 mb-4">
        <a href="{{ route('admin.shipments.index') }}" class="hover:underline">Shipments</a>
        <span class="mx-1">/</span>
        <span class="font-semibold text-gray-800">Shipment #{{ $shipment->id }}</span>
    </div>

    {{-- Currency Toggle --}}
    <div class="flex justify-end mb-4">
        <label class="flex items-center gap-2 cursor-pointer">
            <span class="text-gray-700 font-medium">Currency:</span>
            <select id="currencySelect" class="border rounded-lg px-2 py-1">
                <option value="ngn">₦ Naira</option>
                <option value="gbp">£ Pounds</option>
            </select>
        </label>
    </div>

    {{-- Page Header --}}
    <div class="bg-white rounded-2xl shadow-md p-5 md:p-7 mb-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
            <div>
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900">
                    Shipment — {{ $shipment->tracking_number }}
                </h1>
                <p class="text-gray-500 mt-1">
                    Receiver: <span class="font-medium text-gray-700">{{ $shipment->receiver_name }}</span>
                </p>
            </div>

            {{-- Desktop Action Buttons --}}
            <div class="hidden md:flex gap-3 {{ $isPaid ? 'opacity-50 blur-sm pointer-events-none' : '' }}">
                <a href="{{ route('admin.shipments.edit', $shipment->id) }}"
                   class="px-4 py-2 rounded-xl bg-blue-600 hover:bg-blue-700 text-white shadow transition">
                    Edit Shipment
                </a>

                @if($shipment->is_certified != 1)
                <form action="{{ route('admin.shipments.certify', $shipment->id) }}" method="POST" onsubmit="return confirm('Certify this shipment and allow customer payment?');">
                    @csrf
                    <button type="submit"
                            class="px-6 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-semibold shadow-lg">
                        ✔ Certify Shipment
                    </button>
                </form>
                @else
                <span class="px-4 py-2 rounded-xl bg-emerald-100 text-emerald-700 font-semibold">
                    ✔ Already Certified
                </span>
                @endif

                <button onclick="confirmDelete()"
                        class="px-4 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white shadow transition">
                    Delete
                </button>
            </div>

            @if($isPaid)
                <p class="mt-2 text-sm text-green-700 font-semibold">
                    🔒 Invoice is already paid; edit or delete is disabled.
                </p>
            @endif
        </div>
    </div>

    {{-- Grid --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

        {{-- Receiver Info --}}
        <div class="bg-white rounded-2xl shadow-md p-5">
            <h2 class="text-lg font-semibold mb-3">Receiver Information</h2>
            <div class="space-y-2 text-gray-700">
                <p><span class="font-medium">Name:</span> {{ $shipment->receiver_name }}</p>
                <p><span class="font-medium">Address:</span> {{ $shipment->receiver_address }}</p>
                <p><span class="font-medium">Notes:</span> {{ $shipment->notes ?? 'N/A' }}</p>
            </div>
        </div>

        {{-- Shipment Details --}}
        <div class="bg-white rounded-2xl shadow-md p-5">
            <h2 class="text-lg font-semibold mb-3">Shipment Details</h2>
            <div class="space-y-2 text-gray-700">
                <p><span class="font-medium">Tracking Number:</span> {{ $shipment->tracking_number }}</p>
                <p><span class="font-medium">Weight:</span> {{ $shipment->weight }} kg</p>
                <p><span class="font-medium">Customer ID:</span> {{ $shipment->user_id }}</p>
            </div>
        </div>

        {{-- Pricing --}}
        <div class="bg-white rounded-2xl shadow-md p-5">
            <h2 class="text-lg font-semibold mb-3">Pricing Breakdown</h2>
            <div class="space-y-1 text-gray-700">
                <p>
                    <span class="font-medium">Original Price:</span>
                    <span class="price" data-gbp="{{ $shipment->original_price }}" data-ngn="{{ $shipment->original_price * $exchangeRate }}">
                        ₦{{ number_format($shipment->original_price * $exchangeRate, 2) }}
                    </span>
                </p>
                <p>
                    <span class="font-medium">Discount:</span>
                    <span class="price" data-gbp="{{ $shipment->discount_amount }}" data-ngn="{{ $shipment->discount_amount * $exchangeRate }}">
                        ₦{{ number_format($shipment->discount_amount * $exchangeRate, 2) }}
                    </span>
                </p>
                <hr>
                <p class="font-bold text-lg">
                    Final Price:
                    <span class="price" data-gbp="{{ $shipment->final_price }}" data-ngn="{{ $shipment->final_price * $exchangeRate }}">
                        ₦{{ number_format($shipment->final_price * $exchangeRate, 2) }}
                    </span>
                </p>
            </div>
        </div>

        {{-- Payment Status --}}
        <div class="bg-white rounded-2xl shadow-md p-5 border-l-4 {{ $isPaid ? 'border-green-500' : 'border-red-500' }}">
            <h2 class="text-lg font-semibold mb-3 flex items-center gap-2">
                Payment Status
                <span class="px-3 py-1 rounded-full text-xs font-bold {{ $isPaid ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                    {{ $isPaid ? 'PAID' : 'UNPAID' }}
                </span>
            </h2>
            <div class="text-gray-700 space-y-2">
                <p><span class="font-medium">Invoice Number:</span> {{ $shipment->invoice->payment_reference ?? 'Not Generated' }}</p>
                <p><span class="font-medium">Amount Due:</span>
                    <span class="price" data-gbp="{{ $shipment->final_price }}" data-ngn="{{ $shipment->final_price * $exchangeRate }}">
                        ₦{{ number_format($shipment->final_price * $exchangeRate, 2) }}
                    </span>
                </p>
                <p><span class="font-medium">Payment Method:</span> {{ $shipment->invoice->payment_method ?? 'N/A' }}</p>
                <p><span class="font-medium">Payment Date:</span> {{ $shipment->invoice->paid_at?->format('d M Y, h:i A') ?? 'Not Paid Yet' }}</p>
            </div>
        </div>

        {{-- Timeline --}}
        <div class="bg-white rounded-2xl shadow-md p-5 md:col-span-2">
            <h2 class="text-lg font-semibold mb-3">Shipment Timeline</h2>
            <div class="space-y-3">
                <div class="flex items-start gap-3">
                    <div class="w-3 h-3 rounded-full bg-green-500 mt-1"></div>
                    <div>
                        <p class="font-medium">Created</p>
                        <p class="text-gray-600 text-sm">{{ $shipment->created_at->format('d M Y — h:i A') }}</p>
                    </div>
                </div>
                <div class="flex items-start gap-3">
                    <div class="w-3 h-3 rounded-full bg-blue-500 mt-1"></div>
                    <div>
                        <p class="font-medium">Last Updated</p>
                        <p class="text-gray-600 text-sm">{{ $shipment->updated_at->format('d M Y — h:i A') }}</p>
                    </div>
                </div>
            </div>
        </div>

    </div>

    {{-- Back Button --}}
    <div class="mt-6 hidden md:block">
        <a href="{{ route('admin.shipments.index') }}"
           class="px-5 py-3 rounded-xl bg-gray-700 hover:bg-gray-800 text-white shadow transition">
            Back to Shipments
        </a>
    </div>

    {{-- Mobile Sticky Action Bar --}}
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t shadow-lg p-3 flex md:hidden gap-3">
        <a href="{{ route('admin.shipments.edit', $shipment->id) }}"
           class="flex-1 text-center px-4 py-2 rounded-xl bg-blue-600 text-white font-medium">
           Edit
        </a>

        @if($shipment->is_certified != 1)
        <form action="{{ route('admin.shipments.certify', $shipment->id) }}" method="POST" class="flex-1" onsubmit="return confirm('Certify this shipment and allow customer payment?');">
            @csrf
            <button type="submit" class="w-full px-4 py-2 rounded-xl bg-emerald-600 text-white font-semibold">✔ Certify</button>
        </form>
        @endif

        <button onclick="confirmDelete()"
            class="flex-1 text-center px-4 py-2 rounded-xl bg-red-600 text-white font-medium">
            Delete
        </button>
    </div>

</div>

{{-- Delete Form --}}
<form id="deleteForm" action="{{ route('admin.shipments.destroy', $shipment->id) }}" method="POST">
    @csrf
    @method('DELETE')
</form>

{{-- Currency Toggle Script --}}
<script>
const currencySelect = document.getElementById('currencySelect');
const priceElements = document.querySelectorAll('.price');

currencySelect.addEventListener('change', () => {
    const currency = currencySelect.value;
    priceElements.forEach(el => {
        const value = el.dataset[currency];
        const symbol = currency === 'ngn' ? '₦' : '£';
        el.textContent = symbol + Number(value).toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2});
    });
});

// Trigger on page load
currencySelect.dispatchEvent(new Event('change'));

function confirmDelete() {
    if(confirm('Are you sure you want to permanently delete this shipment?')){
        document.getElementById('deleteForm').submit();
    }
}
</script>
@endsection