@extends('layouts.admin')
@section('title', 'Planification - ' . getRadioUsers()->name)

@section('style')
    <link href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.17/main.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.17/main.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@6.1.17/main.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap5@6.1.17/main.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .fc .fc-button {
            padding: 0.4rem 0.8rem;
        }

        .btn-rounded {
            border-radius: 500px;
            padding: 10px 20px;
        }
    </style>
@endsection

@section('content')
    <div class="row g-4 mb-4">
        <div class="p-5 bg-linear-gradient mt-0">
            <div class="container-fluid text-white text-center">
                <div class="row justify-content-center">
                    <div class="col-md-10">
                        <h2 class="fw-bold mb-4" style="font-size: clamp(1.5rem, 4vw + 0.5rem, 2.1875rem);">Ma Grille de
                            Programmation</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid p-4">
            <div class="row bg-white p-4 rounded-4">
                <div class="row d-flex justify-content-between align-items-center">
                    <div class="col-md-6 mb-2">
                        <form action="{{ route('planning.generate', getRadioUsers()->id) }}" method="GET">
                            <div class="row">
                                <h5>Générer le PDF de votre grille de programme Hebdomadaire ici</h5>
                                <small>Choissisez une date</small>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <input type="date" class="form-control p-2 border-1 border-black" id="start_date2"
                                        name="start_date" value="{{ now()->format('Y-m-d') }}" required>

                                </div>
                                <div class="col-md-6">
                                    <button type="submit" class="gradient-btn">Générer le PDF</button>
                                </div>
                            </div>

                        </form>
                    </div>
                    <div class="col-md-6 mb-2">
                        <button type="submit" data-bs-target="#duplicateModal" data-bs-toggle="modal" class="gradient-btn float-end">Reconduire la grille de programmes</button>
                    </div>
                </div>
                <div class="col-12">
                    <div id='calendar'></div>
                </div>
            </div>

            <!-- Add Event Modal -->
            <div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="eventModalLabel">Ajouter un évènement</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="eventForm">
                                <div class="row mb-3 align-items-center">
                                    <div class="col-md-5">
                                        <input class="form-control" type="time" placeholder="Heure de début"
                                            name="start_time" id="start_time" required>
                                    </div>
                                    <div class="col-md-2 text-center">:</div>
                                    <div class="col-md-5">
                                        <input class="form-control" type="time" placeholder="Heure de fin"
                                            name="end_time" id="end_time" required>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="event_name" class="form-label">Nom de l'évènement</label>
                                    <input class="form-control" type="text" placeholder="Entrez le nom de l'évènement"
                                        name="event_name" id="event_name" required>
                                </div>
                                <div class="mb-3">
                                    <label for="category_id" class="form-label">Catégorie</label>
                                    <select name="category_id" class="form-select" id="category_id" required>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="event-recurrence" class="form-label">Récurrence</label>
                                    <select id="event-recurrence" name="event-recurrence" class="form-select">
                                        <option value="none">Aucune</option>
                                        <option value="daily">Quotidienne</option>
                                        <option value="weekly">Hebdomadaire</option>
                                        <option value="monthly">Mensuelle</option>
                                    </select>
                                </div>
                                <div id="recurrence-details" class="mb-3" style="display: none;">
                                    <div class="mb-3">
                                        <label for="event-recurrence-end" class="form-label">Date de fin de la
                                            récurrence</label>
                                        <input type="datetime-local" id="event-recurrence-end"
                                            name="event-recurrence-end" value="{{ date('Y-m-d\TH:i:s') }}"
                                            min="{{ date('Y-m-d\TH:i:s') }}" class="form-control" required>
                                    </div>
                                    <div id="recurrence-details-weekdays" class="mb-4" style="display: none;">
                                        <label for="event-recurrence-weekdays" class="form-label fw-semibold">Jours de la
                                            semaine</label>
                                        <select id="event-recurrence-weekdays" name="weekdays[]" class="form-select"
                                            multiple>
                                            <option value="monday">Lundi</option>
                                            <option value="tuesday">Mardi</option>
                                            <option value="wednesday">Mercredi</option>
                                            <option value="thursday">Jeudi</option>
                                            <option value="friday">Vendredi</option>
                                            <option value="saturday">Samedi</option>
                                            <option value="sunday">Dimanche</option>
                                        </select>
                                        <div id="selected-days" class="d-flex flex-wrap gap-2 mt-2"></div>
                                    </div>

                                    <div id="recurrence-details-monthdays" class="mb-4" style="display: none;">
                                        <label for="event-recurrence-monthdays" class="form-label fw-semibold">Jours du
                                            mois</label>
                                        <select id="event-recurrence-monthdays" name="monthdays[]" class="form-select"
                                            multiple>
                                            @for ($day = 1; $day <= 31; $day++)
                                                <option value="{{ $day }}">
                                                    {{ str_pad($day, 2, '0', STR_PAD_LEFT) }}</option>
                                            @endfor
                                        </select>
                                        <div id="selected-monthdays" class="d-flex flex-wrap gap-2 mt-2"></div>
                                    </div>

                                </div>
                                <input type="hidden" name="start" id="start">
                                <input type="hidden" name="end" id="end">
                                <input type="hidden" name="allDay" id="allDay">
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-rounded"
                                data-bs-dismiss="modal">Annuler</button>
                            <button type="button" class="btn gradient-btn" onclick="addEvent()">Ajouter</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Update Event Modal -->
            <div class="modal fade" id="updateEventModal" tabindex="-1" aria-labelledby="updateEventModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="updateEventModalLabel">Modifier un évènement</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="updateEventForm">
                                <div class="row mb-3 align-items-center">
                                    <div class="col-md-5">
                                        <input class="form-control" type="time" placeholder="Heure de début"
                                            name="start_time" id="start_time_updated" required>
                                        <input type="hidden" name="start_date" id="start_date_updated">
                                    </div>
                                    <div class="col-md-2 text-center">:</div>
                                    <div class="col-md-5">
                                        <input class="form-control" type="time" placeholder="Heure de fin"
                                            name="end_time_updated" id="end_time_updated" required>
                                        <input type="hidden" name="end_date" id="end_date_updated">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="event_name_updated" class="form-label">Nom de l'évènement</label>
                                    <input class="form-control" type="text" placeholder="Entrez le nom de l'évènement"
                                        name="event_name" id="event_name_updated" required>
                                </div>
                                <div class="mb-3">
                                    <label for="category_id_updated" class="form-label">Catégorie</label>
                                    <select name="category_id" class="form-select" id="category_id_updated" required>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <input type="hidden" name="event_id" id="event_id">
                                <input type="hidden" name="event_name2" id="event_name_updated2">
                                <input type="hidden" name="category_id2" id="category_id_updated2">
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-rounded"
                                data-bs-dismiss="modal">Annuler</button>
                            <button type="button" class="btn gradient-btn" onclick="updateEvent()">Modifier</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Update/Delete Event Modal -->
            <div class="modal fade" id="updateDeleteModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content border-0 shadow-lg rounded-4">
                        <div class="modal-header border-0 pb-0">
                            <h5 class="modal-title fw-semibold">
                                Détails de l'évènement
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Fermer"></button>
                        </div>
                        <div class="modal-body">
                            <div class="d-flex align-items-center mb-3">
                                <i class="bi bi-calendar-event me-2 text-primary fs-5"></i>
                                <span id="event-title" class="fw-bold fs-5">Titre de l'évènement</span>
                            </div>

                            <div class="d-flex align-items-center mb-2">
                                <i class="bi bi-clock me-2 text-secondary fs-5"></i>
                                <span id="event-dates">Du <label id="event-date-start" for="">01/01/2025 à
                                        08:00</label> au <label id="event-date-end" for="">01/01/2025 à
                                        10:00</label></span>
                            </div>

                            {{-- <div class="d-flex align-items-center mb-3">
                                <i class="bi bi-tag me-2 text-warning fs-5"></i>
                                <span>Catégorie : <label for="" id="event-category"> Réunion</label></span>
                            </div> --}}

                            <p id="update-delete-events-message" class="d-none text-muted small">
                                Voulez-vous modifier ou supprimer l'évènement sélectionné ou supprimer tous les évènements
                                récurrents du même nom ?
                            </p>
                            <p id="update-delete-event-message" class="text-muted small">
                                Voulez-vous modifier ou supprimer l'évènement sélectionné ?
                            </p>

                            <input type="hidden" name="event_id" id="event_id">
                            <input type="hidden" name="title" id="title">
                            <input type="hidden" name="category_id" id="category_id">
                            <input type="hidden" name="created_at" id="created_at">
                            <input type="hidden" name="image" id="image">
                            <input type="hidden" name="start_date" id="start_date">
                            <input type="hidden" name="end_date" id="end_date">
                        </div>

                        <div class="modal-footer border-0 pt-0 d-flex justify-content-end gap-2">
                            <button id="update-event-button" class="btn btn-sm btn-outline-primary rounded-circle"
                                title="Modifier" onclick="showUpdateModal()">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                            @php
                                $user = \App\Models\User::find(Auth::id());
                            @endphp
                            @if (!$user->collab)
                                <button id="delete-event-button" class="btn btn-sm btn-outline-danger rounded-circle"
                                    title="Supprimer" onclick="deleteEvent()">
                                    <i class="bi bi-trash"></i>
                                </button>
                                <button id="delete-events-button"
                                    class="btn btn-sm btn-outline-danger rounded-circle d-none" title="Supprimer tout"
                                    onclick="deleteEvents()">
                                    <i class="bi bi-trash-fill"></i>
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="modal fade" id="duplicateModal" tabindex="-1" aria-labelledby="duplicateModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="duplicateModal">Reconduire votre grille de programme</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('planning.duplicate', getRadioUsers()->id) }}" method="POST">
                    @csrf
                    <div class="modal-body">

                        <div class="row mb-3 align-items-center">
                            <div class="mb-3">
                                <label for="base_date" class="form-label">Date de la
                                    semaine concernées</label>
                                <input type="date" id="base_date" name="base_date"
                                    value="{{ date('Y-m-d') }}"
                                    class="form-control" required>
                            </div>

                            <div class="mb-3">
                                <label for="start_date" class="form-label">Date de début de la
                                    reconduction</label>
                                <input type="date" id="start_date" name="start_date"
                                    value="{{ date('Y-m-d') }}" min="{{ date('Y-m-d') }}"
                                    class="form-control" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="period" class="form-label">Durée de la reconduction</label>
                            <select id="period" name="period" class="form-select">
                                <option value="weekly">Une semaine</option>
                                <option value="monthly">Un mois </option>
                                <option value="trimestrialy">Trois mois</option>
                            </select>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-rounded"
                            data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn gradient-btn">Reconduire</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.17/index.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.17/index.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@6.1.17/index.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@6.1.17/index.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap5@6.1.17/index.global.min.js"></script>
    <script src='https://cdn.jsdelivr.net/npm/rrule@2.6.4/dist/es5/rrule.min.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // --------- Jours de la semaine ---------
            const weekdaySelect = document.getElementById("event-recurrence-weekdays");
            const weekdayChips = document.getElementById("selected-days");

            function updateWeekdayChips() {
                weekdayChips.innerHTML = "";

                Array.from(weekdaySelect.selectedOptions).forEach(option => {
                    const chip = document.createElement("span");
                    chip.className = "badge bg-linear-gradient d-flex align-items-center";
                    chip.style.paddingRight = "0.5rem";
                    chip.textContent = option.text;

                    const removeBtn = document.createElement("button");
                    removeBtn.type = "button";
                    removeBtn.className = "btn-close btn-close-white ms-2";
                    removeBtn.style.fontSize = "0.5rem";
                    removeBtn.onclick = () => {
                        option.selected = false;
                        updateWeekdayChips();
                    };

                    chip.appendChild(removeBtn);
                    weekdayChips.appendChild(chip);
                });
            }

            weekdaySelect.addEventListener("change", updateWeekdayChips);
            updateWeekdayChips();

            // --------- Jours du mois ---------
            const monthdaySelect = document.getElementById("event-recurrence-monthdays");
            const monthdayChips = document.getElementById("selected-monthdays");

            function updateMonthdayChips() {
                monthdayChips.innerHTML = "";

                Array.from(monthdaySelect.selectedOptions).forEach(option => {
                    const chip = document.createElement("span");
                    chip.className = "badge bg-linear-gradient d-flex align-items-center";
                    chip.style.paddingRight = "0.5rem";
                    chip.textContent = option.text;

                    const removeBtn = document.createElement("button");
                    removeBtn.type = "button";
                    removeBtn.className = "btn-close btn-close-white ms-2";
                    removeBtn.style.fontSize = "0.5rem";
                    removeBtn.onclick = () => {
                        option.selected = false;
                        updateMonthdayChips();
                    };

                    chip.appendChild(removeBtn);
                    monthdayChips.appendChild(chip);
                });
            }

            monthdaySelect.addEventListener("change", updateMonthdayChips);
            updateMonthdayChips();
        });
    </script>
    <script>
        let calendar;
        document.addEventListener('DOMContentLoaded', function() {

            // Gestion de la sélection de récurrence
            $('#event-recurrence').change(function() {
                const value = $(this).val();

                if (value === 'none') {
                    $('#recurrence-details').hide();
                    $('#recurrence-details-weekdays').hide();
                    $('#recurrence-details-monthdays').hide();
                } else {
                    $('#recurrence-details').show();

                    $('#recurrence-details-weekdays, #recurrence-details-monthdays').hide();

                    if (value === 'weekly') {
                        $('#recurrence-details-weekdays').show();
                        $('#event-recurrence-weekdays').select2('destroy').select2({
                            width: '100%',
                            placeholder: 'Sélectionnez les jours de la semaine'
                        });
                    }

                    if (value === 'monthly') {
                        $('#recurrence-details-monthdays').show();
                        $('#event-recurrence-monthdays').select2('destroy').select2({
                            width: '100%',
                            placeholder: 'Sélectionnez les jours du mois'
                        });
                    }
                }
            });

            // Optionnel : déclencher le changement initial si un type est pré-sélectionné
            $('#event-recurrence').trigger('change');


            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Initialize FullCalendar
            const calendarEl = document.getElementById('calendar');
            calendar = new FullCalendar.Calendar(calendarEl, {
                locale: 'fr',
                themeSystem: 'bootstrap5',
                headerToolbar: {
                    left: 'prevYear,prev,next,nextYear today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                initialView: 'dayGridMonth',
                timeZone: 'Africa/Porto-Novo',
                editable: true,
                selectable: true,
                selectMirror: true,
                slotDuration: '00:01:00',
                select: function(info) {
                    document.getElementById('start').value = info.startStr;
                    document.getElementById('end').value = info.startStr;
                    document.getElementById('allDay').value = info.allDay;

                    const startTime = formatTime(info.start);
                    const endTime = formatTime(info.end);

                    document.getElementById('start_time').value = startTime;
                    document.getElementById('end_time').value = endTime;

                    const eventModal = new bootstrap.Modal(document.getElementById('eventModal'));
                    eventModal.show();
                },
                eventClick: function(info) {
                    $.ajax({
                        type: "GET",
                        url: "{{ route('user.planification.events_count') }}",
                        data: {
                            title: info.event.title,
                            category_id: info.event.extendedProps.category_id,
                            created_at: info.event.extendedProps.created_at,
                        },
                        success: function(response) {
                            if (response.success) {
                                document.getElementById('event_id').value = info.event.id;
                                document.getElementById('title').value = info.event.title;
                                document.getElementById('category_id').value = info.event
                                    .extendedProps.category_id;
                                document.getElementById('created_at').value = info.event
                                    .extendedProps.created_at;
                                document.getElementById('image').value = info.event
                                    .extendedProps.image;
                                document.getElementById('start_date').value = info.event
                                    .startStr;
                                document.getElementById('end_date').value = info.event
                                    .endStr;

                                const updateDeleteModal = new bootstrap.Modal(document
                                    .getElementById('updateDeleteModal'));
                                document.getElementById('event-title').innerText = info
                                    .event.title;
                                document.getElementById('event-date-start').innerText =
                                    formattedDate(info.event.startStr);
                                document.getElementById('event-date-end').innerText =
                                    formattedDate(info.event.endStr);
                                // document.getElementById('event-category').innerText = info
                                //     .event
                                //     .extendedProps.category_id;
                                updateDeleteModal.show();

                                if (response.events_count > 1) {
                                    $('#update-delete-event-message').addClass('d-none');
                                    $('#update-delete-events-message').removeClass(
                                        'd-none');
                                    $('#delete-events-button').removeClass('d-none');
                                } else {
                                    $('#update-delete-event-message').removeClass('d-none');
                                    $('#update-delete-events-message').addClass('d-none');
                                    $('#delete-events-button').addClass('d-none');
                                }
                            }
                        }
                    });
                },
                eventDrop: function(info) {
                    updateEventOnCalendar(info.event);
                },
                eventResize: function(info) {
                    updateEventOnCalendar(info.event);
                },
                datesSet: function(info) {
                    loadEvents(info.start, info.end);
                },
                events: function(fetchInfo, successCallback, failureCallback) {
                    loadEvents(fetchInfo.start, fetchInfo.end, successCallback);
                },
                eventColor: '#b7410e',
            });

            calendar.render();

            function formatTime(date) {
                return date.toLocaleTimeString('fr-FR', {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false
                }).replace(':', '');
            }

            function updateEventOnCalendar(event) {
                $.ajax({
                    url: "{{ route('user.planification.edit') }}",
                    type: "PATCH",
                    data: {
                        title: event.title,
                        start: event.startStr,
                        end: event.endStr,
                        id: event.id,
                    },
                    success: function(response) {
                        showToast('success', 'Evènement mis à jour avec succès !');
                    },
                    error: function() {
                        showToast('error', 'Erreur lors de la mise à jour');
                    }
                });
            }

            function loadEvents(start, end, successCallback) {
                $.ajax({
                    url: "{{ route('user.planification.events', ['radio_id' => $radio->id]) }}",
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        'start': start.toISOString(),
                        'end': end.toISOString()
                    },
                    success: function(data) {
                        if (successCallback) {
                            successCallback(data);
                        } else {
                            calendar.removeAllEvents();
                            calendar.addEventSource(data);
                        }
                    }
                });
            }
        });

        function formattedDate(dateStr) {
            const d = new Date(dateStr);
            return d.toLocaleString("fr-FR", {
                weekday: 'short',
                year: 'numeric',
                month: 'short',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                timeZone: 'UTC'
            });
        }

        function addEvent() {
            const event_name = document.getElementById('event_name').value;
            const category_id = document.getElementById('category_id').value;
            const startDateInput = document.getElementById('start').value;
            const endDateInput = document.getElementById('end').value;
            const start_time = document.getElementById('start_time').value;
            const end_time = document.getElementById('end_time').value;

            // Validation de base
            if (!event_name) {
                showToast('error', 'Veuillez entrer le nom de l\'évènement');
                return;
            }

            // Création des dates avec fuseau UTC+1
            const startDate = new Date(startDateInput);
            const endDate = new Date(endDateInput);

            // Ajout des heures/minutes
            const [startHours, startMinutes] = start_time.split(':').map(Number);
            const [endHours, endMinutes] = end_time.split(':').map(Number);

            startDate.setHours(startHours, startMinutes, 0, 0);
            endDate.setHours(endHours, endMinutes, 0, 0);

            // Vérification que l'heure de fin est après l'heure de début
            if (endDate <= startDate) {
                showToast('error', 'L\'heure de fin doit être après l\'heure de début');
                return;
            }

            // Formatage pour l'envoi au serveur
            const start = formatDateTimeLocal(startDate);
            const end = formatDateTimeLocal(endDate);

            // Vérification des conflits
            const events = calendar.getEvents();
            let hasConflict = false;

            for (const event of events) {
                const eventStart = new Date(new Date(event.start).getTime() - 60 * 60 * 1000);
                const eventEnd = new Date(new Date(event.end).getTime() - 60 * 60 * 1000);
                /* console.log('event start', eventStart);
                console.log('event end', eventEnd); */

                // Vérification stricte du chevauchement
                if (
                    (startDate.toDateString() === eventStart.toDateString())
                ) {
                    if (eventStart < endDate && eventEnd > startDate) {
                        hasConflict = true;
                        break;
                    }
                }
            }

            /* console.log('Start event', startDate);
            console.log('End event', endDate);
            console.log('Date start of day', startDate.toDateString());
            console.log('Date end of day', endDate.toDateString());
            console.log('Has conflict', hasConflict);
            return; */

            if (hasConflict) {
                showToast('error', 'Un évènement existe déjà dans cette plage horaire !');
                return;
            }

            // Gestion des récurrences
            const event_recurrence = document.getElementById('event-recurrence').value;
            let start_dates = [];
            let end_dates = [];
            let recurringConflicts = [];

            if (event_recurrence !== 'none') {
                const event_recurrence_end = document.getElementById('event-recurrence-end').value;
                let ruleOptions = {
                    freq: null,
                    dtstart: startDate,
                    until: new Date(event_recurrence_end)
                };

                switch (event_recurrence) {
                    case 'daily':
                        ruleOptions.freq = rrule.RRule.DAILY;
                        break;
                    case 'weekly':
                        ruleOptions.freq = rrule.RRule.WEEKLY;
                        ruleOptions.byweekday = addWeekDays(getSelectedValues('#event-recurrence-weekdays'));
                        break;
                    case 'monthly':
                        ruleOptions.freq = rrule.RRule.MONTHLY;
                        ruleOptions.bymonthday = addMonthDays(getSelectedValues('#event-recurrence-monthdays'));
                        break;
                }

                const rule = new rrule.RRule(ruleOptions);
                const dates = rule.all();

                for (const date of dates) {
                    const recurringStart = new Date(date);
                    recurringStart.setHours(startHours, startMinutes, 0, 0);

                    const recurringEnd = new Date(recurringStart);
                    recurringEnd.setHours(endHours, endMinutes, 0, 0);

                    // Vérification des conflits pour chaque occurrence
                    let isConflict = false;
                    for (const event of events) {
                        const eventStart = new Date(new Date(event.start).getTime() - 60 * 60 * 1000);
                        const eventEnd = new Date(new Date(event.end).getTime() - 60 * 60 * 1000);
                        if (
                            (recurringStart < eventEnd) &&
                            (recurringEnd > eventStart)
                        ) {
                            isConflict = true;
                            break;
                        }
                    }

                    if (!isConflict) {
                        start_dates.push(formatDateTimeLocal(recurringStart));
                        end_dates.push(formatDateTimeLocal(recurringEnd));
                    } else {
                        recurringConflicts.push(recurringStart);
                    }
                }

                if (recurringConflicts.length > 0) {
                    showToast('warning', `${recurringConflicts.length} occurrences ont été ignorées en raison de conflits`);
                }
            }

            // Envoi des données au serveur
            const formData = new FormData();
            formData.append('title', event_name);
            formData.append('category_id', category_id);
            formData.append('start', start);
            formData.append('end', end);
            formData.append('start_dates', JSON.stringify(start_dates));
            formData.append('end_dates', JSON.stringify(end_dates));

            $.ajax({
                type: 'POST',
                url: "{{ route('user.planification.create') }}",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        showToast('success', `Evènement: ${event_name} créé avec succès !`);
                        window.location.reload();
                    } else {
                        showToast('error', response.message);
                    }
                },
                error: function(error) {
                    showToast('error', error.responseJSON?.message || 'Erreur lors de la création');
                }
            });

            bootstrap.Modal.getInstance(document.getElementById('eventModal')).hide();
        }

        function deleteEvent() {
            const event_id = document.getElementById('event_id').value;

            $.ajax({
                type: "DELETE",
                url: "{{ route('user.planification.destroy') }}",
                data: {
                    id: event_id,
                },
                success: function(response) {
                    showToast('success', 'Suppression de l\'évènement avec succès !');
                    window.location.reload();
                },
                error: function() {
                    showToast('success', 'Suppression de l\'évènement avec succès !');
                    // showToast('error', 'Erreur lors de la suppression');
                    window.location.reload();
                }
            });

            bootstrap.Modal.getInstance(document.getElementById('updateDeleteModal')).hide();
        }

        function deleteEvents() {
            const title = document.getElementById('title').value;
            const category_id = document.getElementById('category_id').value;
            const created_at = document.getElementById('created_at').value;

            $.ajax({
                type: "DELETE",
                url: "{{ route('user.planification.delete_events') }}",
                data: {
                    title: title,
                    category_id: category_id,
                    created_at: created_at,
                },
                success: function(response) {
                    showToast('success', 'Suppression des évènements avec succès !');
                    window.location.reload();
                },
                error: function() {
                    showToast('error', 'Erreur lors de la suppression');
                }
            });

            bootstrap.Modal.getInstance(document.getElementById('updateDeleteModal')).hide();
        }

        function showUpdateModal() {
            const event_id = document.getElementById('event_id').value;
            const event_title = document.getElementById('title').value;
            const event_category_id = document.getElementById('category_id').value;
            const start_date = document.getElementById('start_date').value;
            const end_date = document.getElementById('end_date').value;

            console.log('Start date', start_date)
            document.getElementById('event_name_updated').value = event_title;
            document.getElementById('event_name_updated2').value = event_title;
            document.getElementById('category_id_updated').value = event_category_id;
            document.getElementById('category_id_updated2').value = event_category_id;

            const start_time = new Date(start_date).toISOString().substr(11, 8);
            const end_time = new Date(end_date).toISOString().substr(11, 8);

            document.getElementById('start_time_updated').value = start_time;
            document.getElementById('end_time_updated').value = end_time;

            document.getElementById('start_date_updated').value = start_date;
            document.getElementById('end_date_updated').value = end_date;

            bootstrap.Modal.getInstance(document.getElementById('updateDeleteModal')).hide();

            const updateModal = new bootstrap.Modal(document.getElementById('updateEventModal'));
            updateModal.show();
        }

        function updateEvent() {
            const event_id = document.getElementById('event_id').value;
            const event_title = document.getElementById('event_name_updated').value;
            const event_title2 = document.getElementById('event_name_updated2').value;
            const event_category_id = document.getElementById('category_id_updated').value;
            const event_category_id2 = document.getElementById('category_id_updated2').value;
            const start_date = document.getElementById('start_time_updated').value;
            const end_date = document.getElementById('end_time_updated').value;
            const created_at = document.getElementById('created_at').value;

            if (!event_title) {
                showToast('error', 'Veuillez entrer le nom de l\'évènement');
                return;
            }

            const formData = new FormData();
            formData.append('id', event_id);
            formData.append('title', event_title);
            formData.append('title2', event_title2);
            formData.append('category_id', event_category_id);
            formData.append('category_id2', event_category_id2);
            formData.append('start_time', start_date);
            formData.append('end_time', end_date);
            formData.append('created_at', created_at);

            $.ajax({
                type: 'POST',
                url: "{{ route('user.planification.edit_image') }}",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        showToast('success', `Evènement: ${event_title} mis à jour avec succès !`);
                        window.location.reload();
                    } else {
                        showToast('error', response.message);
                    }
                },
                error: function(error) {
                    showToast('error', error.responseJSON?.message || 'Erreur lors de la mise à jour');
                }
            });

            bootstrap.Modal.getInstance(document.getElementById('updateEventModal')).hide();
        }

        // Helper functions
        function addWeekDays(days) {
            const rruleWeekDays = {
                'monday': rrule.RRule.MO,
                'tuesday': rrule.RRule.TU,
                'wednesday': rrule.RRule.WE,
                'thursday': rrule.RRule.TH,
                'friday': rrule.RRule.FR,
                'saturday': rrule.RRule.SA,
                'sunday': rrule.RRule.SU
            };
            return days.map(day => rruleWeekDays[day]);
        }

        function addMonthDays(days) {
            return days.map(day => parseInt(day));
        }

        function showToast(type, message, timer = 6000) {
            const Toast = Swal.mixin({
                toast: true,
                position: "top-end",
                showConfirmButton: false,
                timer: timer,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.onmouseenter = Swal.stopTimer;
                    toast.onmouseleave = Swal.resumeTimer;
                }
            });
            Toast.fire({
                icon: type,
                title: message
            });
        }

        function formatDateTimeLocal(date) {
            const pad = n => n.toString().padStart(2, '0');

            return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ` +
                `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
        }

        function getSelectedValues(selector) {
            const select = document.querySelector(selector);
            return Array.from(select.selectedOptions).map(option => option.value);
        }
    </script>
@endsection