@extends('driver.layout')

@section('title','Driver Dashboard')

@section('content')

<div class="space-y-8">

    {{-- HEADER --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-800 dark:text-white">
                Driver Dashboard
            </h1>
            <p class="text-sm text-gray-500 dark:text-gray-400">
                Overview of your deliveries
            </p>
        </div>

        <span class="px-4 py-2 rounded-xl bg-primary/10 text-primary text-sm font-semibold">
            {{ now()->format('d M Y') }}
        </span>
    </div>

    {{-- STATS --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

        {{-- TOTAL --}}
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm
                    border border-gray-200 dark:border-slate-700
                    hover:shadow-lg transition">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Total Assigned</p>
                    <h2 class="text-3xl font-bold text-gray-800 dark:text-white">
                        {{ $stats['total'] ?? 0 }}
                    </h2>
                </div>
                <div class="w-12 h-12 rounded-xl bg-primary/10
                            flex items-center justify-center">
                    <i class="bi bi-box-seam text-primary text-xl"></i>
                </div>
            </div>
        </div>

        {{-- PENDING --}}
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm
                    border border-gray-200 dark:border-slate-700
                    hover:shadow-lg transition">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Pending</p>
                    <h2 class="text-3xl font-bold text-yellow-600">
                        {{ $stats['pending'] ?? 0 }}
                    </h2>
                </div>
                <div class="w-12 h-12 rounded-xl bg-yellow-100
                            flex items-center justify-center">
                    <i class="bi bi-hourglass-split text-yellow-600 text-xl"></i>
                </div>
            </div>
        </div>

        {{-- DELIVERED --}}
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm
                    border border-gray-200 dark:border-slate-700
                    hover:shadow-lg transition">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Delivered</p>
                    <h2 class="text-3xl font-bold text-green-600">
                        {{ $stats['delivered'] ?? 0 }}
                    </h2>
                </div>
                <div class="w-12 h-12 rounded-xl bg-green-100
                            flex items-center justify-center">
                    <i class="bi bi-check-circle text-green-600 text-xl"></i>
                </div>
            </div>
        </div>

        {{-- TODAY --}}
        <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm
                    border border-gray-200 dark:border-slate-700
                    hover:shadow-lg transition">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Today</p>
                    <h2 class="text-3xl font-bold text-blue-600">
                        {{ $stats['today'] ?? 0 }}
                    </h2>
                </div>
                <div class="w-12 h-12 rounded-xl bg-blue-100
                            flex items-center justify-center">
                    <i class="bi bi-calendar-check text-blue-600 text-xl"></i>
                </div>
            </div>
        </div>

    </div>

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

        <div class="p-6 border-b dark:border-slate-700 flex justify-between items-center">
            <h3 class="font-semibold text-lg text-gray-800 dark:text-white">
                Recent Assigned Orders
            </h3>
            <a href="{{ route('driver.orders') }}"
               class="text-primary text-sm font-medium hover:underline">
                View all
            </a>
        </div>

        <div class="overflow-x-auto">
            <table class="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-3 text-left">Order</th>
                        <th>Status</th>
                        <th>Customer</th>
                        <th class="text-right px-6">Action</th>
                    </tr>
                </thead>

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

                @forelse($recentOrders as $order)
                    <tr class="hover:bg-gray-50 dark:hover:bg-slate-800 transition">
                        <td class="px-6 py-4 font-medium">
                            #{{ $order->id }}
                        </td>

                        <td>
                            <span class="px-3 py-1 rounded-full text-xs font-semibold
                                {{ $order->status === 'pending'
                                    ? 'bg-yellow-100 text-yellow-700'
                                    : ($order->status === 'picked'
                                        ? 'bg-blue-100 text-blue-700'
                                        : 'bg-green-100 text-green-700') }}">
                                {{ ucfirst($order->status) }}
                            </span>
                        </td>

                        <td class="text-gray-600 dark:text-gray-400">
                            {{ $order->customer_name ?? '—' }}
                        </td>

                        <td class="text-right px-6">
                            <a href="{{ route('driver.orders.show', $order->id) }}"
                               class="inline-flex items-center gap-1
                                      text-primary font-semibold
                                      hover:underline">
                                View
                                <i class="bi bi-arrow-right-short"></i>
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="text-center py-8 text-gray-500">
                            No assigned orders
                        </td>
                    </tr>
                @endforelse

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

    </div>

</div>

@endsection