@extends('admin.layouts.app')

@section('title', 'Manage Orders')

@section('content')
    <div class="space-y-6">
        <!-- Header & Stats -->
        <div class="flex flex-col md:flex-row justify-between items-center gap-4">
            <div>
                <h2 class="text-2xl font-bold text-white tracking-tight">Orders Management</h2>
                <p class="text-sm text-slate-400 mt-1">Manage and track all customer orders</p>
            </div>

            <!-- Quick Stats/Filters -->
            <div class="flex flex-wrap gap-2">
                <a href="{{ request()->fullUrlWithQuery(['status' => null, 'page' => null]) }}"
                    class="px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider {{ !request('status') ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/30' : 'bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-white border border-slate-700' }}">
                    All ({{ $counts['all'] }})
                </a>
                <a href="{{ request()->fullUrlWithQuery(['status' => 'pending', 'page' => null]) }}"
                    class="px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider {{ request('status') == 'pending' ? 'bg-amber-500 text-white shadow-lg shadow-amber-500/30' : 'bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-white border border-slate-700' }}">
                    Pending ({{ $counts['pending'] }})
                </a>
                <a href="{{ request()->fullUrlWithQuery(['status' => 'processing', 'page' => null]) }}"
                    class="px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider {{ request('status') == 'processing' ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/30' : 'bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-white border border-slate-700' }}">
                    Processing ({{ $counts['processing'] }})
                </a>
                <a href="{{ request()->fullUrlWithQuery(['status' => 'shipped', 'page' => null]) }}"
                    class="px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider {{ request('status') == 'shipped' ? 'bg-indigo-500 text-white shadow-lg shadow-indigo-500/30' : 'bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-white border border-slate-700' }}">
                    Shipped ({{ $counts['shipped'] }})
                </a>
                <a href="{{ request()->fullUrlWithQuery(['status' => 'completed', 'page' => null]) }}"
                    class="px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider {{ request('status') == 'completed' ? 'bg-green-500 text-white shadow-lg shadow-green-500/30' : 'bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-white border border-slate-700' }}">
                    Completed ({{ $counts['completed'] }})
                </a>
                <a href="{{ request()->fullUrlWithQuery(['status' => 'cancelled', 'page' => null]) }}"
                    class="px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider {{ request('status') == 'cancelled' ? 'bg-red-500 text-white shadow-lg shadow-red-500/30' : 'bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-white border border-slate-700' }}">
                    Cancelled ({{ $counts['cancelled'] }})
                </a>
                <a href="{{ request()->fullUrlWithQuery(['status' => 'returned', 'page' => null]) }}"
                    class="px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider {{ request('status') == 'returned' ? 'bg-purple-500 text-white shadow-lg shadow-purple-500/30' : 'bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-white border border-slate-700' }}">
                    Returned ({{ $counts['returned'] }})
                </a>
                <a href="{{ request()->fullUrlWithQuery(['type' => 'pooja', 'status' => null, 'page' => null]) }}"
                    class="px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider {{ request('type') == 'pooja' ? 'bg-pink-600 text-white shadow-lg shadow-pink-500/30' : 'bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-white border border-slate-700' }}">
                    Rituals ({{ $counts['pooja'] }})
                </a>
            </div>
        </div>

        <!-- Main Card -->
        <div class="bg-slate-900 rounded-3xl border border-slate-800 shadow-xl overflow-hidden">
            <!-- Filter Bar -->
            <div class="p-5 border-b border-slate-800 bg-slate-800/50">
                <form action="{{ route('admin.orders.index') }}" method="GET"
                    class="flex flex-col md:flex-row gap-4 items-center justify-between">

                    @if(request('status'))
                        <input type="hidden" name="status" value="{{ request('status') }}">
                    @endif
                    @if(request('type'))
                        <input type="hidden" name="type" value="{{ request('type') }}">
                    @endif

                    <div class="flex items-center gap-2 w-full md:w-auto">
                        <div class="relative group">
                            <input type="date" name="start_date" value="{{ request('start_date') }}"
                                class="bg-slate-900 border border-slate-700 text-slate-200 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 placeholder-slate-500">
                        </div>
                        <span class="text-slate-500">to</span>
                        <div class="relative group">
                            <input type="date" name="end_date" value="{{ request('end_date') }}"
                                class="bg-slate-900 border border-slate-700 text-slate-200 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 placeholder-slate-500">
                        </div>
                    </div>

                    <div class="relative w-full md:w-96">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <i data-lucide="search" class="w-4 h-4 text-slate-500"></i>
                        </div>
                        <input type="text" name="search" value="{{ request('search') }}"
                            class="bg-slate-900 border border-slate-700 text-slate-200 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 placeholder-slate-500"
                            placeholder="Search by Order #, Name, Email, Phone...">
                        <button type="submit"
                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-500 hover:text-blue-400 transition-colors">
                            <i data-lucide="arrow-right" class="w-4 h-4"></i>
                        </button>
                    </div>
                </form>
            </div>

            <div class="overflow-x-auto relative">
                <table class="w-full text-sm text-left text-slate-300">
                    <thead class="text-xs text-slate-400 uppercase bg-slate-800/50">
                        <tr>
                            <th scope="col" class="px-6 py-4 rounded-tl-lg">Order</th>
                            <th scope="col" class="px-6 py-4">Date</th>
                            <th scope="col" class="px-6 py-4">Customer</th>
                            <th scope="col" class="px-6 py-4">Total</th>
                            <th scope="col" class="px-6 py-4">Scope</th>
                            <th scope="col" class="px-6 py-4">Status</th>
                            <th scope="col" class="px-6 py-4">Agent</th>
                            <th scope="col" class="px-6 py-4 rounded-tr-lg text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800">
                        @forelse($orders as $order)
                                            <tr class="hover:bg-slate-800/30 transition-colors">
                                                <td class="px-6 py-4 font-medium whitespace-nowrap">
                                                    <a href="{{ route('admin.orders.show', ['order' => $order->id, 'role' => request('role')]) }}"
                                                        class="text-blue-400 hover:text-blue-300 hover:underline">
                                                        {{ $order->order_number }}
                                                    </a>
                                                </td>
                                                <td class="px-6 py-4 text-slate-400">
                                                    {{ $order->created_at->format('M d, H:i') }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    @if($order->user)
                                                        <div class="font-medium text-white">{{ $order->user->name }}</div>
                                                        <div class="text-xs text-slate-500">{{ Str::limit($order->user->email, 20) }}</div>
                                                    @else
                                                        <div class="font-medium text-white">{{ $order->name }} (Guest)</div>
                                                        <div class="text-xs text-slate-500">{{ Str::limit($order->email, 20) }}</div>
                                                    @endif
                                                </td>
                                                <td class="px-6 py-4 font-bold text-emerald-400">
                                                    ₹{{ number_format($order->total, 2) }}
                                                </td>
                                                <td class="px-6 py-4">
                                                    <span class="px-2.5 py-0.5 rounded-full text-xs font-medium border
                                                                                                                {{ match ($order->order_scope) {
                                'International' => 'bg-purple-500/10 text-purple-400 border-purple-500/20',
                                'National' => 'bg-orange-500/10 text-orange-400 border-orange-500/20',
                                'Local' => 'bg-cyan-500/10 text-cyan-400 border-cyan-500/20',
                                default => 'bg-slate-700 text-slate-300 border-slate-600'
                            } }}">
                                                        {{ $order->order_scope }}
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4">
                                                    <div class="flex flex-col gap-1">
                                                        <span class="px-2.5 py-0.5 rounded-full text-xs font-medium border w-fit
                                                                                                                    {{ match ($order->status) {
                                'completed' => 'bg-green-500/10 text-green-400 border-green-500/20',
                                'processing' => 'bg-blue-500/10 text-blue-400 border-blue-500/20',
                                'shipped' => 'bg-indigo-500/10 text-indigo-400 border-indigo-500/20',
                                'cancelled' => 'bg-red-500/10 text-red-400 border-red-500/20',
                                default => 'bg-slate-700 text-slate-300 border-slate-600'
                            } }}">
                                                            {{ ucfirst($order->status) }}
                                                        </span>
                                                        <span
                                                            class="text-[10px] text-slate-500 uppercase font-bold tracking-wider">{{ $order->payment_method }}
                                                            ({{ $order->payment_status }})</span>
                                                    </div>

                                                    @if($order->agentRating || $order->productReviews->isNotEmpty())
                                                        @php
                                                            $avgRating = 0;
                                                            $totalRatings = 0;
                                                            if ($order->agentRating) {
                                                                $avgRating += $order->agentRating->rating;
                                                                $totalRatings++;
                                                            }
                                                            foreach ($order->productReviews as $pr) {
                                                                $avgRating += $pr->rating;
                                                                $totalRatings++;
                                                            }
                                                            $finalAvg = $totalRatings > 0 ? round($avgRating / $totalRatings, 1) : 0;
                                                        @endphp
                                                        <div class="mt-2">
                                                            <a href="{{ route('admin.orders.show', $order->id) }}"
                                                                class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[10px] font-bold uppercase tracking-wider border bg-amber-500/10 text-amber-400 border-amber-500/20 hover:bg-amber-500/20 transition-colors">
                                                                <i data-lucide="star" class="w-3 h-3 fill-current"></i>
                                                                {{ $finalAvg }}
                                                            </a>
                                                        </div>
                                                    @endif
                                                </td>
                                                <td class="px-6 py-4">
                                                    @if($order->deliveryAgent)
                                                        <div class="flex items-center gap-2">
                                                            <div
                                                                class="w-6 h-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold text-white">
                                                                {{ substr($order->deliveryAgent->user->name, 0, 1) }}
                                                            </div>
                                                            <span
                                                                class="text-sm font-medium text-slate-300">{{ Str::limit($order->deliveryAgent->user->name, 10) }}</span>
                                                        </div>
                                                    @else
                                                        <span class="text-slate-600 text-xs italic">Unassigned</span>
                                                    @endif
                                                </td>
                                                <td class="px-6 py-4 text-right">
                                                    <a href="{{ route('admin.orders.show', ['order' => $order->id, 'role' => request('role')]) }}"
                                                        class="inline-flex items-center justify-center p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition-all group"
                                                        title="View Order">
                                                        <i data-lucide="eye" class="w-4 h-4 group-hover:scale-110 transition-transform"></i>
                                                    </a>
                                                </td>
                                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-6 py-12 text-center">
                                    <div class="flex flex-col items-center justify-center">
                                        <div class="w-16 h-16 bg-slate-800 rounded-full flex items-center justify-center mb-4">
                                            <i data-lucide="search-x" class="w-8 h-8 text-slate-500"></i>
                                        </div>
                                        <h3 class="text-lg font-medium text-white">No orders found</h3>
                                        <p class="text-slate-400 mt-1">Try adjusting your search or filters</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="p-4 border-t border-slate-800 bg-slate-900">
                {{ $orders->withQueryString()->links() }}
            </div>
        </div>
    </div>
@endsection