@extends('layouts.kurir_sidebar') {{-- Ini memanggil kerangka utama tadi --}}

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

@section('content')
<div class="space-y-5 lg:space-y-8 pb-12 lg:pb-10 pt-2 lg:pt-0">
    {{-- Header Selamat Datang - Enhanced with modern design --}}
    <div class="relative overflow-hidden bg-gradient-to-br from-gas3kg via-green-600 to-green-800 rounded-[1.5rem] lg:rounded-[2rem] p-5 lg:p-10 text-white shadow-xl mx-0">
        {{-- Decorative background elements --}}
        <div class="absolute top-0 right-0 -mr-8 -mt-8 w-48 h-48 rounded-full bg-white opacity-10 blur-2xl"></div>
        <div class="absolute bottom-0 right-20 w-32 h-32 rounded-full bg-gas12kg opacity-20 blur-xl"></div>
        <div class="absolute top-1/2 left-0 -ml-10 w-40 h-40 rounded-full bg-white opacity-5 blur-2xl"></div>
        
        <div class="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 lg:gap-6">
            <div class="w-full">
                <span class="inline-block px-3 py-1 bg-white/20 backdrop-blur-md rounded-full text-[10px] sm:text-xs font-semibold tracking-wider uppercase mb-2 lg:mb-3 text-green-50 shadow-sm border border-white/10">Dashboard Kurir</span>
                <h1 class="text-2xl lg:text-4xl font-extrabold mb-1.5 lg:mb-2 tracking-tight">Selamat Datang, {{ Auth::user()->name ?? 'Kurir' }}!</h1>
                <p class="text-green-50/90 text-xs lg:text-base max-w-xl font-medium leading-relaxed">Pantau tugas baru, catat transaksi, dan cek persediaan stok secara berkala.</p>
            </div>
            <div class="bg-white/10 backdrop-blur-md border border-white/20 px-4 py-3 lg:p-4 rounded-xl lg:rounded-2xl shadow-inner flex md:block items-center justify-between w-full md:w-auto md:text-center md:min-w-[140px]">
                <p class="text-[10px] lg:text-xs text-green-100 font-medium uppercase tracking-wider m-0 md:mb-1">Hari Ini</p>
                <p class="text-sm lg:text-lg font-bold text-white m-0">{{ \Carbon\Carbon::now()->translatedFormat('d M Y') }}</p>
            </div>
        </div>
    </div>

    {{-- Ringkasan Statistik --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
        {{-- Pesanan Baru (Tugas) --}}
        <div class="relative group">
            <div class="absolute inset-0 bg-green-500 rounded-3xl blur-xl opacity-20 group-hover:opacity-40 transition-opacity duration-300 {{ $tugasAktifCount > 0 ? 'animate-pulse' : 'hidden' }}"></div>
            <a href="{{ route('kurir.tugas') }}" class="relative block bg-white p-5 lg:p-6 flex items-center rounded-2xl lg:rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden h-full">
                <div class="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-green-50 to-green-100/50 rounded-bl-full -z-10 transition-transform group-hover:scale-110"></div>
                <div class="flex items-center gap-5 w-full">
                    <div class="{{ $tugasAktifCount > 0 ? 'bg-gradient-to-br from-green-500 to-green-600 shadow-lg shadow-green-500/30' : 'bg-gradient-to-br from-slate-100 to-slate-200' }} w-14 h-14 rounded-2xl flex items-center justify-center text-white transition-colors duration-300 shrink-0">
                        <i data-lucide="truck" class="w-7 h-7 {{ $tugasAktifCount > 0 ? 'text-white' : 'text-slate-400' }}"></i>
                    </div>
                    <div>
                        <p class="text-xs sm:text-sm font-semibold text-slate-500 mb-0.5">Tugas Baru</p>
                        <h3 class="text-xl sm:text-2xl font-extrabold {{ $tugasAktifCount > 0 ? 'text-green-600' : 'text-slate-800' }} tracking-tight">
                            {{ $tugasAktifCount ?? 0 }} <span class="text-xs sm:text-sm font-semibold {{ $tugasAktifCount > 0 ? 'text-green-600/80' : 'text-slate-500' }}">Pesanan</span>
                        </h3>
                    </div>
                </div>
            </a>
        </div>

        {{-- Transaksi Hari Ini --}}
        <div class="bg-white p-5 lg:p-6 rounded-2xl lg:rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group flex items-center">
            <div class="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-pink-50 to-pink-100/50 rounded-bl-full -z-10 transition-transform group-hover:scale-110"></div>
            <div class="flex items-center gap-5 w-full">
                <div class="bg-gradient-to-br from-pink-400 to-rose-500 w-14 h-14 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-pink-500/30 shrink-0">
                    <i data-lucide="shopping-bag" class="w-7 h-7"></i>
                </div>
                <div>
                    <p class="text-xs sm:text-sm font-semibold text-slate-500 mb-0.5">Transaksi Hari Ini</p>
                    <h3 class="text-xl sm:text-2xl font-extrabold text-slate-800 tracking-tight">
                        {{ $transaksiHariIni ?? 0 }} <span class="text-xs sm:text-sm font-semibold text-slate-500">Trans</span>
                    </h3>
                </div>
            </div>
        </div>

        {{-- Total Transaksi (Nominal) --}}
        <div class="bg-white p-5 lg:p-6 rounded-2xl lg:rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group flex items-center sm:col-span-2 lg:col-span-1">
            <div class="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-purple-50 to-purple-100/50 rounded-bl-full -z-10 transition-transform group-hover:scale-110"></div>
            <div class="flex items-center gap-5 w-full">
                <div class="bg-gradient-to-br from-purple-500 to-indigo-600 w-14 h-14 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-purple-500/30 shrink-0">
                    <i data-lucide="wallet" class="w-7 h-7"></i>
                </div>
                <div>
                    <p class="text-xs sm:text-sm font-semibold text-slate-500 mb-0.5">Total Penjualan Hari Ini (Tunai)</p>
                    <h3 class="text-xl sm:text-2xl font-extrabold text-slate-800 tracking-tight">
                        <span class="text-sm sm:text-lg font-bold">Rp</span> {{ number_format($totalPenjualanHariIni ?? 0, 0, ',', '.') }}
                    </h3>
                </div>
            </div>
        </div>
    </div>

    {{-- Aksi Cepat / Menu Pintas --}}
    <div class="pb-4">
        <a href="{{ route('kurir.laporan') }}" class="group bg-white p-5 lg:p-8 rounded-2xl lg:rounded-[2rem] border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden flex items-center justify-between">
            {{-- Decorative elements behind --}}
            <div class="absolute right-0 top-0 w-64 h-64 bg-gradient-to-bl from-rose-50 to-transparent rounded-bl-[100%] opacity-70 transition-transform group-hover:scale-110 duration-700"></div>
            <div class="absolute -right-6 -bottom-6 w-32 h-32 bg-gradient-to-tl from-rose-100 to-transparent rounded-tl-[100%] opacity-50"></div>
            
            <div class="flex items-center gap-4 lg:gap-8 relative z-10 w-full">
                {{-- Icon Block --}}
                <div class="w-14 h-14 lg:w-20 lg:h-20 shrink-0 rounded-2xl lg:rounded-3xl bg-gradient-to-br from-rose-400 to-red-500 text-white flex items-center justify-center shadow-lg shadow-rose-500/30 group-hover:shadow-rose-500/50 transition-all duration-300">
                    <i data-lucide="file-bar-chart" class="w-7 h-7 lg:w-9 lg:h-9"></i>
                </div>
                
                {{-- Text Block --}}
                <div class="flex-1 w-full block">
                     <p class="text-[10px] lg:text-xs font-bold text-rose-500/90 mb-1 lg:mb-1.5 uppercase tracking-widest flex items-center gap-1.5">
                         <i data-lucide="zap" class="w-3.5 h-3.5 fill-rose-500/90"></i> Aksi Cepat
                     </p>
                     <h3 class="font-extrabold text-slate-800 text-base lg:text-2xl group-hover:text-rose-600 transition-colors tracking-tight">Laporan Penjualan Harian</h3>
                     <p class="text-[11px] lg:text-sm text-slate-500 font-medium leading-relaxed mt-0.5 lg:mt-1.5 max-w-3xl">Pusat rekapitulasi data. Lihat kembali progres harian, riwayat setoran, serta performa target penjualan Anda secara rinci di sini.</p>
                </div>
                
                {{-- Desktop Arrow --}}
                <div class="hidden md:flex shrink-0 w-12 h-12 rounded-full bg-slate-50 items-center justify-center group-hover:bg-rose-50 border border-slate-100 transition-colors">
                    <i data-lucide="arrow-right" class="w-5 h-5 text-slate-400 group-hover:text-rose-500 transition-transform duration-300 group-hover:translate-x-1"></i>
                </div>
            </div>
            
            {{-- Mobile Chevron --}}
            <i data-lucide="chevron-right" class="w-5 h-5 md:hidden text-slate-400 group-hover:text-rose-500 shrink-0 relative z-10 ml-2"></i>
        </a>
    </div>
</div>

{{-- SweetAlert2 Script --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    // Inisialisasi Lucide Icons
    document.addEventListener('DOMContentLoaded', function() {
        lucide.createIcons();
    });
    // Konfirmasi Logout dengan SweetAlert2 (jika ada tombol logout)
    function confirmLogout() {
        Swal.fire({
            title: 'Yakin ingin keluar?',
            text: "Anda akan keluar dari sistem",
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Ya, Keluar',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                // Submit form logout secara POST dengan CSRF Token
                const form = document.createElement('form');
                form.action = '{{ route("logout") }}';
                form.method = 'POST';
                
                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = '_token';
                csrfInput.value = '{{ csrf_token() }}';
                
                form.appendChild(csrfInput);
                document.body.appendChild(form);
                form.submit();
            }
        });
    }



</script>

<style>
    /* Transition untuk semua link */
    a {
        transition: all 0.2s ease;
    }
</style>
@endsection