@extends('layouts.app')

@section('title', sistemAyar('sehir_adi', 'Sehir') . ' Hafiza Haritasi')

@section('styles')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
    <link rel="stylesheet" href="{{ asset('assets/css/harita.css') }}">
    <style>
        .harita-page {
            min-height: calc(100vh - 70px);
            background: #f8fafc;
            padding: 2rem clamp(1rem, 3vw, 2rem) 3rem;
        }

        .harita-header {
            max-width: 1200px;
            margin: 0 auto 1.25rem;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1rem;
        }

        .harita-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            color: #1e3a8a;
            background: #e0ecff;
            border: 1px solid #bfdbfe;
            border-radius: 999px;
            padding: 0.35rem 0.75rem;
            font-size: 0.82rem;
            font-weight: 800;
            margin-bottom: 0.85rem;
        }

        .harita-header h1 {
            margin: 0;
            color: #111827;
            font-size: clamp(2rem, 4vw, 3.35rem);
            line-height: 1.08;
            letter-spacing: 0;
            font-weight: 900;
        }

        .harita-header p {
            margin: 0.85rem 0 0;
            color: #475569;
            font-size: 1.03rem;
            max-width: 740px;
        }

        .harita-shell {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
            gap: 1rem;
            align-items: stretch;
        }

        .harita-panel,
        .harita-map-wrap {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
        }

        .harita-panel {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .harita-search label,
        .filter-title {
            display: block;
            color: #334155;
            font-size: 0.82rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 0.45rem;
        }

        .harita-search-input {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            min-height: 44px;
            padding: 0 0.75rem;
            border: 1px solid #cbd5e1;
            border-radius: 7px;
            background: #f8fafc;
        }

        .harita-search-input input {
            width: 100%;
            border: 0;
            outline: 0;
            background: transparent;
            color: #0f172a;
            font: inherit;
        }

        .harita-filters {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .harita-filters label {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            min-height: 38px;
            color: #1f2937;
            font-weight: 700;
        }

        .harita-filters label span {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
        }

        .harita-status {
            margin-top: auto;
            padding: 0.85rem;
            border-radius: 7px;
            background: #eff6ff;
            color: #1e3a8a;
            font-weight: 800;
        }

        .harita-map-wrap {
            position: relative;
            overflow: hidden;
            min-height: 620px;
        }

        .harita-map {
            width: 100%;
            min-height: 620px;
            height: min(72vh, 760px);
            background: #e5e7eb;
        }

        .harita-empty {
            position: absolute;
            inset: auto 1rem 1rem 1rem;
            z-index: 500;
            padding: 0.85rem 1rem;
            border-radius: 7px;
            background: #111827;
            color: #ffffff;
            font-weight: 800;
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);
        }

        @media (max-width: 900px) {
            .harita-shell {
                grid-template-columns: 1fr;
            }

            .harita-map-wrap,
            .harita-map {
                min-height: 520px;
            }
        }
    </style>
@endsection

@section('content')
@php
    $haritaSiteAdi = sistemAyar('site_adi', 'Sehir Hafiza');
    $haritaSehirAdi = sistemAyar('sehir_adi', 'Sehir');
    $haritaSehirSlug = sistemAyar('sehir_slug', 'sivas');
    $haritaAyarEnlem = sistemAyar('harita_merkez_enlem');
    $haritaAyarBoylam = sistemAyar('harita_merkez_boylam');
    $haritaZoom = (int) sistemAyar('harita_zoom', 12);
    $haritaMerkezler = [
        'sivas' => [39.7500, 37.0167],
        'kayseri' => [38.7205, 35.4826],
        'malatya' => [38.3552, 38.3095],
    ];
    $haritaVarsayilanMerkez = $haritaMerkezler[$haritaSehirSlug] ?? [39.7500, 37.0167];
    $haritaMerkez = is_numeric($haritaAyarEnlem) && is_numeric($haritaAyarBoylam)
        ? [(float) $haritaAyarEnlem, (float) $haritaAyarBoylam]
        : $haritaVarsayilanMerkez;
    $haritaZoom = $haritaZoom > 0 ? $haritaZoom : 12;
@endphp

<div class="harita-page">
    <div class="harita-header">
        <div>
            <span class="harita-eyebrow"><x-nav-icon name="map" /> {{ $haritaSiteAdi }}</span>
            <h1>{{ $haritaSehirAdi }} Hafiza Haritasi</h1>
            <p>Konum bilgisi bulunan mekan, fotograf, hatira ve etkinlikleri tek harita uzerinde kesfedin.</p>
        </div>
    </div>

    <div class="harita-shell">
        <aside class="harita-panel" aria-label="Harita filtreleri">
            <div class="harita-search">
                <label for="haritaSearch">Arama</label>
                <div class="harita-search-input">
                    <x-nav-icon name="default" />
                    <input id="haritaSearch" type="search" placeholder="Basliga gore ara..." autocomplete="off">
                </div>
            </div>

            <div class="harita-filters">
                <span class="filter-title">Icerik Turleri</span>
                <label><input type="checkbox" value="mekan" checked> <span><x-nav-icon name="brand" /> Mekanlar</span></label>
                <label><input type="checkbox" value="fotograf" checked> <span><x-nav-icon name="camera" /> Fotograflar</span></label>
                <label><input type="checkbox" value="fotograf360" checked> <span><x-nav-icon name="camera" /> 360 derece fotograflar</span></label>
                <label><input type="checkbox" value="hatira" checked> <span><x-nav-icon name="book" /> Hatiralar</span></label>
                <label><input type="checkbox" value="etkinlik" checked> <span><x-nav-icon name="archive" /> Etkinlikler</span></label>
            </div>

            <div class="harita-status">
                <strong id="haritaVisibleCount">0</strong>
                <span>kayit gosteriliyor</span>
            </div>
        </aside>

        <section class="harita-map-wrap">
            <div id="sehirHafizaMap" class="harita-map" aria-label="Sehir hafiza haritasi"></div>
            <div id="haritaEmpty" class="harita-empty" hidden>
                Haritada gosterilecek konumlu icerik bulunamadi.
            </div>
        </section>
    </div>
</div>

<script>
    window.HaritaConfig = {
        endpoint: @json(route('api.harita.icerikler')),
        center: @json($haritaMerkez),
        zoom: @json($haritaZoom)
    };
</script>
@endsection

@section('scripts')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
    <script src="{{ asset('assets/js/harita.js') }}"></script>
@endsection