@php
    $mapScopeLabel = trim((string) data_get($mapScope, 'label', 'Kota'));
    $mapScopeName = trim((string) data_get($mapScope, 'name', 'Tomohon'));
    $mapScopeDisplay = $mapScopeName !== '' ? $mapScopeName : $mapScopeLabel;

    if ($mapScopeLabel !== '' && $mapScopeName !== '') {
        $normalizedMapScopeLabel = mb_strtoupper($mapScopeLabel);
        $normalizedMapScopeName = mb_strtoupper($mapScopeName);

        if (! \Illuminate\Support\Str::startsWith($normalizedMapScopeName, $normalizedMapScopeLabel . ' ')) {
            $mapScopeDisplay = trim($mapScopeLabel . ' ' . $mapScopeName);
        }
    }

    $territoryCards = [
        ['label' => 'Kecamatan', 'value' => number_format((int) data_get($territory, 'child_counts.districts', 0))],
        ['label' => 'Kelurahan', 'value' => number_format((int) data_get($territory, 'child_counts.villages', 0))],
        ['label' => 'Lingkungan', 'value' => number_format((int) data_get($territory, 'child_counts.lingkungans', 0))],
        ['label' => 'Luas Area', 'value' => data_get($territory, 'luas_area_km2') !== null ? number_format((float) data_get($territory, 'luas_area_km2'), 2, ',', '.') . ' km2' : 'Belum diisi'],
    ];

    $populationCards = [
        ['label' => 'Total Penduduk', 'value' => number_format((int) data_get($population, 'total_penduduk', 0))],
        ['label' => 'Jumlah KK', 'value' => number_format((int) data_get($population, 'jumlah_kk', 0))],
        ['label' => 'Masuk DPT', 'value' => number_format((int) data_get($population, 'status_dpt', 0))],
        ['label' => 'Disabilitas', 'value' => number_format((int) data_get($population, 'status_disabilitas', 0))],
    ];

    $economyCards = [
        ['label' => 'UMP', 'value' => data_get($economy, 'ump_value') !== null ? 'Rp ' . number_format((float) data_get($economy, 'ump_value'), 0, ',', '.') : 'Belum diisi'],
        ['label' => 'UMK', 'value' => data_get($economy, 'umk_value') !== null ? 'Rp ' . number_format((float) data_get($economy, 'umk_value'), 0, ',', '.') : 'Belum diisi'],
        ['label' => 'TPT', 'value' => data_get($economy, 'tpt_percent') !== null ? number_format((float) data_get($economy, 'tpt_percent'), 2, ',', '.') . '%' : 'Belum diisi'],
        ['label' => 'Inflasi', 'value' => data_get($economy, 'inflation_percent') !== null ? number_format((float) data_get($economy, 'inflation_percent'), 2, ',', '.') . '%' : 'Belum diisi'],
        ['label' => 'Kemiskinan', 'value' => data_get($economy, 'poverty_percent') !== null ? number_format((float) data_get($economy, 'poverty_percent'), 2, ',', '.') . '%' : 'Belum diisi'],
        ['label' => 'Gini Ratio', 'value' => data_get($economy, 'gini_ratio') !== null ? number_format((float) data_get($economy, 'gini_ratio'), 3, ',', '.') : 'Belum diisi'],
    ];
@endphp

<div class="executive-portal">
    <section class="executive-portal__hero">
        <div class="executive-portal__hero-copy">
            <span class="executive-kicker">Portal Eksekutif</span>
            <h1>Dashboard Eksekutif Tomohon</h1>
            <p>
                Ringkasan strategis Kota Tomohon untuk membantu Wali Kota dan Wakil Wali Kota 
				memantau kondisi wilayah, kependudukan, perekonomian, layanan publik, aset, dan kinerja perangkat daerah.
            </p>
            <div class="executive-portal__meta">
                <span>Snapshot {{ \Illuminate\Support\Carbon::parse($filters['date'])->format('d M Y') }}</span>
                <span id="executiveScopeMeta">{{ $mapScopeDisplay }}</span>
                <span>{{ $latestGeneratedLabel }}</span>
            </div>
            <div class="executive-portal__actions">
                <a href="{{ route('admin.smart_city.analytics') }}" class="executive-secondary-btn">
                    Pindah Dashboard
                </a>
                <a href="{{ route('admin.smart_city.command_center') }}" class="executive-secondary-btn executive-secondary-btn--ghost">
                    Command Center
                </a>
            </div>
            <div class="executive-portal__hero-nav">
                @foreach ($heroSections as $section)
                    <a href="{{ $section['anchor'] }}">{{ $section['label'] }}</a>
                @endforeach
            </div>
        </div>

        <div class="executive-portal__hero-side">
            <form method="GET" class="executive-filter-panel">
                <div class="executive-filter-field">
                    <label for="executive-date">Tanggal</label>
                    <input id="executive-date" type="date" class="form-control" name="date" value="{{ $filters['date'] }}">
                </div>
                <div class="executive-filter-field">
                    <label for="executive-scope">Scope</label>
                    <select id="executive-scope" class="form-select" name="scope">
                        @foreach (\App\Models\SmartCity\KpiSnapshot::SCOPES as $scopeKey => $scopeLabel)
                            <option value="{{ $scopeKey }}" @selected($filters['scope'] === $scopeKey)>{{ $scopeLabel }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="executive-filter-field executive-filter-field--wide">
                    <label for="executive-organization">OPD</label>
                    <select id="executive-organization" class="form-select" name="organization_id">
                        <option value="">Seluruh Kota Tomohon</option>
                        @foreach ($organizations as $organization)
                            <option value="{{ $organization->id }}" @selected((string) $filters['organization_id'] === (string) $organization->id)>
                                {{ $organization->short_name ?: $organization->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="btn executive-primary-btn">Perbarui Data</button>
            </form>

            <div class="executive-hero-metrics">
                @foreach ($executiveCards as $card)
                    <article class="executive-hero-metric executive-tone-{{ $card['accent'] }}">
                        <span>{{ $card['title'] }}</span>
                        <strong>{{ $card['value'] }}</strong>
                        <small>{{ $card['description'] }}</small>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <section class="executive-section" id="ringkasan-kota">
        <div class="executive-section__header">
            <div>
                <span class="executive-kicker">Ringkasan Wilayah</span>
                <h2>Ringkasan Wilayah Kota</h2>
            </div>
            <p>Data utama ditarik dari sumber spasial dan indikator kota yang sama, lalu disajikan ulang dalam format ringkas untuk kebutuhan pimpinan.</p>
        </div>

        <div class="executive-map-layout">
            <article class="executive-panel executive-panel--hero">
                <div class="executive-panel__topline">
                    <span class="executive-panel__badge">Peta Utama Kota</span>
                    <strong id="executiveMapScopeStrong">{{ $mapScopeDisplay }}</strong>
                </div>
                <div class="executive-map-panel">
                    <div class="executive-map-panel__header">
                        <div>
                            <span class="executive-kicker executive-kicker--dark">Peta Administratif dan Cakupan Wilayah</span>
                            <h3 id="executiveMapHeading">Peta Kota Tomohon</h3>
                        </div>
                        <span id="executiveMapInteractionHint" class="executive-panel__inline">Klik wilayah untuk melihat detail</span>
                    </div>
                    <div id="executiveMapBreadcrumbs" class="executive-map-breadcrumbs"></div>
                    <div id="executiveTerritoryMap" class="executive-map-panel__canvas"></div>
                </div>
                <div id="executiveTerritoryCards" class="executive-map-stats">
                    @foreach ($territoryCards as $card)
                        <div class="executive-map-stat">
                            <span>{{ $card['label'] }}</span>
                            <strong>{{ $card['value'] }}</strong>
                        </div>
                    @endforeach
                </div>
                <div id="executiveMapNote" class="executive-map-note">
                    <strong>{{ data_get($territory, 'julukan') ?: 'Konteks wilayah aktif' }}</strong>
                    <p>{{ data_get($territory, 'highlight_fact') ?: 'Belum ada sorotan wilayah manual yang diisikan.' }}</p>
                </div>
            </article>

            <article class="executive-panel">
                <div class="executive-panel__head">
                    <div>
                        <span class="executive-kicker">Profil Strategis Wilayah</span>
                        <h3>Identitas dan Batas Wilayah</h3>
                    </div>
                    <span id="executiveTerritoryScopeInline" class="executive-panel__inline">{{ data_get($mapScope, 'name', 'Tomohon') }}</span>
                </div>
                <div id="executiveTerritoryInfoList" class="executive-info-list">
                    <div><span>Motto</span><strong>{{ data_get($territory, 'motto') ?: 'Belum diisi' }}</strong></div>
                    <div><span>Julukan</span><strong>{{ data_get($territory, 'julukan') ?: 'Belum diisi' }}</strong></div>
                    <div><span>Koordinat</span><strong>{{ data_get($territory, 'koordinat_label') ?: 'Belum diisi' }}</strong></div>
                    <div><span>Ketinggian</span><strong>{{ (data_get($territory, 'ketinggian_min_mdpl') !== null || data_get($territory, 'ketinggian_max_mdpl') !== null) ? number_format((float) data_get($territory, 'ketinggian_min_mdpl', 0), 0, ',', '.') . ' - ' . number_format((float) data_get($territory, 'ketinggian_max_mdpl', 0), 0, ',', '.') . ' mdpl' : 'Belum diisi' }}</strong></div>
                </div>
                <div class="executive-divider"></div>
                <div id="executiveTerritoryBoundaryGrid" class="executive-boundary-grid">
                    @foreach (['Utara' => 'utara', 'Timur' => 'timur', 'Selatan' => 'selatan', 'Barat' => 'barat'] as $label => $key)
                        <div><span>{{ $label }}</span><strong>{{ data_get($territory, "batas.$key") ?: 'Belum diisi' }}</strong></div>
                    @endforeach
                </div>
            </article>
        </div>
    </section>

    <section class="executive-section" id="kependudukan-kota">
        <div class="executive-section__header">
            <div>
                <span class="executive-kicker">Ringkasan Kependudukan</span>
                <h2>Data Kependudukan Kota</h2>
            </div>
            <p>Tampilan kependudukan dirancang singkat, jelas, dan langsung menonjolkan indikator yang relevan bagi pimpinan daerah.</p>
        </div>

        <div id="executivePopulationCards" class="executive-stat-grid">
            @foreach ($populationCards as $card)
                <article class="executive-stat-card">
                    <span>{{ $card['label'] }}</span>
                    <strong>{{ $card['value'] }}</strong>
                </article>
            @endforeach
        </div>

        <div class="executive-data-grid">
            <article class="executive-panel">
                <div class="executive-panel__head"><div><span class="executive-kicker">Struktur Umur</span><h3>Kelompok Usia Utama</h3></div></div>
                <div id="executiveAgeGroupGrid" class="executive-mini-stat-grid">
                    <div><span>Anak</span><strong>{{ number_format((int) data_get($population, 'age_groups.anak', 0)) }}</strong></div>
                    <div><span>Produktif</span><strong>{{ number_format((int) data_get($population, 'age_groups.produktif', 0)) }}</strong></div>
                    <div><span>Lansia</span><strong>{{ number_format((int) data_get($population, 'age_groups.lansia', 0)) }}</strong></div>
                    <div><span>Sex Ratio</span><strong>{{ data_get($population, 'sex_ratio') !== null ? number_format((float) data_get($population, 'sex_ratio'), 1, ',', '.') : 'Belum ada' }}</strong></div>
                </div>
            </article>

            <article class="executive-panel">
                <div class="executive-panel__head"><div><span class="executive-kicker">Komposisi Agama</span><h3>Komposisi Kepercayaan</h3></div></div>
                <div id="executiveReligionList" class="executive-ranked-list">
                    @forelse (collect(data_get($population, 'religion_breakdown', []))->take(5) as $item)
                        <div><span>{{ $item['name'] }}</span><strong>{{ number_format((int) $item['total']) }} jiwa</strong><small>{{ number_format((float) $item['percentage'], 1, ',', '.') }}%</small></div>
                    @empty
                        <div class="executive-empty-state">Komposisi agama belum tersedia.</div>
                    @endforelse
                </div>
            </article>

            <article class="executive-panel">
                <div class="executive-panel__head"><div><span class="executive-kicker">Mata Pencaharian Utama</span><h3>Profil Aktivitas Ekonomi Penduduk</h3></div></div>
                <div id="executiveOccupationList" class="executive-ranked-list">
                    @forelse (collect(data_get($population, 'occupation_breakdown', []))->take(5) as $item)
                        <div><span>{{ $item['name'] }}</span><strong>{{ number_format((int) $item['total']) }} orang</strong><small>{{ number_format((float) $item['percentage'], 1, ',', '.') }}%</small></div>
                    @empty
                        <div class="executive-empty-state">Data profesi belum tersedia.</div>
                    @endforelse
                </div>
            </article>
        </div>
    </section>

    <section class="executive-section" id="perekonomian-kota">
        <div class="executive-section__header">
            <div><span class="executive-kicker">Perekonomian Wilayah</span><h2>Indikator Ekonomi Kota</h2></div>
            <p>Indikator ekonomi disajikan untuk memberi gambaran cepat mengenai kondisi sosial-ekonomi kota tanpa detail teknis operasional.</p>
        </div>

        <div id="executiveEconomyCards" class="executive-stat-grid executive-stat-grid--economy">
            @foreach ($economyCards as $card)
                <article class="executive-stat-card executive-stat-card--light">
                    <span>{{ $card['label'] }}</span>
                    <strong>{{ $card['value'] }}</strong>
                </article>
            @endforeach
        </div>

        <div class="executive-data-grid executive-data-grid--economy">
            <article class="executive-panel">
                <div class="executive-panel__head"><div><span class="executive-kicker">Pertumbuhan</span><h3>Arah Perkembangan Ekonomi</h3></div><span id="executiveEconomyReferenceYear" class="executive-panel__inline">{{ data_get($economy, 'data_reference_year') ?: 'Tahun belum diisi' }}</span></div>
                <div id="executiveGrowthGrid" class="executive-mini-stat-grid">
                    <div><span>Tahun Berjalan</span><strong>{{ data_get($economy, 'economic_growth_percent') !== null ? number_format((float) data_get($economy, 'economic_growth_percent'), 2, ',', '.') . '%' : 'Belum diisi' }}</strong></div>
                    <div><span>Tahun Sebelumnya</span><strong>{{ data_get($economy, 'economic_growth_previous_percent') !== null ? number_format((float) data_get($economy, 'economic_growth_previous_percent'), 2, ',', '.') . '%' : 'Belum diisi' }}</strong></div>
                    <div><span>Delta</span><strong>{{ data_get($economy, 'economic_growth_delta') !== null ? number_format((float) data_get($economy, 'economic_growth_delta'), 2, ',', '.') . '%' : 'Belum diisi' }}</strong></div>
                    <div><span>PDRB</span><strong>{{ data_get($economy, 'pdrb_value') !== null ? 'Rp ' . number_format((float) data_get($economy, 'pdrb_value'), 0, ',', '.') : 'Belum diisi' }}</strong></div>
                </div>
            </article>

            <article class="executive-panel">
                <div class="executive-panel__head"><div><span class="executive-kicker">Sektor Kunci</span><h3>Penggerak Utama</h3></div></div>
                <div id="executiveSectorCloud" class="executive-chip-cloud">
                    @forelse (collect(data_get($economy, 'sektor_utama', []))->filter() as $sector)
                        <span>{{ $sector }}</span>
                    @empty
                        <div class="executive-empty-state">Sektor utama belum diisi pada profil wilayah.</div>
                    @endforelse
                </div>
            </article>
        </div>
    </section>

    <section class="executive-section" id="prioritas-harian">
        <div class="executive-section__header">
            <div><span class="executive-kicker">Prioritas Pimpinan Hari Ini</span><h2>Prioritas yang Perlu Dicermati</h2></div>
            <p>Empat indikator ringkas yang membantu pimpinan membaca tekanan, urgensi, dan perhatian utama kota saat ini.</p>
        </div>

        <div class="executive-priority-grid">
            @foreach ($executivePrioritySignals as $signal)
                <article class="executive-priority-card executive-tone-{{ $signal['tone'] }}">
                    <span>{{ $signal['title'] }}</span>
                    <strong>{{ $signal['value'] }}</strong>
                    <p>{{ $signal['description'] }}</p>
                </article>
            @endforeach
        </div>
    </section>

    <section class="executive-section" id="pulse-kota">
        <div class="executive-section__header">
            <div><span class="executive-kicker">Denyut Operasional Kota</span><h2>Bidang Operasional Utama</h2></div>
            <p>Bagian ini menampilkan area operasional yang paling relevan bagi pengambilan keputusan pimpinan, tanpa membawa masuk ke detail kerja administratif.</p>
        </div>

        <div class="executive-board-grid">
            @foreach ($executiveOperationalBoards as $board)
                <article class="executive-panel executive-board executive-tone-{{ $board['accent'] }}">
                    <div class="executive-panel__head">
                        <div><span class="executive-kicker">{{ $board['title'] }}</span><h3>{{ $board['title'] }}</h3></div>
                    </div>
                    <p class="executive-panel__lead">{{ $board['description'] }}</p>
                    <div class="executive-mini-stat-grid">
                        @foreach ($board['metrics'] as $metric)
                            <div><span>{{ $metric['label'] }}</span><strong>{{ $metric['value'] }}</strong></div>
                        @endforeach
                    </div>
                </article>
            @endforeach
        </div>
    </section>

    <section class="executive-section" id="kesiapan-sistem">
        <div class="executive-section__header">
            <div><span class="executive-kicker">Kesiapan Sistem dan Data</span><h2>Status Pembaruan dan Kesiapan</h2></div>
            <p>Informasi kesiapan sistem tetap ditampilkan sebagai lapisan pendukung, sementara fokus utama tetap berada pada kondisi wilayah dan operasional kota.</p>
        </div>

        <div class="executive-data-grid">
            <article class="executive-panel">
                <div class="executive-panel__head"><div><span class="executive-kicker">Ringkasan KPI</span><h3>Terbaru</h3></div></div>
                <div class="executive-ranked-list">
                    @forelse ($executiveSnapshotHighlights as $snapshot)
                        <div><span>{{ $snapshot['name'] ?: $snapshot['code'] }}</span><strong>{{ $snapshot['value_label'] }}</strong><small>{{ $snapshot['updated_at'] ?: 'Belum ada waktu update' }}</small></div>
                    @empty
                        <div class="executive-empty-state">Snapshot KPI belum tersedia untuk filter aktif.</div>
                    @endforelse
                </div>
            </article>

            <article class="executive-panel">
                <div class="executive-panel__head"><div><span class="executive-kicker">Kesiapan Modul</span><h3>Status Kesiapan Implementasi</h3></div></div>
                <div class="executive-readiness-list">
                    @foreach ($executiveReadiness as $item)
                        <div><span>{{ $item['label'] }}</span><strong class="{{ $item['ready'] ? 'is-ready' : 'is-pending' }}">{{ $item['ready'] ? 'Siap' : 'Belum' }}</strong></div>
                    @endforeach
                </div>
            </article>
        </div>
    </section>
</div>