{{--
  WIDGET NRES — Dashboard: Cuaca · APIMS · Amaran · Statistik · Kalendar · Top 10
  ---------------------------------------------------------------------------
  Data SEBENAR (bukan demo):
    /widget/weather          → data.gov.my (MET Malaysia)
    /widget/air-quality      → APIMS · DOE (proksi, kerana CORS)
    /widget/weather-warning  → data.gov.my amaran cuaca
    /widget/visitor-stats    → visitor_page_views (statistik lawatan)
    /widget/calendar         → content_calendar
    /widget/popular          → visitor_page_views (top 10)
--}}
<div class="container-xl">
    <section class="environment-section mb-5" id="alam-sekitar"
        aria-label="Cuaca, kualiti udara dan statistik"
        data-weather="{{ url('/widget/weather') }}"
        data-air="{{ url('/widget/air-quality') }}"
        data-warning="{{ url('/widget/weather-warning') }}"
        data-stats="{{ url('/widget/visitor-stats') }}">

        <div class="weather-demo-label">
            Data langsung · MET Malaysia (cuaca) · JAS/DOE (IPU) · statistik lawatan laman
        </div>

        <div class="weather-dashboard">

            {{-- 1. CUACA --}}
            <article class="weather-tile">
                <h2>CUACA HARI INI — <span id="wxPlace">PUTRAJAYA</span></h2>
                <p class="weather-source">Sumber: MET Malaysia · data.gov.my</p>

                <div class="weather-reading">
                    <span class="storm-icon" id="wxIcon" aria-hidden="true">☀️</span>
                    <div>
                        <strong id="wxTemp">–</strong>
                        <span id="wxSummary">Memuatkan…</span>
                    </div>
                </div>

                <div class="weather-range" id="wxRange">H: – &nbsp; L: –</div>
                <p class="weather-updated" id="wxUpdated">Memuatkan data…</p>
            </article>

            {{-- 2. INDEKS PENCEMARAN UDARA --}}
            <article class="weather-tile">
                <h2>INDEKS PENCEMAR UDARA (APIMS)</h2>
                <p class="weather-source">Sumber: JAS · DOE (APIMS)</p>

                <div class="air-gauge">
                    <svg viewBox="0 0 220 120" aria-hidden="true">
                        <path d="M20 105a90 90 0 0 1 180 0" fill="none" stroke="#e5d039" stroke-width="14" />
                        <path d="M20 105a90 90 0 0 1 67-87" fill="none" stroke="#54a96a" stroke-width="14" />
                        <path d="M87 18a90 90 0 0 1 23-3" fill="none" stroke="#88b748" stroke-width="14" />
                        <line id="airNeedle" x1="110" y1="105" x2="110" y2="32" stroke="#14413a" stroke-width="3"
                            stroke-linecap="round" />
                        <circle cx="110" cy="105" r="6" fill="#14413a" />
                    </svg>

                    <div>
                        <strong id="airValue">–</strong>
                        <b id="airClass">Memuatkan…</b>
                    </div>
                </div>

                <p class="air-caption" id="airCaption">Memuatkan data IPU…</p>
                <p class="weather-updated" id="airUpdated">Stesen –</p>
            </article>

            {{-- 3. AMARAN CUACA / JEREBU --}}
            <article class="weather-tile">
                <h2>AMARAN CUACA / JEREBU SEMASA</h2>
                <p class="weather-source">Sumber: MET Malaysia · data.gov.my</p>

                <span class="warning-check" id="warnIcon" aria-hidden="true">✓</span>
                <h3 id="warnTitle">Memuatkan…</h3>
                <p class="warning-copy" id="warnText">Menyemak status amaran semasa…</p>
                <p class="weather-updated" id="warnUpdated"></p>
                <a class="warning-link" href="https://www.met.gov.my/" target="_blank" rel="noopener">Lihat Peta Amaran ›</a>
            </article>

            {{-- 4. STATISTIK LAWATAN --}}
            <article class="weather-tile">
                <h2>STATISTIK PERKHIDMATAN<br>ATAS TALIAN <span id="statYear">2026</span></h2>
                <p class="weather-source">Sumber: statistik lawatan laman</p>

                <strong class="transaction-total" id="statTotal">–</strong>
                <span class="transaction-label">Jumlah Lawatan Halaman</span>
                <p class="transaction-growth" id="statGrowth"></p>

                <div class="transaction-breakdown">
                    <div><span>Hari Ini</span><b id="statToday">–</b></div>
                    <div><span>Bulan Ini</span><b id="statMonth">–</b></div>
                    <div><span>Tahun Ini</span><b id="statYearTotal">–</b></div>
                </div>
            </article>

        </div>
    </section>
</div>

<style>
    /* ── label ─────────────────────────────────────────────────────── */
    .weather-demo-label {
        margin-bottom: 14px;
        padding: 9px 14px;
        border-radius: 10px;
        background: #eef7f8;
        color: #0c6a77;
        font-size: .78rem;
        font-weight: 600;
    }

    /* ── dashboard ─────────────────────────────────────────────────── */
    .weather-dashboard {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 16px;
    }

    .weather-tile {
        display: flex;
        flex-direction: column;
        padding: 18px 20px;
        border: 1px solid #dbe7e9;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 10px 26px rgba(16, 62, 56, .06);
    }

    .weather-tile h2 {
        margin: 0 0 4px;
        color: #14413a;
        font-size: .82rem;
        font-weight: 800;
        letter-spacing: .04em;
        line-height: 1.35;
        text-transform: uppercase;
    }

    .weather-source {
        margin: 0 0 14px;
        color: #8aa0a0;
        font-size: .72rem;
        font-weight: 600;
    }

    .weather-reading {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .storm-icon {
        font-size: 2.4rem;
        line-height: 1;
    }

    .weather-reading strong {
        display: block;
        color: #11808f;
        font-size: 1.9rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .weather-reading span {
        color: #5c6b6b;
        font-size: .84rem;
        font-weight: 600;
    }

    .weather-range {
        margin-top: 12px;
        padding: 8px 12px;
        border-radius: 10px;
        background: #f6fbfb;
        color: #24443f;
        font-size: .82rem;
        font-weight: 700;
    }

    .weather-updated {
        margin: auto 0 0;
        padding-top: 12px;
        color: #9aacab;
        font-size: .72rem;
    }

    /* ── tolok IPU ─────────────────────────────────────────────────── */
    .air-gauge {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .air-gauge svg {
        width: 132px;
        height: 74px;
        flex-shrink: 0;
    }

    .air-gauge strong {
        display: block;
        color: #14413a;
        font-size: 1.9rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .air-gauge b {
        color: #11808f;
        font-size: .84rem;
        font-weight: 700;
    }

    .air-caption {
        margin: 12px 0 0;
        color: #5c6b6b;
        font-size: .82rem;
    }

    /* ── amaran ────────────────────────────────────────────────────── */
    .warning-check {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #e6f6ec;
        color: #1f9d55;
        font-size: 1.4rem;
        font-weight: 800;
    }

    .warning-check.is-alert {
        background: #fdeaea;
        color: #d92d20;
    }

    .weather-tile h3 {
        margin: 12px 0 6px;
        color: #14413a;
        font-size: 1rem;
        font-weight: 800;
    }

    .warning-copy {
        margin: 0;
        color: #5c6b6b;
        font-size: .84rem;
        line-height: 1.5;
    }

    .warning-link {
        margin-top: 12px;
        color: #0c6a77;
        font-size: .82rem;
        font-weight: 700;
        text-decoration: none;
    }

    .warning-link:hover {
        text-decoration: underline;
    }

    /* ── statistik ─────────────────────────────────────────────────── */
    .transaction-total {
        display: block;
        color: #11808f;
        font-size: 1.9rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .transaction-label {
        color: #8aa0a0;
        font-size: .76rem;
        font-weight: 700;
    }

    .transaction-growth {
        margin: 10px 0 0;
        color: #5c6b6b;
        font-size: .82rem;
    }

    .transaction-growth b {
        color: #1f9d55;
    }

    .transaction-breakdown {
        display: grid;
        gap: 6px;
        margin-top: 14px;
    }

    .transaction-breakdown div {
        display: flex;
        justify-content: space-between;
        padding: 7px 10px;
        border-radius: 9px;
        background: #f6fbfb;
        font-size: .8rem;
    }

    .transaction-breakdown span {
        color: #4a6b66;
        font-weight: 600;
    }

    .transaction-breakdown b {
        color: #14413a;
        font-weight: 800;
    }

    /* ── tajuk seksyen ─────────────────────────────────────────────── */
    .section-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
    }

    .section-kicker {
        color: #11808f;
        font-size: .74rem;
        font-weight: 800;
        letter-spacing: .08em;
    }

    .section-heading h2 {
        margin: 4px 0 0;
        color: #14413a;
        font-size: 1.35rem;
        font-weight: 800;
    }

    /* ── kalendar ──────────────────────────────────────────────────── */
    .calendar-section,
    .popular-section {
        padding: 22px 24px;
        border: 1px solid #dbe7e9;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 10px 26px rgba(16, 62, 56, .06);
    }

    .calendar-controls {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .calendar-controls button {
        width: 34px;
        height: 34px;
        border: 1px solid #d9e6e7;
        border-radius: 10px;
        background: #f8fbfb;
        color: #14413a;
        font-size: 1.1rem;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
        transition: .18s;
    }

    .calendar-controls button:hover {
        border-color: #11808f;
        background: #eef7f8;
    }

    .calendar-controls strong {
        min-width: 150px;
        color: #14413a;
        font-size: .95rem;
        text-align: center;
    }

    .calendar-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: 22px;
    }

    @media (max-width: 768px) {
        .calendar-layout {
            grid-template-columns: 1fr;
        }
    }

    .calendar-week,
    .calendar-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 6px;
    }

    .calendar-week span {
        padding: 6px 0;
        color: #8aa0a0;
        font-size: .72rem;
        font-weight: 800;
        text-align: center;
        text-transform: uppercase;
    }

    .calendar-days button {
        position: relative;
        aspect-ratio: 1 / 1;
        border: 1px solid #eef4f5;
        border-radius: 10px;
        background: #fff;
        color: #24443f;
        font-size: .84rem;
        font-weight: 600;
        cursor: pointer;
        transition: .18s;
    }

    .calendar-days button:hover {
        border-color: #11808f;
        background: #eef7f8;
    }

    .calendar-days button.has-event {
        border-color: #11808f;
        background: #f2fbfb;
        font-weight: 800;
    }

    .calendar-days button.has-event::after {
        content: '';
        position: absolute;
        bottom: 6px;
        left: 50%;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #11808f;
        transform: translateX(-50%);
    }

    .calendar-days button.selected {
        border-color: #14413a;
        background: #14413a;
        color: #fff;
    }

    .calendar-days button.selected::after {
        background: #fff;
    }

    .calendar-days span {
        aspect-ratio: 1 / 1;
    }

    .calendar-agenda h3 {
        margin: 0 0 10px;
        color: #14413a;
        font-size: .98rem;
        font-weight: 800;
    }

    .calendar-agenda hr {
        margin: 18px 0;
        border: 0;
        border-top: 1px solid #eef4f5;
    }

    .cal-item {
        margin-bottom: 10px;
        padding: 11px 13px;
        border-left: 3px solid #11808f;
        border-radius: 0 10px 10px 0;
        background: #f8fbfb;
    }

    .cal-item b {
        display: block;
        color: #14413a;
        font-size: .86rem;
        font-weight: 800;
    }

    .cal-item span {
        display: block;
        margin-top: 3px;
        color: #7b8f8c;
        font-size: .76rem;
    }

    .cal-tag {
        display: inline-block;
        margin-top: 6px;
        padding: 2px 8px;
        border-radius: 999px;
        background: #e2f1f3;
        color: #0c6a77;
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .04em;
    }

    /* ── popular ───────────────────────────────────────────────────── */
    .top-badge {
        padding: 4px 12px;
        border-radius: 999px;
        background: #14413a;
        color: #fff;
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .06em;
    }

    .popular-list {
        display: grid;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: pop;
    }

    .popular-list li {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        border: 1px solid #eef4f5;
        border-radius: 11px;
        background: #fff;
        counter-increment: pop;
    }

    .popular-list li::before {
        content: counter(pop);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background: #eef7f8;
        color: #0c6a77;
        font-size: .76rem;
        font-weight: 800;
        flex-shrink: 0;
    }

    .popular-list li:nth-child(-n+3)::before {
        background: #11808f;
        color: #fff;
    }

    .popular-list a {
        flex: 1;
        color: #14413a;
        font-size: .86rem;
        font-weight: 700;
        text-decoration: none;
    }

    .popular-list a:hover {
        text-decoration: underline;
    }

    .popular-list em {
        color: #7b8f8c;
        font-size: .74rem;
        font-style: normal;
        font-weight: 700;
    }
</style>

<script>
    (function () {
        'use strict';

        var section = document.getElementById('alam-sekitar');

        if (!section) return;

        var API = {
            weather: section.dataset.weather,
            air: section.dataset.air,
            warning: section.dataset.warning,
            stats: section.dataset.stats
        };

        var LOC = 'Putrajaya';
        var $ = function (id) { return document.getElementById(id); };

        function fmt(n) {
            return (n === null || n === undefined || isNaN(n)) ? '–' : Number(n).toLocaleString('en-MY');
        }

        function icon(text) {
            var t = String(text || '').toLowerCase();

            if (t.indexOf('ribut') > -1 || t.indexOf('petir') > -1) return '⛈️';
            if (t.indexOf('hujan') > -1) return '🌧️';
            if (t.indexOf('mendung') > -1 || t.indexOf('awan') > -1) return '☁️';
            if (t.indexOf('jerebu') > -1) return '🌫️';

            return '☀️';
        }

        /* ── 1. CUACA ─────────────────────────────────────────────── */
        function loadWeather() {
            fetch(API.weather + '?location=' + encodeURIComponent(LOC))
                .then(function (r) { return r.json(); })
                .then(function (d) {
                    if (!d || !d.ok || !d.items || !d.items.length) throw new Error('no data');

                    var it = d.items[0];

                    $('wxPlace').textContent = (it.location || LOC).toUpperCase();
                    $('wxIcon').textContent = icon(it.summary);
                    $('wxTemp').textContent = (it.max_temp != null ? it.max_temp + '°C' : '–');
                    $('wxSummary').textContent = (it.summary || '–') + (it.summary_when ? ' ' + it.summary_when : '');
                    $('wxRange').innerHTML = 'H: ' + (it.max_temp != null ? it.max_temp + '°C' : '–') +
                        ' &nbsp; L: ' + (it.min_temp != null ? it.min_temp + '°C' : '–');
                    $('wxUpdated').textContent = 'Ramalan ' + (it.date || '') + ' · Pagi: ' + (it.morning || '–') +
                        ' · Petang: ' + (it.afternoon || '–') + ' · Malam: ' + (it.night || '–');
                })
                .catch(function () {
                    $('wxSummary').textContent = 'Data cuaca tidak tersedia';
                    $('wxUpdated').textContent = '';
                });
        }

        /* ── 2. INDEKS PENCEMARAN UDARA ───────────────────────────── */
        var AIR_CAPTION = {
            'Baik': 'Kualiti udara baik.',
            'Sederhana': 'Kualiti udara boleh diterima.',
            'Moderate': 'Kualiti udara boleh diterima.',
            'Tidak Sihat': 'Kualiti udara tidak sihat — kurangkan aktiviti luar.',
            'Unhealthy': 'Kualiti udara tidak sihat — kurangkan aktiviti luar.',
            'Sangat Tidak Sihat': 'Kualiti udara sangat tidak sihat — elakkan aktiviti luar.',
            'Very Unhealthy': 'Kualiti udara sangat tidak sihat — elakkan aktiviti luar.',
            'Berbahaya': 'Kualiti udara berbahaya — kekal di dalam rumah.',
            'Hazardous': 'Kualiti udara berbahaya — kekal di dalam rumah.'
        };

        function loadAir() {
            fetch(API.air)
                .then(function (r) { return r.json(); })
                .then(function (d) {
                    if (!d || !d.ok) throw new Error('no data');

                    var val = d.api != null ? d.api : 0;

                    $('airValue').textContent = d.api != null ? d.api : '–';
                    $('airClass').textContent = d.category || '–';
                    $('airCaption').textContent = AIR_CAPTION[d.category] || 'Status kualiti udara semasa.';
                    $('airUpdated').textContent = 'Stesen ' + (d.station_id || '–') + ' · ' +
                        (d.location || '') + (d.date_time ? ' · ' + String(d.date_time).replace('T', ' ') : '');

                    var pct = Math.max(0, Math.min(val, 300)) / 300;
                    var deg = -90 + (pct * 180);
                    var rad = (deg - 90) * Math.PI / 180;
                    var len = 72;

                    $('airNeedle').setAttribute('x2', (110 + (len * Math.cos(rad))).toFixed(1));
                    $('airNeedle').setAttribute('y2', (105 + (len * Math.sin(rad))).toFixed(1));
                })
                .catch(function () {
                    $('airClass').textContent = 'Tidak tersedia';
                    $('airCaption').textContent = 'Data IPU tidak tersedia buat masa ini.';
                });
        }

        /* ── 3. AMARAN CUACA ──────────────────────────────────────── */
        function loadWarning() {
            fetch(API.warning)
                .then(function (r) { return r.json(); })
                .then(function (d) {
                    if (!d || !d.ok) throw new Error('no data');

                    var title = d.title || 'Tiada Nasihat';
                    var calm = /tiada/i.test(title);

                    $('warnTitle').textContent = title;
                    $('warnIcon').textContent = calm ? '✓' : '!';
                    $('warnIcon').classList.toggle('is-alert', !calm);
                    $('warnText').textContent = calm
                        ? 'Keadaan cuaca dan jerebu adalah normal di seluruh negara.'
                        : String(d.text || '').replace(/SEKSYEN[^:]*:/g, '').substring(0, 260);
                    $('warnUpdated').textContent = d.issued
                        ? 'Dikeluarkan ' + String(d.issued).replace('T', ' ')
                        : 'Status semasa';
                })
                .catch(function () {
                    $('warnTitle').textContent = 'Tidak dapat disemak';
                    $('warnText').textContent = 'Maklumat amaran tidak tersedia buat masa ini.';
                });
        }

        /* ── 4. STATISTIK LAWATAN ─────────────────────────────────── */
        function loadStats() {
            fetch(API.stats)
                .then(function (r) { return r.json(); })
                .then(function (d) {
                    if (!d || !d.ok) throw new Error('no data');

                    $('statYear').textContent = d.year_label || '';
                    $('statTotal').textContent = fmt(d.total);
                    $('statToday').textContent = fmt(d.today);
                    $('statMonth').textContent = fmt(d.month);
                    $('statYearTotal').textContent = fmt(d.year);

                    if (d.growth !== null && d.growth !== undefined) {
                        var up = d.growth >= 0;

                        $('statGrowth').innerHTML = '<b>' + (up ? '▲' : '▼') + ' ' +
                            Math.abs(d.growth) + '%</b> berbanding ' + (d.year_label - 1);
                    } else {
                        $('statGrowth').innerHTML = '<b>' + fmt(d.visitors) + '</b> pelawat unik';
                    }
                })
                .catch(function () {
                    $('statTotal').textContent = '–';
                    $('statGrowth').textContent = 'Statistik tidak tersedia';
                });
        }

        /* ── 5. KALENDAR ──────────────────────────────────────────── */
        var calSec = document.getElementById('kalendar');
        var calUrl = calSec ? calSec.dataset.calendar : null;
        var calState = { y: null, m: null, items: [], selected: null };

        var BULAN = ['Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun', 'Julai', 'Ogos', 'September', 'Oktober', 'November', 'Disember'];

        function pad(n) { return (n < 10 ? '0' : '') + n; }

        function iso(y, m, d) { return y + '-' + pad(m) + '-' + pad(d); }

        function loadCalendar(y, m) {
            if (!calUrl) return;

            calState.y = y;
            calState.m = m;
            calState.selected = null;

            $('calendarMonth').textContent = BULAN[m - 1] + ' ' + y;

            fetch(calUrl + '?month=' + y + '-' + pad(m))
                .then(function (r) { return r.json(); })
                .then(function (d) {
                    calState.items = (d && d.items) ? d.items : [];
                    renderCalendar();
                    renderMonthList();
                })
                .catch(function () {
                    calState.items = [];
                    renderCalendar();
                    renderMonthList();
                });
        }

        function eventsOn(dateStr) {
            return calState.items.filter(function (it) {
                var s = it.date;
                var e = it.date_end || it.date;

                return dateStr >= s && dateStr <= e;
            });
        }

        function renderCalendar() {
            var box = $('calendarDays');

            if (!box) return;

            var first = new Date(calState.y, calState.m - 1, 1);
            var days = new Date(calState.y, calState.m, 0).getDate();

            // Isnin = 0
            var offset = (first.getDay() + 6) % 7;
            var html = '';
            var i;

            for (i = 0; i < offset; i++) {
                html += '<span></span>';
            }

            for (i = 1; i <= days; i++) {
                var ds = iso(calState.y, calState.m, i);
                var ev = eventsOn(ds);

                html += '<button type="button" data-date="' + ds + '" aria-label="' + i + ' ' +
                    BULAN[calState.m - 1] + ' ' + calState.y + '; ' + ev.length + ' aktiviti"' +
                    (ev.length ? ' class="has-event"' : '') + '>' + i + '</button>';
            }

            box.innerHTML = html;
        }

        function calItemHtml(it) {
            return '<div class="cal-item"><b>' + (it.title || '(tanpa tajuk)') + '</b>' +
                '<span>' + (it.time || '') + (it.location ? ' · ' + it.location : '') + '</span>' +
                (it.category ? '<span class="cal-tag">' + it.category + '</span>' : '') +
                '</div>';
        }

        function selectDay(ds) {
            calState.selected = ds;

            var btns = document.querySelectorAll('#calendarDays button');

            for (var i = 0; i < btns.length; i++) {
                var on = btns[i].dataset.date === ds;

                btns[i].classList.toggle('selected', on);
                btns[i].setAttribute('aria-pressed', on ? 'true' : 'false');
            }

            var parts = ds.split('-');
            $('selectedDate').textContent = parseInt(parts[2], 10) + ' ' + BULAN[parseInt(parts[1], 10) - 1] + ' ' + parts[0];

            var ev = eventsOn(ds);

            $('dayEvents').innerHTML = ev.length
                ? ev.map(calItemHtml).join('')
                : '<p class="small text-body-secondary">Tiada aktiviti disenaraikan pada tarikh ini.</p>';
        }

        function renderMonthList() {
            $('monthEvents').innerHTML = calState.items.length
                ? calState.items.map(calItemHtml).join('')
                : '<p class="small text-body-secondary">Tiada aktiviti disenaraikan untuk bulan ini.</p>';
        }

        if (calSec && calUrl) {
            var now = new Date();

            loadCalendar(now.getFullYear(), now.getMonth() + 1);

            $('previousMonth').addEventListener('click', function () {
                var m = calState.m - 1;
                var y = calState.y;

                if (m < 1) { m = 12; y--; }

                loadCalendar(y, m);
            });

            $('nextMonth').addEventListener('click', function () {
                var m = calState.m + 1;
                var y = calState.y;

                if (m > 12) { m = 1; y++; }

                loadCalendar(y, m);
            });

            $('calendarDays').addEventListener('click', function (e) {
                var b = e.target.closest('button[data-date]');

                if (b) selectDay(b.dataset.date);
            });
        }

        /* ── 6. 10 HALAMAN PALING POPULAR ─────────────────────────── */
        var popSec = document.getElementById('statistik');

        function loadPopular() {
            if (!popSec) return;

            fetch(popSec.dataset.popular + '?limit=10')
                .then(function (r) { return r.json(); })
                .then(function (d) {
                    var list = $('popularPages');
                    var empty = $('popularEmpty');

                    if (!d || !d.ok || !d.items || !d.items.length) {
                        if (empty) empty.hidden = false;

                        return;
                    }

                    if (empty) empty.hidden = true;

                    list.innerHTML = d.items.map(function (it) {
                        return '<li><a href="' + it.path + '">' + it.path + '</a>' +
                            '<em>' + fmt(it.total) + ' lawatan · ' + fmt(it.visitors) + ' pelawat</em></li>';
                    }).join('');
                })
                .catch(function () {
                    var empty = $('popularEmpty');

                    if (empty) empty.hidden = false;
                });
        }

        /* ── INIT ─────────────────────────────────────────────────── */
        loadWeather();
        loadAir();
        loadWarning();
        loadStats();
        loadPopular();
    })();
</script>