@extends('driver.layout')

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

@section('content')

<div class="max-w-7xl mx-auto">

    {{-- HEADER --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800 dark:text-white">
                My Orders
            </h1>
            <p class="text-sm text-gray-500 dark:text-gray-400">
                Orders assigned to you for delivery
            </p>
        </div>

        <span class="px-4 py-2 rounded-xl bg-primary/10 text-primary text-sm font-semibold">
            {{ $orders->count() }} Orders
        </span>
    </div>

    {{-- FLASH MESSAGE --}}
    @if(session('success'))
        <div class="mb-4 rounded-xl bg-green-50 dark:bg-green-900/30
                    p-4 text-green-600">
            {{ session('success') }}
        </div>
    @endif

    {{-- CARD --}}
    <div class="bg-white dark:bg-slate-900
                border border-gray-200 dark:border-slate-700
                rounded-2xl shadow-sm overflow-hidden">

        @if($orders->isEmpty())
            <div class="p-12 text-center text-gray-500 dark:text-gray-400">
                <i class="bi bi-box-seam text-4xl mb-3 block"></i>
                <p>No orders assigned yet</p>
            </div>
        @else

        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-gray-50 dark:bg-slate-800 text-gray-600 dark:text-gray-300">
                    <tr>
                        <th class="px-6 py-4 text-left">#</th>
                        <th class="px-6 py-4 text-left">Customer</th>
                        <th class="px-6 py-4 text-left">Address</th>
                        <th class="px-6 py-4 text-left">Status</th>
                        <th class="px-6 py-4 text-left">Delivery Date</th>
                        <th class="px-6 py-4 text-right">Action</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-200 dark:divide-slate-700">

                    @foreach($orders as $order)
                        <tr class="hover:bg-gray-50 dark:hover:bg-slate-800 transition">

                            {{-- ORDER ID --}}
                            <td class="px-6 py-4 font-medium">
                                #{{ $order->id }}
                            </td>

                            {{-- CUSTOMER --}}
                            <td class="px-6 py-4">
                                <div class="font-semibold text-gray-800 dark:text-white">
                                    {{ $order->customer_name ?? '—' }}
                                </div>
                                <div class="text-xs text-gray-500">
                                    {{ $order->customer_phone ?? '' }}
                                </div>
                            </td>

                            {{-- ADDRESS --}}
                            <td class="px-6 py-4 max-w-xs truncate text-gray-600 dark:text-gray-400">
                                {{ $order->delivery_address }}
                            </td>

                            {{-- STATUS --}}
                            <td class="px-6 py-4">
                                @php
                                    $statusColor = match($order->status) {
                                        'pending' => 'bg-yellow-100 text-yellow-700',
                                        'picked' => 'bg-blue-100 text-blue-700',
                                        'delivered' => 'bg-green-100 text-green-700',
                                        'cancelled' => 'bg-red-100 text-red-600',
                                        default => 'bg-gray-100 text-gray-600',
                                    };
                                @endphp

                                <span class="px-3 py-1 rounded-full text-xs font-medium {{ $statusColor }}">
                                    {{ ucfirst($order->status) }}
                                </span>
                            </td>

                            {{-- DELIVERY DATE --}}
                            <td class="px-6 py-4 text-gray-500 text-xs">
                                {{ $order->delivery_date
                                    ? \Carbon\Carbon::parse($order->delivery_date)->format('d M Y')
                                    : '—' }}
                            </td>

                            {{-- ACTION --}}
                            <td class="px-6 py-4 text-right">
                                <a href="{{ route('driver.orders.show', $order->id) }}"
                                   class="inline-flex items-center gap-1
                                          px-4 py-2 rounded-xl
                                          bg-primary text-white
                                          hover:bg-primary/90 transition">
                                    View
                                </a>
                            </td>

                        </tr>
                    @endforeach

                </tbody>
            </table>
        </div>

        @endif

    </div>

</div>

@endsection