@extends('layouts.franchise', ['heading' => 'Pickups / पिकअप'])

@section('content')
    @if(session('status'))
        <div class="mb-4 rounded bg-emerald-100 p-3 text-emerald-800">{{ session('status') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-4 rounded bg-rose-100 p-3 text-rose-800">
            <ul class="list-disc pl-5 text-sm">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="mb-4 flex flex-wrap gap-2">
        <a href="{{ route('franchise.pickups', ['tab' => 'pending']) }}" class="rounded-full px-4 py-2 text-sm {{ $tab === 'pending' ? 'bg-slate-900 text-white' : 'bg-white text-slate-700 shadow' }}">Pending Pickup</a>
        <a href="{{ route('franchise.pickups', ['tab' => 'ready']) }}" class="rounded-full px-4 py-2 text-sm {{ $tab === 'ready' ? 'bg-slate-900 text-white' : 'bg-white text-slate-700 shadow' }}">Ready</a>
        <a href="{{ route('franchise.pickups', ['tab' => 'collected']) }}" class="rounded-full px-4 py-2 text-sm {{ $tab === 'collected' ? 'bg-slate-900 text-white' : 'bg-white text-slate-700 shadow' }}">Collected</a>
    </div>

    <div class="grid grid-cols-1 gap-3">
        @forelse($orders as $order)
            <div class="rounded-2xl bg-white p-4 shadow">
                <div class="flex items-center justify-between">
                    <div class="font-semibold">{{ $order->order_number }}</div>
                    <div class="text-xs text-slate-500">{{ $order->status }}</div>
                </div>
                <div class="mt-1 text-sm text-slate-600">Amount: ₹ {{ number_format((float) $order->total, 2) }}</div>
                <div class="text-xs text-slate-500">Member: {{ $order->user?->member_code ?? 'N/A' }}</div>

                @if($tab !== 'collected')
                    <form method="POST" action="{{ route('franchise.pickups.verify', $order) }}" class="mt-3 flex gap-2">
                        @csrf
                        <input name="otp" placeholder="Pickup OTP" class="flex-1 rounded border p-2 text-sm" required>
                        <button class="rounded bg-emerald-600 px-3 py-2 text-sm text-white">Verify</button>
                    </form>
                @endif
            </div>
        @empty
            <div class="rounded-2xl bg-white p-4 text-center text-slate-500">No pickup orders found.</div>
        @endforelse
    </div>

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