@component('layouts.app', [
    'title' => 'Authorized Agents',
    'metaDescription' => 'Find an authorized Fintech agent near you — filter by address, yatayat, and route to get or recharge your card in person.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Network',
        'title' => 'Find an Authorized Agent',
        'subtitle' => 'Get your card or recharge in person at one of our authorized agent counters across the valley.',
    ])

    <section class="py-16 dark:bg-ink lg:py-24"
        x-data="{
            address: 'All',
            yatayat: 'All',
            route: 'All',
            addresses: @js($addresses->pluck('name')->values()),
            yatayats: @js($yatayats->pluck('name')->values()),
            routes: @js($transportRoutes->pluck('name')->values()),
            agents: @js($agents->map(fn ($agent) => ['address' => $agent->address?->name, 'yatayat' => $agent->yatayat?->name, 'route' => $agent->transportRoute?->name])->values()),
            matches(agentAddress, agentYatayat, agentRoute) {
                return (this.address === 'All' || this.address === agentAddress)
                    && (this.yatayat === 'All' || this.yatayat === agentYatayat)
                    && (this.route === 'All' || this.route === agentRoute);
            },
            get anyVisible() {
                return this.agents.some((a) => this.matches(a.address, a.yatayat, a.route));
            },
            reset() { this.address = 'All'; this.yatayat = 'All'; this.route = 'All'; },
        }">
        <div class="mx-auto max-w-7xl px-6">
            <!-- Filters -->
            <div class="reveal mb-10 grid grid-cols-1 gap-3 rounded-2xl border border-slate-100 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-panel sm:grid-cols-3 sm:gap-4 sm:p-5">
                <div>
                    <label class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Address</label>
                    <div class="relative">
                        <select x-model="address"
                            class="w-full appearance-none rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm text-slate-900 shadow-sm transition focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15 dark:border-white/10 dark:bg-ink dark:text-white dark:focus:border-secondary dark:focus:ring-secondary/15">
                            <option value="All">All Addresses</option>
                            <template x-for="a in addresses" :key="a">
                                <option :value="a" x-text="a"></option>
                            </template>
                        </select>
                        <i class="fa-solid fa-chevron-down pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-xs text-slate-400" aria-hidden="true"></i>
                    </div>
                </div>

                <div>
                    <label class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Yatayat</label>
                    <div class="relative">
                        <select x-model="yatayat"
                            class="w-full appearance-none rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm text-slate-900 shadow-sm transition focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15 dark:border-white/10 dark:bg-ink dark:text-white dark:focus:border-secondary dark:focus:ring-secondary/15">
                            <option value="All">All Yatayat</option>
                            <template x-for="y in yatayats" :key="y">
                                <option :value="y" x-text="y"></option>
                            </template>
                        </select>
                        <i class="fa-solid fa-chevron-down pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-xs text-slate-400" aria-hidden="true"></i>
                    </div>
                </div>

                <div>
                    <label class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Route</label>
                    <div class="relative">
                        <select x-model="route"
                            class="w-full appearance-none rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm text-slate-900 shadow-sm transition focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15 dark:border-white/10 dark:bg-ink dark:text-white dark:focus:border-secondary dark:focus:ring-secondary/15">
                            <option value="All">All Routes</option>
                            <template x-for="r in routes" :key="r">
                                <option :value="r" x-text="r"></option>
                            </template>
                        </select>
                        <i class="fa-solid fa-chevron-down pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-xs text-slate-400" aria-hidden="true"></i>
                    </div>
                </div>
            </div>

            <!-- Agent cards -->
            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($agents as $i => $agent)
                    <div
                        x-show="matches(@js($agent->address?->name), @js($agent->yatayat?->name), @js($agent->transportRoute?->name))"
                        class="reveal rounded-2xl border border-slate-100 bg-white p-5 shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg dark:border-white/10 dark:bg-panel"
                        style="transition-delay: {{ ($i % 6) * 70 }}ms">
                        <div class="flex items-start gap-3">
                            <span class="grid h-11 w-11 flex-shrink-0 place-items-center rounded-xl bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary">
                                <i class="fa-solid fa-shop" aria-hidden="true"></i>
                            </span>
                            <div class="min-w-0">
                                <h2 class="truncate font-heading text-base font-bold text-slate-900 dark:text-white">{{ $agent->company_name }}</h2>
                                <p class="text-sm text-slate-500 dark:text-slate-400">{{ $agent->contact_person }}</p>
                            </div>
                        </div>

                        <div class="mt-4 space-y-2.5 border-t border-slate-100 pt-4 text-sm dark:border-white/10">
                            <a href="tel:{{ preg_replace('/[^\d+]/', '', $agent->contact_number) }}"
                                class="flex items-center gap-2.5 text-slate-600 transition hover:text-primary dark:text-slate-300 dark:hover:text-secondary">
                                <i class="fa-solid fa-phone w-4 flex-shrink-0 text-slate-400 dark:text-slate-500" aria-hidden="true"></i>
                                {{ $agent->contact_number }}
                            </a>
                            <div class="flex items-start gap-2.5 text-slate-600 dark:text-slate-300">
                                <i class="fa-solid fa-location-dot mt-0.5 w-4 flex-shrink-0 text-slate-400 dark:text-slate-500" aria-hidden="true"></i>
                                {{ $agent->address?->name ?? 'Address not specified' }}
                            </div>
                            <div class="flex items-start gap-2.5 text-slate-600 dark:text-slate-300">
                                <i class="fa-solid fa-bus w-4 flex-shrink-0 text-slate-400 dark:text-slate-500" aria-hidden="true"></i>
                                <span>
                                    {{ $agent->yatayat?->name ?? 'Yatayat not specified' }}
                                    @if ($agent->transportRoute)
                                        <span class="block text-xs text-slate-400 dark:text-slate-500">{{ $agent->transportRoute->name }}</span>
                                    @endif
                                </span>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div x-show="!anyVisible" x-cloak class="reveal mt-6 rounded-xl border border-dashed border-slate-200 py-12 text-center dark:border-white/10">
                <i class="fa-solid fa-map-location-dot mb-3 text-2xl text-slate-300 dark:text-slate-600" aria-hidden="true"></i>
                <p class="text-sm font-semibold text-slate-600 dark:text-slate-300">No agents match these filters</p>
                <p class="mt-1 text-xs text-slate-400 dark:text-slate-500">Try a different address, yatayat, or route.</p>
                <button type="button" @click="reset()"
                    class="mt-4 text-xs font-semibold text-primary underline decoration-primary/40 underline-offset-2 transition hover:decoration-primary dark:text-secondary dark:decoration-secondary/40 dark:hover:decoration-secondary">
                    Clear filters
                </button>
            </div>
        </div>
    </section>

    @include('frontend.partials.home.cta')
@endcomponent