@extends('layouts.admin')

@section('title', 'Manage Order #' . $order->order_number . ' - Admin')
@section('header_title', 'Process Order #' . $order->order_number)

@section('content')
<div class="max-w-4xl mx-auto space-y-8">
    
    <!-- Top Order Info & Status Updater Card -->
    <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-6">
        <div class="flex flex-col sm:flex-row items-center justify-between border-b border-slate-100 pb-4 gap-4">
            <div>
                <div class="font-mono text-lg font-black text-slate-900">#{{ $order->order_number }}</div>
                <div class="text-xs text-slate-400">Placed on {{ $order->created_at->setTimezone('Asia/Kolkata')->format('d M Y, h:i A') }}</div>
            </div>
            <a href="{{ route('orders.invoice', $order->order_number) }}" target="_blank" class="px-4 py-2 bg-slate-900 text-white font-bold text-xs rounded-xl shadow">
                <i class="fa-solid fa-print"></i> Print Invoice
            </a>
        </div>

        <form action="{{ route('admin.orders.status', $order->id) }}" method="POST" class="bg-slate-50 p-5 rounded-2xl border border-slate-200 space-y-4">
            @csrf
            <h4 class="font-extrabold text-slate-900 text-sm">Update Order Workflow Status</h4>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs font-bold">
                <div>
                    <label class="block text-slate-700 uppercase tracking-wider mb-1">Select Order Status *</label>
                    <select name="status" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs font-bold text-slate-900">
                        <option value="pending" {{ $order->order_status == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="accepted" {{ $order->order_status == 'accepted' ? 'selected' : '' }}>Accepted</option>
                        <option value="packed" {{ $order->order_status == 'packed' ? 'selected' : '' }}>Packed</option>
                        <option value="out_for_delivery" {{ $order->order_status == 'out_for_delivery' ? 'selected' : '' }}>Out For Delivery</option>
                        <option value="delivered" {{ $order->order_status == 'delivered' ? 'selected' : '' }}>Delivered</option>
                        <option value="cancelled" {{ $order->order_status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                    </select>
                </div>

                <div>
                    <label class="block text-slate-700 uppercase tracking-wider mb-1">Assign Delivery Partner</label>
                    <select name="delivery_partner_id" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-xs font-bold text-slate-900">
                        <option value="">-- Select Partner --</option>
                        @foreach($deliveryPartners as $partner)
                            <option value="{{ $partner->id }}" {{ $order->delivery_partner_id == $partner->id ? 'selected' : '' }}>{{ $partner->name }} ({{ $partner->vehicle_details }})</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <button type="submit" class="bg-brand-600 hover:bg-brand-700 text-white font-extrabold text-xs px-6 py-3 rounded-xl shadow transition">Save Status & Assign</button>
        </form>
    </div>

    <!-- Items & Shipping Summary -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        
        <div class="md:col-span-2 bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
            <h4 class="font-extrabold text-slate-900 text-base border-b border-slate-100 pb-3">Ordered Items</h4>
            <div class="divide-y divide-slate-100">
                @foreach($order->items as $item)
                    <div class="py-3 flex items-center justify-between text-xs">
                        <div>
                            <div class="font-bold text-slate-900 text-sm">{{ $item->product_name }}</div>
                            <div class="text-slate-400 font-medium">Qty: {{ $item->quantity }} × ₹{{ number_format($item->unit_price, 2) }}</div>
                        </div>
                        <div class="font-extrabold text-slate-900 text-sm">₹{{ number_format($item->total_price, 2) }}</div>
                    </div>
                @endforeach
            </div>

            <div class="border-t border-slate-200 pt-4 space-y-1.5 text-xs text-slate-600 font-bold">
                <div class="flex justify-between"><span>Subtotal:</span><span>₹{{ number_format($order->subtotal, 2) }}</span></div>
                <div class="flex justify-between text-emerald-600"><span>Discount:</span><span>- ₹{{ number_format($order->discount_amount, 2) }}</span></div>
                <div class="flex justify-between"><span>GST:</span><span>₹{{ number_format($order->gst_amount, 2) }}</span></div>
                <div class="flex justify-between"><span>Delivery Charge:</span><span>₹{{ number_format($order->delivery_charge, 2) }}</span></div>
                <div class="flex justify-between text-sm text-slate-900 font-black border-t border-slate-100 pt-2"><span>Total:</span><span>₹{{ number_format($order->total_amount, 2) }}</span></div>
            </div>
        </div>

        <div class="space-y-6">
            <!-- Payment Info Card -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
                <h4 class="font-extrabold text-slate-900 text-base border-b border-slate-100 pb-3 flex items-center justify-between">
                    <span>Payment Information</span>
                    @if($order->payment_status === 'paid')
                        <span class="px-2.5 py-1 bg-emerald-100 text-emerald-800 text-[10px] font-extrabold rounded-full uppercase flex items-center gap-1"><i class="fa-solid fa-circle-check"></i> Paid</span>
                    @elseif($order->payment_status === 'failed')
                        <span class="px-2.5 py-1 bg-rose-100 text-rose-800 text-[10px] font-extrabold rounded-full uppercase flex items-center gap-1"><i class="fa-solid fa-circle-xmark"></i> Failed</span>
                    @else
                        <span class="px-2.5 py-1 bg-amber-100 text-amber-800 text-[10px] font-extrabold rounded-full uppercase flex items-center gap-1"><i class="fa-solid fa-clock"></i> Pending</span>
                    @endif
                </h4>

                <div class="text-xs space-y-3">
                    <div>
                        <span class="text-slate-400 font-semibold block">Payment Mode:</span>
                        <div class="font-extrabold text-slate-900 mt-0.5 flex items-center gap-2">
                            @if($order->payment_method === 'razorpay')
                                <span class="px-2.5 py-1 rounded-xl bg-blue-50 text-blue-700 border border-blue-200 font-extrabold inline-flex items-center gap-1.5"><i class="fa-solid fa-credit-card"></i> Razorpay Online (UPI/Cards/NetBanking)</span>
                            @elseif($order->payment_method === 'cod')
                                <span class="px-2.5 py-1 rounded-xl bg-amber-50 text-amber-800 border border-amber-200 font-extrabold inline-flex items-center gap-1.5"><i class="fa-solid fa-money-bill-wave"></i> Cash On Delivery (COD)</span>
                            @elseif($order->payment_method === 'pos_cash')
                                <span class="px-2.5 py-1 rounded-xl bg-emerald-50 text-emerald-800 border border-emerald-200 font-extrabold inline-flex items-center gap-1.5"><i class="fa-solid fa-cash-register"></i> POS Cash</span>
                            @elseif($order->payment_method === 'pos_card')
                                <span class="px-2.5 py-1 rounded-xl bg-purple-50 text-purple-800 border border-purple-200 font-extrabold inline-flex items-center gap-1.5"><i class="fa-solid fa-credit-card"></i> POS Card</span>
                            @elseif($order->payment_method === 'pos_upi')
                                <span class="px-2.5 py-1 rounded-xl bg-cyan-50 text-cyan-800 border border-cyan-200 font-extrabold inline-flex items-center gap-1.5"><i class="fa-solid fa-qrcode"></i> POS UPI</span>
                            @else
                                <span class="px-2.5 py-1 rounded-xl bg-slate-100 text-slate-800 font-bold uppercase">{{ $order->payment_method }}</span>
                            @endif
                        </div>
                    </div>

                    @if($order->razorpay_payment_id)
                        <div class="pt-2 border-t border-slate-100 space-y-1">
                            <div class="text-slate-400 font-semibold">Razorpay Payment ID:</div>
                            <div class="font-mono font-extrabold text-slate-900 bg-slate-50 p-2 rounded-xl border border-slate-200 select-all">{{ $order->razorpay_payment_id }}</div>
                        </div>
                    @endif

                    @if($order->razorpay_order_id)
                        <div class="space-y-1">
                            <div class="text-slate-400 font-semibold">Razorpay Order ID:</div>
                            <div class="font-mono text-slate-700 bg-slate-50 p-2 rounded-xl border border-slate-200 text-[11px] select-all">{{ $order->razorpay_order_id }}</div>
                        </div>
                    @endif

                    @if(in_array(strtolower($order->payment_method), ['cod', 'cash']) && $order->order_status === 'delivered')
                        <div class="pt-3 border-t border-slate-100">
                            @if($order->cod_collected_from_rider)
                                <div class="p-3 rounded-2xl bg-emerald-50 border border-emerald-200 text-xs text-emerald-900 font-bold space-y-1">
                                    <div class="flex items-center gap-1.5 text-emerald-800 font-black">
                                        <i class="fa-solid fa-circle-check text-emerald-600 text-base"></i>
                                        <span>Cash Collected from Delivery Partner</span>
                                    </div>
                                    <div class="text-slate-700 font-normal">
                                        Admin received <strong>₹{{ number_format($order->total_amount, 2) }}</strong> cash from <u>{{ $order->deliveryPartner->name ?? 'Delivery Partner' }}</u> on {{ $order->cod_collected_at ? $order->cod_collected_at->setTimezone('Asia/Kolkata')->format('d M Y, h:i A') : 'Record saved' }}.
                                    </div>
                                </div>
                            @else
                                <div class="p-3.5 rounded-2xl bg-amber-50 border border-amber-300 text-xs text-amber-900 font-bold space-y-2.5 shadow-sm">
                                    <div class="flex items-center gap-1.5 text-amber-950 font-black text-sm">
                                        <i class="fa-solid fa-hand-holding-dollar text-amber-600 text-lg"></i>
                                        <span>Action Required: Collect Cash from Delivery Partner</span>
                                    </div>
                                    <div class="text-slate-800 text-xs leading-relaxed font-medium">
                                        Order delivered by <strong>{{ $order->deliveryPartner->name ?? 'Rider' }}</strong>. Please collect <strong class="text-slate-950 font-black text-sm">₹{{ number_format($order->total_amount, 2) }}</strong> cash at the counter and mark as received.
                                    </div>
                                    <form action="{{ route('admin.orders.collect-cod', $order->id) }}" method="POST">
                                        @csrf
                                        <button type="submit" onclick="return confirm('Confirm cash collection of ₹{{ number_format($order->total_amount, 2) }} from {{ $order->deliveryPartner->name ?? 'Rider' }}?')" class="w-full bg-amber-500 hover:bg-amber-600 text-slate-950 font-black px-4 py-2.5 rounded-xl shadow transition text-xs flex items-center justify-center gap-2">
                                            <i class="fa-solid fa-circle-check text-sm"></i> Collect Cash from {{ $order->deliveryPartner->name ? explode(' ', $order->deliveryPartner->name)[0] : 'Rider' }}
                                        </button>
                                    </form>
                                </div>
                            @endif
                        </div>
                    @endif
                </div>
            </div>

            <!-- Delivery Address Card -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-sm space-y-4">
                <h4 class="font-extrabold text-slate-900 text-base border-b border-slate-100 pb-3">Delivery Address</h4>
                @if($order->shipping_address)
                    <div class="text-xs text-slate-600 space-y-1 font-medium">
                        <div class="font-bold text-slate-900 text-sm">{{ $order->shipping_address['full_name'] ?? '' }}</div>
                        <div>{{ $order->shipping_address['house_no'] ?? '' }} {{ $order->shipping_address['apartment'] ?? '' }}</div>
                        <div>{{ $order->shipping_address['street'] ?? '' }}, {{ $order->shipping_address['area'] ?? '' }}</div>
                        <div>{{ $order->shipping_address['city'] ?? '' }}, {{ $order->shipping_address['state'] ?? '' }} - <strong class="text-slate-900 font-mono">{{ $order->shipping_address['pincode'] ?? '' }}</strong></div>
                        <div class="pt-2 font-bold text-slate-700"><i class="fa-solid fa-phone text-brand-600"></i> Ph: {{ $order->shipping_address['mobile'] ?? '' }}</div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection