@extends('layouts.admin')

@section('page-title', 'Pickup Hub Orders')

@section('content')
<div class="mb-4">
    <h2 class="text-2xl font-bold text-gray-800">Pickup Hub Orders</h2>
    <p class="text-sm text-gray-500 mt-1">You have total {{ $stats['total'] }} pickup hub orders</p>
</div>

<div class="royal-card overflow-hidden">
    {{-- Card Header with Filters --}}
    <div class="border-b px-6 py-4">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
            <h4 class="text-lg font-semibold">Orders</h4>
            <form action="{{ route('admin.orders.pickup-hub') }}" method="GET" class="flex flex-wrap items-center gap-3">
                <div>
                    <select name="status" class="px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
                        <option value="">Delivery Status</option>
                        <option value="pending" {{ request('status')==='pending'?'selected':'' }}>Pending</option>
                        <option value="confirmed" {{ request('status')==='confirmed'?'selected':'' }}>Confirmed</option>
                        <option value="ready_for_pickup" {{ request('status')==='ready_for_pickup'?'selected':'' }}>Ready for Pickup</option>
                        <option value="picked_up" {{ request('status')==='picked_up'?'selected':'' }}>Picked Up</option>
                        <option value="cancelled" {{ request('status')==='cancelled'?'selected':'' }}>Canceled</option>
                    </select>
                </div>
                <div>
                    <select name="sort" class="px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
                        <option value="latest" {{ !request('sort') || request('sort')==='latest'?'selected':'' }}>Latest On Top</option>
                        <option value="oldest" {{ request('sort')==='oldest'?'selected':'' }}>Oldest On Top</option>
                        <option value="price_high" {{ request('sort')==='price_high'?'selected':'' }}>Price (Low > High)</option>
                        <option value="price_low" {{ request('sort')==='price_low'?'selected':'' }}>Price (High > Low)</option>
                    </select>
                </div>
                <div class="relative">
                    <div class="flex items-center bg-white border border-gray-200 rounded-lg hover:border-gray-300 transition-colors focus-within:border-purple-400 focus-within:ring-2 focus-within:ring-purple-100">
                        <svg class="w-4 h-4 text-gray-400 ml-3 flex-shrink-0" 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>
                        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search order or hub..." class="w-full px-3 py-2 text-sm bg-transparent border-none focus:outline-none placeholder-gray-400">
                        <button type="submit" class="px-4 py-2 bg-gray-800 text-white text-sm rounded-r-lg hover:bg-gray-900 transition-colors font-medium">Search</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

{{-- Stats Cards --}}
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-6">
    <div class="bg-white rounded-xl shadow-sm border p-4 text-center">
        <p class="text-2xl font-bold text-gray-800">{{ $stats['total'] }}</p>
        <p class="text-xs text-gray-500 mt-1">Total</p>
    </div>
    <div class="bg-white rounded-xl shadow-sm border p-4 text-center">
        <p class="text-2xl font-bold text-yellow-600">{{ $stats['pending'] }}</p>
        <p class="text-xs text-gray-500 mt-1">Pending</p>
    </div>
    <div class="bg-white rounded-xl shadow-sm border p-4 text-center">
        <p class="text-2xl font-bold text-blue-600">{{ $stats['processing'] }}</p>
        <p class="text-xs text-gray-500 mt-1">Ready for Pickup</p>
    </div>
    <div class="bg-white rounded-xl shadow-sm border p-4 text-center">
        <p class="text-2xl font-bold text-green-600">{{ $stats['delivered'] }}</p>
        <p class="text-xs text-gray-500 mt-1">Picked Up</p>
    </div>
    <div class="bg-white rounded-xl shadow-sm border p-4 text-center">
        <p class="text-2xl font-bold text-red-600">{{ $stats['cancelled'] }}</p>
        <p class="text-xs text-gray-500 mt-1">Canceled</p>
    </div>
