@extends('layouts.admin')

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

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

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Consignment Management</h1>
            <p class="text-sm text-gray-500">All paid shipments awaiting dispatch</p>
        </div>

        <a href="{{ route('admin.consignments.create') }}"
           class="inline-flex items-center justify-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-blue-600 text-white rounded-lg shadow hover:shadow-lg transition">
            + Create Consignment
        </a>
    </div>

    <!-- Note & Search -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-5">
        <div class="bg-blue-50 border border-blue-200 text-blue-900 p-3 rounded-lg text-sm flex-1">
            <strong>Note:</strong> Updating consignment status automatically updates all linked shipments.
        </div>

        <input type="text" id="searchConsignment"
               placeholder="Search by ID, barcode, destination..."
               class="w-full md:w-80 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none">
    </div>

    <!-- Consignments -->
    <div class="grid grid-cols-1 gap-4">
        @foreach($consignments as $consignment)
        <div class="bg-white rounded-2xl shadow p-4 flex flex-col md:flex-row md:items-center md:justify-between gap-4 hover:shadow-lg transition">

            <!-- QR & Code -->
            <div class="flex items-center gap-4">
                @if($consignment->barcode_image && Storage::disk('public')->exists($consignment->barcode_image))
                    <img src="{{ Storage::url($consignment->barcode_image) }}"
                         class="h-28 w-28 md:h-32 md:w-32 object-contain cursor-pointer rounded-lg border"
                         onclick="window.open(this.src,'_blank')"
                         alt="QR Code">
                @else
                    <div class="h-28 w-28 md:h-32 md:w-32 flex items-center justify-center bg-gray-100 rounded-lg text-gray-400 text-xs">
                        No Barcode
                    </div>
                @endif

                <div class="flex flex-col">
                    <span class="text-indigo-600 font-semibold text-lg md:text-xl">{{ $consignment->code }}</span>
                    <span class="text-sm text-gray-600 mt-1">
                        {{ $consignment->departure_location }} → {{ optional($consignment->destinationAddress)->name ?? $consignment->destination }}
                    </span>
                    @if(optional($consignment->destinationAddress)->address)
                        <span class="text-xs text-gray-400">{{ $consignment->destinationAddress->address }}</span>
                    @endif
                    <span class="text-xs text-gray-400 mt-1">{{ $consignment->created_at->format('d M Y') }}</span>
                </div>
            </div>

            <!-- Status & Actions -->
            <div class="flex flex-col md:flex-row md:items-center gap-4">

                <!-- Status Badge -->
                <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>

                <!-- Parcels / Shipments -->
                <div class="flex flex-col gap-1">
                    @forelse($consignment->shipments as $shipment)
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-medium">{{ $shipment->tracking_number }}</span>
                            <a href="{{ route('admin.consignments.parcels.show', [$consignment->id, $shipment->id]) }}"
                               class="text-indigo-600 hover:underline text-xs">
                               View
                            </a>
                        </div>
                    @empty
                        <span class="text-gray-400 text-xs">No parcels yet</span>
                    @endforelse
                </div>

                <!-- Print Barcode -->
                <a href="{{ route('admin.consignments.show', $consignment->id) }}?print=true"
                   target="_blank"
                   class="text-sm px-3 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition">
                    Print Barcode
                </a>

                <!-- Status Update Form -->
                <form action="{{ route('admin.consignments.updateStatus', $consignment->id) }}" method="POST" class="flex gap-1 items-center">
                    @csrf
                    <select name="status" class="text-xs rounded border px-2 py-1">
                        <option value="pending" {{ $consignment->status=='pending' ? 'selected' : '' }}>Pending</option>
                        <option value="in_transit" {{ $consignment->status=='in_transit' ? 'selected' : '' }}>In Transit</option>
                        <option value="delivered" {{ $consignment->status=='delivered' ? 'selected' : '' }}>Delivered</option>
                    </select>
                    <button type="submit" class="bg-indigo-600 text-white px-3 py-1 rounded text-xs hover:bg-indigo-700 transition">
                        Save
                    </button>
                </form>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Pagination -->
    <div class="mt-6 flex justify-center">
        {{ $consignments->links() }}
    </div>
</div>

<!-- Search Script -->
<script>
document.getElementById('searchConsignment').addEventListener('keyup', function () {
    let value = this.value.toLowerCase();
    document.querySelectorAll('.page-content > .grid > div').forEach(row => {
        row.style.display = row.innerText.toLowerCase().includes(value) ? '' : 'none';
    });
});
</script>
@endsection