<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tutor Availability Calendar</title>

    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css' rel='stylesheet' />
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }
        .fc-event {
            cursor: pointer;
        }
        /* Tooltip style */
        .tooltip {
            position: absolute;
            background: #333;
            color: #fff;
            padding: 6px 10px;
            border-radius: 5px;
            font-size: 0.9rem;
            pointer-events: none;
            z-index: 10000;
            display: none;
        }
    </style>
</head>
<body>
    <h2>Tutor Availability Calendar</h2>
    <div id="calendar"></div>
    <div id="tooltip" class="tooltip"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var tooltip = document.getElementById('tooltip');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                events: '/tutor/{{ $tutorId }}/availability-json',
                eventColor: '#28a745',
                displayEventTime: true,
                allDaySlot: false,
                eventMouseEnter: function(info) {
                    tooltip.innerHTML = info.event.title;
                    tooltip.style.display = 'block';
                },
                eventMouseLeave: function(info) {
                    tooltip.style.display = 'none';
                },
                eventMouseMove: function(info) {
                    tooltip.style.top = (info.jsEvent.pageY + 10) + 'px';
                    tooltip.style.left = (info.jsEvent.pageX + 10) + 'px';
                }
            });

            calendar.render();
        });
    </script>
</body>
</html>
