@extends('layouts.loggedin')
@section('content')
    <div class="mainContainer">
            <div class="dashboard">
                <x-sidebar></x-sidebar>
                <div class="main-content">
                    <div class="scrollable">
                        <div id='calendar'>
                        </div>
                    </div>
                </div>
            </div>
    </div>        
@endsection


@push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var calendarEl = document.getElementById('calendar');
                var events = @json($events);
                console.log(events);
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'timeGridWeek',
                    slotMinTime: '06:00:00',
                    slotMaxTime: '17:00:00',
                    events: events,
                    dateClick: function(info) {
                                    var date=info.date;
                                    var beginning=date.getHours();
                                    var year = date.getFullYear();
                                    var month = String(date.getMonth() + 1).padStart(2, '0');
                                    var day = String(date.getDate()).padStart(2, '0');
                                    var mysqlFormattedDate = `${year}-${month}-${day}`;

                                    document.getElementById('start').value = beginning;
                                    
                                    populateBeginTimes(beginning);
                                    populateEndTimes(beginning);
                                    document.getElementById('appointmentModal').style.display = 'block';
                                    document.getElementById('datechoisie').value=mysqlFormattedDate;
                                }
                });
                calendar.render();
                
            });

                function populateEndTimes(startHour) {
                    var endSelect = document.getElementById('end');
                    endSelect.innerHTML = '';

                    for (var hour = startHour + 1; hour <= 17; hour++) {
                        var option = document.createElement('option');
                        option.value = hour + ':00';
                        option.text = hour + ':00';
                        endSelect.appendChild(option);
                    }
                }
                function populateBeginTimes(startHour) {
                    var endSelect = document.getElementById('start');
                    endSelect.innerHTML = '';

                    for (var hour = startHour; hour <= 17; hour++) {
                        var option = document.createElement('option');
                        option.value = hour + ':00';
                        option.text = hour + ':00';
                        endSelect.appendChild(option);
                    }
                }
            
        </script>
@endpush