@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8 max-w-7xl">
    <h1 class="text-4xl font-bold text-gray-900 mb-8 text-center">Postcode Districts</h1>

    <!-- A-Z Filter -->
    <div class="flex flex-wrap justify-center gap-2 mb-12">
        @foreach($alphabet as $char)
            <a href="{{ route('postcodes.index', ['letter' => $char]) }}" 
               class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 
               {{ $letter === $char ? 'bg-blue-600 text-white shadow-md' : 'bg-white text-gray-700 hover:bg-gray-50 hover:text-blue-600 border border-gray-200 shadow-sm' }}">
                {{ $char }}
            </a>
        @endforeach
    </div>

    <!-- Districts Grid -->
    @if(count($districts) > 0)
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            @foreach($districts as $district)
                <a href="{{ route('postcodes.show', $district['Postcode']) }}" class="block group">
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md hover:border-blue-300 transition-all duration-200">
                        <div class="flex justify-between items-start mb-4">
                            <h2 class="text-2xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors">{{ $district['Postcode'] }}</h2>
                            <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">{{ $district['UK region'] ?? 'UK' }}</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-2 line-clamp-2" title="{{ $district['Town/Area'] }}">
                            {{ $district['Town/Area'] ?: 'Unknown Area' }}
                        </p>
                        <div class="flex justify-between items-center text-xs text-gray-500 mt-4 pt-4 border-t border-gray-100">
                            <span>Population: {{ number_format((int)$district['Population']) }}</span>
                            <span>Homes: {{ number_format((int)$district['Households']) }}</span>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
    @else
        <div class="text-center py-12 bg-white rounded-xl shadow-sm border border-gray-200">
            <p class="text-gray-500 text-lg">No postcode districts found starting with {{ $letter }}.</p>
        </div>
    @endif
</div>
@endsection