@extends('layouts.admin')

@section('title', 'Order Management - Orange Groceries Admin')
@section('header_title', 'Order Fulfillment & Management')

@section('content')
<div class="space-y-6">
    
    <!-- Status Tabs Bar -->
    <div class="flex flex-wrap items-center justify-between gap-4 bg-white p-4 rounded-3xl border border-slate-200/80 shadow-sm">
        <div class="flex flex-wrap gap-2 text-xs font-bold">
            <a href="{{ route('admin.orders.index') }}" class="px-4 py-2 rounded-xl transition {{ !request('status') ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">All Orders</a>
            <a href="{{ route('admin.orders.index', ['status' => 'pending']) }}" class="px-4 py-2 rounded-xl transition {{ request('status') == 'pending' ? 'bg-amber-500 text-slate-950' : 'bg-amber-50 text-amber-800 hover:bg-amber-100' }}">Pending</a>
            <a href="{{ route('admin.orders.index', ['status' => 'accepted']) }}" class="px-4 py-2 rounded-xl transition {{ request('status') == 'accepted' ? 'bg-blue-600 text-white' : 'bg-blue-50 text-blue-800 hover:bg-blue-100' }}">Accepted</a>
            <a href="{{ route('admin.orders.index', ['status' => 'packed']) }}" class="px-4 py-2 rounded-xl transition {{ request('status') == 'packed' ? 'bg-indigo-600 text-white' : 'bg-indigo-50 text-indigo-800 hover:bg-indigo-100' }}">Packed</a>
            <a href="{{ route('admin.orders.index', ['status' => 'out_for_delivery']) }}" class="px-4 py-2 rounded-xl transition {{ request('status') == 'out_for_delivery' ? 'bg-purple-600 text-white' : 'bg-purple-50 text-purple-800 hover:bg-purple-100' }}">Out For Delivery</a>
            <a href="{{ route('admin.orders.index', ['status' => 'delivered']) }}" class="px-4 py-2 rounded-xl transition {{ request('status') == 'delivered' ? 'bg-emerald-600 text-white' : 'bg-emerald-50 text-emerald-800 hover:bg-emerald-100' }}">Delivered</a>
        </div>

        <form action="{{ route('admin.orders.index') }}" method="GET" class="flex gap-2">
            <input type="text" name="q" value="{{ request('q') }}" placeholder="Order #..." class="px-3.5 py-1.5 rounded-xl border border-slate-200 text-xs font-mono">
            <button type="submit" class="bg-slate-900 text-white text-xs font-bold px-3 py-1.5 rounded-xl">Search</button>
        </form>
    </div>

    <!-- Orders Table -->
    <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead>
                    <tr class="text-slate-400 uppercase font-extrabold border-b border-slate-100">
                        <th class="pb-3">Order Number</th>
                        <th class="pb-3">Customer</th>
                        <th class="pb-3">Amount</th>
                        <th class="pb-3">Payment Mode</th>
                        <th class="pb-3">Status</th>
                        <th class="pb-3">Assigned Partner</th>
                        <th class="pb-3 text-right">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 font-medium text-slate-800">
                    @foreach($orders as $ord)
                        <tr>
                            <td class="py-3 font-mono font-bold">#{{ $ord->order_number }}</td>
                            <td class="py-3 font-bold text-slate-900">{{ $ord->user->name ?? 'POS Cashier Sale' }}</td>
                            <td class="py-3 font-black text-slate-900">₹{{ number_format($ord->total_amount, 2) }}</td>
                            <td class="py-3">
                                <div class="flex flex-col gap-1">
                                    <span class="inline-flex items-center gap-1.5 font-extrabold text-[11px]">
                                        @if($ord->payment_method === 'razorpay')
                                            <span class="px-2 py-0.5 rounded-md bg-blue-50 text-blue-700 border border-blue-200/80"><i class="fa-solid fa-credit-card"></i> Razorpay Online</span>
                                        @elseif($ord->payment_method === 'cod')
                                            <span class="px-2 py-0.5 rounded-md bg-amber-50 text-amber-800 border border-amber-200/80"><i class="fa-solid fa-money-bill-wave"></i> Cash On Delivery</span>
                                        @elseif($ord->payment_method === 'pos_cash')
                                            <span class="px-2 py-0.5 rounded-md bg-emerald-50 text-emerald-800 border border-emerald-200/80"><i class="fa-solid fa-cash-register"></i> POS Cash</span>
                                        @elseif($ord->payment_method === 'pos_card')
                                            <span class="px-2 py-0.5 rounded-md bg-purple-50 text-purple-800 border border-purple-200/80"><i class="fa-solid fa-credit-card"></i> POS Card</span>
                                        @elseif($ord->payment_method === 'pos_upi')
                                            <span class="px-2 py-0.5 rounded-md bg-cyan-50 text-cyan-800 border border-cyan-200/80"><i class="fa-solid fa-qrcode"></i> POS UPI</span>
                                        @else
                                            <span class="px-2 py-0.5 rounded-md bg-slate-100 text-slate-700 uppercase">{{ $ord->payment_method }}</span>
                                        @endif
                                    </span>
                                    
                                    @if($ord->payment_status === 'paid')
                                        <span class="text-[10px] font-extrabold text-emerald-600 flex items-center gap-1"><i class="fa-solid fa-circle-check"></i> PAID</span>
                                    @elseif($ord->payment_status === 'failed')
                                        <span class="text-[10px] font-extrabold text-rose-600 flex items-center gap-1"><i class="fa-solid fa-circle-xmark"></i> FAILED</span>
                                    @else
                                        <span class="text-[10px] font-extrabold text-amber-600 flex items-center gap-1"><i class="fa-solid fa-clock"></i> PENDING</span>
                                    @endif

                                    @if(in_array(strtolower($ord->payment_method), ['cod', 'cash']) && $ord->order_status === 'delivered')
                                        @if($ord->cod_collected_from_rider)
                                            <div class="mt-1 font-extrabold text-[10px] text-emerald-700 bg-emerald-50 border border-emerald-200/80 px-2 py-0.5 rounded-md flex items-center gap-1">
                                                <i class="fa-solid fa-circle-check text-emerald-600"></i> Cash Received from {{ $ord->deliveryPartner->name ? explode(' ', $ord->deliveryPartner->name)[0] : 'Rider' }}
                                            </div>
                                        @else
                                            <div class="mt-1.5 p-2 rounded-xl bg-amber-50 border border-amber-300 text-[10px] text-amber-900 font-bold space-y-1 shadow-sm">
                                                <div class="flex items-center gap-1 font-black text-amber-900 leading-tight">
                                                    <i class="fa-solid fa-hand-holding-dollar text-amber-600 text-xs"></i>
                                                    <span>Collect <strong class="text-slate-950 font-black">₹{{ number_format($ord->total_amount, 2) }}</strong> Cash from {{ $ord->deliveryPartner->name ?? 'Delivery Partner' }}</span>
                                                </div>
                                                <form action="{{ route('admin.orders.collect-cod', $ord->id) }}" method="POST">
                                                    @csrf
                                                    <button type="submit" onclick="return confirm('Confirm that you collected ₹{{ number_format($ord->total_amount, 2) }} cash from {{ $ord->deliveryPartner->name ?? 'Rider' }}?')" class="w-full bg-amber-500 hover:bg-amber-600 text-slate-950 font-black px-2 py-1 rounded-lg shadow text-[10px] flex items-center justify-center gap-1 transition">
                                                        <i class="fa-solid fa-circle-check"></i> Collect Cash from Rider
                                                    </button>
                                                </form>
                                            </div>
                                        @endif
                                    @endif
                                </div>
                            </td>
                            <td class="py-3">
                                <span class="px-2.5 py-0.5 rounded-full font-bold text-[10px] uppercase bg-emerald-100 text-emerald-800">
                                    {{ str_replace('_', ' ', $ord->order_status) }}
                                </span>
                            </td>
                            <td class="py-3 font-bold text-slate-600">
                                {{ $ord->deliveryPartner->name ?? 'Unassigned' }}
                            </td>
                            <td class="py-3 text-right space-x-2">
                                <a href="{{ route('admin.orders.show', $ord->id) }}" class="text-brand-600 font-bold hover:underline">Manage & Status</a>
                                <a href="{{ route('orders.invoice', $ord->order_number) }}" target="_blank" class="text-slate-500 font-bold hover:underline"><i class="fa-solid fa-print"></i></a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        {{ $orders->links() }}
    </div>
</div>
@endsection