@extends('layouts.app')

@section('title', "UK Towns & Cities Planning Directory – Letter {$letter} | PlanningDB")
@section('meta_description', "Browse statutory planning records, conservation areas, listed buildings, and planning registers for UK towns and cities starting with {$letter}.")

@section('content')
<div class="container mx-auto px-4 py-8 max-w-7xl">
    <!-- Breadcrumb -->
    <nav class="flex mb-6 text-slate-500 text-xs sm:text-sm font-medium" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-2">
            <li class="inline-flex items-center">
                <a href="{{ url('/') }}" class="hover:text-indigo-900 transition-colors">Home</a>
            </li>
            <li>
                <div class="flex items-center">
                    <span class="mx-2 text-slate-300">/</span>
                    <a href="{{ route('places.index') }}" class="hover:text-indigo-900 transition-colors">Places</a>
                </div>
            </li>
            <li aria-current="page">
                <div class="flex items-center">
                    <span class="mx-2 text-slate-300">/</span>
                    <span class="text-slate-900 font-bold">Letter {{ $letter }}</span>
                </div>
            </li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="text-center max-w-3xl mx-auto mb-10">
        <span class="inline-flex items-center rounded-md bg-indigo-50 px-2.5 py-1 text-xs font-bold text-indigo-700 ring-1 ring-inset ring-indigo-700/10 uppercase tracking-wider mb-3">
            UK Geographic Directory
        </span>
        <h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight mb-3">
            UK Towns & Cities Planning Directory
        </h1>
        <p class="text-slate-600 text-sm sm:text-base leading-relaxed">
            Explore statutory planning registers, listed buildings, and conservation areas organized by town and city across the United Kingdom.
        </p>
    </div>

    <!-- A-Z Letter Filter -->
    <div class="flex flex-wrap justify-center gap-1.5 sm:gap-2 mb-10">
        @foreach($alphabet as $char)
            <a href="{{ route('places.index', ['letter' => $char]) }}" 
               class="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded-xl text-xs sm:text-sm font-bold transition-all duration-150 
               {{ $letter === $char ? 'bg-indigo-900 text-white shadow-sm ring-2 ring-indigo-900 ring-offset-2' : 'bg-white text-slate-700 hover:bg-indigo-50 hover:text-indigo-900 ring-1 ring-inset ring-slate-200 shadow-xs' }}">
                {{ $char }}
            </a>
        @endforeach
    </div>

    <!-- Places Grid -->
    @if(count($places) > 0)
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
            @foreach($places as $place)
                @php
                    $targetUrl = route('places.show', $place['slug']);
                @endphp
                <a href="{{ $targetUrl }}" class="group block">
                    <div class="bg-white rounded-2xl p-5 shadow-xs ring-1 ring-slate-200/80 group-hover:ring-2 group-hover:ring-indigo-600 group-hover:shadow-md transition-all duration-200 flex flex-col justify-between h-full">
                        <div>
                            <div class="flex items-start justify-between gap-2 mb-2">
                                <h2 class="text-lg font-bold text-slate-900 group-hover:text-indigo-900 transition-colors truncate" title="{{ $place['name'] }}">
                                    {{ $place['name'] }}
                                </h2>
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-indigo-50 text-indigo-700 ring-1 ring-inset ring-indigo-700/10 shrink-0">
                                    {{ $place['primary_district'] }}
                                </span>
                            </div>

                            @if(!empty($place['region']))
                                <p class="text-xs text-slate-500 font-medium truncate mb-3" title="{{ $place['region'] }}">
                                    {{ $place['region'] }} · {{ $place['uk_region'] }}
                                </p>
                            @endif

                            @if(count($place['districts']) > 1)
                                <div class="flex flex-wrap gap-1 mb-4">
                                    @foreach(array_slice($place['districts'], 0, 4) as $d)
                                        <span class="text-[10px] font-semibold bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded">
                                            {{ $d }}
                                        </span>
                                    @endforeach
                                    @if(count($place['districts']) > 4)
                                        <span class="text-[10px] text-slate-400 font-medium self-center">
                                            +{{ count($place['districts']) - 4 }} more
                                        </span>
                                    @endif
                                </div>
                            @endif
                        </div>

                        <div class="flex items-center justify-between text-[11px] text-slate-500 pt-3 border-t border-slate-100 mt-2">
                            <span>Pop: {{ number_format($place['population']) }}</span>
                            <span class="font-bold text-indigo-600 group-hover:translate-x-0.5 transition-transform inline-flex items-center gap-0.5">
                                View Register &rarr;
                            </span>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
    @else
        <div class="text-center py-16 bg-white rounded-2xl shadow-xs ring-1 ring-slate-200">
            <p class="text-slate-500 text-base">No places found starting with letter {{ $letter }}.</p>
        </div>
    @endif
</div>
@endsection