@extends('admin.layouts.app')

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

@section('content')
    <div class="max-w-[1600px] mx-auto">
        <!-- Notifications -->
        @if(session('success'))
            <div class="mb-6 bg-green-500/10 border border-green-500/20 p-4 rounded-xl shadow-sm">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i data-lucide="check-circle" class="h-5 w-5 text-green-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-green-400">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif
        @if(session('error'))
            <div class="mb-6 bg-red-500/10 border border-red-500/20 p-4 rounded-xl shadow-sm">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i data-lucide="x-circle" class="h-5 w-5 text-red-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-red-400">{{ session('error') }}</p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Header Stats/Action Bar -->
        <div class="mb-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div class="flex items-center gap-4">
                <a href="{{ $order->user && $order->user->hasRole('Reseller') ? route('admin.orders.index', ['role' => 'Reseller']) : route('admin.orders.index') }}"
                    class="p-2 bg-slate-800 rounded-xl shadow-sm border border-slate-700 text-slate-400 hover:text-white transition-colors">
                    <i data-lucide="arrow-left" class="h-6 w-6"></i>
                </a>
                <div>
                    <h1 class="text-2xl font-bold text-white tracking-tight">Order #{{ $order->order_number }}</h1>
                    <p class="text-[11px] font-bold text-slate-500 uppercase tracking-[0.15em] mt-1.5">Order Details &
                        Management</p>
                </div>
            </div>

            <div class="flex items-center gap-3 w-full md:w-auto">
                <a href="{{ route('admin.orders.invoice', $order->id) }}"
                    class="flex items-center gap-2 bg-slate-800 border border-slate-700 text-slate-300 font-bold px-4 py-2.5 rounded-xl shadow-sm hover:bg-slate-700 hover:text-white transition-all text-sm">
                    <i data-lucide="file-text" class="h-4 w-4"></i>
                    Invoice
                </a>
                <form action="{{ route('admin.orders.update-status', $order->id) }}" method="POST"
                    class="flex items-center gap-2 flex-1 md:flex-initial">
                    @csrf
                    <select name="status"
                        class="block w-full pl-4 pr-10 py-2.5 text-sm font-bold bg-slate-900 border-slate-700 text-white focus:ring-blue-500 focus:border-blue-500 rounded-xl shadow-sm">
                        <option value="pending" {{ $order->status == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="processing" {{ $order->status == 'processing' ? 'selected' : '' }}>Processing</option>
                        <option value="shipped" {{ $order->status == 'shipped' ? 'selected' : '' }}>Shipped</option>
                        <option value="completed" {{ $order->status == 'completed' ? 'selected' : '' }}>Completed</option>
                        <option value="cancelled" {{ $order->status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                    </select>
                    <button type="submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white p-2.5 rounded-xl shadow-lg transition-all active:scale-95">
                        <i data-lucide="check" class="h-5 w-5"></i>
                    </button>
                </form>
            </div>
        </div>

        <!-- Timeline Section -->
        @php
            $steps = [
                ['status' => 'pending', 'label' => 'Placed', 'icon' => 'shopping-cart'],
                ['status' => 'processing', 'label' => 'Processed', 'icon' => 'package'],
                ['status' => 'shipped', 'label' => 'In Transit', 'icon' => 'truck'],
                ['status' => 'completed', 'label' => 'Delivered', 'icon' => 'check-circle'],
            ];
            $histories = $order->statusHistories->keyBy('status');
            $isCancelled = $order->status === 'cancelled';

            // Handle Returns
            if ($order->returnRequest) {
                $ret = $order->returnRequest;
                $steps[] = ['status' => 'return_requested', 'label' => 'Return Req.', 'icon' => 'rotate-ccw'];
                $histories->put('return_requested', $ret);

                if (in_array($ret->status, ['approved', 'received', 'refund_initiated', 'refunded'])) {
                    $steps[] = ['status' => 'return_approved', 'label' => 'Return Appr.', 'icon' => 'thumbs-up'];
                    $histories->put('return_approved', (object) ['created_at' => $ret->updated_at]);
                }
                if ($ret->status == 'rejected') {
                    $steps[] = ['status' => 'return_rejected', 'label' => 'Return Rejected', 'icon' => 'x-circle'];
                    $histories->put('return_rejected', (object) ['created_at' => $ret->updated_at]);
                }
                if ($ret->status == 'refunded') {
                    $steps[] = ['status' => 'refunded', 'label' => 'Refunded', 'icon' => 'banknote'];
                    $histories->put('refunded', (object) ['created_at' => $ret->refunded_at]);
                }
            }

            $furthestStep = -1;
            foreach ($steps as $index => $step) {
                if ($histories->has($step['status']))
                    $furthestStep = $index;
            }

            $totalShownSteps = count($steps) + ($isCancelled ? 1 : 0);
            $progressPercentage = ($totalShownSteps > 1) ? ($furthestStep / ($totalShownSteps - 1)) : 0;
            $progressWidth = $progressPercentage * 100;

            $statusLabelColors = [
                'pending' => 'text-indigo-400',
                'processing' => 'text-blue-400',
                'shipped' => 'text-amber-400',
                'completed' => 'text-green-400',
                'return_requested' => 'text-yellow-400',
                'return_approved' => 'text-blue-400',
                'return_rejected' => 'text-red-400',
                'refunded' => 'text-purple-400',
            ];
        @endphp

        <div class="bg-slate-800 shadow-xl rounded-[2rem] mb-10 border border-slate-700 overflow-visible">
            <div class="p-8 sm:p-12 max-w-5xl mx-auto w-full">
                <div class="relative px-6">
                    <div class="absolute top-6 left-6 right-6 h-1 bg-slate-700 rounded-full overflow-hidden">
                        @if(!$isCancelled)
                            <div class="h-full bg-gradient-to-r from-blue-500 to-indigo-500 transition-all duration-1000"
                                style="width: {{ $progressWidth }}%"></div>
                        @endif
                    </div>

                    <div class="flex justify-between relative z-10">
                        @foreach ($steps as $index => $step)
                            @php
                                $active = $histories->has($step['status']);
                                $labelColor = $active ? ($statusLabelColors[$step['status']] ?? 'text-white') : 'text-slate-500';
                                $iconClasses = $active
                                    ? 'bg-blue-600 border-blue-500 text-white shadow-lg scale-110'
                                    : 'bg-slate-800 border-slate-600 text-slate-500';

                                if ($active && str_contains($step['status'], 'return'))
                                    $iconClasses = 'bg-indigo-600 border-indigo-500 text-white shadow-lg scale-110';
                                if ($active && $step['status'] == 'return_rejected')
                                    $iconClasses = 'bg-red-500 border-red-500 text-white shadow-lg scale-110';
                                if ($active && $step['status'] == 'refunded')
                                    $iconClasses = 'bg-purple-600 border-purple-500 text-white shadow-lg scale-110';
                            @endphp
                            <div class="flex flex-col items-center flex-1">
                                <div
                                    class="w-12 h-12 rounded-2xl flex items-center justify-center border-2 transition-all duration-500 {{ $iconClasses }}">
                                    <i data-lucide="{{ $step['icon'] }}" class="w-5 h-5"></i>
                                </div>
                                <div class="mt-4 text-center">
                                    <span
                                        class="block text-[11px] font-bold uppercase tracking-[0.15em] {{ $labelColor }}">{{ $step['label'] }}</span>
                                    @if($active && ($hist = $histories->get($step['status'])))
                                        <p class="text-[10px] text-slate-400 font-bold mt-1 uppercase">
                                            {{ $hist->created_at->format('M d • h:i A') }}</p>
                                    @endif
                                </div>
                            </div>
                        @endforeach

                        @if($isCancelled)
                            <div class="flex flex-col items-center flex-1">
                                <div
                                    class="w-12 h-12 rounded-2xl flex items-center justify-center border-2 bg-red-600 border-red-500 text-white shadow-lg animate-pulse">
                                    <i data-lucide="x" class="w-6 h-6"></i>
                                </div>
                                <div class="mt-4 text-center text-red-500">
                                    <span class="block text-[10px] font-bold uppercase tracking-[0.1em]">Cancelled</span>
                                    @if($hist = $histories->get('cancelled'))
                                        <p class="text-[10px] text-red-400 font-bold mt-1 uppercase">
                                            {{ $hist->created_at->format('M d • h:i A') }}</p>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        @if($order->status === 'cancelled' && $order->cancellation_reason)
            <div class="mb-8 bg-red-500/5 border-2 border-red-500/10 rounded-[2rem] p-8 flex items-start gap-6 shadow-sm">
                <div
                    class="h-12 w-12 rounded-2xl bg-red-600 flex items-center justify-center text-white flex-shrink-0 shadow-lg shadow-red-900/20">
                    <i data-lucide="alert-triangle" class="h-6 w-6"></i>
                </div>
                <div>
                    <h4 class="text-sm font-bold text-red-400 uppercase tracking-widest mb-1">Cancellation Reason</h4>
                    <p class="text-red-200 font-medium leading-relaxed">{{ $order->cancellation_reason }}</p>
                </div>
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Left Column: Content -->
            <div class="lg:col-span-2 space-y-8">
                <!-- Order Items Card (Dark Mode Adapted) -->
                <div class="bg-white text-slate-900 shadow-xl rounded-[2rem] border border-gray-100 overflow-hidden" x-data="{
                            items: [
                                @foreach($order->items as $item)
                                    {
                                        id: {{ $item->id }},
                                        qty: {{ $item->quantity }},
                                        price: {{ $item->price }},
                                        discount_percent: {{ $item->options['discount_percentage'] ?? 0 }},
                                        get total() {
                                            let discountedPrice = this.price * (1 - (this.discount_percent / 100));
                                            return discountedPrice * this.qty;
                                        }
                                    },
                                @endforeach
                            ],
                            overall_discount_percent: 0,
                            get subtotal() {
                                let rawSubtotal = this.items.reduce((sum, item) => sum + item.total, 0);
                                return rawSubtotal * (1 - (this.overall_discount_percent / 100));
                            },
                            get total() {
                                let t = this.subtotal + {{ $order->shipping_cost }};
                                t -= {{ $order->discount ?? 0 }};
                                t -= {{ $order->points_discount ?? 0 }};
                                t -= {{ $order->gift_card_discount ?? 0 }};
                                return Math.max(0, t);
                            }
                         }">
                    <div class="px-8 py-6 border-b border-gray-100 flex justify-between items-center bg-gray-50/80">
                        <h3 class="text-sm font-bold uppercase tracking-[0.2em] text-gray-600">Order Items</h3>
                        <div class="flex gap-2 items-center">
                            <span
                                class="bg-indigo-600 text-white text-[10px] font-bold px-4 py-1.5 rounded-full uppercase shadow-sm">{{ $order->items->count() }}
                                Items</span>
                        </div>
                    </div>

                    @php $isResellerPending = request('role') === 'Reseller' && $order->status === 'pending'; @endphp

                    @if($isResellerPending)
                        <form action="{{ route('admin.orders.generate-quotation', $order->id) }}" method="POST"
                            id="quotation-form">
                            @csrf
                    @endif

                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-100">
                                <thead class="bg-gray-50/50">
                                    <tr>
                                        <th
                                            class="px-8 py-5 text-left text-[11px] font-bold text-gray-600 uppercase tracking-[0.1em]">
                                            Product</th>
                                        <th
                                            class="px-8 py-5 text-left text-[11px] font-bold text-gray-600 uppercase tracking-[0.1em]">
                                            Price</th>
                                        @if($isResellerPending)
                                            <th
                                                class="px-8 py-5 text-left text-[11px] font-bold text-gray-600 uppercase tracking-[0.1em]">
                                                Disc. %</th>
                                        @endif
                                        <th
                                            class="px-8 py-5 text-left text-[11px] font-bold text-gray-600 uppercase tracking-[0.1em]">
                                            Qty</th>
                                        <th
                                            class="px-8 py-5 text-right text-[11px] font-bold text-gray-600 uppercase tracking-[0.1em]">
                                            Subtotal</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-50">
                                    @foreach($order->items as $index => $item)
                                        <tr class="hover:bg-gray-50/50 transition-colors">
                                            <td class="px-8 py-5 flex items-center gap-4">
                                                @php 
                                                    $name = 'Unknown Item';
                                                    $imgPath = null;
                                                    $subtext = null;
                                                    
                                                    if ($item->astrologer_pooja_service_id && $item->poojaService) {
                                                        $name = ($item->poojaService->poojaService->name ?? ($item->poojaService->custom_name ?? 'Ritual Service')) . ' by ' . ($item->poojaService->user->name ?? 'Astrologer');
                                                        $imgPath = $item->poojaService->poojaService && $item->poojaService->poojaService->image ? asset('storage/' . $item->poojaService->poojaService->image) : null;
                                                        $subtext = 'Ritual Service';
                                                    } elseif ($item->product) {
                                                        $name = $item->product->name;
                                                        $imgPath = $item->variation->image_path ?? $item->product->images->first()->image_path ?? null;
                                                    }
                                                @endphp
                                                <div
                                                    class="h-12 w-12 rounded-xl overflow-hidden bg-gray-100 border border-gray-100 flex-shrink-0">
                                                    <img src="{{ $imgPath ?? 'https://placehold.co/100x100?text=No+Image' }}"
                                                        class="h-full w-full object-cover">
                                                </div>
                                                <div>
                                                    <p class="text-sm font-bold text-gray-900 leading-tight">
                                                        {{ $name }}
                                                    </p>
                                                    @if($subtext)
                                                        <p class="text-[9px] font-bold text-indigo-500 uppercase mt-1">{{ $subtext }}</p>
                                                    @elseif(isset($item->options['attributes']))
                                                        <div class="flex gap-2 mt-1">
                                                            @foreach($item->options['attributes'] as $attr)
                                                                <span
                                                                    class="text-[9px] font-bold bg-gray-100 text-gray-500 px-2 py-0.5 rounded-md uppercase">{{ $attr['attribute'] }}:
                                                                    {{ $attr['value'] }}</span>
                                                            @endforeach
                                                        </div>
                                                    @endif
                                                </div>
                                            </td>
                                            <td class="px-8 py-5 text-sm font-bold text-gray-500">
                                                @if($isResellerPending)
                                                    <div class="flex items-center">
                                                        <span class="mr-1 text-gray-400">₹</span>
                                                        <input type="number" step="0.01" name="items[{{ $item->id }}][price]"
                                                            x-model="items[{{ $index }}].price"
                                                            class="w-24 p-1 text-sm border-gray-200 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                                                    </div>
                                                @else
                                                    ₹{{ number_format($item->price, 2) }}
                                                @endif
                                            </td>
                                            @if($isResellerPending)
                                                <td class="px-8 py-5 text-sm font-bold text-gray-500">
                                                    <input type="number" step="0.1" min="0" max="100"
                                                        name="items[{{ $item->id }}][discount_percent]"
                                                        x-model="items[{{ $index }}].discount_percent"
                                                        class="w-16 p-1 text-sm border-gray-200 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
                                                        placeholder="0">
                                                </td>
                                            @endif
                                            <td class="px-8 py-5 text-sm font-bold text-gray-900">{{ $item->quantity }}</td>
                                            <td class="px-8 py-5 text-right text-sm font-bold text-gray-900">
                                                <span x-text="'₹' + items[{{ $index }}].total.toFixed(2)"></span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="p-8 bg-gray-50/30 border-t border-gray-100">
                            <div class="flex flex-col md:flex-row justify-between items-end gap-6">
                                @if($isResellerPending)
                                    <div class="w-full md:w-auto">
                                        <button type="submit"
                                            class="bg-indigo-600 text-white px-6 py-3 rounded-xl font-bold uppercase tracking-wider text-xs hover:bg-indigo-700 shadow-lg transition-all w-full md:w-auto">Generate
                                            & Send Quotation</button>
                                    </div>
                                @else
                                    <div></div>
                                @endif

                                <div class="max-w-xs w-full space-y-3">
                                    <div
                                        class="flex justify-between text-xs font-bold text-gray-500 uppercase tracking-widest">
                                        <span>Subtotal</span>
                                        <span class="text-gray-900 font-bold"
                                            x-text="'₹' + subtotal.toFixed(2)">₹{{ number_format($order->subtotal, 2) }}</span>
                                    </div>
                                    <div
                                        class="flex justify-between text-xs font-bold text-gray-500 uppercase tracking-widest">
                                        <span>Shipping</span>
                                        <span
                                            class="text-gray-900 font-bold">₹{{ number_format($order->shipping_cost, 2) }}</span>
                                    </div>
                                    @if($isResellerPending)
                                        <div
                                            class="flex justify-between text-xs font-bold text-gray-500 uppercase tracking-widest items-center">
                                            <span>Overall Discount (%)</span>
                                            <input type="number" step="0.1" min="0" max="100" name="overall_discount_percent"
                                                x-model="overall_discount_percent"
                                                class="w-16 p-1 text-sm text-right border-gray-200 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
                                                placeholder="0">
                                        </div>
                                    @endif
                                    @if($order->discount > 0 && !$isResellerPending)
                                        <div
                                            class="flex justify-between text-xs font-bold text-emerald-600 uppercase tracking-wider">
                                            <span>Discount</span>
                                            <span>-₹{{ number_format($order->discount, 2) }}</span>
                                        </div>
                                    @endif
                                    <div
                                        class="flex justify-between text-lg font-bold text-gray-900 pt-4 border-t border-gray-200">
                                        <span>TOTAL</span>
                                        <span x-text="'₹' + total.toFixed(2)">₹{{ number_format($order->total, 2) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if($isResellerPending)
                        </form> @endif
                </div>
            </div>

            <!-- Right Column: Sidebar -->
            <div class="space-y-8">
                <!-- Customer -->
                <div
                    class="bg-slate-900 shadow-xl rounded-[2.5rem] p-8 text-white relative overflow-hidden ring-1 ring-white/10">
                    <p class="text-[11px] font-bold uppercase tracking-[0.2em] text-slate-300 mb-6">Customer Profile</p>
                    <div class="flex items-center gap-4 mb-8">
                        <div
                            class="h-14 w-14 rounded-2xl bg-slate-700/50 flex items-center justify-center font-bold text-2xl border border-white/10 shadow-inner">
                            {{ substr($order->name, 0, 1) }}
                        </div>
                        <div>
                            <p class="text-xl font-bold tracking-tight leading-none">{{ $order->name }}</p>
                            <p class="text-xs text-slate-300 mt-1.5 font-bold">{{ $order->email }}</p>
                        </div>
                    </div>
                    <div class="bg-black/20 rounded-2xl p-4 border border-white/5 space-y-3">
                        <div class="flex justify-between text-xs font-bold">
                            <span class="text-slate-400 font-bold uppercase tracking-widest">Contact</span>
                            <span class="text-white">{{ $order->phone }}</span>
                        </div>
                    </div>
                </div>

                <!-- Delivery Location -->
                <div
                    class="bg-slate-900 shadow-xl rounded-[2.5rem] p-8 text-white relative overflow-hidden ring-1 ring-white/10">
                    <p class="text-[11px] font-bold uppercase tracking-[0.2em] text-slate-300 mb-6">Delivery Location</p>
                    @if($order->shippingAddress)
                        <div class="space-y-2 text-sm font-bold text-slate-200">
                            <p class="text-white text-lg font-bold mb-4">{{ $order->shippingAddress->name }}</p>
                            <p>{{ $order->shippingAddress->address_line1 }}</p>
                            @if($order->shippingAddress->address_line2)
                            <p>{{ $order->shippingAddress->address_line2 }}</p> @endif
                            <p>{{ $order->shippingAddress->city }}, {{ $order->shippingAddress->state }}</p>
                            <span
                                class="text-indigo-300 font-bold mt-2 inline-block bg-white/5 px-3 py-1 rounded-full text-xs box-shadow ring-1 ring-white/10">
                                {{ $order->shippingAddress->country }} / {{ $order->shippingAddress->postal_code }}
                            </span>
                        </div>
                    @else
                        <p class="text-sm font-bold text-slate-500 italic">No physical address found.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection