{{--
  CALENDER NRES — Kalendar aktiviti (module content-calendar)
  ---------------------------------------------------------------------------
  Data SEBENAR:
    /widget/calendar  → module content-calendar
                        (ContentCalendar + ContentCalendarTranslation)
                        ?month=YYYY-MM
  Admin module: /portal-k7m4x9/content-calendar
--}}
<div class="container-xl">
    {{-- ── KALENDAR NRES ─────────────────────────────────────────────── --}}
    <section class="calendar-section mb-5" id="kalendar" data-calendar="{{ url('/widget/calendar') }}">
        <div class="section-heading">
            <div>
                <div class="section-kicker">PROGRAM &amp; AKTIVITI</div>
                <h2>Kalendar NRES</h2>
            </div>

            <div class="calendar-controls">
                <button id="previousMonth" type="button" aria-label="Bulan sebelumnya">‹</button>
                <strong id="calendarMonth">—</strong>
                <button id="nextMonth" type="button" aria-label="Bulan seterusnya">›</button>
            </div>
        </div>

        <div class="calendar-layout">
            <div class="calendar-box">
                <div class="calendar-week" aria-hidden="true">
                    <span>Isn</span><span>Sel</span><span>Rab</span><span>Kha</span><span>Jum</span><span>Sab</span><span>Ahd</span>
                </div>

                <div id="calendarDays" class="calendar-days"></div>

                <p class="small text-body-secondary mt-3 mb-0">
                    ● Tarikh beraktiviti &nbsp; · &nbsp; Pilih tarikh untuk butiran
                </p>
            </div>

            <div class="calendar-agenda">
                <h3 id="selectedDate">—</h3>
                <div id="dayEvents" aria-live="polite">
                    <p class="small text-body-secondary">Tiada aktiviti disenaraikan pada tarikh ini.</p>
                </div>

                <hr>

                <h3>Senarai aktiviti bulan ini</h3>
                <div id="monthEvents">
                    <p class="small text-body-secondary">Tiada aktiviti disenaraikan untuk bulan ini.</p>
                </div>
            </div>
        </div>
    </section>
</div>

<style>
    /* ── 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;
    }

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

    /* ── kawalan bulan ─────────────────────────────────────────────── */
    .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;
        }
    }

    /* ── grid hari ─────────────────────────────────────────────────── */
    .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;
    }

    /* ── agenda ────────────────────────────────────────────────────── */
    .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;
    }

</style>

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

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

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

        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 eventsOn(dateStr) {
            return calState.items.filter(function (it) {
                return dateStr >= it.date && dateStr <= (it.date_end || it.date);
            });
        }

        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 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();
            var offset = (first.getDay() + 6) % 7;   // Isnin = 0
            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 n = eventsOn(ds).length;

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

            box.innerHTML = html;
        }

        function selectDay(ds) {
            var btns = document.querySelectorAll('#calendarDays button');
            var i;

            for (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 p = ds.split('-');

            $('selectedDate').textContent = parseInt(p[2], 10) + ' ' +
                BULAN[parseInt(p[1], 10) - 1] + ' ' + p[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>';
        }

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

            calState.y = y;
            calState.m = m;
            $('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();

                    // Bulan semasa kosong → lompat ke bulan terdekat yang ada aktiviti
                    if (firstLoad && !calState.items.length && d && d.nearest) {
                        var p = String(d.nearest).split('-');
                        var ny = parseInt(p[0], 10);
                        var nm = parseInt(p[1], 10);

                        if (ny && nm && (ny !== y || nm !== m)) {
                            loadCalendar(ny, nm, false);
                        }
                    }
                })
                .catch(function () {
                    calState.items = [];
                    renderCalendar();
                    renderMonthList();
                });
        }

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

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

            $('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);
            });
        }

    })();
</script>