@extends('layouts.master-mahasiswa')
@section('title')
    Dashboard Mahasiswa
@endsection
@section('page-title')
    Dashboard Mahasiswa
@endsection
@section('content')
            @php($jumlahSudah = $kegiatanHariIni->where('sudah_presensi', true)->count())
            <div class="card bg-primary bg-gradient text-white border-0 shadow-sm mb-3">
                <div class="card-body">
                    <div class="d-flex align-items-center gap-3">
                        <div class="avatar-md flex-shrink-0">
                            <div class="avatar-title rounded-circle bg-white bg-opacity-25 text-white fw-bold font-size-22">
                                {{ mb_strtoupper(mb_substr($mahasiswa->nama, 0, 1)) }}
                            </div>
                        </div>
                        <div>
                            <h5 class="text-white mb-0">{{ $mahasiswa->nama }}</h5>
                            <div class="text-white-50 small">NIM {{ $mahasiswa->nim }}</div>
                            <div class="text-white-50 small">{{ $mahasiswa->prodi ?? '-' }} &middot; Kelas {{ $mahasiswa->kelas ?? '-' }}</div>
                        </div>
                    </div>
                    <div class="row text-center g-2 mt-2">
                        <div class="col-4">
                            <div class="bg-white bg-opacity-10 rounded-3 py-2">
                                <div class="fs-5 fw-bold">{{ $kegiatanHariIni->count() }}</div>
                                <div class="small text-white-50">Hari ini</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="bg-white bg-opacity-10 rounded-3 py-2">
                                <div class="fs-5 fw-bold">{{ $jumlahSudah }}</div>
                                <div class="small text-white-50">Sudah presensi</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="bg-white bg-opacity-10 rounded-3 py-2">
                                <div class="fs-5 fw-bold">{{ $kegiatanAkanDatang->count() }}</div>
                                <div class="small text-white-50">Akan datang</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if ($mahasiswa->perangkat_ditolak_at)
                <div class="alert alert-warning d-flex align-items-start gap-2">
                    <i class="bx bx-shield-alt fs-4 flex-shrink-0"></i>
                    <div>
                        <strong>Ada percobaan login/presensi dari perangkat lain</strong> pada
                        {{ $mahasiswa->perangkat_ditolak_at->tglIndo(true) }} WIB, dan ditolak sistem karena
                        bukan perangkat terdaftar Anda.
                        <div class="small mt-1">
                            Kalau itu memang perangkat Anda sendiri (mis. ganti HP), abaikan pesan ini dan
                            hubungi admin untuk mereset perangkat terdaftar. Kalau <strong>bukan</strong> Anda,
                            segera hubungi admin — bisa jadi seseorang mengetahui NIM dan tanggal lahir Anda.
                        </div>
                    </div>
                </div>
            @endif

            <div class="btn-group w-100 mb-3" role="group">
                <input type="radio" class="btn-check" name="tampilan_portal" id="tampilan_daftar" autocomplete="off">
                <label class="btn btn-outline-primary" for="tampilan_daftar">
                    <i class="bx bx-list-ul me-1"></i> Daftar Kegiatan
                </label>

                <input type="radio" class="btn-check" name="tampilan_portal" id="tampilan_kalender" autocomplete="off">
                <label class="btn btn-outline-primary" for="tampilan_kalender">
                    <i class="bx bx-calendar me-1"></i> Kalender
                </label>
            </div>

            <div id="panel-daftar">
            <h6 class="text-uppercase text-muted fw-semibold small mb-2 mt-1"><i class="bx bx-sun me-1"></i> Kegiatan Hari Ini</h6>

            <div class="row g-2">
                @forelse ($kegiatanHariIni as $kegiatan)
                    @php($tampilkanGabung = $kegiatan->isDaring() && $kegiatan->linkPlatformSiap() && $kegiatan->status_waktu !== 'sudah_selesai')
                    @php($lokasi = ! $kegiatan->isDaring() ? $kegiatan->lokasiPresensi : null)
                    @php($warnaStatus = $kegiatan->sudah_presensi ? 'primary' : ($kegiatan->status_waktu === 'berlangsung' ? 'success' : ($kegiatan->status_waktu === 'belum_mulai' ? 'warning' : 'secondary')))
                    <div class="col-12 col-md-6">
                        <div class="card border-start border-4 border-{{ $warnaStatus }} shadow-sm h-100">
                            <div class="card-body d-flex align-items-center justify-content-between {{ $tampilkanGabung || $lokasi ? 'pb-2' : '' }}">
                                <div>
                                    <div class="fw-semibold">{{ $kegiatan->nama_kegiatan }}</div>
                                    <div class="text-muted small">
                                        <i class="bx bx-time-five"></i> {{ substr($kegiatan->jam_mulai, 0, 5) }} - {{ substr($kegiatan->jam_selesai, 0, 5) }} WIB
                                    </div>
                                    @unless ($kegiatan->isDaring())
                                        <div class="text-muted small">
                                            <i class="bx bx-log-in-circle"></i> Mode Presensi: {{ $kegiatan->wajib_pulang ? '2x' : '1x' }} Presensi
                                        </div>
                                    @endunless
                                    @if ($kegiatan->is_berbayar)
                                        <div class="small mt-1">
                                            <span class="badge bg-soft-warning text-warning"><i class="mdi mdi-cash"></i> Berbayar</span>
                                            @if ($kegiatan->waLinkNarahubung())
                                                <a href="{{ $kegiatan->waLinkNarahubung() }}" target="_blank" rel="noopener noreferrer" class="text-success ms-1">
                                                    <i class="mdi mdi-whatsapp"></i> Hubungi Narahubung
                                                </a>
                                            @endif
                                        </div>
                                    @endif
                                    @if ($kegiatan->status_waktu === 'belum_mulai')
                                        <div class="small text-warning mt-1">
                                            <i class="bx bx-time"></i> Belum dimulai — presensi baru bisa mulai
                                            {{ substr($kegiatan->jam_mulai, 0, 5) }} WIB.
                                        </div>
                                    @elseif ($kegiatan->status_waktu === 'sudah_selesai' && ! $kegiatan->sudah_presensi)
                                        <div class="small text-muted mt-1">
                                            <i class="bx bx-x-circle"></i> Waktu presensi sudah berakhir.
                                        </div>
                                    @endif
                                </div>
                                @if ($kegiatan->belum_pulang)
                                    @if ($kegiatan->statusPulang($kegiatan->presensi_masuk) === 'dibuka')
                                        <a href="{{ route('mahasiswa.presensi.create', $kegiatan) }}" class="btn btn-sm btn-warning rounded-pill">Presensi Pulang</a>
                                    @elseif ($kegiatan->statusPulang($kegiatan->presensi_masuk) === 'belum_dibuka')
                                        <span class="badge bg-soft-info text-info rounded-pill px-3 py-2 fw-semibold" title="Presensi pulang dibuka {{ $kegiatan->jendelaPulang($kegiatan->presensi_masuk)[0]->format('H:i') }} WIB">
                                            <i class="bx bx-log-out"></i> Pulang {{ $kegiatan->jendelaPulang($kegiatan->presensi_masuk)[0]->format('H:i') }}
                                        </span>
                                    @else
                                        <span class="badge bg-soft-secondary text-secondary rounded-pill px-3 py-2 fw-semibold">Tidak Lengkap</span>
                                    @endif
                                @elseif ($kegiatan->sudah_presensi)
                                    <span class="badge bg-soft-success text-success rounded-pill px-3 py-2 fw-semibold">
                                        <i class="bx bx-check-circle"></i> Sudah Presensi
                                    </span>
                                @elseif ($kegiatan->status_waktu === 'berlangsung')
                                    <a href="{{ route('mahasiswa.presensi.create', $kegiatan) }}" class="btn btn-sm btn-success rounded-pill">
                                        Presensi
                                    </a>
                                @elseif ($kegiatan->status_waktu === 'belum_mulai')
                                    <span class="badge bg-soft-warning text-warning rounded-pill px-3 py-2 fw-semibold">Belum Mulai</span>
                                @else
                                    <span class="badge bg-soft-secondary text-secondary rounded-pill px-3 py-2 fw-semibold">Berakhir</span>
                                @endif
                            </div>
                            @if (! $kegiatan->belum_pulang && ! $kegiatan->sudah_presensi)
                                <div class="card-footer bg-light border-top py-2 text-end">
                                    <a href="{{ route('mahasiswa.izin.form', $kegiatan) }}" class="small text-muted">
                                        <i class="bx bx-note"></i> Ajukan Izin/Sakit
                                    </a>
                                </div>
                            @endif
                            @if ($tampilkanGabung)
                                <div class="card-footer bg-soft-info border-top py-2">
                                    @if ($kegiatan->platform_konferensi)
                                        <div class="small text-info fw-semibold mb-1">
                                            <i class="mdi mdi-video-outline"></i> Platform: {{ $kegiatan->platform_konferensi }}
                                        </div>
                                    @endif
                                    <a href="{{ $kegiatan->link_platform }}" target="_blank" rel="noopener noreferrer"
                                        class="btn btn-info btn-sm w-100 text-white fw-semibold">
                                        <i class="mdi mdi-video me-1"></i> Gabung ke Platform Daring
                                    </a>
                                </div>
                            @endif
                            @if ($lokasi)
                                <div class="card-footer bg-light border-top py-2">
                                    <div class="small text-body">
                                        <i class="mdi mdi-map-marker-outline text-danger"></i>
                                        <strong>{{ $lokasi->nama_lokasi }}</strong>
                                        <span class="text-muted">
                                            &middot;
                                            @if ($lokasi->tipe_area === 'kotak')
                                                Area Kotak
                                            @elseif ($lokasi->tipe_area === 'poligon')
                                                Area Poligon ({{ count($lokasi->poligon_titik ?? []) }} titik)
                                            @else
                                                Radius {{ $lokasi->radius_meter }}m
                                            @endif
                                        </span>
                                    </div>
                                    @php([$pusatLat, $pusatLng] = $lokasi->pusatKoordinat())
                                    <a href="https://www.google.com/maps?q={{ $pusatLat }},{{ $pusatLng }}"
                                        target="_blank" rel="noopener noreferrer" class="small d-inline-block mt-1">
                                        <i class="mdi mdi-map-search-outline"></i> Lihat di Peta
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="card shadow-sm">
                            <div class="card-body text-center text-muted py-4">
                                <i class="bx bx-coffee display-6 d-block mb-2 opacity-50"></i>
                                Tidak ada kegiatan presensi hari ini.
                            </div>
                        </div>
                    </div>
                @endforelse
            </div>

            <h6 class="text-uppercase text-muted fw-semibold small mb-2 mt-4"><i class="bx bx-calendar-event me-1"></i> Kegiatan yang Akan Datang</h6>

            <div class="row g-2">
                @forelse ($kegiatanAkanDatang as $kegiatan)
                    <div class="col-12 col-md-6">
                        <div class="card border-start border-4 border-light-subtle shadow-sm h-100">
                            <div class="card-body py-2">
                                <div class="text-muted small mb-1">
                                    <i class="bx bx-calendar-event"></i> {{ $kegiatan->tanggal->tglIndo() }}
                                    &middot; {{ substr($kegiatan->jam_mulai, 0, 5) }} - {{ substr($kegiatan->jam_selesai, 0, 5) }} WIB
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="fw-semibold">{{ $kegiatan->nama_kegiatan }}</div>
                                    @if ($kegiatan->isDaring())
                                        <span class="badge bg-info"><i class="mdi mdi-laptop"></i> Daring</span>
                                    @else
                                        <span class="badge bg-primary"><i class="mdi mdi-crosshairs-gps"></i> Luring</span>
                                    @endif
                                </div>
                                @if (! $kegiatan->isDaring() && $kegiatan->lokasiPresensi)
                                    <div class="text-muted small mt-1">
                                        <i class="mdi mdi-map-marker-outline"></i> {{ $kegiatan->lokasiPresensi->nama_lokasi }}
                                    </div>
                                @endif
                                @if ($kegiatan->is_berbayar)
                                    <div class="small mt-1">
                                        <span class="badge bg-soft-warning text-warning"><i class="mdi mdi-cash"></i> Berbayar</span>
                                        @if ($kegiatan->waLinkNarahubung())
                                            <a href="{{ $kegiatan->waLinkNarahubung() }}" target="_blank" rel="noopener noreferrer" class="text-success ms-1">
                                                <i class="mdi mdi-whatsapp"></i> Hubungi Narahubung
                                            </a>
                                        @endif
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="card shadow-sm">
                            <div class="card-body text-center text-muted py-4">
                                <i class="bx bx-calendar-x display-6 d-block mb-2 opacity-50"></i>
                                Belum ada kegiatan yang akan datang.
                            </div>
                        </div>
                    </div>
                @endforelse
            </div>
            </div>

            @php($namaBulanIndonesia = [1 => 'Januari', 2 => 'Februari', 3 => 'Maret', 4 => 'April', 5 => 'Mei', 6 => 'Juni', 7 => 'Juli', 8 => 'Agustus', 9 => 'September', 10 => 'Oktober', 11 => 'November', 12 => 'Desember'])
            @php($awalGrid = $bulanTerpilih->copy()->startOfMonth()->startOfWeek(\Carbon\Carbon::SUNDAY))
            @php($akhirGrid = $bulanTerpilih->copy()->endOfMonth()->endOfWeek(\Carbon\Carbon::SATURDAY))
            @php($hariIniStr = now()->toDateString())
            @php($kegiatanJs = $kegiatanPerTanggal->map(fn ($daftar) => $daftar->map(fn ($k) => ['nama' => $k->nama_kegiatan, 'jam' => substr($k->jam_mulai, 0, 5).' - '.substr($k->jam_selesai, 0, 5), 'mode' => $k->isDaring() ? 'Daring' : 'Luring', 'lokasi' => $k->lokasiPresensi->nama_lokasi ?? null, 'url' => route('mahasiswa.presensi.create', $k)])->values()))

            <div id="panel-kalender" class="d-none">
            <div class="d-flex align-items-center justify-content-between mb-2 mt-1">
                <h6 class="text-uppercase text-muted fw-semibold small mb-0"><i class="bx bx-calendar me-1"></i> Kalender Kegiatan</h6>
                <div class="d-flex align-items-center gap-2">
                    <a href="{{ route('mahasiswa.dashboard', ['bulan' => $bulanTerpilih->copy()->subMonth()->format('Y-m')]) }}" class="btn btn-sm btn-soft-primary">
                        <i class="bx bx-chevron-left"></i>
                    </a>
                    <span class="small fw-semibold">{{ $namaBulanIndonesia[$bulanTerpilih->month] }} {{ $bulanTerpilih->year }}</span>
                    <a href="{{ route('mahasiswa.dashboard', ['bulan' => $bulanTerpilih->copy()->addMonth()->format('Y-m')]) }}" class="btn btn-sm btn-soft-primary">
                        <i class="bx bx-chevron-right"></i>
                    </a>
                </div>
            </div>

            <div class="card mb-2 shadow-sm">
                <div class="card-body p-2">
                    <table class="table table-borderless table-sm text-center mb-0" style="table-layout: fixed;">
                        <thead>
                            <tr class="small text-muted">
                                <th>Min</th>
                                <th>Sen</th>
                                <th>Sel</th>
                                <th>Rab</th>
                                <th>Kam</th>
                                <th>Jum</th>
                                <th>Sab</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php($tglIterasi = $awalGrid->copy())
                            @while ($tglIterasi->lte($akhirGrid))
                                <tr>
                                    @for ($i = 0; $i < 7; $i++)
                                        @php($tglStr = $tglIterasi->toDateString())
                                        @php($adaKegiatan = $kegiatanPerTanggal->has($tglStr))
                                        @php($diBulanIni = $tglIterasi->month === $bulanTerpilih->month)
                                        <td class="p-1 align-top">
                                            <button type="button"
                                                class="btn btn-sm rounded-circle p-0 kalender-hari {{ $tglStr === $hariIniStr ? 'btn-primary text-white' : ($adaKegiatan ? 'btn-soft-info' : 'btn-light') }}"
                                                style="width: 32px; height: 32px; {{ ! $diBulanIni ? 'opacity: .35;' : '' }}"
                                                data-tanggal="{{ $tglStr }}">{{ $tglIterasi->day }}</button>
                                            @if ($adaKegiatan)
                                                <div class="bg-primary rounded-circle mx-auto mt-1" style="width:5px;height:5px;"></div>
                                            @endif
                                        </td>
                                        @php($tglIterasi->addDay())
                                    @endfor
                                </tr>
                            @endwhile
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="detail-kalender" class="mb-3"></div>
            </div>

            @if ($tampilkanPemindaianWajah)
                {{-- Kosmetik murni untuk kesan "verifikasi identitas" saat
                    perangkat baru pertama kali didaftarkan -- TIDAK ADA frame
                    yang diambil/disimpan/dikirim ke server, cuma live preview
                    kamera depan yang dimatikan lagi begitu selesai. Sama
                    sekali tidak menggantikan/menambah keamanan device-lock
                    yang sudah ada (Mahasiswa::device_id tetap didaftarkan
                    dari device_id JS seperti biasa, lihat AuthController::
                    tandaiPerangkat()) -- murni tampilan. --}}
                <div id="overlay-pindai-wajah"
                    style="position: fixed; inset: 0; z-index: 1080; background: rgba(15,23,42,.92); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 24px;">
                    <div class="text-center" style="max-width: 320px; width: 100%;">
                        <div class="position-relative d-inline-block mb-3">
                            <video id="video-pindai-wajah" autoplay playsinline muted
                                style="width: 220px; height: 220px; object-fit: cover; border-radius: 50%; background: #000; transform: scaleX(-1); display: block;"></video>
                            <div id="bingkai-pindai-wajah"
                                style="position: absolute; inset: -6px; border-radius: 50%; border: 3px solid #52c6ea; box-shadow: 0 0 0 4px rgba(82,198,234,.25);"></div>
                            <div id="garis-pindai-wajah"
                                style="position: absolute; left: 8%; right: 8%; top: 8%; height: 2px; background: linear-gradient(90deg, transparent, #52c6ea, transparent); box-shadow: 0 0 8px 1px #52c6ea;"></div>
                        </div>
                        <div class="text-white fw-semibold" id="status-pindai-wajah">Menyiapkan verifikasi wajah...</div>
                        <div class="text-white-50 small mt-1">Posisikan wajah Anda menghadap kamera.</div>
                    </div>
                </div>
            @endif
