<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                    {{ __('Loka Logistics') }} 
                    <span class="text-amber-600 dark:text-amber-400">/ Driver Portal</span>
                </h2>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Kelola pengiriman dan update status pesanan</p>
            </div>
            <div class="hidden md:block">
                <span class="text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 px-3 py-1.5 rounded-full font-semibold border border-amber-200 dark:border-amber-800/40">
                    <i class="fas fa-truck-fast mr-1"></i> Online
                </span>
            </div>
        </div>
    </x-slot>

    <div class="py-8 bg-gradient-to-b from-amber-50/40 to-white dark:from-gray-900 dark:to-gray-800 min-h-screen">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">

            {{-- 1. Welcome Card --}}
            <div class="relative overflow-hidden rounded-3xl shadow-xl" style="background: linear-gradient(135deg, #c2700a 0%, #92400e 60%, #78350f 100%);">
                <div class="relative z-10 p-8">
                    <div class="inline-flex items-center bg-white/15 backdrop-blur-sm px-3 py-1 rounded-full border border-white/25 mb-4">
                        <span class="flex h-2 w-2 rounded-full bg-emerald-400 mr-2 animate-pulse"></span>
                        <span class="text-[10px] font-bold text-white uppercase tracking-wider">Sistem Siap</span>
                    </div>
                    
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                        <div>
                            <h3 class="text-2xl md:text-3xl font-bold text-white tracking-tight">
                                Halo, {{ explode(' ', Auth::user()->name)[0] }}! 👋
                            </h3>
                            <p class="mt-2 text-amber-100/90 text-sm max-w-2xl">
                                Semangat untuk pengiriman hari ini! Pastikan semua paket sampai dengan aman ke tujuan.
                            </p>
                        </div>
                        <div class="hidden md:block shrink-0">
                            <div class="w-14 h-14 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm border border-white/20">
                                <i class="fas fa-truck-fast text-2xl text-white"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="absolute -right-10 -top-10 w-48 h-48 bg-white/10 rounded-full blur-3xl"></div>
                <div class="absolute -left-10 -bottom-10 w-48 h-48 bg-amber-300/10 rounded-full blur-3xl"></div>
            </div>

            {{-- Notifikasi Flash --}}
            @if(session('success'))
                <div class="bg-emerald-500 text-white p-4 rounded-2xl shadow-lg border-l-8 border-emerald-700 flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <i class="fas fa-check-circle text-xl"></i>
                        <span class="font-semibold">{{ session('success') }}</span>
                    </div>
                    <button onclick="this.parentElement.remove()" class="text-white/70 hover:text-white transition">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            @endif

            @if(session('error'))
                <div class="bg-rose-500 text-white p-4 rounded-2xl shadow-lg border-l-8 border-rose-700 flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <i class="fas fa-exclamation-triangle text-xl"></i>
                        <span class="font-semibold">{{ session('error') }}</span>
                    </div>
                    <button onclick="this.parentElement.remove()" class="text-white/70 hover:text-white transition">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            @endif

            {{-- 2. Stats Cards --}}
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-5">
                <div class="bg-white dark:bg-gray-800 p-5 rounded-2xl shadow-sm border border-amber-100 dark:border-gray-700 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200">
                    <div class="flex items-center justify-between mb-3">
                        <div class="w-10 h-10 bg-amber-100 dark:bg-amber-900/30 rounded-xl flex items-center justify-center">
                            <i class="fas fa-boxes text-amber-600 dark:text-amber-400"></i>
                        </div>
                        <span class="text-2xl font-bold text-gray-800 dark:text-white">{{ $active_tasks ?? 0 }}</span>
                    </div>
                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Paket Aktif</p>
                </div>

                <div class="bg-white dark:bg-gray-800 p-5 rounded-2xl shadow-sm border border-amber-100 dark:border-gray-700 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200">
                    <div class="flex items-center justify-between mb-3">
                        <div class="w-10 h-10 bg-emerald-100 dark:bg-emerald-900/30 rounded-xl flex items-center justify-center">
                            <i class="fas fa-check-double text-emerald-600 dark:text-emerald-400"></i>
                        </div>
                        <span class="text-2xl font-bold text-gray-800 dark:text-white">{{ $done_today ?? 0 }}</span>
                    </div>
                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Hari Ini</p>
                </div>

                <div class="p-5 rounded-2xl shadow-sm border border-orange-200/50 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200" style="background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);">
                    <div class="flex items-center justify-between mb-3">
                        <div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-md">
                            <i class="fas fa-route text-white"></i>
                        </div>
                        <span class="text-lg font-bold text-white">
                            Rp{{ number_format($total_shipping ?? 0, 0, ',', '.') }}
                        </span>
                    </div>
                    <p class="text-[10px] font-bold text-orange-100 uppercase tracking-widest">Nilai Ongkir</p>
                </div>

                <div class="p-5 rounded-2xl shadow-sm border border-amber-800/20 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200" style="background: linear-gradient(135deg, #d97706 0%, #92400e 100%);">
                    <div class="flex items-center justify-between mb-3">
                        <div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-md">
                            <i class="fas fa-wallet text-white"></i>
                        </div>
                        <span class="text-lg font-bold text-white">
                            Rp{{ number_format($total_earnings ?? 0, 0, ',', '.') }}
                        </span>
                    </div>
                    <p class="text-[10px] font-bold text-amber-100 uppercase tracking-widest">Estimasi Gaji</p>
                </div>
            </div>

            {{-- 3. Task List --}}
            <div class="space-y-4">
                <div class="flex items-center gap-3 px-1">
                    <div class="w-1 h-6 rounded-full" style="background: linear-gradient(180deg, #d97706 0%, #92400e 100%);"></div>
                    <h3 class="text-xs font-bold text-gray-800 dark:text-white uppercase tracking-wider">
                        <i class="fas fa-list-ul mr-2 text-amber-600"></i>
                        Antrean Pengiriman
                    </h3>
                    <span class="text-xs bg-amber-100 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 px-2.5 py-0.5 rounded-full font-semibold border border-amber-200 dark:border-amber-800/30">
                        {{ isset($my_tasks) ? $my_tasks->count() : 0 }} tugas
                    </span>
                </div>

                @forelse($my_tasks ?? [] as $task)
                    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-amber-100/80 dark:border-gray-700 overflow-hidden hover:shadow-md transition-all duration-200">
                        {{-- Card header strip --}}
                        <div class="h-1 w-full" style="background: linear-gradient(90deg, #d97706, #92400e);"></div>
                        <div class="p-6">
                            <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-4">
                                <div>
                                    <div class="flex items-center gap-2 flex-wrap mb-2">
                                        <span class="text-xs font-mono font-bold text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-3 py-1 rounded-full border border-amber-200/60 dark:border-amber-800/30">
                                            <i class="fas fa-hashtag text-[10px] mr-1"></i> {{ $task->order_number }}
                                        </span>
                                        @if($task->status == 'shipping' || $task->status == 'on_delivery')
                                            <span class="text-xs font-semibold bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400 px-3 py-1 rounded-full">
                                                <i class="fas fa-truck text-[10px] mr-1"></i> Sedang Dikirim
                                            </span>
                                        @endif
                                    </div>
                                    <h4 class="text-lg font-bold text-gray-800 dark:text-white">
                                        {{ $task->customer->name ?? 'Pelanggan' }}
                                    </h4>
                                </div>
                                <div class="text-left md:text-right shrink-0">
                                    <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">Status Saat Ini</p>
                                    @php
                                        $statusConfig = [
                                            'confirmed' => ['bg-amber-100 text-amber-700', 'fa-clock', 'Menunggu Pickup'],
                                            'shipping' => ['bg-orange-100 text-orange-700', 'fa-truck', 'Dalam Perjalanan'],
                                            'on_delivery' => ['bg-brown-100 text-orange-800 bg-orange-100', 'fa-road', 'Sedang Dikirim'],
                                            'completed' => ['bg-emerald-100 text-emerald-700', 'fa-check-circle', 'Selesai'],
                                        ];
                                        $config = $statusConfig[$task->status] ?? ['bg-gray-100 text-gray-700', 'fa-question', ucfirst($task->status)];
                                    @endphp
                                    <span class="inline-flex items-center gap-1 text-xs font-bold px-3 py-1.5 rounded-full {{ $config[0] }}">
                                        <i class="fas {{ $config[1] }} text-[10px]"></i>
                                        {{ $config[2] }}
                                    </span>
                                </div>
                            </div>

                            <div class="bg-amber-50/60 dark:bg-gray-900/50 p-4 rounded-xl mb-5 border border-amber-100 dark:border-gray-700">
                                <div class="flex items-start gap-3">
                                    <i class="fas fa-map-marker-alt text-amber-600 mt-0.5"></i>
                                    <div class="flex-1">
                                        <p class="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                                            {{ $task->shipping_address }}
                                        </p>

                                        @php
                                            $addressArray = explode('|', $task->shipping_address);
                                            $onlyAddress = count($addressArray) > 1 ? trim(end($addressArray)) : trim($task->shipping_address);
                                        @endphp

                                        <a href="https://www.google.com/maps/search/?api=1&query={{ urlencode($onlyAddress) }}" 
                                        target="_blank" 
                                        class="inline-flex items-center gap-1 text-[10px] font-semibold text-amber-700 dark:text-amber-400 hover:text-amber-900 hover:underline mt-2 transition">
                                            <i class="fas fa-external-link-alt"></i>
                                            Buka di Google Maps
                                        </a>
                                    </div>
                                </div>
                            </div>

                            @if($task->status == 'confirmed')
                                <form action="{{ route('orders.pickup', $task->id) }}" method="POST">
                                    @csrf
                                    <button type="submit" 
                                            class="w-full text-white font-semibold py-3 rounded-xl transition transform active:scale-95 shadow-md flex items-center justify-center gap-2 hover:opacity-90"
                                            style="background: linear-gradient(135deg, #d97706 0%, #92400e 100%);">
                                        <i class="fas fa-box-open"></i>
                                        Ambil Paket & Mulai Antar
                                    </button>
                                </form>

                            @elseif(in_array($task->status, ['shipping', 'on_delivery']))
                                <div class="border-2 border-dashed border-amber-200 dark:border-gray-700 rounded-2xl p-5">
                                    <h5 class="text-xs font-bold text-amber-700 dark:text-amber-400 mb-4 flex items-center gap-2">
                                        <span class="w-6 h-6 bg-amber-100 rounded-lg flex items-center justify-center">
                                            <i class="fas fa-camera text-amber-600 text-xs"></i>
                                        </span>
                                        Konfirmasi Penyelesaian
                                    </h5>
                                    
                                    <form action="{{ route('orders.deliver', $task->id) }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                                        @csrf
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <div>
                                                <label class="block text-[10px] font-bold text-gray-500 dark:text-gray-400 mb-2 uppercase tracking-wider">
                                                    <i class="fas fa-user mr-1 text-amber-600"></i> Nama Penerima
                                                </label>
                                                <input type="text" name="receiver_name" required 
                                                       placeholder="Contoh: Bpk. Jhon Doe"
                                                       class="w-full px-4 py-2.5 text-sm border border-amber-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent dark:bg-gray-700 bg-amber-50/30">
                                            </div>
                                            <div>
                                                <label class="block text-[10px] font-bold text-gray-500 dark:text-gray-400 mb-2 uppercase tracking-wider">
                                                    <i class="fas fa-image mr-1 text-amber-600"></i> Foto Bukti (Paket + Rumah)
                                                </label>
                                                <input type="file" name="proof_image" accept="image/*" required
                                                       class="block w-full text-xs text-gray-500 file:mr-3 file:py-2 file:px-4 file:rounded-xl file:text-xs file:font-semibold file:text-white hover:file:opacity-90 cursor-pointer border border-amber-200 dark:border-gray-700 rounded-xl p-1.5 dark:bg-gray-700 bg-amber-50/30"
                                                       style="--tw-file-bg: #d97706;">
                                            </div>
                                        </div>
                                        <button type="submit" 
                                                onclick="return confirm('Yakin paket sudah sampai di tujuan dengan aman?')"
                                                class="w-full bg-emerald-500 hover:bg-emerald-600 text-white font-semibold py-3 rounded-xl transition transform active:scale-95 shadow-md flex items-center justify-center gap-2">
                                            <i class="fas fa-check-circle"></i>
                                            Selesaikan Pengiriman
                                        </button>
                                    </form>
                                </div>

                            @elseif($task->status == 'completed')
                                <div class="text-emerald-700 dark:text-emerald-400 text-center py-4 rounded-2xl border border-emerald-200 dark:border-emerald-800/30 bg-emerald-50 dark:bg-emerald-900/20">
                                    <i class="fas fa-trophy mr-2 text-yellow-500"></i>
                                    <span class="text-xs font-bold uppercase tracking-wider">Tugas Berhasil Diselesaikan</span>
                                </div>
                            @else
                                <div class="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-center py-4 rounded-2xl">
                                    <i class="fas fa-hourglass-half mr-2"></i>
                                    <span class="text-xs font-bold uppercase tracking-wider">Status: {{ str_replace('_', ' ', $task->status) }}</span>
                                </div>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="bg-white dark:bg-gray-800 rounded-2xl p-12 text-center border-2 border-dashed border-amber-200 dark:border-gray-700">
                        <div class="w-20 h-20 bg-amber-50 dark:bg-gray-700 rounded-2xl flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-truck-fast text-3xl text-amber-300"></i>
                        </div>
                        <h4 class="text-lg font-semibold text-gray-600 dark:text-gray-400 mb-2">Tidak Ada Tugas</h4>
                        <p class="text-sm text-gray-500 dark:text-gray-500">Belum ada pengiriman yang ditugaskan untuk Anda</p>
                        <p class="text-xs text-gray-400 mt-2">Istirahat dulu atau hubungi admin</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</x-app-layout>