@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-slate-50" style="font-family: 'Plus Jakarta Sans', sans-serif;">
<div class="max-w-4xl mx-auto px-4 py-10">

    {{-- Header --}}
    <div class="flex items-center justify-between mb-10">
        <div>
            <h1 class="text-4xl font-black text-slate-900 italic tracking-tighter">Courier Dashboard 🚚</h1>
            <p class="text-[10px] font-black text-pink-500 uppercase tracking-[0.3em] mt-1">
                Hai, {{ Auth::user()->name }}! Semangat antar hari ini.
            </p>
        </div>
        <div class="w-16 h-16 bg-white rounded-[24px] shadow-sm border border-pink-50 flex items-center justify-center text-2xl">
            🚴
        </div>
    </div>

    {{-- Notifikasi --}}
    @if(session('success'))
    <div class="bg-emerald-50 border border-emerald-200 text-emerald-700 px-6 py-4 rounded-[24px] mb-8 font-bold text-sm flex items-center gap-3 shadow-sm">
        <span class="text-xl">✅</span> {{ session('success') }}
    </div>
    @endif

    {{-- Order List --}}
    <div class="space-y-6">
        @forelse($orders as $order)
        <div class="bg-white rounded-[40px] border border-pink-50 shadow-sm overflow-hidden hover:shadow-lg hover:shadow-pink-100/30 transition-all duration-300">

            {{-- Card Header --}}
            <div class="px-8 py-5 bg-slate-50/50 border-b border-slate-100 flex flex-wrap items-center justify-between gap-3">
                <div class="flex items-center gap-3">
                    <span class="text-[10px] font-black bg-white px-4 py-1.5 rounded-full border border-slate-100 text-slate-500 shadow-sm italic">
                        #{{ $order->order_number }}
                    </span>
                    <span class="text-[11px] font-bold text-slate-400">
                        {{ $order->created_at->format('d M Y, H:i') }}
                    </span>
                </div>

                @php
                $badge = match($order->status) {
                    'packaging'  => ['bg-amber-100 text-amber-600',      '📦 Siap Diambil'],
                    'picking_up' => ['bg-blue-100 text-blue-600',        '🏪 Menuju Toko'],
                    'shipping'   => ['bg-pink-100 text-pink-600',        '🚚 Dalam Pengiriman'],
                    'completed'  => ['bg-emerald-100 text-emerald-600',  '✅ Terkirim'],
                    default      => ['bg-slate-100 text-slate-500',      $order->status],
                };
                @endphp

                <span class="px-5 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest {{ $badge[0] }}">
                    {{ $badge[1] }}
                </span>
            </div>

            {{-- Info Penerima --}}
            <div class="px-8 py-6 border-b border-dashed border-slate-100 flex flex-wrap gap-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 text-lg">👤</div>
                    <div>
                        <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Pembeli</p>
                        <p class="text-sm font-bold text-slate-800">{{ $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 text-lg">📍</div>
                    <div>
                        <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Alamat Pengiriman</p>
                        <p class="text-xs font-bold text-slate-700 max-w-xs leading-snug">{{ $order->full_address }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-purple-50 rounded-full flex items-center justify-center text-purple-500 text-lg">📞</div>
                    <div>
                        <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">No. HP</p>
                        <p class="text-sm font-bold text-slate-800">{{ $order->phone ?? '-' }}</p>
                    </div>
                </div>
            </div>

            {{-- Aksi Kurir --}}
            <div class="px-8 py-6">

                {{-- TAHAP 1: Ambil ke toko --}}
                @if($order->status == 'packaging')
                <div class="bg-amber-50 border border-amber-100 rounded-[24px] p-5 flex flex-col md:flex-row items-center justify-between gap-4">
                    <div>
                        <p class="font-black text-slate-800">📦 Pesanan siap diambil dari toko!</p>
                        <p class="text-xs text-slate-400 mt-1">Klik tombol ini untuk menuju toko dan ambil paket.</p>
                    </div>
                    <form action="{{ route('courier.orders.pickup', $order->id) }}" method="POST">
                        @csrf
                        <button type="submit"
                            class="bg-amber-400 hover:bg-amber-500 text-white px-8 py-4 rounded-2xl font-black text-xs uppercase tracking-widest transition shadow-lg shadow-amber-100 whitespace-nowrap">
                            🏪 Ambil ke Toko
                        </button>
                    </form>
                </div>

                {{-- TAHAP 2: Mulai antar --}}
                @elseif($order->status == 'picking_up')
                <div class="bg-blue-50 border border-blue-100 rounded-[24px] p-5 flex flex-col md:flex-row items-center justify-between gap-4">
                    <div>
                        <p class="font-black text-slate-800">🏪 Sudah sampai di toko?</p>
                        <p class="text-xs text-slate-400 mt-1">Ambil paket lalu klik tombol untuk mulai antar ke user.</p>
                    </div>
                    <form action="{{ route('courier.orders.start', $order->id) }}" method="POST">
                        @csrf
                        <button type="submit"
                            class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-4 rounded-2xl font-black text-xs uppercase tracking-widest transition shadow-lg shadow-blue-100 whitespace-nowrap">
                            🚚 Mulai Antar
                        </button>
                    </form>
                </div>

                {{-- TAHAP 3: Upload bukti --}}
                @elseif($order->status == 'shipping')
                <div class="bg-pink-50/60 border border-pink-100 rounded-[32px] p-6 space-y-5">
                    <div>
                        <p class="font-black text-slate-800 text-base">📸 Konfirmasi Pengiriman</p>
                        <p class="text-xs text-slate-400 mt-1">Isi nama penerima dan upload foto bukti setelah barang diterima.</p>
                    </div>

                    {{-- Tampilkan error validasi --}}
                    @if($errors->any())
                    <div class="bg-red-50 border border-red-200 rounded-2xl p-4 space-y-1">
                        @foreach($errors->all() as $error)
                            <p class="text-xs text-red-600 font-bold">• {{ $error }}</p>
                        @endforeach
                    </div>
                    @endif

                    <form action="{{ route('courier.orders.complete', $order->id) }}"
                          method="POST"
                          enctype="multipart/form-data"
                          class="space-y-4">
                        @csrf

                        {{-- Nama Penerima --}}
                        <div>
                            <label class="text-[10px] font-black text-pink-400 uppercase tracking-widest ml-1 mb-1 block">
                                Nama Penerima *
                            </label>
                            <input type="text"
                                   name="receiver_name"
                                   required
                                   value="{{ old('receiver_name') }}"
                                   class="w-full px-4 py-3 bg-white rounded-2xl border-2 border-pink-100 focus:border-pink-400 outline-none text-sm font-medium shadow-sm transition placeholder:text-slate-300"
                                   placeholder="Siapa yang menerima paket?">
                        </div>

                        {{-- Upload Foto --}}
                        <div>
                            <label class="text-[10px] font-black text-pink-400 uppercase tracking-widest ml-1 mb-1 block">
                                Foto Bukti Pengiriman *
                            </label>

                            <label for="proof_{{ $order->id }}"
                                   class="flex flex-col items-center justify-center w-full h-44 border-2 border-dashed border-pink-200 rounded-2xl cursor-pointer bg-white hover:border-pink-400 hover:bg-pink-50/50 transition-all duration-200 relative overflow-hidden">

                                <img id="preview_{{ $order->id }}"
                                     src=""
                                     class="hidden absolute inset-0 w-full h-full object-cover rounded-2xl">

                                <div id="placeholder_{{ $order->id }}" class="flex flex-col items-center gap-2 text-slate-300">
                                    <span class="text-5xl">📷</span>
                                    <p class="text-xs font-black uppercase tracking-widest">Klik untuk upload foto</p>
                                    <p class="text-[10px]">JPG, PNG, JPEG — maks 2MB</p>
                                </div>

                                <input type="file"
                                       id="proof_{{ $order->id }}"
                                       name="proof_image"
                                       accept="image/jpeg,image/png,image/jpg"
                                       required
                                       class="hidden"
                                       onchange="previewImage(this, '{{ $order->id }}')">
                            </label>

                            <button type="button"
                                    id="change_{{ $order->id }}"
                                    onclick="document.getElementById('proof_{{ $order->id }}').click()"
                                    class="hidden mt-2 text-[10px] font-black text-pink-400 hover:text-pink-600 uppercase tracking-widest transition">
                                🔄 Ganti Foto
                            </button>
                        </div>

                        {{-- Submit --}}
                        <button type="submit"
                            class="w-full bg-emerald-500 hover:bg-emerald-600 active:scale-95 text-white py-4 rounded-2xl font-black text-xs uppercase tracking-widest transition-all shadow-lg shadow-emerald-100">
                            ✅ Selesaikan Pengiriman
                        </button>
                    </form>
                </div>

                {{-- TAHAP 4: Selesai --}}
                @elseif($order->status == 'completed')
                <div class="bg-emerald-50 border border-emerald-100 rounded-[24px] p-5 flex flex-col md:flex-row items-center justify-between gap-4">
                    <div class="flex items-center gap-4">
                        @if($order->proof_image)
                        <img src="{{ asset('storage/' . $order->proof_image) }}"
                             class="w-16 h-16 rounded-2xl object-cover shadow border border-emerald-100">
                        @endif
                        <div>
                            <p class="text-[9px] font-black text-emerald-500 uppercase tracking-widest">Diterima oleh</p>
                            <p class="font-black text-slate-800 text-base uppercase">{{ $order->actual_receiver ?? '-' }}</p>
                            <p class="text-[10px] text-slate-400 mt-0.5">
                                {{ $order->delivered_at ? \Carbon\Carbon::parse($order->delivered_at)->format('d M Y, H:i') : '-' }}
                            </p>
                        </div>
                    </div>
                    <span class="px-5 py-2 bg-emerald-500 text-white text-[10px] font-black uppercase tracking-widest rounded-full">
                        ✅ Terkirim
                    </span>
                </div>
                @endif

            </div>
        </div>
        @empty
        <div class="text-center py-28 bg-white rounded-[50px] border-2 border-dashed border-pink-100">
            <div class="text-6xl mb-4">☕</div>
            <p class="text-slate-400 text-xl font-black italic">Lagi santai? Belum ada pesanan masuk.</p>
        </div>
        @endforelse
    </div>

</div>
</div>

<script>
function previewImage(input, orderId) {
    const file = input.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
        const preview     = document.getElementById('preview_' + orderId);
        const placeholder = document.getElementById('placeholder_' + orderId);
        const changeBtn   = document.getElementById('change_' + orderId);

        preview.src = e.target.result;
        preview.classList.remove('hidden');
        placeholder.classList.add('hidden');
        changeBtn.classList.remove('hidden');
    };
    reader.readAsDataURL(file);
}
</script>
@endsection