@extends('layout.layout')

<!-- FullCalendar CSS -->
{{-- <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet" /> --}}
<!-- Flatpickr CSS -->
{{-- <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" /> --}}

<style>
    #calendar {
        max-width: 100%;
        margin: 0 auto;
    }

    .fc-toolbar-title {
        font-size: 1.5rem !important;
        font-weight: bold !important;
    }

    .fc-button {
        border: none !important;
        border-radius: 4px !important;
        padding: 4px 10px !important;
        margin: 4px 5px !important;
    }

    .fc-button-primary:not(:disabled):hover {
        background-color: #0056b3 !important;
    }

    .fc .fc-view-harness-active>.fc-view {
        position: static !important;
    }
</style>

@section('content')
    <div class="row gy-4">
        <div class="col-12">
            <div class="card shadow-sm border-0">
              
                <div class="card-body">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- FullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>

<!-- Flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<!-- Optional: SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    // Flatpickr setup
    function getDatePicker(receiveID) {
        flatpickr(receiveID, {
            enableTime: true,
            dateFormat: "d/m/Y H:i",
        });
    }

    getDatePicker("#startDate");
    getDatePicker("#endDate");
    getDatePicker("#editstartDate");
    getDatePicker("#editendDate");


    // FullCalendar setup
    document.addEventListener('DOMContentLoaded', function() {
        const calendarEl = document.getElementById('calendar');

        const calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            buttonText: {
                today: 'Today',
                month: 'Month',
                week: 'Week',
                day: 'Day',
                list: 'List'
            },
            events: '{{ route("getDemoEvents") }}', 

            eventClick: function(info) {
                const props = info.event.extendedProps;
                let trackLabel = 'Track:';
                let categoryLabel = 'Category:';
                let url='/courses/';

                if (props.schedule_type !== 'track') {
                    trackLabel = 'Product:';
                    categoryLabel = 'Category Product:';
                    url='/products/show/';
                }

                Swal.fire({
                    title: info.event.title,
                    html: `
                        <div style="line-height: 1.6;">
                            <strong>Start:</strong> ${info.event.start.toLocaleTimeString([], {
                                hour: '2-digit',
                                minute: '2-digit'
                            })}<br>

                            <strong>Status:</strong> <span style="color: ${props.status === 'Active' ? 'green' : 'red'};">${props.status}</span><br>
                            <strong>Schedule Type:</strong> ${props.schedule_type}<br>
                            <strong>Staff:</strong> ${props.staff || 'N/A'}<br><br>
                            <strong>${categoryLabel}</strong> ${props.category_id || 'N/A'}<br>
                            <strong>${trackLabel}</strong> ${props.track_id || 'N/A'}<br>
                            <strong> Full Details</strong> <a href="${url}${props.schedule_id}">View</a>
                        </div>
                    `,
                    icon: 'info',
                    confirmButtonText: 'Close'
                });
            },

            dateClick: function(info) {
                const clickedDate = info.date;
                const dayName = clickedDate.toLocaleDateString('en-GB', {weekday: 'long'});
                const fullDate = clickedDate.toLocaleDateString('en-GB');
                Swal.fire({
                    title: 'Selected Date',
                    html: `
                    <div style="line-height: 1.6;">
                        <strong>Day:</strong> ${dayName}<br>
                        <strong>Date:</strong> ${fullDate}<br>
                    </div>
                `,
                    icon: 'info',
                    confirmButtonText: 'Close'
                });
            }
        });

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