<?php $title = 'AdminSB Pro - Calendar'; ?>

<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Calendar</h1>
    <button class="btn btn-primary btn-sm shadow-sm" data-toggle="modal" data-target="#eventModal">
        <i class="fas fa-plus fa-sm text-white-50"></i> Add Event
    </button>
</div>

<div class="card shadow mb-4">
    <div class="card-header py-3"><h6 class="m-0 font-weight-bold text-primary">Event Calendar</h6></div>
    <div class="card-body">
        <div id="calendar"></div>
    </div>
</div>

<!-- Add/Edit Event Modal -->
<div class="modal fade" id="eventModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="eventForm" method="POST" action="<?= $baseUrl ?>/calendar/store">
                <div class="modal-header">
                    <h5 class="modal-title" id="eventModalTitle">New Event</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="event_id" id="event_id">
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" name="title" id="event_title" required>
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea class="form-control" name="description" id="event_description" rows="2"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Start Date</label>
                        <input type="datetime-local" class="form-control" name="start_date" id="event_start" required>
                    </div>
                    <div class="form-group">
                        <label>End Date</label>
                        <input type="datetime-local" class="form-control" name="end_date" id="event_end">
                    </div>
                    <div class="form-group">
                        <label>Color</label>
                        <select class="form-control" name="color" id="event_color">
                            <option value="#4e73df">Primary (Blue)</option>
                            <option value="#1cc88a">Success (Green)</option>
                            <option value="#36b9cc">Info (Cyan)</option>
                            <option value="#f6c23e">Warning (Yellow)</option>
                            <option value="#e74a3b">Danger (Red)</option>
                            <option value="#858796">Secondary (Gray)</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="eventSubmitBtn">Create Event</button>
                </div>
            </form>
        </div>
    </div>
</div>

<?php $extraScripts = '
<script>
document.addEventListener("DOMContentLoaded", function() {
    var calendarEl = document.getElementById("calendar");
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: "dayGridMonth",
        headerToolbar: {
            left: "prev,next today",
            center: "title",
            right: "dayGridMonth,timeGridWeek,timeGridDay"
        },
        events: "' . $baseUrl . '/calendar",
        eventClick: function(info) {
            if (confirm("Delete event: " + info.event.title + "?")) {
                $.post("' . $baseUrl . '/calendar/" + info.event.id + "/delete", { ajax: 1 }, function() {
                    info.event.remove();
                });
            }
        },
        selectable: true,
        select: function(info) {
            $("#eventModalTitle").text("New Event");
            $("#event_id").val("");
            $("#event_title").val("");
            $("#event_description").val("");
            $("#event_start").val(info.startStr.substring(0, 16));
            $("#event_end").val(info.end ? info.endStr.substring(0, 16) : "");
            $("#event_color").val("#4e73df");
            $("#eventForm").attr("action", "' . $baseUrl . '/calendar/store");
            $("#eventSubmitBtn").text("Create Event");
            $("#eventModal").modal("show");
        }
    });
    calendar.render();
});
</script>
'; ?>
