@extends('layouts.courier')
@section('title', 'Pickup Barang — Permintaan Masuk')

@section('content')
<div class="py-2">

    <div class="mb-5">
        <h1 class="text-xl font-bold text-gray-800">Pickup Barang</h1>
        <p class="text-sm text-gray-500 mt-0.5">
            {{ $pickupRequested->total() }} permintaan menunggu dijemput
        </p>
    </div>

    <form method="GET" class="mb-4">
        <input type="text" name="search" value="{{ $search ?? '' }}" placeholder="Cari kode tiket atau nama pelanggan"
               class="w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent">
    </form>

    @if(session('success'))
    <div class="mb-4 flex items-start gap-2 rounded-xl bg-green-50 border border-green-200 px-4 py-3 text-sm text-green-700">
        <svg class="w-4 h-4 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
        </svg>
        {{ session('success') }}
    </div>
    @endif

    @if(session('error'))
    <div class="mb-4 flex items-start gap-2 rounded-xl bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
        <svg class="w-4 h-4 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        {{ session('error') }}
    </div>
    @endif

    {{-- Pickup Requested --}}
    @if($pickupRequested->isEmpty())
    <div class="rounded-2xl bg-white border border-gray-200 shadow-sm p-12 text-center">
        <svg class="w-14 h-14 mx-auto mb-3 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
        </svg>
        <p class="text-gray-500 font-medium">Tidak ada permintaan pickup saat ini.</p>
        <p class="text-gray-400 text-sm mt-1">Semua permintaan sudah diproses.</p>
    </div>
    @else
    <div class="space-y-3">
        @foreach($pickupRequested as $ticket)
        <div class="rounded-2xl bg-white border border-purple-200 shadow-sm overflow-hidden">
            <div class="h-1 bg-purple-500"></div>
            <div class="p-4">
                <div class="flex items-start justify-between gap-3 mb-3">
                    <div class="min-w-0">
                        <p class="font-mono font-bold text-gray-800 text-base">{{ $ticket->ticket_code }}</p>
                        <p class="text-sm font-semibold text-gray-700 mt-0.5">{{ $ticket->customer->name }}</p>
                        @if($ticket->customer->whatsapp)
                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $ticket->customer->whatsapp) }}" target="_blank"
                           class="inline-flex items-center gap-1 text-xs text-green-600 mt-0.5">
                            <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
                                <path d="M12 0C5.373 0 0 5.373 0 12c0 2.127.558 4.122 1.532 5.854L0 24l6.335-1.51A11.934 11.934 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818a9.793 9.793 0 01-5.028-1.384l-.36-.214-3.733.89.923-3.64-.234-.374A9.787 9.787 0 012.182 12c0-5.418 4.4-9.818 9.818-9.818 5.418 0 9.818 4.4 9.818 9.818 0 5.418-4.4 9.818-9.818 9.818z"/>
                            </svg>
                            {{ $ticket->customer->whatsapp }}
                        </a>
                        @endif
                    </div>
                    <span class="flex-shrink-0 inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-purple-50 text-purple-700 border border-purple-200">
                        Perlu Dijemput
                    </span>
                </div>

                @if($ticket->customer->address)
                <div class="flex items-start gap-2 mb-2 text-sm text-gray-600">
                    <svg class="w-4 h-4 flex-shrink-0 mt-0.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                    <span>{{ $ticket->customer->address }}</span>
                </div>
                @endif

                @if($ticket->pickup_note)
                <div class="bg-purple-50 rounded-xl px-3 py-2 mb-3 text-sm text-purple-700">
                    <span class="font-medium">Catatan:</span> {{ $ticket->pickup_note }}
                </div>
                @endif

                <div class="flex items-center justify-between gap-2 pt-1">
                    <span class="text-xs text-gray-400">{{ $ticket->created_at->diffForHumans() }}</span>
                    <a href="{{ route('courier.pickup.fill', $ticket->id) }}"
                       class="inline-flex items-center gap-1.5 bg-purple-600 hover:bg-purple-700 text-white text-sm font-semibold rounded-xl px-4 py-2.5 transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                        </svg>
                        Ambil & Isi Data
                    </a>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="mt-4">
        {{ $pickupRequested->links() }}
    </div>
    @endif

</div>
@endsection