</div>

    {{-- Table --}}
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50 border-b">
                <tr>
                    <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">#</th>
                    <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Order Code</th>
                    <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Customer</th>
                    <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Pickup Hub</th>
                    <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Total Product</th>
                    <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Price</th>
                    <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Delivery Status</th>
                    <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Payment Status</th>
                    <th class="text-center py-3 px-4 text-sm font-semibold text-gray-600">Options</th>
                </tr>
            </thead>
            <tbody>
                @forelse($orders as $index => $order)
                    <tr class="border-b hover:bg-gray-50">
                        <td class="py-3 px-4 text-sm text-gray-600">{{ $orders->firstItem() + $index }}</td>
                        <td class="py-3 px-4">
                            <a href="{{ route('admin.orders.show', $order) }}" class="text-sm font-semibold text-purple-600 hover:text-purple-800">{{ $order->order_number }}</a>
                        </td>
                        <td class="py-3 px-4">
                            <div class="text-sm text-gray-700">{{ $order->customer->name }}</div>
                        </td>
                        <td class="py-3 px-4 text-sm text-gray-700">{{ $order->pickupHub?->name ?? '-' }}</td>
                        <td class="py-3 px-4 text-sm text-gray-600">{{ $order->items->count() }}</td>
                        <td class="py-3 px-4 text-sm font-semibold">${{ number_format($order->total, 2) }}</td>
                        <td class="py-3 px-4">
                            <span class="px-3 py-1 rounded-full text-xs font-semibold
                                @if($order->status === 'pending') bg-yellow-100 text-yellow-800
                                @elseif($order->status === 'confirmed') bg-green-100 text-green-800
                                @elseif($order->status === 'ready_for_pickup') bg-blue-100 text-blue-800
                                @elseif($order->status === 'picked_up') bg-emerald-100 text-emerald-800
                                @else bg-red-100 text-red-800 @endif">{{ ucfirst(str_replace('_', ' ', $order->status)) }}</span>
                        </td>
                        <td class="py-3 px-4">
                            <span class="px-3 py-1 rounded-full text-xs font-semibold
                                @if($order->payment_status === 'paid') bg-green-100 text-green-800
                                @elseif($order->payment_status === 'pending') bg-yellow-100 text-yellow-800
                                @elseif($order->payment_status === 'refunded') bg-blue-100 text-blue-800
                                @else bg-red-100 text-red-800 @endif">{{ ucfirst($order->payment_status) }}</span>
                        </td>
                        <td class="py-3 px-4">
                            <div class="flex items-center justify-center gap-2">
                                <a href="{{ route('admin.orders.show', $order) }}" class="w-8 h-8 rounded-full border border-purple-300 text-purple-600 hover:bg-purple-50 flex items-center justify-center" title="View">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                                </a>
                                @if($order->status === 'pending')
                                    @if($order->shipping_address['phone'] ?? $order->customer?->phone)
                                        <a href="tel:{{ $order->shipping_address['phone'] ?? $order->customer?->phone }}" class="w-8 h-8 rounded-full border border-blue-300 text-blue-600 hover:bg-blue-50 flex items-center justify-center" title="Call Customer">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                                        </a>
                                    @endif
                                    <form action="{{ route('admin.orders.status', $order) }}" method="POST" class="inline">
                                        @csrf @method('PATCH')
                                        <input type="hidden" name="status" value="confirmed">
                                        <button type="submit" class="w-8 h-8 rounded-full border border-green-300 text-green-600 hover:bg-green-50 flex items-center justify-center" title="Accept Order">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                                        </button>
                                    </form>
                                @elseif($order->status === 'confirmed')
                                    <form action="{{ route('admin.orders.status', $order) }}" method="POST" class="inline">
                                        @csrf @method('PATCH')
                                        <input type="hidden" name="status" value="processing">
                                        <button type="submit" class="w-8 h-8 rounded-full border border-indigo-300 text-indigo-600 hover:bg-indigo-50 flex items-center justify-center" title="Process Order">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                        </button>
                                    </form>
                                @elseif($order->status === 'processing' && $order->payment_status === 'pending')
                                    <a href="{{ route('admin.pos.process', $order) }}" class="w-8 h-8 rounded-full border border-emerald-300 text-emerald-600 hover:bg-emerald-50 flex items-center justify-center" title="Process Payment">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                                    </a>
                                @endif
                                <form action="{{ route('admin.orders.destroy', $order) }}" method="POST" class="inline" onsubmit="return confirm('Delete this order? This action cannot be undone.')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="w-8 h-8 rounded-full border border-red-300 text-red-600 hover:bg-red-50 flex items-center justify-center" title="Delete Order">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="py-12 text-center text-gray-500">
                            <svg class="w-16 h-16 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg>
                            <p class="text-lg">No pickup hub orders found</p>
                            <p class="text-sm">Try adjusting your filters</p>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    @if($orders->hasPages())
        <div class="border-t px-6 py-4">
            {{ $orders->links() }}
        </div>
    @endif
</div>
@endsection