@extends('layouts.admin')

@section('page-title', 'Pickup Hub: ' . $pickupHub->name)

@section('content')
<div class="flex justify-between items-center mb-8">
    <h2 class="text-2xl font-bold">{{ $pickupHub->name }}</h2>
    <div class="flex gap-3">
        <a href="{{ route('admin.pickup-hubs.edit', $pickupHub) }}" class="royal-btn px-4 py-2 text-sm">Edit</a>
        <a href="{{ route('admin.pickup-hubs.index') }}" class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-100">Back to Hubs</a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="royal-card p-6">
        <h4 class="font-semibold mb-4">Hub Details</h4>
        <div class="space-y-3 text-sm">
            <div class="flex justify-between"><span class="text-gray-500">Code:</span><span class="font-mono">{{ $pickupHub->code }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Status:</span><span class="px-2 py-1 rounded-full text-xs font-semibold {{ $pickupHub->status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">{{ ucfirst($pickupHub->status) }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Phone:</span><span>{{ $pickupHub->phone ?: 'N/A' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Email:</span><span>{{ $pickupHub->email ?: 'N/A' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Manager:</span><span>{{ $pickupHub->manager?->name ?: 'Unassigned' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Hours:</span><span>{{ $pickupHub->opening_time ? $pickupHub->opening_time . ' - ' . $pickupHub->closing_time : 'N/A' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Days:</span><span>{{ implode(', ', $pickupHub->getOperatingDaysArray()) ?: 'N/A' }}</span></div>
        </div>
    </div>

    <div class="royal-card p-6">
        <h4 class="font-semibold mb-4">Location</h4>
        <div class="space-y-3 text-sm">
            <p>{{ $pickupHub->address }}</p>
            <p>{{ $pickupHub->city }}, {{ $pickupHub->state }} {{ $pickupHub->zip }}</p>
            <p>{{ $pickupHub->country }}</p>
            @if($pickupHub->latitude && $pickupHub->longitude)
                <p class="text-xs text-gray-400">Lat: {{ $pickupHub->latitude }}, Lng: {{ $pickupHub->longitude }}</p>
            @endif
        </div>
    </div>

    <div class="royal-card p-6">
        <h4 class="font-semibold mb-4">Statistics</h4>
        <div class="space-y-3 text-sm">
            <div class="flex justify-between"><span class="text-gray-500">Total Orders:</span><span class="font-semibold">{{ $pickupHub->orders_count }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Pending Pickup:</span><span class="font-semibold">{{ $pickupHub->orders()->where('status', 'ready_for_pickup')->count() }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Picked Up:</span><span class="font-semibold">{{ $pickupHub->orders()->whereNotNull('picked_up_at')->count() }}</span></div>
        </div>
    </div>
</div>

@if($pickupHub->orders->count() > 0)
    <div class="royal-card overflow-hidden mt-6">
        <h4 class="font-semibold p-4 border-b">Recent Orders</h4>
        <table class="w-full text-sm">
            <thead class="border-b"><tr><th class="text-left py-3 px-4">Order #</th><th class="text-left py-3 px-4">Customer</th><th class="text-left py-3 px-4">Status</th><th class="text-left py-3 px-4">Pickup Status</th><th class="py-3 px-4"></th></tr></thead>
            <tbody>
                @foreach($pickupHub->orders->take(10) as $order)
                    <tr class="border-b">
                        <td class="py-3 px-4 font-semibold">{{ $order->order_number }}</td>
                        <td class="py-3 px-4">{{ $order->customer->name }}</td>
                        <td class="py-3 px-4"><span class="px-2 py-1 rounded-full text-xs font-semibold
                            @if($order->status === 'pending') bg-yellow-100 text-yellow-800
                            @elseif($order->status === 'ready_for_pickup') bg-blue-100 text-blue-800
                            @elseif($order->status === 'picked_up') bg-green-100 text-green-800
                            @else bg-gray-100 text-gray-800 @endif">{{ ucfirst(str_replace('_', ' ', $order->status)) }}</span></td>
                        <td class="py-3 px-4">{{ $order->picked_up_at ? 'Picked up ' . $order->picked_up_at->diffForHumans() : 'Waiting' }}</td>
                        <td class="py-3 px-4"><a href="{{ route('admin.orders.show', $order->order_number) }}" class="text-purple-600 hover:underline">View</a></td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif
@endsection