@endsection
@section('scripts')
        <script src="{{ URL::asset('build/js/app.js') }}"></script>
    @if ($tampilkanPemindaianWajah)
        <script>
            (function () {
                var overlay = document.getElementById('overlay-pindai-wajah');
                var video = document.getElementById('video-pindai-wajah');
                var statusEl = document.getElementById('status-pindai-wajah');
                var garis = document.getElementById('garis-pindai-wajah');
                if (!overlay) { return; }

                var stream = null;
                var selesai = false;
                var animasiGaris = null;

                function tunda(ms) {
                    return new Promise(function (resolve) { setTimeout(resolve, ms); });
                }

                // Garis pemindai bergerak naik-turun selama proses berjalan —
                // murni CSS/JS, tidak berkaitan dengan pengambilan gambar apa pun.
                function mulaiAnimasiGaris() {
                    var arah = 1, posisi = 8;
                    animasiGaris = setInterval(function () {
                        posisi += arah * 4;
                        if (posisi >= 92) { arah = -1; }
                        if (posisi <= 8) { arah = 1; }
                        garis.style.top = posisi + '%';
                    }, 60);
                }

                function tutupOverlay() {
                    if (selesai) { return; }
                    selesai = true;
                    if (animasiGaris) { clearInterval(animasiGaris); }
                    if (stream) { stream.getTracks().forEach(function (t) { t.stop(); }); }
                    overlay.remove();
                }

                window.addEventListener('pagehide', tutupOverlay);

                // Verifikasi wajah KOSMETIK MURNI: cuma preview kamera depan
                // yang ditampilkan live ke layar sendiri (tidak pernah
                // diambil sebagai frame/canvas, tidak pernah disimpan atau
                // dikirim ke server dengan cara apa pun) sebanyak 2 kali
                // dengan jeda 5 detik di antaranya, sesuai permintaan —
                // sama sekali tidak menggantikan atau menambah keamanan
                // device-lock yang sudah berjalan di baliknya.
                async function jalankan() {
                    if (!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)) {
                        tutupOverlay();
                        return;
                    }

                    try {
                        // Timeout jaga-jaga: kalau dialog izin kamera tidak
                        // pernah dijawab, jangan sampai overlay ini menyumbat
                        // dashboard selamanya.
                        stream = await Promise.race([
                            navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' }, audio: false }),
                            tunda(8000).then(function () { throw new Error('timeout'); }),
                        ]);
                    } catch (e) {
                        tutupOverlay();
                        return;
                    }

                    if (selesai) { // sempat dilewati saat menunggu izin kamera
                        stream.getTracks().forEach(function (t) { t.stop(); });
                        return;
                    }

                    video.srcObject = stream;
                    mulaiAnimasiGaris();

                    statusEl.textContent = 'Memindai wajah... (1/2)';
                    await tunda(3000);
                    if (selesai) { return; }

                    statusEl.textContent = 'Mohon tunggu sebentar...';
                    await tunda(5000);
                    if (selesai) { return; }

                    statusEl.textContent = 'Memindai wajah... (2/2)';
                    await tunda(3000);
                    if (selesai) { return; }

                    statusEl.textContent = 'Verifikasi wajah berhasil.';
                    await tunda(1000);
                    tutupOverlay();
                }

                jalankan();
            })();
        </script>
    @endif
    <script>
        (function () {
            // Ingat pilihan tampilan (Daftar/Kalender) lewat localStorage —
            // supaya tidak balik ke "Daftar" tiap kali navigasi bulan di
            // kalender (yang reload halaman penuh, bukan AJAX). Kalau
            // localStorage tidak tersedia (mode privat dll), cukup default
            // ke tampilan Daftar tanpa error.
            var kunciTampilan = 'presensi_portal_tampilan';
            var radioDaftar = document.getElementById('tampilan_daftar');
            var radioKalender = document.getElementById('tampilan_kalender');
            var panelDaftar = document.getElementById('panel-daftar');
            var panelKalender = document.getElementById('panel-kalender');

            function terapkanTampilan(nama) {
                if (nama === 'kalender') {
                    radioKalender.checked = true;
                    panelDaftar.classList.add('d-none');
                    panelKalender.classList.remove('d-none');
                } else {
                    radioDaftar.checked = true;
                    panelKalender.classList.add('d-none');
                    panelDaftar.classList.remove('d-none');
                }
            }

            function simpanTampilan(nama) {
                try {
                    localStorage.setItem(kunciTampilan, nama);
                } catch (e) {
                    // biarkan, cuma kenyamanan tampilan
                }
            }

            radioDaftar.addEventListener('change', function () { if (this.checked) { terapkanTampilan('daftar'); simpanTampilan('daftar'); } });
            radioKalender.addEventListener('change', function () { if (this.checked) { terapkanTampilan('kalender'); simpanTampilan('kalender'); } });

            var tampilanTersimpan = 'daftar';
            try {
                tampilanTersimpan = localStorage.getItem(kunciTampilan) || 'daftar';
            } catch (e) {
                // biarkan default 'daftar'
            }
            terapkanTampilan(tampilanTersimpan);

            var kegiatanPerTanggal = @json($kegiatanJs);
            var hariIni = @json($hariIniStr);

            function tampilkanDetailTanggal(tgl) {
                var daftar = kegiatanPerTanggal[tgl] || [];
                var box = document.getElementById('detail-kalender');
                box.innerHTML = '';

                var card = document.createElement('div');
                card.className = 'card shadow-sm';
                var body = document.createElement('div');
                body.className = 'card-body p-2';
                card.appendChild(body);

                var judul = document.createElement('div');
                judul.className = 'small fw-semibold text-muted mb-2 px-1';
                var tglObj = new Date(tgl + 'T00:00:00');
                judul.textContent = tglObj.toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
                body.appendChild(judul);

                if (daftar.length === 0) {
                    var kosong = document.createElement('div');
                    kosong.className = 'text-center text-muted small py-2';
                    kosong.textContent = 'Tidak ada kegiatan pada tanggal ini.';
                    body.appendChild(kosong);
                } else {
                    daftar.forEach(function (k) {
                        var a = document.createElement('a');
                        a.href = k.url;
                        a.className = 'd-block text-decoration-none text-dark border-top py-2 px-1';

                        var nama = document.createElement('div');
                        nama.className = 'fw-semibold small';
                        nama.textContent = k.nama;

                        var info = document.createElement('div');
                        info.className = 'text-muted small';
                        info.textContent = k.jam + ' WIB · ' + k.mode + (k.lokasi ? ' · ' + k.lokasi : '');

                        a.appendChild(nama);
                        a.appendChild(info);
                        body.appendChild(a);
                    });
                }

                box.innerHTML = '';
                box.appendChild(card);
            }

            document.querySelectorAll('.kalender-hari').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    tampilkanDetailTanggal(this.getAttribute('data-tanggal'));
                });
            });

            tampilkanDetailTanggal(hariIni);
        })();
    </script>
@endsection