@extends('admin.layouts.app')

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

@section('content')
<div class="space-y-8">

    <!-- Top Action & Navigation Bar -->
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div class="flex items-center space-x-3">
            <a href="{{ route('admin.orders.index') }}" class="p-2.5 bg-white border border-slate-200 rounded-xl text-slate-600 hover:bg-slate-50 transition-colors shadow-xs" title="Back to Orders">
                <i class="fa-solid fa-arrow-left"></i>
            </a>
            <div>
                <h2 class="font-serif text-2xl font-bold text-slate-900 flex items-center space-x-3">
                    <span>Order {{ $order->order_number }}</span>
                    <span class="px-3 py-0.5 rounded-full text-xs font-bold border {{ $order->order_status_badge }}">
                        {{ strtoupper($order->order_status) }}
                    </span>
                </h2>
                <p class="text-xs text-slate-500">Placed on {{ $order->created_at ? $order->created_at->format('M d, Y \a\t g:i A') : 'N/A' }}</p>
            </div>
        </div>

        <div class="flex items-center space-x-3">
            <form action="{{ route('admin.orders.destroy', $order->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete order #{{ $order->order_number }}?');">
                @csrf
                @method('DELETE')
                <button type="submit" class="px-4 py-2.5 rounded-xl bg-red-50 border border-red-200 text-red-600 font-bold text-xs hover:bg-red-100 transition-colors">
                    <i class="fa-solid fa-trash-can mr-1"></i> DELETE ORDER
                </button>
            </form>
        </div>
    </div>

    <!-- MAIN TWO COLUMN GRID -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        
        <!-- LEFT 8 COLS: ORDER ITEMS & CUSTOMER INFO -->
        <div class="lg:col-span-8 space-y-6">
            
            <!-- ORDERED ITEMS CARD -->
            <div class="bg-white rounded-3xl p-6 border border-amber-900/10 shadow-xs space-y-4">
                <h3 class="font-serif text-lg font-bold text-slate-900 border-b border-slate-100 pb-3 flex items-center justify-between">
                    <span>Order Items ({{ $order->items->sum('quantity') }})</span>
                    <span class="text-xs font-sans text-slate-400 font-normal">Itemized Breakdown</span>
                </h3>

                <div class="overflow-x-auto">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="text-[11px] font-bold text-slate-400 uppercase tracking-wider border-b border-slate-100 pb-2">
                                <th class="pb-3 px-2">Item</th>
                                <th class="pb-3 px-2">SKU</th>
                                <th class="pb-3 px-2 text-center">Unit Price</th>
                                <th class="pb-3 px-2 text-center">Qty</th>
                                <th class="pb-3 px-2 text-right">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 text-xs">
                            @foreach($order->items as $item)
                                <tr>
                                    <!-- Item Name & Thumbnail -->
                                    <td class="py-4 px-2">
                                        <div class="flex items-center space-x-3">
                                            @if($item->product && $item->product->primary_image_url)
                                                <img src="{{ $item->product->primary_image_url }}" alt="{{ $item->product_name }}" class="w-12 h-12 rounded-xl object-cover border border-amber-900/10 shadow-xs">
                                            @else
                                                <div class="w-12 h-12 rounded-xl bg-amber-50 text-gold-600 flex items-center justify-center font-bold text-sm border border-amber-200">
                                                    <i class="fa-solid fa-gem"></i>
                                                </div>
                                            @endif
                                            <div>
                                                <p class="font-bold text-slate-900 leading-tight">{{ $item->product_name }}</p>
                                                @if($item->product)
                                                    <a href="{{ route('admin.products.show', $item->product->id) }}" class="text-[10px] text-gold-600 hover:underline">View in Catalog</a>
                                                @endif
                                            </div>
                                        </div>
                                    </td>

                                    <!-- SKU -->
                                    <td class="py-4 px-2 font-mono text-slate-500">
                                        {{ $item->sku ?? 'N/A' }}
                                    </td>

                                    <!-- Unit Price -->
                                    <td class="py-4 px-2 text-center font-semibold text-slate-700">
                                        ₹{{ number_format($item->price, 2) }}
                                    </td>

                                    <!-- Quantity -->
                                    <td class="py-4 px-2 text-center">
                                        <span class="px-2.5 py-1 rounded-full bg-slate-100 text-slate-800 font-bold text-xs">
                                            ×{{ $item->quantity }}
                                        </span>
                                    </td>

                                    <!-- Subtotal -->
                                    <td class="py-4 px-2 text-right font-serif font-bold text-slate-900 text-sm">
                                        ₹{{ number_format($item->subtotal, 2) }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- CUSTOMER & SHIPPING INFORMATION CARD -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                
                <!-- Customer Details -->
                <div class="bg-white rounded-3xl p-6 border border-amber-900/10 shadow-xs space-y-4">
                    <h3 class="font-serif text-base font-bold text-slate-900 border-b border-slate-100 pb-3 flex items-center space-x-2">
                        <i class="fa-solid fa-user text-gold-600"></i>
                        <span>Customer Information</span>
                    </h3>
                    <div class="space-y-2 text-xs">
                        <div>
                            <span class="text-slate-400 block text-[10px] font-semibold uppercase">Full Name</span>
                            <span class="font-bold text-slate-900 text-sm">{{ $order->customer_name }}</span>
                        </div>
                        <div>
                            <span class="text-slate-400 block text-[10px] font-semibold uppercase">Phone Number</span>
                            <a href="tel:{{ $order->customer_phone }}" class="font-mono text-slate-800 hover:text-gold-600 font-semibold">
                                <i class="fa-solid fa-phone text-[10px] mr-1 text-slate-400"></i>{{ $order->customer_phone }}
                            </a>
                        </div>
                        <div>
                            <span class="text-slate-400 block text-[10px] font-semibold uppercase">Email Address</span>
                            <span class="text-slate-700">{{ $order->customer_email ?? 'Not Provided' }}</span>
                        </div>
                    </div>
                </div>

                <!-- Shipping Address -->
                <div class="bg-white rounded-3xl p-6 border border-amber-900/10 shadow-xs space-y-4">
                    <h3 class="font-serif text-base font-bold text-slate-900 border-b border-slate-100 pb-3 flex items-center space-x-2">
                        <i class="fa-solid fa-location-dot text-gold-600"></i>
                        <span>Delivery Address</span>
                    </h3>
                    <div class="space-y-2 text-xs leading-relaxed text-slate-700">
                        <p class="font-medium bg-slate-50 p-3 rounded-xl border border-slate-100">{{ $order->shipping_address }}</p>
                        <div class="flex items-center justify-between text-slate-500 pt-1">
                            <span>City: <strong class="text-slate-800">{{ $order->city }}</strong></span>
                            <span>PIN: <strong class="text-slate-800 font-mono">{{ $order->pincode }}</strong></span>
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <!-- RIGHT 4 COLS: ORDER SUMMARY & STATUS UPDATE FORM -->
        <div class="lg:col-span-4 space-y-6">
            
            <!-- UPDATE STATUS FORM CARD -->
            <div class="bg-white rounded-3xl p-6 border border-amber-900/10 shadow-xs space-y-4">
                <h3 class="font-serif text-base font-bold text-slate-900 border-b border-slate-100 pb-3 flex items-center space-x-2">
                    <i class="fa-solid fa-sliders text-gold-600"></i>
                    <span>Update Order Status</span>
                </h3>

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

                    <!-- Order Fulfillment Status -->
                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">
                            Fulfillment Status
                        </label>
                        <select name="order_status" class="w-full px-3 py-2.5 text-xs bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:border-gold-500 font-semibold">
                            <option value="pending" {{ $order->order_status === 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="processing" {{ $order->order_status === 'processing' ? 'selected' : '' }}>Processing</option>
                            <option value="shipped" {{ $order->order_status === 'shipped' ? 'selected' : '' }}>Shipped</option>
                            <option value="delivered" {{ $order->order_status === 'delivered' ? 'selected' : '' }}>Delivered</option>
                            <option value="cancelled" {{ $order->order_status === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                        </select>
                    </div>

                    <!-- Payment Status -->
                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">
                            Payment Status
                        </label>
                        <select name="payment_status" class="w-full px-3 py-2.5 text-xs bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:border-gold-500 font-semibold">
                            <option value="pending" {{ $order->payment_status === 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="paid" {{ $order->payment_status === 'paid' ? 'selected' : '' }}>Paid</option>
                            <option value="failed" {{ $order->payment_status === 'failed' ? 'selected' : '' }}>Failed</option>
                            <option value="refunded" {{ $order->payment_status === 'refunded' ? 'selected' : '' }}>Refunded</option>
                        </select>
                    </div>

                    <button type="submit" class="w-full py-3 rounded-xl gold-gradient-bg text-obsidian-900 font-bold text-xs uppercase tracking-wider shadow-md hover:scale-[1.01] transition-transform">
                        SAVE STATUS CHANGES
                    </button>
                </form>
            </div>

            <!-- FINANCIAL SUMMARY CARD -->
            <div class="bg-obsidian-900 rounded-3xl p-6 text-slate-200 border border-gold-500/20 shadow-xl space-y-4">
                <h3 class="font-serif text-base font-bold text-white border-b border-obsidian-700 pb-3 flex items-center justify-between">
                    <span>Payment Summary</span>
                    <span class="text-[10px] font-bold px-2 py-0.5 rounded border uppercase {{ $order->payment_status_badge }}">
                        {{ strtoupper($order->payment_status) }}
                    </span>
                </h3>

                <div class="space-y-3 text-xs">
                    <div class="flex justify-between items-center text-slate-400">
                        <span>Items Subtotal</span>
                        <span class="text-white font-medium">₹{{ number_format($order->subtotal, 2) }}</span>
                    </div>

                    <div class="flex justify-between items-center text-slate-400">
                        <span>Shipping Fee</span>
                        <span class="text-emerald-400 font-medium">{{ $order->shipping_amount == 0 ? 'FREE' : '₹' . number_format($order->shipping_amount, 2) }}</span>
                    </div>

                    @if($order->discount_amount > 0)
                        <div class="flex justify-between items-center text-slate-400">
                            <span>Discount</span>
                            <span class="text-gold-400 font-medium">-₹{{ number_format($order->discount_amount, 2) }}</span>
                        </div>
                    @endif

                    <div class="flex justify-between items-center text-slate-400">
                        <span>Payment Method</span>
                        <span class="text-slate-200 font-bold uppercase">{{ strtoupper($order->payment_method) }}</span>
                    </div>

                    <div class="pt-3 border-t border-obsidian-700 flex justify-between items-center text-sm font-bold">
                        <span class="text-white font-serif">Grand Total</span>
                        <span class="text-gold-400 font-serif text-xl">₹{{ number_format($order->total_amount, 2) }}</span>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>
@endsection