@extends('layouts.app')

@section('title', !empty($displayName) ? strtoupper($displayName) . ' ' . ($activeFilter !== 'all' ? ucwords(str_replace('-', ' ', $activeFilter)) . ' ' : '') . 'Planning Information & Restrictions' : 'Search Planning Data')

@section('meta_description', !empty($displayName) ? 'Explore ' . ($activeFilter !== 'all' ? str_replace('-', ' ', $activeFilter) : 'planning constraints, heritage protections, and future development restrictions') . ' for ' . strtoupper($displayName) . '.' : 'Search for planning constraints and datasets by UK location.')

@section('content')
    <div class="space-y-8 py-6">


        @if ($error)
            <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-r-xl">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                                clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-red-700">
                            {{ $error }}
                        </p>
                    </div>
                </div>
            </div>
        @endif

        @if (!empty($query) && !$error)
            <!-- Page Heading -->
            <div
                class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8 pt-4 pb-6 border-b border-slate-200">
                <div>
                    <h1 class="text-3xl font-extrabold text-slate-900 tracking-tight mb-2">
                        @if(isset($activeFilter) && $activeFilter !== 'all')
                            {{ ucwords(str_replace('-', ' ', $activeFilter)) }} in {{ strtoupper($displayName) }}
                        @else
                            {{ strtoupper($displayName) }} Planning Information & Restrictions
                        @endif
                    </h1>
                    @if (!empty($outcode))
                        <a href="{{ route('postcodes.show', $outcode) }}"
                            class="inline-flex items-center gap-1 text-sm font-semibold text-indigo-900 hover:text-indigo-700 hover:underline transition">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                                stroke="currentColor" class="w-4 h-4">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
                            </svg>
                            Explore {{ strtoupper($outcode) }} postcode district
                        </a>
                    @endif
                </div>
                <span
                    class="text-sm font-semibold text-indigo-900 bg-indigo-50 px-4 py-1.5 rounded-full ring-1 ring-inset ring-indigo-900/10 whitespace-nowrap shadow-sm">
                    {{ isset($results['count']) ? $results['count'] : (isset($results['entities']) ? count($results['entities']) : 0) }}
                    matching entities
                </span>
            </div>

            <!-- Filters -->
            @php
                $filterButtons = [
                    'all' => 'bg-gray-100 text-gray-800 ring-gray-600/20',
                    'planning-applications' => 'bg-blue-100 text-blue-800 ring-blue-600/20',
                    'listed-building' => 'bg-amber-100 text-amber-800 ring-amber-600/20',
                    'conservation-area' => 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
                    'flood-risk-zone' => 'bg-cyan-100 text-cyan-800 ring-cyan-600/20',
                    'tree-preservation-orders' => 'bg-lime-100 text-lime-800 ring-lime-600/20',
                    'article-4-directions' => 'bg-red-100 text-red-800 ring-red-600/20',
                    'brownfield-sites' => 'bg-orange-100 text-orange-800 ring-orange-600/20',
                    'scheduled-monument' => 'bg-stone-100 text-stone-800 ring-stone-600/20',
                    'site-of-special-scientific-interest' => 'bg-teal-100 text-teal-800 ring-teal-600/20',
                    'ancient-woodland' => 'bg-fuchsia-100 text-fuchsia-800 ring-fuchsia-600/20',
                    'heritage-at-risk' => 'bg-rose-100 text-rose-800 ring-rose-600/20',
                    'area-of-outstanding-natural-beauty' => 'bg-sky-100 text-sky-800 ring-sky-600/20',
                    'local-plan-boundary' => 'bg-indigo-100 text-indigo-800 ring-indigo-600/20',
                    'developer-agreement' => 'bg-violet-100 text-violet-800 ring-violet-600/20',
                    'community-infrastructure-levy-schedule' => 'bg-purple-100 text-purple-800 ring-purple-600/20',
                    'infrastructure-funding-statement' => 'bg-pink-100 text-pink-800 ring-pink-600/20',
                    'design-code-area' => 'bg-slate-100 text-slate-800 ring-slate-600/20',
                ];
                $badgeColors = [
                    'all' => 'bg-gray-100 text-gray-800 ring-gray-600/20',
                    'planning-application' => 'bg-blue-100 text-blue-800 ring-blue-600/20',
                    'listed-building' => 'bg-amber-100 text-amber-800 ring-amber-600/20',
                    'conservation-area' => 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
                    'flood-risk-zone' => 'bg-cyan-100 text-cyan-800 ring-cyan-600/20',
                    'tree-preservation-zone' => 'bg-lime-100 text-lime-800 ring-lime-600/20',
                    'tree-preservation-order' => 'bg-lime-100 text-lime-800 ring-lime-600/20',
                    'article-4-direction-area' => 'bg-red-100 text-red-800 ring-red-600/20',
                    'article-4-direction' => 'bg-red-100 text-red-800 ring-red-600/20',
                    'brownfield-land' => 'bg-orange-100 text-orange-800 ring-orange-600/20',
                    'brownfield-site' => 'bg-orange-100 text-orange-800 ring-orange-600/20',
                    'scheduled-monument' => 'bg-stone-100 text-stone-800 ring-stone-600/20',
                    'site-of-special-scientific-interest' => 'bg-teal-100 text-teal-800 ring-teal-600/20',
                    'ancient-woodland' => 'bg-fuchsia-100 text-fuchsia-800 ring-fuchsia-600/20',
                    'heritage-at-risk' => 'bg-rose-100 text-rose-800 ring-rose-600/20',
                    'area-of-outstanding-natural-beauty' => 'bg-sky-100 text-sky-800 ring-sky-600/20',
                    'local-plan-boundary' => 'bg-indigo-100 text-indigo-800 ring-indigo-600/20',
                    'developer-agreement' => 'bg-violet-100 text-violet-800 ring-violet-600/20',
                    'community-infrastructure-levy-schedule' => 'bg-purple-100 text-purple-800 ring-purple-600/20',
                    'infrastructure-funding-statement' => 'bg-pink-100 text-pink-800 ring-pink-600/20',
                    'design-code-area' => 'bg-slate-100 text-slate-800 ring-slate-600/20',
                ];
            @endphp
            <div class="mb-8">
                <h3 class="text-sm font-bold text-slate-600 mb-3 uppercase tracking-wider">Filter by Dataset</h3>
                <div class="flex flex-wrap gap-2">
                    @foreach($filterButtons as $fKey => $fClass)
                        <a href="{{ route('planning.postcode', ['postcode' => str_replace(' ', '+', $query), 'filter' => $fKey, 'page' => 1]) }}" 
                           class="inline-flex items-center rounded-md px-3 py-1.5 text-sm font-medium ring-1 ring-inset transition-colors {{ isset($activeFilter) && $activeFilter === $fKey ? $fClass . ' ring-2 shadow-sm' : 'bg-white text-slate-600 ring-slate-200 hover:bg-slate-50' }}">
                            {{ $fKey === 'all' ? 'All Datasets' : ucwords(str_replace('-', ' ', $fKey)) }}
                        </a>
                    @endforeach
                </div>
            </div>

            <!-- Master Map -->
            @if (isset($results['entities']) && count($results['entities']) > 0)
                <div id="master-map"
                    class="h-[450px] w-full bg-slate-100 rounded-2xl shadow-sm ring-1 ring-slate-200 border-0 mb-8 relative z-0">
                </div>
            @endif

            <div>
                @if (isset($groupedEntities) && count($groupedEntities) > 0)
                    <div class="space-y-8">
                        @php
                            // $badgeColors array was moved to the top for the filters

                            $hexColors = [
                                'conservation-area' => '#059669',
                                'listed-building' => '#d97706',
                                'green-belt' => '#16a34a',
                                'flood-risk-zone' => '#0891b2',
                                'tree-preservation-zone' => '#65a30d',
                                'tree-preservation-order' => '#65a30d',
                                'article-4-direction-area' => '#dc2626',
                                'article-4-direction' => '#dc2626',
                                'brownfield-land' => '#ea580c',
                                'brownfield-site' => '#ea580c',
                                'scheduled-monument' => '#57534e',
                                'site-of-special-scientific-interest' => '#0d9488',
                                'ancient-woodland' => '#c026d3',
                                'heritage-at-risk' => '#e11d48',
                                'area-of-outstanding-natural-beauty' => '#0284c7',
                                'planning-application' => '#2563eb',
                                'local-plan-boundary' => '#4f46e5',
                                'developer-agreement' => '#7c3aed',
                                'community-infrastructure-levy-schedule' => '#9333ea',
                                'infrastructure-funding-statement' => '#db2777',
                                'design-code-area' => '#475569',
                            ];
                        @endphp
                        @foreach ($groupedEntities as $category => $entities)
                            <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-200 overflow-hidden">
                                <div class="px-6 py-5 border-b border-slate-200 bg-slate-50">
                                    <h2 class="text-xl font-bold text-slate-900">{{ $category }}</h2>
                                </div>

                                <ul class="divide-y divide-slate-200">
                                    @foreach ($entities as $entity)
                                        @php
                                            $datasetKey = $entity['dataset'] ?? 'unknown';
                                            $badgeClass =
                                                $badgeColors[$datasetKey] ??
                                                'bg-gray-100 text-gray-800 ring-gray-600/20';
                                            $readableDataset = ucwords(str_replace('-', ' ', $datasetKey));
                                        @endphp
                                        <li class="p-6 hover:bg-slate-50 transition duration-150">
                                            <div
                                                class="flex flex-col md:flex-row justify-between gap-4 cursor-pointer toggle-accordion select-none">
                                                <div class="flex-1">
                                                    <div class="flex items-center gap-2 mb-2">
                                                        <span
                                                            class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset {{ $badgeClass }}">
                                                            {{ $readableDataset }}
                                                        </span>
                                                        <span class="text-xs text-slate-500">Ref:
                                                            {{ $entity['reference'] ?? 'N/A' }}</span>
                                                    </div>

                                                    <h3 class="text-lg font-bold text-indigo-900 mb-1">
                                                        {{ $entity['name'] ?? 'Entity ' . $entity['entity'] }}
                                                    </h3>

                                                    @if (isset($entity['description']))
                                                        <p class="text-sm text-slate-600 mt-2 line-clamp-2">
                                                            {{ $entity['description'] }}</p>
                                                    @endif
                                                </div>

                                                <div
                                                    class="flex flex-col items-start md:items-end justify-center gap-2 min-w-[120px]">
                                                    <button type="button"
                                                        class="inline-flex items-center gap-1 text-sm font-semibold text-indigo-900 hover:text-indigo-700 bg-white ring-1 ring-slate-200 rounded-lg px-4 py-2 hover:bg-slate-50 transition accordion-btn">
                                                        View Details
                                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                                            fill="currentColor"
                                                            class="w-5 h-5 transition-transform duration-200 chevron-icon">
                                                            <path fill-rule="evenodd"
                                                                d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                                                                clip-rule="evenodd" />
                                                        </svg>
                                                    </button>
                                                </div>
                                            </div>

                                            <!-- Raw Data Accordion -->
                                            <div class="hidden accordion-content mt-6 pt-6 border-t border-slate-200">
                                                <dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
                                                    @foreach ($entity as $key => $value)
                                                        @if ($key === 'geometry')
                                                            <div class="sm:col-span-2 border-b border-slate-200 pb-4 mt-2">
                                                                <button type="button"
                                                                    onclick="openMapModal('{{ $entity['entity'] ?? '' }}')"
                                                                    class="inline-flex items-center gap-1.5 text-sm font-bold text-indigo-900 hover:text-indigo-700 hover:underline bg-indigo-50 px-4 py-2 rounded-lg ring-1 ring-inset ring-indigo-900/10 transition w-auto">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                                        viewBox="0 0 24 24" stroke-width="2"
                                                                        stroke="currentColor" class="w-4 h-4">
                                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                                            d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" />
                                                                    </svg>
                                                                    View
                                                                    {{ $entity['name'] ?? 'Entity ' . ($entity['entity'] ?? '') }}
                                                                    on a map
                                                                </button>
                                                            </div>
                                                        @elseif(is_array($value))
                                                            <div class="sm:col-span-2 border-b border-slate-200 pb-4">
                                                                <dt
                                                                    class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">
                                                                    {{ str_replace('_', ' ', $key) }}</dt>
                                                                <dd
                                                                    class="text-sm text-slate-900 bg-slate-50 p-3 rounded-lg overflow-auto">
                                                                    <pre class="font-mono text-xs text-slate-500">{{ json_encode($value, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
                                                                </dd>
                                                            </div>
                                                        @else
                                                            <div class="border-b border-slate-200 pb-4">
                                                                <dt
                                                                    class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">
                                                                    {{ str_replace('_', ' ', $key) }}</dt>
                                                                @if (in_array($key, ['documentation-url', 'site-plan-url', 'planning-permission-history']) && filter_var($value, FILTER_VALIDATE_URL))
                                                                    <dd class="text-sm font-medium break-words">
                                                                        <a href="{{ $value }}" target="_blank"
                                                                            rel="noopener noreferrer"
                                                                            class="text-indigo-600 hover:text-indigo-800 hover:underline inline-flex items-center gap-1">
                                                                            {{ $value }}
                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                fill="none" viewBox="0 0 24 24"
                                                                                stroke-width="2" stroke="currentColor"
                                                                                class="w-3.5 h-3.5">
                                                                                <path stroke-linecap="round"
                                                                                    stroke-linejoin="round"
                                                                                    d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
                                                                            </svg>
                                                                        </a>
                                                                    </dd>
                                                                @else
                                                                    <dd
                                                                        class="text-sm text-slate-900 font-medium break-words">
                                                                        {{ $value === '' || $value === null ? 'N/A' : $value }}
                                                                    </dd>
                                                                @endif
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </dl>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endforeach
                    </div>

                    <!-- Pagination logic -->
                    @if (isset($results['links']) && ($offset > 0 || isset($results['links']['next'])))
                        <div class="mt-8 flex flex-col sm:flex-row justify-between items-center gap-4 bg-white rounded-xl shadow-sm ring-1 ring-slate-200 px-6 py-5">
                            <div class="w-full sm:w-auto">
                                @if ($page > 1)
                                    <a href="{{ route('planning.postcode', ['postcode' => str_replace(' ', '+', $query), 'filter' => $activeFilter, 'page' => $page - 1]) }}"
                                        class="inline-flex w-full sm:w-auto justify-center items-center gap-2 rounded-xl bg-white px-5 py-2.5 text-sm font-bold text-indigo-900 border-2 border-indigo-900 hover:bg-indigo-50 transition shadow-sm">
                                        &laquo; Previous {{ $limit }}
                                    </a>
                                @endif
                            </div>
                            <div class="text-sm text-slate-500 font-medium text-center">
                                Showing {{ $offset + 1 }} - {{ $offset + count($results['entities']) }} of {{ number_format($results['count'] ?? count($results['entities'])) }}<br>
                                <span class="text-xs">Page {{ $page }}</span>
                            </div>
                            <div class="w-full sm:w-auto">
                                @if (isset($results['links']['next']))
                                    <a href="{{ route('planning.postcode', ['postcode' => str_replace(' ', '+', $query), 'filter' => $activeFilter, 'page' => $page + 1]) }}"
                                        class="inline-flex w-full sm:w-auto justify-center items-center gap-2 rounded-xl bg-indigo-900 px-5 py-2.5 text-sm font-bold text-white hover:bg-indigo-800 transition shadow-sm">
                                        Load Next {{ $limit }} &raquo;
                                    </a>
                                @endif
                            </div>
                        </div>
                    @endif
                @else
                    <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-200 p-12 text-center">
                        <svg class="mx-auto h-12 w-12 text-slate-400" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
                        </svg>
                        <h3 class="mt-2 text-sm font-semibold text-slate-900">No entities found</h3>
                        <p class="mt-1 text-sm text-slate-500">We couldn't find any planning constraints matching your search
                            criteria.</p>
                    </div>
                @endif
            </div>
        @endif
    </div>

    <!-- Map Modal -->
    <div id="map-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog"
        aria-modal="true">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
            <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" aria-hidden="true"
                onclick="closeMapModal()"></div>
            <div
                class="relative inline-block w-full max-w-4xl p-6 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl sm:my-8">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-extrabold text-slate-900" id="modal-title">Location Map</h3>
                    <button type="button" onclick="closeMapModal()" class="text-slate-400 hover:text-slate-500">
                        <span class="sr-only">Close</span>
                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                <div id="modal-map" class="w-full h-[500px] bg-slate-100 rounded-xl ring-1 ring-slate-200"></div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // --- Accordion Logic ---
                document.querySelectorAll('.toggle-accordion').forEach(header => {
                    header.addEventListener('click', () => {
                        const content = header.nextElementSibling;
                        const icon = header.querySelector('.chevron-icon');
                        content.classList.toggle('hidden');
                        if (content.classList.contains('hidden')) {
                            icon.style.transform = 'rotate(0deg)';
                        } else {
                            icon.style.transform = 'rotate(180deg)';
                        }
                    });
                });

                // Global JS variables for both master map and modal map
                const entities = @json($results['entities'] ?? []);
                const hexColors = @json($hexColors ?? []);

                // --- Master Map Logic ---
                const mapContainer = document.getElementById('master-map');
                if (mapContainer) {
                    // Initialize Leaflet map
                    const map = L.map('master-map');
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        maxZoom: 19,
                        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                    }).addTo(map);

                    const featureGroup = L.featureGroup().addTo(map);
                    let hasValidGeometry = false;

                    entities.forEach(entity => {
                        const geomString = entity.geometry || entity.point;
                        if (geomString && (geomString.includes('POLYGON') || geomString.includes('POINT') ||
                                geomString.includes('LINESTRING'))) {
                            try {
                                const wkt = new Wkt.Wkt();
                                wkt.read(geomString);

                                const dataset = entity.dataset || 'unknown';
                                const color = hexColors[dataset] || '#6b7280'; // fallback gray

                                const leafletObj = wkt.toObject({
                                    color: color,
                                    fillColor: color,
                                    fillOpacity: 0.2,
                                    weight: 2
                                });

                                const name = entity.name || `Entity ${entity.entity}`;
                                leafletObj.bindPopup(
                                    `<strong>${name}</strong><br><span style="color:${color}">${dataset}</span>`
                                    );

                                featureGroup.addLayer(leafletObj);
                                hasValidGeometry = true;
                            } catch (e) {
                                console.error("Error parsing WKT for entity " + entity.entity, e);
                            }
                        }
                    });

                    if (hasValidGeometry) {
                        map.fitBounds(featureGroup.getBounds());
                    } else {
                        // Default center if no geometry
                        map.setView([51.505, -0.09], 13);
                    }
                }

                // --- Modal Logic ---
                let modalMap = null;

                window.openMapModal = function(entityId) {
                    if (!entities) return;

                    // Allow string or number comparison
                    const entity = entities.find(e => e.entity == entityId);
                    if (!entity) return;

                    document.getElementById('map-modal').classList.remove('hidden');

                    if (!modalMap) {
                        modalMap = L.map('modal-map');
                        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                            maxZoom: 19,
                            attribution: '&copy; OpenStreetMap'
                        }).addTo(modalMap);
                    } else {
                        modalMap.eachLayer((layer) => {
                            if (layer instanceof L.Path || layer instanceof L.Marker) {
                                modalMap.removeLayer(layer);
                            }
                        });
                    }

                    // Need timeout for Leaflet to recalculate map size properly since it was hidden
                    setTimeout(() => {
                        modalMap.invalidateSize();

                        const geomString = entity.geometry || entity.point;
                        if (geomString && (geomString.includes('POLYGON') || geomString.includes('POINT') ||
                                geomString.includes('LINESTRING'))) {
                            try {
                                const wkt = new Wkt.Wkt();
                                wkt.read(geomString);

                                const dataset = entity.dataset || 'unknown';
                                const color = hexColors[dataset] || '#1D70B8';

                                const leafletObj = wkt.toObject({
                                    color: color,
                                    fillColor: color,
                                    fillOpacity: 0.2,
                                    weight: 2
                                });

                                leafletObj.addTo(modalMap);

                                if (leafletObj.getBounds) {
                                    modalMap.fitBounds(leafletObj.getBounds());
                                } else if (leafletObj.getLatLng) {
                                    modalMap.setView(leafletObj.getLatLng(), 16);
                                }
                            } catch (e) {
                                console.error("Error parsing modal WKT", e);
                            }
                        } else {
                            modalMap.setView([51.505, -0.09], 13);
                        }
                    }, 100);
                };

                window.closeMapModal = function() {
                    document.getElementById('map-modal').classList.add('hidden');
                };
            });
        </script>
    @endpush
@endsection