@extends('layouts.admin')

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

@section('content')

<!-- Header Breadcrumb & Actions -->
<div class="mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
    <div>
        <div class="flex items-center gap-2 text-xs text-slate-400 mb-1">
            <a href="{{ route('admin.dashboard') }}" class="hover:text-brand-light">Dashboard</a>
            <span>/</span>
            <a href="{{ route('admin.orders.index') }}" class="hover:text-brand-light">Orders</a>
            <span>/</span>
            <span class="text-brand-light font-bold">{{ $order->order_number }}</span>
        </div>
        <h2 class="font-display font-bold text-xl text-white">Order Details & Dispatch Manager</h2>
    </div>

    <div class="flex items-center gap-2">
        <a href="{{ route('orders.receipt', $order) }}" target="_blank" class="bg-white/5 hover:bg-white/10 text-slate-200 border border-white/10 text-xs font-semibold px-4 py-2 rounded-xl transition">
            View Receipt
        </a>
        <a href="{{ route('orders.receipt.download', $order) }}" class="bg-brand hover:bg-brand-hover text-white text-xs font-bold px-4 py-2 rounded-xl transition shadow-glow">
            📥 Download PDF Invoice
        </a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    
    <!-- Left: Status Update & Courier Assignment (1 col) -->
    <div class="bg-ink-card rounded-3xl border border-white/10 p-6 shadow-xl space-y-6 h-fit">
        <div class="border-b border-white/10 pb-4">
            <h3 class="font-heading font-bold text-sm text-white">Update Shipment Status</h3>
            <p class="text-[11px] text-slate-400">Update fulfillment stage and add courier tracking code.</p>
        </div>

        <form action="{{ route('admin.orders.update-status', $order) }}" method="POST" class="space-y-4 text-xs">
            @csrf
            @method('PATCH')

            <div>
                <label class="font-bold text-slate-300 block mb-1">Fulfillment Status *</label>
                <select name="status" class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white focus:ring-2 focus:ring-brand-light focus:outline-none">
                    <option value="pending" {{ $order->status === 'pending' ? 'selected' : '' }}>Pending Confirmation</option>
                    <option value="processing" {{ $order->status === 'processing' ? 'selected' : '' }}>Processing / Confirmed</option>
                    <option value="packed" {{ $order->status === 'packed' ? 'selected' : '' }}>Packed at Hub</option>
                    <option value="shipped" {{ $order->status === 'shipped' ? 'selected' : '' }}>Shipped / In Transit</option>
                    <option value="delivered" {{ $order->status === 'delivered' ? 'selected' : '' }}>Delivered</option>
                    <option value="cancelled" {{ $order->status === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                </select>
            </div>

            <div>
                <label class="font-bold text-slate-300 block mb-1">Payment Status</label>
                <select name="payment_status" class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white focus:ring-2 focus:ring-brand-light focus:outline-none">
                    <option value="paid" {{ $order->payment_status === 'paid' ? 'selected' : '' }}>Paid</option>
                    <option value="pending" {{ $order->payment_status === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="failed" {{ $order->payment_status === 'failed' ? 'selected' : '' }}>Failed</option>
                </select>
            </div>

            <div>
                <label class="font-bold text-slate-300 block mb-1">Courier Partner Name</label>
                <input type="text" name="courier_name" value="{{ old('courier_name', $order->courier_name) }}" placeholder="e.g. BlueDart, Delhivery, DTDC"
                       class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">
            </div>

            <div>
                <label class="font-bold text-slate-300 block mb-1">AWB Tracking Number</label>
                <input type="text" name="tracking_number" value="{{ old('tracking_number', $order->tracking_number) }}" placeholder="e.g. BD-892348123IN"
                       class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-white placeholder-slate-500 font-mono focus:ring-2 focus:ring-brand-light focus:outline-none">
            </div>

            <button type="submit" class="w-full bg-gradient-to-r from-brand to-brand-hover hover:from-brand-hover hover:to-brand text-white font-bold py-3 rounded-xl shadow-glow transition">
                Save & Update Order
            </button>
        </form>

        <div class="pt-4 border-t border-white/10 text-[11px] text-slate-400 space-y-1">
            <p><strong>Razorpay ID:</strong> <span class="font-mono text-slate-300">{{ $order->razorpay_payment_id ?? 'N/A' }}</span></p>
            <p><strong>Payment Mode:</strong> <span class="uppercase text-slate-300">{{ $order->payment_method }}</span></p>
        </div>
    </div>

    <!-- Right: Customer Info & Items Breakdown (2 cols) -->
    <div class="lg:col-span-2 space-y-6">
        
        <!-- Recipient & Customer Box -->
        <div class="bg-ink-card rounded-3xl border border-white/10 p-6 shadow-xl">
            <h3 class="font-heading font-bold text-sm text-white mb-4 border-b border-white/10 pb-3">Shipping & Customer Information</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                <div>
                    <span class="text-slate-400 block text-[10px] uppercase font-bold">Recipient Name</span>
                    <span class="font-bold text-white text-sm">{{ $order->shipping_name }}</span>
                    <p class="text-slate-400 mt-1">User Account: {{ $order->user->email ?? 'Guest' }}</p>
                </div>
                <div>
                    <span class="text-slate-400 block text-[10px] uppercase font-bold">Contact Phone</span>
                    <span class="font-bold text-white">{{ $order->shipping_phone }}</span>
                </div>
                <div class="sm:col-span-2">
                    <span class="text-slate-400 block text-[10px] uppercase font-bold">Complete Delivery Address</span>
                    <p class="text-slate-200 mt-0.5">{{ $order->shipping_address }}, {{ $order->shipping_city }} - {{ $order->shipping_pincode }}</p>
                </div>
            </div>
        </div>

        <!-- Ordered Items Table -->
        <div class="bg-ink-card rounded-3xl border border-white/10 p-6 shadow-xl space-y-4">
            <h3 class="font-heading font-bold text-sm text-white border-b border-white/10 pb-3">Ordered Items ({{ $order->items->count() }})</h3>
            
            <div class="space-y-3">
                @foreach($order->items as $item)
                    @php($img = $item->product?->primaryImage())
                    <div class="flex items-center gap-4 p-3 rounded-2xl bg-ink border border-white/5 text-xs">
                        <div class="w-14 h-14 rounded-xl bg-slate-900 overflow-hidden shrink-0 border border-white/10">
                            @if($img)<img src="{{ $img->url }}" class="w-full h-full object-cover">@endif
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="font-bold text-white truncate">{{ $item->product_name }}</p>
                            <p class="text-[11px] text-slate-400 mt-0.5">
                                @if($item->size) Size: {{ $item->size }} @endif
                                @if($item->color) &middot; Color: {{ $item->color }} @endif
                            </p>
                            <span class="text-slate-400 text-[11px]">Unit: ₹{{ number_format($item->unit_price, 2) }} × {{ $item->quantity }}</span>
                        </div>
                        <div class="text-right">
                            <p class="font-heading font-bold text-brand-light">₹{{ number_format($item->line_total, 2) }}</p>
                            <p class="text-[10px] text-slate-500">Tax: ₹{{ number_format($item->tax_amount, 2) }}</p>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Totals calculation -->
            <div class="border-t border-white/10 pt-4 space-y-1.5 text-xs max-w-xs ml-auto">
                <div class="flex justify-between text-slate-400"><span>Subtotal:</span><span class="text-white font-semibold">₹{{ number_format($order->subtotal, 2) }}</span></div>
                @if($order->discount_total > 0)
                    <div class="flex justify-between text-emerald-400"><span>Discount:</span><span>-₹{{ number_format($order->discount_total, 2) }}</span></div>
                @endif
                @if($order->coupon_discount > 0)
                    <div class="flex justify-between text-brand-light font-bold"><span>Coupon Discount:</span><span>-₹{{ number_format($order->coupon_discount, 2) }}</span></div>
                @endif
                <div class="flex justify-between text-slate-400"><span>GST Tax:</span><span class="text-white font-semibold">₹{{ number_format($order->tax_total, 2) }}</span></div>
                <div class="border-t border-white/10 pt-2 flex justify-between font-heading font-black text-sm text-white">
                    <span>Grand Total:</span>
                    <span class="text-brand-light text-base">₹{{ number_format($order->grand_total, 2) }}</span>
                </div>
            </div>
        </div>

    </div>

</div>

@endsection