@extends('layouts.admin')

@section('header')
    <h2 class="font-semibold text-xl text-gray-800">Work Schedule Calendar</h2>
@endsection

@section('content')
    <div id="calendar"></div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction/main.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['dayGrid', 'interaction'],
            events: @json($mappedSchedules),  // Use the mapped schedules passed from the controller
            selectable: true,  // Allow selecting dates
            select: function(info) {
                // Set default values when selecting a date for adding a new schedule
                $('#scheduleModal').modal('show');
                $('#start_time').val(info.startStr.split('T')[1].slice(0,5));  // Set default start time
                $('#end_time').val(info.endStr.split('T')[1].slice(0,5));  // Set default end time
                $('#title').val('New Schedule');  // Default title
                $('#description').val('');  // Default description

                // Set the date as hidden input or pass directly in form
                $('#scheduleModal form').attr('action', '{{ route("schedules.store") }}');
                $('#scheduleModal #shift_date').val(info.startStr.split('T')[0]);  // Set the date
            },
            editable: true,  // Allow dragging and editing events
            droppable: true,
        });

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

@endsection