@extends('layouts.app')

@section('title', 'My Shipments')

@section('content')
<div class="container mx-auto px-4 py-8">
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
            {{ session('error') }}
        </div>
    @endif

    <h1 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6">My Shipments</h1>

    @if($orders->isEmpty())
        <div class="text-center py-12 md:py-16 bg-white rounded-xl shadow-md">
            <i class="fas fa-shipping-fast text-5xl md:text-6xl text-gray-300 mb-4"></i>
            <p class="text-gray-500 text-lg">No shipments yet.</p>
        </div>
    @else
        <div class="space-y-4 md:space-y-6">
            @foreach($orders as $order)
                <div class="bg-white rounded-xl shadow-md p-4 md:p-6">
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
                        <div>
                            <h3 class="font-semibold text-gray-800">{{ $order->order_number }}</h3>
                            <p class="text-sm text-gray-500">{{ $order->created_at->format('M d, Y') }}</p>
                        </div>
                        <span class="px-3 py-1 rounded text-sm font-medium self-start
                            @if($order->order_status === 'delivered') bg-green-500 text-white
                            @elseif($order->order_status === 'shipped') bg-blue-500 text-white
                            @else bg-yellow-500 text-white @endif">
                            {{ ucfirst($order->order_status) }}
                        </span>
                    </div>

                    <div class="border-t border-gray-100 pt-4">
                        <div class="flex gap-2 overflow-x-auto pb-2">
                            @php
                            $statuses = ['ordered', 'shipped_from_origin', 'in_transit', 'arrived_nigeria', 'ready_for_pickup', 'delivered'];
                            $shippingRecord = $order->shippingRecords->first();
                            $currentStatus = $shippingRecord->status ?? ($order->order_status === 'delivered' ? 'delivered' : 'ordered');
                            $currentIndex = array_search($currentStatus, $statuses);
                            @endphp
                            @foreach($statuses as $index => $status)
                                <div class="flex flex-col items-center min-w-[70px] md:min-w-[80px]">
                                    <div class="w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center ring-2 ring-offset-2 
                                        @if($index < $currentIndex) bg-green-500 text-white ring-green-500
                                        @elseif($index == $currentIndex) bg-blue-500 text-white ring-blue-500
                                        @else bg-gray-200 text-gray-400 ring-gray-200 @endif">
                                        @if($index < $currentIndex)
                                            <i class="fas fa-check text-xs"></i>
                                        @else
                                            <span class="text-xs font-bold">{{ $index + 1 }}</span>
                                        @endif
                                    </div>
                                    <span class="text-xs text-center mt-2 whitespace-nowrap @if($index <= $currentIndex) text-gray-800 font-medium @else text-gray-400 @endif">
                                        {{ str_replace('_', ' ', ucfirst($status)) }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    @if($shippingRecord && $shippingRecord->tracking_notes)
                        <div class="mt-4 p-3 bg-blue-50 rounded-lg">
                            <p class="text-sm text-gray-700">
                                <i class="fas fa-info-circle mr-1"></i>
                                {{ $shippingRecord->tracking_notes }}
                            </p>
                            <p class="text-xs text-gray-500 mt-1">{{ $shippingRecord->status_updated_at->format('M d, Y H:i') }}</p>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection