@extends('layouts.app')
@section('title', 'Daftar Pesanan')
@section('content')

<div class="max-w-5xl mx-auto p-4 md:p-10" style="font-family: 'Plus Jakarta Sans', sans-serif;">
    {{-- Header Section --}}
    <div class="flex items-center justify-between mb-10">
        <div>
            <h1 class="text-4xl font-black text-slate-900 italic tracking-tighter">
                {{ Auth::user()->role == 'courier' ? 'Delivery Task' : 'My Orders' }}
            </h1>
            <p class="text-[10px] font-black text-pink-500 uppercase tracking-[0.3em] mt-1 ml-1">
                {{ Auth::user()->role == 'courier' ? 'Kelola Pengiriman Vogue3D' : 'Lacak semua belanjaanmu' }}
            </p>
        </div>
        <div class="w-16 h-16 bg-white rounded-[24px] shadow-sm border border-pink-50 flex items-center justify-center text-slate-800">
            <i data-lucide="{{ Auth::user()->role == 'courier' ? 'truck' : 'package' }}" class="w-8 h-8"></i>
        </div>
    </div>

    {{-- Tabs (Hanya muncul jika User, Kurir biasanya melihat semua tugas aktif) --}}
    @if(Auth::user()->role != 'courier')
    <div class="flex gap-2 overflow-x-auto pb-6 no-scrollbar">
        @php 
            $currentStatus = request('status', 'all');
            $tabs = [
                ['id' => 'all',        'label' => 'Semua',        'icon' => 'layers'],
                ['id' => 'pending',    'label' => 'Belum Bayar',   'icon' => 'credit-card'],
                ['id' => 'paid',       'label' => 'Sudah Dibayar', 'icon' => 'circle-check-big'],
                ['id' => 'processing', 'label' => 'Diproses',      'icon' => 'box'],
                ['id' => 'shipping',   'label' => 'Dikirim',       'icon' => 'truck'],
                ['id' => 'completed',  'label' => 'Selesai',       'icon' => 'check-circle'],
            ];
        @endphp

        @foreach($tabs as $tab)
        <a href="?status={{ $tab['id'] }}" 
        class="flex items-center gap-3 px-6 py-3.5 rounded-2xl font-black text-[11px] uppercase tracking-widest transition-all duration-300 whitespace-nowrap
        {{ $currentStatus == $tab['id'] 
            ? 'bg-slate-900 text-white shadow-xl shadow-slate-200 -translate-y-1' 
            : 'bg-white text-slate-400 hover:text-pink-500 border border-transparent hover:border-pink-100' }}">
            <i data-lucide="{{ $tab['icon'] }}" class="w-4 h-4"></i>
            {{ $tab['label'] }}
        </a>
        @endforeach
    </div>
    @endif

    {{-- Orders List --}}
    <div class="space-y-8">
        @forelse($orders as $order)
        <div class="bg-white rounded-[40px] border border-pink-50/50 shadow-sm hover:shadow-2xl hover:shadow-pink-100/30 transition-all duration-500 group overflow-hidden">
            
            <div class="px-8 py-5 border-b border-slate-50 flex flex-wrap items-center justify-between gap-4 bg-slate-50/30">
                <div class="flex items-center gap-4">
                    <span class="text-[10px] font-black bg-white px-4 py-1.5 rounded-full border border-slate-100 text-slate-500 shadow-sm tracking-tighter italic">
                        #{{ $order->order_number }}
                    </span>
                    <span class="text-[11px] font-bold text-slate-400">{{ $order->created_at->format('d M, H:i') }}</span>
                </div>
                
                @php
                    $statusConfig = match($order->status) {
                        'pending'    => ['color' => 'text-rose-600 bg-rose-50 border-rose-100',          'label' => 'Belum Bayar',   'dot' => 'bg-rose-500 animate-pulse'],
                        'paid'       => ['color' => 'text-green-600 bg-green-50 border-green-100',       'label' => 'Sudah Dibayar', 'dot' => 'bg-green-500'],
                        'processing' => ['color' => 'text-blue-500 bg-blue-50 border-blue-100',          'label' => 'Diproses',      'dot' => 'bg-blue-500'],
                        'shipping'   => ['color' => 'text-pink-500 bg-pink-50 border-pink-100',          'label' => 'Dikirim',       'dot' => 'bg-pink-500 animate-bounce'],
                        'completed'  => ['color' => 'text-emerald-500 bg-emerald-50 border-emerald-100', 'label' => 'Selesai',       'dot' => 'bg-emerald-500'],
                        default      => ['color' => 'text-slate-500 bg-slate-50 border-slate-100',       'label' => $order->status,  'dot' => 'bg-slate-400']
                    };
                @endphp

                <div class="flex items-center gap-2">
                    <div class="w-2 h-2 rounded-full {{ $statusConfig['dot'] }}"></div>
                    <span class="px-5 py-1.5 rounded-full border {{ $statusConfig['color'] }} text-[10px] font-black uppercase tracking-widest italic">
                        {{ $statusConfig['label'] }}
                    </span>
                </div>
            </div>

            {{-- Info Customer (Muncul untuk Kurir) --}}
            @if(Auth::user()->role == 'courier')
            <div class="px-8 pt-6 flex flex-wrap gap-6 border-b border-dashed border-pink-100 pb-6">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-pink-50 rounded-full flex items-center justify-center text-pink-500">
                        <i data-lucide="user" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Penerima</p>
                        <p class="text-sm font-bold text-slate-800">{{ $order->receiver_name ?? $order->user->name }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-blue-50 rounded-full flex items-center justify-center text-blue-500">
                        <i data-lucide="map-pin" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Alamat</p>
                        <p class="text-xs font-bold text-slate-800 leading-tight max-w-xs">{{ $order->full_address }}</p>
                    </div>
                </div>
            </div>
            @endif

            <div class="p-8 space-y-6">
                @foreach($order->items as $item)
                <div class="flex gap-6 items-center">
                    <div class="relative">
                        <img src="{{ asset('storage/' . $item->product->image) }}" 
                            class="w-20 h-20 rounded-[24px] object-cover shadow-lg group-hover:rotate-2 transition-all duration-500">
                        <div class="absolute -bottom-2 -right-2 bg-slate-900 text-white text-[10px] font-black w-7 h-7 flex items-center justify-center rounded-full border-4 border-white">
                            {{ $item->quantity }}
                        </div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="text-lg font-black text-slate-800 leading-tight truncate group-hover:text-pink-500 transition-colors">
                            {{ $item->product->name }}
                        </h4>
                        <p class="text-[10px] text-slate-400 font-bold mt-1 uppercase tracking-[0.1em]">
                            {{ $item->product->category->name ?? 'ATK' }}
                        </p>
                    </div>
                </div>
                @endforeach
            </div>

            {{-- Footer Card --}}
            <div class="px-8 py-8 {{ $order->status == 'completed' ? 'bg-emerald-950' : ($order->status == 'shipping' ? 'bg-pink-900' : ($order->status == 'paid' ? 'bg-green-900' : ($order->status == 'pending' ? 'bg-rose-950' : 'bg-slate-900'))) }} flex flex-col md:flex-row items-center justify-between gap-6 transition-colors duration-500">
                <div class="flex items-center gap-8 text-white">
                    <div>
                        <p class="text-[9px] font-black text-pink-400 uppercase tracking-[0.3em] mb-1">Total Tagihan</p>
                        <p class="text-2xl font-black italic tracking-tighter">Rp {{ number_format($order->total_price, 0, ',', '.') }}</p>
                    </div>
                    <div class="h-10 w-[1px] bg-white/10 hidden md:block"></div>
                    <div class="hidden md:block text-white/80">
                        <p class="text-[9px] font-black text-slate-400 uppercase tracking-[0.3em] mb-1 italic">Kurir Pengirim</p>
                        <p class="text-xs font-bold uppercase flex items-center gap-2">
                            {{ $order->courier->name ?? 'Mencari Kurir...' }}
                        </p>
                    </div>
                </div>

                <div class="flex gap-3 w-full md:w-auto">
                    {{-- Tombol untuk User --}}
                    @if(Auth::user()->role == 'user' && $order->status == 'pending' && $order->payment_method == 'midtrans')
                        <button onclick="payOrder('{{ $order->snap_token }}')" 
                                class="flex-1 md:flex-none bg-rose-500 hover:bg-rose-600 text-white px-8 py-4 rounded-2xl font-black text-xs uppercase tracking-[0.2em] transition-all active:scale-95 shadow-xl shadow-rose-500/30">
                            Bayar Sekarang
                        </button>
                    @endif

                    <a href="{{ route('user.orders.show', $order) }}" 
                    class="flex-1 md:flex-none bg-white/10 hover:bg-white/20 text-white border border-white/10 px-8 py-4 rounded-2xl font-black text-xs uppercase tracking-[0.2em] transition-all text-center">
                        {{ Auth::user()->role == 'courier' ? 'Kelola Pesanan' : 'Detail Pesanan' }}
                    </a>
                </div>
            </div>
        </div>
        @empty
        <div class="text-center py-24 bg-white rounded-[50px] border-2 border-dashed border-pink-100 shadow-inner">
            <div class="w-24 h-24 bg-pink-50 text-pink-500 rounded-full flex items-center justify-center mx-auto mb-6">
                <i data-lucide="shopping-cart" class="w-10 h-10"></i>
            </div>
            <h3 class="text-2xl font-black text-slate-900 italic">Belum ada tugas pesanan!</h3>
        </div>
        @endforelse
    </div>
</div>

<style>
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>

<script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="{{ env('MIDTRANS_CLIENT_KEY') }}"></script>
<script>
    lucide.createIcons();
    function payOrder(token) {
        window.snap.pay(token, {
            onSuccess: function(result) { window.location.reload(); },
            onPending: function(result) { window.location.reload(); },
            onClose: function() { alert('Jangan lupa selesaikan pembayarannya ya!'); }
        });
    }
</script>
@endsection