@extends('layouts.app')
@section('content')
<section class="mb-6 rounded-[2rem] bg-gradient-to-br from-slate-950 to-teal-900 p-8 text-white shadow-soft"><span class="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 text-sm font-bold"><i class="fa-solid fa-calendar-days"></i> Kalender Ronda</span><h2 class="mt-5 text-4xl font-black">Jadwal Ronda Warga</h2><p class="mt-3 text-slate-300">Klik tanggal untuk melihat petugas ronda. Pengingat WA H-1 dapat dijalankan melalui command reminder yang sudah ada.</p></section>
<div class="card p-5"><div id="calendar"></div></div>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
        initialView: 'dayGridMonth', height: 'auto', locale: 'id',
        events: @json($events),
        eventClick: function(info){ alert(info.event.title + '\n' + (info.event.extendedProps.description || '')); }
    });
    calendar.render();
});
</script>
@endsection