@extends('layouts.app')

@section('title', $district . ' Postcodes & Planning Area - ' . $districtData['Town/Area'])
@section('meta_description', 'Explore planning constraints, property data, and ' . count($postcodes) . ' individual postcodes within the ' . $district . ' (' . $districtData['Town/Area'] . ') district.')
@push('head')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
@endpush

@section('content')
<div class="container mx-auto px-4 py-8 max-w-7xl">
    <!-- Breadcrumb -->
    <nav class="flex mb-6 text-slate-600 text-sm font-medium" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="{{ route('postcodes.index') }}" class="inline-flex items-center hover:text-indigo-600 transition-colors">
                    Postcodes
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-4 h-4 text-slate-400 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                    <a href="{{ route('postcodes.index', ['letter' => substr($district, 0, 1)]) }}" class="hover:text-indigo-600 transition-colors">{{ substr($district, 0, 1) }}</a>
                </div>
            </li>
            <li aria-current="page">
                <div class="flex items-center">
                    <svg class="w-4 h-4 text-slate-400 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                    <span class="text-slate-400 ml-1 md:ml-2">{{ $district }}</span>
                </div>
            </li>
        </ol>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
        <!-- District Info -->
        <div class="lg:col-span-1 bg-white rounded-2xl shadow-sm ring-1 ring-slate-200 p-6">
            <h1 class="text-4xl font-extrabold text-slate-900 mb-2">{{ $district }}</h1>
            <p class="text-slate-600 mb-6 leading-relaxed">
                @php
                    $places = array_filter(array_map('trim', explode(',', $districtData['Town/Area'])));
                @endphp
                @foreach($places as $index => $place)
                    <a href="{{ route('planning.postcode', str_replace(' ', '+', $place)) }}" class="text-indigo-600 hover:text-indigo-800 hover:underline transition-colors font-medium">
                        {{ $place }}
                    </a>{{ $index < count($places) - 1 ? ', ' : '' }}
                @endforeach
            </p>
            
            <div class="space-y-4 text-sm">
                <div class="flex justify-between border-b border-slate-100 pb-2">
                    <span class="text-slate-500">Region</span>
                    <span class="font-bold text-slate-900">{{ $districtData['Region'] }}</span>
                </div>
                <div class="flex justify-between border-b border-slate-100 pb-2">
                    <span class="text-slate-500">UK Region</span>
                    <span class="font-bold text-slate-900">{{ $districtData['UK region'] ?? 'N/A' }}</span>
                </div>
                <div class="flex justify-between border-b border-slate-100 pb-2">
                    <span class="text-slate-500">Post Town</span>
                    <span class="font-bold text-slate-900">{{ $districtData['Post Town'] }}</span>
                </div>
                <div class="flex justify-between border-b border-slate-100 pb-2">
                    <span class="text-slate-500">Population</span>
                    <span class="font-bold text-slate-900">{{ number_format((int)$districtData['Population']) }}</span>
                </div>
                <div class="flex justify-between pb-2">
                    <span class="text-slate-500">Households</span>
                    <span class="font-bold text-slate-900">{{ number_format((int)$districtData['Households']) }}</span>
                </div>
            </div>
        </div>

        <!-- Map -->
        <div class="lg:col-span-2 bg-slate-100 rounded-2xl shadow-sm ring-1 ring-slate-200 overflow-hidden" style="height: 400px;">
            <div id="map" class="w-full h-full z-0"></div>
        </div>
    </div>

    <!-- Postcodes List -->
    <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-200 p-6 mb-8">
        <h2 class="text-2xl font-bold text-slate-900 mb-6">Postcodes in {{ $district }}</h2>
        
        @if(count($postcodes) > 0)
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
                @foreach($postcodes as $pc)
                    <a href="{{ route('planning.postcode', str_replace(' ', '+', $pc)) }}" class="text-center bg-slate-50 hover:bg-indigo-50 ring-1 ring-inset ring-slate-200 hover:ring-indigo-300 rounded-lg px-3 py-2 text-sm font-bold text-slate-700 hover:text-indigo-800 transition-colors shadow-sm">
                        {{ $pc }}
                    </a>
                @endforeach
            </div>
        @else
            <div class="text-center py-8">
                <p class="text-slate-500">No individual postcodes found for this district.</p>
            </div>
        @endif
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var lat = {{ $districtData['Latitude'] ?? 51.505 }};
        var lng = {{ $districtData['Longitude'] ?? -0.09 }};
        
        var map = L.map('map').setView([lat, lng], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap'
        }).addTo(map);

        L.marker([lat, lng]).addTo(map)
            .bindPopup("<b>{{ $district }}</b><br>{{ addslashes($districtData['Town/Area']) }}")
            .openPopup();
    });
</script>
@endsection