@extends('layouts.admin')

@section('title', 'Orders')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">Orders</h1>
    <span class="text-sm text-gray-500">Total: {{ $totalOrders }} orders</span>
</div>

<!-- Filter Section -->
<div class="bg-white rounded-lg shadow p-4 mb-6">
    <form method="GET" action="/admin/orders" class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <!-- Search -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Search</label>
                <div class="relative">
                    <input type="text" 
                           name="search" 
                           value="{{ request('search') }}" 
                           placeholder="Order #, Email, Roblox..." 
                           class="w-full px-4 py-2 pl-10 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <svg class="absolute left-3 top-2.5 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </div>
            </div>
            
            <!-- Status Filter -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                <select name="status" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">All Status</option>
                    @foreach($statuses as $status)
                    <option value="{{ $status }}" {{ request('status') == $status ? 'selected' : '' }}>
                        {{ ucfirst($status) }} ({{ $statusCounts[$status] ?? 0 }})
                    </option>
                    @endforeach
                </select>
            </div>
            
            <!-- Date From -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Date From</label>
                <input type="date" 
                       name="date_from" 
                       value="{{ request('date_from') }}" 
                       class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            
            <!-- Date To -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Date To</label>
                <input type="date" 
                       name="date_to" 
                       value="{{ request('date_to') }}" 
                       class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
        </div>
        
        <div class="flex flex-wrap items-center gap-3">
            <!-- Sort -->
            <div class="flex items-center space-x-2">
                <label class="text-sm font-medium text-gray-700">Sort:</label>
                <select name="sort" class="px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="latest" {{ request('sort', 'latest') == 'latest' ? 'selected' : '' }}>Newest</option>
                    <option value="oldest" {{ request('sort') == 'oldest' ? 'selected' : '' }}>Oldest</option>
                </select>
            </div>
            
            <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">
                <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
                </svg>
                Apply Filters
            </button>
            
            @if(request('search') || request('status') || request('date_from') || request('date_to'))
            <a href="/admin/orders" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm">
                <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
                Clear All Filters
            </a>
            @endif
            
            <span class="text-sm text-gray-500 ml-auto">
                Showing {{ $orders->firstItem() ?? 0 }} - {{ $orders->lastItem() ?? 0 }} of {{ $orders->total() }} orders
            </span>
        </div>
    </form>
</div>

<!-- Status Cards -->
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mb-6">
    <a href="{{ request()->fullUrlWithQuery(['status' => '']) }}" 
       class="bg-white rounded-lg shadow p-4 hover:shadow-lg transition {{ !request('status') ? 'ring-2 ring-blue-500' : '' }}">
        <p class="text-sm text-gray-500">All</p>
        <p class="text-xl font-bold">{{ $totalOrders }}</p>
    </a>
    @foreach($statuses as $status)
    <a href="{{ request()->fullUrlWithQuery(['status' => $status]) }}" 
       class="bg-white rounded-lg shadow p-4 hover:shadow-lg transition {{ request('status') == $status ? 'ring-2 ring-blue-500' : '' }}">
        <p class="text-sm text-gray-500 capitalize">{{ $status }}</p>
        <p class="text-xl font-bold">{{ $statusCounts[$status] ?? 0 }}</p>
    </a>
    @endforeach
</div>

<!-- Table -->
<div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="table-responsive">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left">Order #</th>
                <th class="px-6 py-3 text-left">Customer</th>
                <th class="px-6 py-3 text-left">Email</th>
                <th class="px-6 py-3 text-left">Items</th>
                <th class="px-6 py-3 text-left">Game</th>
                <th class="px-6 py-3 text-left">Total</th>
                <th class="px-6 py-3 text-left">Status</th>
                <th class="px-6 py-3 text-left">Date</th>
                <th class="px-6 py-3"></th>
            </tr>
        </thead>
        <tbody>
            @foreach($orders as $order)
            <tr class="border-t hover:bg-gray-50">
                <td class="px-6 py-4 font-medium">{{ $order->order_number }}</td>
                <td class="px-6 py-4">{{ $order->user->username ?? 'Guest' }}</td>
                <td class="px-6 py-4">{{ $order->email }}</td>
                <td class="px-6 py-4">
                    @php
                        $itemsList = [];
                        foreach($order->items as $item) {
                            $productName = $item->product->name ?? 'Unknown';
                            $itemsList[] = $productName;
                        }
                        $itemsDisplay = implode(', ', $itemsList);
                    @endphp
                    
                    @if(count($order->items) > 0)
                        <div class="text-sm max-w-xs truncate" title="{{ $itemsDisplay }}">
                            {{ $itemsDisplay }}
                        </div>
                        <span class="text-xs text-gray-500">{{ count($order->items) }} item(s)</span>
                    @else
                        <span class="text-gray-400 text-sm">No items</span>
                    @endif
                </td>
                <td class="px-6 py-4">
                    @php
                        $firstGame = $order->items->first()?->product?->game;
                    @endphp
                    
                    @if($firstGame)
                        <div class="flex items-center space-x-2">
                            @if($firstGame->icon)
                                <img src="{{ asset($firstGame->icon) }}" 
                                     class="w-8 h-8 object-cover rounded" 
                                     alt="{{ $firstGame->name }}">
                            @else
                                <div class="w-8 h-8 bg-gray-200 rounded flex items-center justify-center text-gray-500 text-xs">
                                    🎮
                                </div>
                            @endif
                            <div>
                                <span class="text-sm font-medium">{{ $firstGame->name }}</span>
                                @if($order->items->count() > 1)
                                    <span class="text-xs text-gray-500 block">+{{ $order->items->count() - 1 }} more</span>
                                @endif
                            </div>
                        </div>
                    @else
                        <span class="text-gray-400 text-sm">-</span>
                    @endif
                </td>
                <td class="px-6 py-4">Rp {{ number_format($order->total) }}</td>
                <td class="px-6 py-4">
                    <span class="px-2 py-1 text-xs rounded 
                        @if($order->status == 'delivered') bg-green-100 text-green-800
                        @elseif($order->status == 'paid') bg-blue-100 text-blue-800
                        @elseif($order->status == 'pending') bg-yellow-100 text-yellow-800
                        @elseif($order->status == 'processing') bg-purple-100 text-purple-800
                        @elseif($order->status == 'failed') bg-red-100 text-red-800
                        @elseif($order->status == 'refunded') bg-orange-100 text-orange-800
                        @else bg-gray-100 text-gray-800 @endif">
                        {{ ucfirst($order->status) }}
                    </span>
                </td>
                <td class="px-6 py-4">{{ $order->created_at ? $order->created_at->format('d/m/Y H:i') : '-' }}</td>
                <td class="px-6 py-4">
                    <a href="/admin/orders/{{ $order->id }}" class="text-blue-600 hover:text-blue-800">View</a>
                </td>
            </tr>
            @endforeach

            @if($orders->isEmpty())
            <tr>
                <td colspan="9" class="px-6 py-12 text-center text-gray-500">
                    @if(request('search'))
                        No orders found matching "{{ request('search') }}"
                    @elseif(request('status'))
                        No orders found with status "{{ request('status') }}"
                    @else
                        No orders found
                    @endif
                </td>
            </tr>
            @endif
        </tbody>
    </table>
    </div>
    <div class="p-4 border-t">
        {{ $orders->links() }}
    </div>
</div>
@endsection