@extends('admin.layouts.app')

@section('title', 'Locations')

@section('content')
    <div class="max-w-4xl mx-auto">
        <div class="mb-6 flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold text-white tracking-tight">Locations</h1>
                <p class="text-slate-400 mt-1">Manage supported countries and states.</p>
            </div>
        </div>

        <div class="space-y-4">
            @foreach($countries as $country)
                <div class="glass-card rounded-2xl overflow-hidden" x-data="{ open: false }">
                    <div class="px-6 py-4 flex justify-between items-center cursor-pointer transition-colors hover:bg-white/5"
                        @click="open = !open">
                        <div class="flex items-center gap-4">
                            <span class="text-2xl">{{ $country->flag_emoji ?? '🏳️' }}</span>
                            <div>
                                <h3 class="font-bold text-white text-base">{{ $country->name }} <span
                                        class="text-slate-500 font-normal">({{ $country->code }})</span></h3>
                                <span class="text-xs text-blue-400 font-mono mt-0.5 block">+{{ $country->phonecode }}</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <span
                                class="text-xs font-medium px-2.5 py-1 rounded-full bg-slate-800 text-slate-300 border border-white/5">
                                {{ $country->states->count() }} States
                            </span>
                            <div class="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center transition-transform duration-200"
                                :class="{ 'rotate-180': open }">
                                <i data-lucide="chevron-down" class="w-4 h-4 text-slate-400"></i>
                            </div>
                        </div>
                    </div>

                    <div x-show="open" x-collapse class="border-t border-white/5 bg-slate-900/30 p-6">
                        @if($country->states->count() > 0)
                            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                                @foreach($country->states as $state)
                                    <div
                                        class="flex items-center gap-3 p-3 rounded-xl bg-slate-800/50 border border-white/5 hover:border-white/10 transition-colors">
                                        <div class="w-1.5 h-1.5 rounded-full bg-blue-500"></div>
                                        <span class="text-sm text-slate-300">{{ $state->name }}</span>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-4">
                                <p class="text-slate-500 text-sm italic">No states found for this country.</p>
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection