@extends('layouts.member')

@section('title', 'Hub Directory - ' . ($appName ?? 'ElevateWell') . ' Worldwide')

@section('content')
<div class="space-y-6">
    <!-- Header with Action Buttons matching screenshot -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-2">
                <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Hub Directory</h1>
                <span class="px-2 py-0.5 bg-emerald-100 text-emerald-800 font-extrabold text-[10px] rounded-md">BETA</span>
            </div>
            <p class="text-xs text-slate-500">Find {{ $appName ?? 'Elevatewell' }} partner hubs near you &mdash; {{ $totalHubs }} hubs</p>
        </div>

        <div class="flex items-center gap-2">
            <button class="px-3 py-1.5 bg-sky-700 text-white rounded-xl text-xs font-bold flex items-center gap-1.5 shadow-sm">
                <i data-lucide="list" class="w-3.5 h-3.5"></i>
                <span>List</span>
            </button>
            <button class="px-3 py-1.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 hover:bg-slate-50 rounded-xl text-xs font-semibold flex items-center gap-1.5 shadow-xs">
                <i data-lucide="map" class="w-3.5 h-3.5"></i>
                <span>Map</span>
            </button>
            <a href="{{ route('hubs') }}" class="px-3 py-1.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 hover:bg-slate-50 rounded-xl text-xs font-semibold flex items-center gap-1.5 shadow-xs">
                <i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>
                <span>Refresh</span>
            </a>
        </div>
    </div>

    <!-- Filter Bar matching screenshot -->
    <div class="bg-white dark:bg-slate-800 rounded-2xl p-4 border border-slate-200 dark:border-slate-700 shadow-sm">
        <form method="GET" action="{{ route('hubs') }}" class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
                <label class="block text-[11px] font-semibold text-slate-500 mb-1">Hub Type</label>
                <select name="type" onchange="this.form.submit()"
                    class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700/40 border border-slate-200 dark:border-slate-600 rounded-xl text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-sky-600">
                    <option value="">All hub types</option>
                    <option value="OFFICE HUB" {{ request('type') === 'OFFICE HUB' ? 'selected' : '' }}>Office Hub</option>
                    <option value="CITY HUB" {{ request('type') === 'CITY HUB' ? 'selected' : '' }}>City Hub</option>
                    <option value="PICKUP HUB" {{ request('type') === 'PICKUP HUB' ? 'selected' : '' }}>Pickup Hub</option>
                </select>
            </div>

            <div>
                <label class="block text-[11px] font-semibold text-slate-500 mb-1">Province</label>
                <select name="province" onchange="this.form.submit()"
                    class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700/40 border border-slate-200 dark:border-slate-600 rounded-xl text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-sky-600">
                    <option value="">All provinces</option>
                    @foreach($provinces as $prov)
                        <option value="{{ $prov }}" {{ request('province') === $prov ? 'selected' : '' }}>{{ $prov }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-[11px] font-semibold text-slate-500 mb-1">City / Municipality</label>
                <input type="text" name="city" value="{{ request('city') }}" placeholder="Filter by city..."
                    class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700/40 border border-slate-200 dark:border-slate-600 rounded-xl text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-sky-600">
            </div>
        </form>
    </div>

    <!-- Hub Cards 3-Column Grid matching screenshot -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($hubs as $hub)
            <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm flex flex-col justify-between hover:shadow-md transition">
                <div>
                    <div class="flex items-start justify-between gap-2 mb-3">
                        <h3 class="text-sm font-extrabold text-slate-900 dark:text-white uppercase leading-snug">{{ $hub->name }}</h3>
                        <span class="px-2 py-0.5 rounded text-[9px] font-bold shrink-0 uppercase tracking-wider
                            {{ $hub->type === 'OFFICE HUB' ? 'bg-amber-100 text-amber-800' : ($hub->type === 'CITY HUB' ? 'bg-sky-100 text-sky-800' : 'bg-orange-100 text-orange-800') }}">
                            {{ $hub->type }}
                        </span>
                    </div>

                    <p class="text-xs text-slate-600 dark:text-slate-300 leading-relaxed">{{ $hub->address }}</p>
                    <p class="text-xs font-semibold text-slate-700 dark:text-slate-200 mt-1">{{ $hub->city }}, {{ $hub->province }}</p>
                </div>

                <div class="mt-4 pt-3 border-t border-slate-100 dark:border-slate-700 flex items-center justify-between text-xs font-semibold text-slate-600 dark:text-slate-300">
                    <div class="flex items-center gap-1.5">
                        <i data-lucide="user" class="w-3.5 h-3.5 text-slate-400"></i>
                        <span>{{ $hub->contact_person ?? 'Hub Lead' }}</span>
                    </div>
                    <div class="flex items-center gap-1.5 text-sky-600 dark:text-sky-400 font-mono">
                        <i data-lucide="phone" class="w-3.5 h-3.5"></i>
                        <span>{{ $hub->phone ?? 'Contact Available' }}</span>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-3 bg-white dark:bg-slate-800 rounded-2xl p-12 text-center text-slate-400">
                No hubs match your filter criteria. Try clearing the filters.
            </div>
        @endforelse
    </div>

    <!-- Pagination -->
    @if($hubs->hasPages())
        <div class="mt-6 flex justify-center">
            {{ $hubs->links() }}
        </div>
    @endif
</div>
@endsection