@php(
$headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
$title ?? '',
$subTitle ?? '',
isset($filters) ? $filters : [],
isset($advancedFilters) ? $advancedFilters : []
)
)
@php(
 $permissionEvent = \App\Models\Masters\Permission::checkModulePermissions(['create'], 'EventController')
)
@php($headingOptions = [

$permissionEvent['create'] ? '<a href="' . route('calendar.event.create') . '" class="'. \Config::get('view.buttons.primary') .' show-modal-lg"><i class="'. \Config::get('settings.icon_add') .'"></i> ADD EVENT</a>' : '',
'<a href="#" class="secondary-button" title="Email"><i class="mdi mdi-email-outline"></i></a>' ,
'<a href="#" class="secondary-button" title="Messages"><i class="mdi mdi-message-text-outline"></i></a>' ,
'<a href="' . route('calendar.index') . '" class="secondary-button" title="Refresh"><i class="mdi mdi-refresh"></i></a>' ,
'<a href="#" class="secondary-button" title="Print" onclick="printCalendarLandscape(event)"><i class="mdi mdi-printer"></i></a>' ,
'<a href="#" class="secondary-button" title="Calendar"><i class="mdi mdi-calendar"></i></a>' ,
'<a href="'. route('calendar.settings.index') .'" class="secondary-button" target="_blank" title="Settings"><i class="mdi mdi-cog"></i></a>' ,
'<div class="dropdown d-inline-block">
    <a href="#" class="secondary-button dropdown-toggle" id="moreOptionsDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="More Options">
        <i class="mdi mdi-dots-horizontal"></i>
    </a>
    <ul class="dropdown-menu" aria-labelledby="moreOptionsDropdown">
        <li><a class="dropdown-item calendar_list_view" id="1" href="#"><i class="mdi mdi-calendar-week me-2"></i>Calendar & List View</a></li>
        <li><a class="dropdown-item calendar_list_view" id="2" href="#"><i class="mdi mdi-calendar-month me-2"></i>Calendar View</a></li>
        <li><a class="dropdown-item calendar_list_view" id="3" href="#"><i class="mdi mdi-view-list me-2"></i>List View</a></li>
    </ul>
</div>' ,

])
@extends('admin.layouts.layout', $headerOption)
@section('content')
 
<div class="row" id="calendar-page">
    <div class="col-md-12  mt-2">
        <div class="heading-btn-sec ipad_column">
            <h3>{{ $module }}</h3>
            <div class="heading-btn action-buttons-wrapper">
                @foreach($headingOptions as $option)
                {!! $option !!}
                @endforeach
            </div>
        </div>
    </div>
    <div class="col-md-9 calendarSection">
        <div class="project-box">

            <div class="mb-3">
                @include('admin.components.admin-form-wrapper', ['form' => $searchForm])
            </div>


            <div id='calendar'></div>


            <div id="list-view-container" style="display: none;">
                @include('admin.calendar.index_list')
            </div>
        </div>
    </div>
    <div class="col-md-3 userListSection">
        <div class="project-box">
            <div class="position-relative mb-2">
                <input type="text" class="form-control" placeholder="Search users" id="userSearch" autocomplete="off" style="border-radius: 8px; background-color: #f8f9fa; border: 1px solid #eee; padding-right: 60px;">
                <span id="searchIcon" class="position-absolute end-0 top-50 translate-middle-y me-2" style="color: #999; cursor: pointer; z-index: 3;">
                    <i class="mdi mdi-magnify"></i>
                </span>
                <span id="clearSearch" class="position-absolute end-0 top-50 translate-middle-y me-4" style="color: #999; cursor: pointer; display: none; z-index: 3;">
                    <i class="mdi mdi-close"></i>
                </span>
            </div>
            <div class="list-group list-group-flush" id="userList">
                <!-- No users found message -->
                <div id="noUsersFound" class="list-group-item text-center py-1" style="display: none; background-color: #f8f9fa; border-radius: 4px; margin-bottom: 10px;">
                    <p class="text-muted mb-0">No users found</p>
                </div>

                @foreach($userList as $user)
                                <div class="list-group-item d-flex align-items-center py-2 px-3 user-item"
                    data-user-id="{{ $user->id }}" data-user-name="{{ $user->first_name }} {{ $user->last_name }}"
                    data-user-color="{{ $backgroundColor }}" style="border-left: 3px solid {{ $backgroundColor }}">
                    <div class="me-3">
                        <div class="avatar-circle custom-control custom-checkbox project-checkbox" style="background-color: {{ $backgroundColor }}">
                            <!-- {{ $initials }} -->
                            <input class="user-checkbox" type="checkbox" value="{{ $user->id }}" id="user-{{ $user->id }}"
                                name="search_user[]" checked>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <span class="mb-0 user-name">{{ $user->first_name }} {{ $user->last_name }}</span>
                        <span>{{ ($user->id == auth()->id()) ? ' (Me)' : '' }}</span>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>


@endsection
@push('page_css')
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.css" rel="stylesheet">

@endpush

@push('page_script')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


<script>

        function printCalendarLandscape(e) {
            e.preventDefault();
            window.onafterprint = function() {
            location.reload();
            };
            window.print();
            setTimeout(function() {
            // After print dialog, attempt to set page size to A3 via CSS
            var printStyle = document.createElement('style');
            printStyle.type = 'text/css';
            printStyle.media = 'print';
            printStyle.innerHTML = `
                @page {
                size: A3 landscape;
                margin: 10mm;
                }
                #calendar {
                width: 100% !important;
                min-width: 1100px !important;
                }
            `;
            document.head.appendChild(printStyle);
            }, 100);
        }

    $(document).ready(function() {

        $("#row-search_start_time, #row-search_end_time").hide();


        // Ensure DOM is fully loaded before initializing
        setTimeout(function() {
            initializeUserSearch();
        }, 100);

        // Initialize styling for any unchecked user items
        $(".user-item").each(function() {
            var checkbox = $(this).find(".user-checkbox");
            if (!checkbox.prop("checked")) {
                $(this).css("opacity", "0.5");
                $(this).css("border-left", "3px solid #ccc");
            }
        });

        $(".calendar_list_view").on("click", function(e) {
            e.preventDefault();
            var viewType = $(this).attr("id");
            if (viewType == 1) {
                // Update list view before showing it
                updateListView();
                $("#list-view-container").show();
                $("#calendar").show();
            } else if (viewType === "2") {
                $("#list-view-container").hide();
                $("#calendar").show();

                $("#row-search_start_time, #row-search_end_time").hide();
            } else if (viewType === "3") {
                // Update list view before showing it
                updateListView();
                $("#calendar").hide();
                $("#list-view-container").show();
                $("#row-search_start_time, #row-search_end_time").show();
            }
        });


        // Enhanced toggle for user list with animation and active state
        $(".toggleUserList").on("click", function() {
            var $userPanel = $(".userListSection");
            var $calendarPanel = $(".calendarSection");
            var isVisible = !$userPanel.hasClass("d-none");

            // Toggle panel visibility with class
            if (isVisible) {
                // Currently visible, so hide it
                $userPanel.addClass("d-none");
                $calendarPanel.removeClass("col-md-9").addClass("col-md-12");
                $(this).removeClass("active");
                $(this).find("i").removeClass("fa-list").addClass("fa-list-ul");
            } else {
                // Currently hidden, so show it
                $userPanel.removeClass("d-none");
                $calendarPanel.removeClass("col-md-12").addClass("col-md-9");
                $(this).addClass("active");
                $(this).find("i").removeClass("fa-list-ul").addClass("fa-list");
            }

            // Update calendar size after panel toggle
            if (calendar) {
                setTimeout(function() {
                    calendar.updateSize();
                }, 100);
            }
        });

        // Function to update user item styling
        function updateUserItemStyling($item) {
            var checkbox = $item.find(".user-checkbox");
            if (checkbox.prop("checked")) {
                $item.css("opacity", "1");
                // Restore original border color
                var userColor = $item.data("user-color");
                $item.css("border-left", "3px solid " + userColor);
            } else {
                $item.css("opacity", "0.5");
                $item.css("border-left", "3px solid #ccc");
            }

            // Trigger change event for any filtering functionality
            checkbox.trigger("change");
        }

        // Main user item click handler
        $(".user-item").on("click", function(e) {
            // Only handle clicks directly on the user-item, not on its children
            if (e.target === this || $(e.target).hasClass("flex-grow-1") || $(e.target).hasClass("user-name")) {
                var checkbox = $(this).find(".user-checkbox");
                checkbox.prop("checked", !checkbox.prop("checked"));
                updateUserItemStyling($(this));

                // Synchronize the viewing dropdown with checkbox selections
                setTimeout(function() {
                    const checkedUsers = $('.user-checkbox:checked').length;
                    if (checkedUsers > 1) {
                        $('select[name="search_viewing"]').val('');
                    } else if (checkedUsers === 1) {
                        // If only one user is checked, update the dropdown to show that user
                        const singleUserId = $('.user-checkbox:checked').val();
                        $('select[name="search_viewing"]').val(singleUserId);
                    }
                }, 50);

                // Refresh calendar when user selection changes
                if (calendar) {
                    calendar.refetchEvents();
                }
            }
        });

        // Specific handler for checkbox to prevent bubbling
        $(".user-checkbox").on("click", function(e) {
            e.stopPropagation();
            updateUserItemStyling($(this).closest(".user-item"));

            // Check if multiple users are now selected, and if so, reset the viewing dropdown to "All Calendars"
            const checkedUsers = $('.user-checkbox:checked').length;
            if (checkedUsers > 1) {
                $('select[name="search_viewing"]').val('');
            } else if (checkedUsers === 1) {
                // If only one user is checked, update the dropdown to show that user
                const singleUserId = $('.user-checkbox:checked').val();
                $('select[name="search_viewing"]').val(singleUserId);
            }

            // Refresh calendar and list view when user selection changes
            if (calendar) {
                calendar.refetchEvents();
            }
            updateListView();
        });

        // Add event listeners for all search fields to reload calendar and list view when any search criteria changes
        $('.search_event_type, #search_priority, select[name^="search_"]:not([name="search_viewing"]), input[name^="search_"]').on('change', function() {
            if (calendar) {
                calendar.refetchEvents();
            }
            updateListView();
        });

        // Special handler for search_viewing dropdown to update user checkboxes
        $('select[name="search_viewing"]').on('change', function() {
            const selectedUserId = $(this).val();

            // Skip processing if "All Calendars" (empty value) is selected
            if (!selectedUserId) {
                // Check all users when "All Calendars" is selected
                $('.user-checkbox').prop('checked', true);
                $('.user-item').each(function() {
                    updateUserItemStyling($(this));
                });

                // Refresh calendar and list view
                if (calendar) {
                    calendar.refetchEvents();
                }
                updateListView();
                return;
            }

            // Otherwise, check only the selected user and uncheck all others
            $('.user-checkbox').each(function() {
                const $checkbox = $(this);
                const userId = $checkbox.val();
                const wasChecked = $checkbox.prop('checked');

                // Set checked state based on whether this user matches the selected ID
                const shouldBeChecked = (userId === selectedUserId);
                $checkbox.prop('checked', shouldBeChecked);

                // Update styling if the state changed
                if (wasChecked !== shouldBeChecked) {
                    updateUserItemStyling($checkbox.closest('.user-item'));
                }
            });

            // Refresh calendar and list view
            if (calendar) {
                calendar.refetchEvents();
            }
            updateListView();
        });

        // Handle text inputs with debounce to avoid too many requests while typing
        $('input[type="text"][name^="search_"]').on('input', debounce(function() {
            if (calendar) {
                calendar.refetchEvents();
            }
            updateListView();
        }, 500)); // 500ms debounce delay

        // Debounce function to limit how often a function gets called
        function debounce(func, wait) {
            let timeout;
            return function() {
                const context = this,
                    args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(function() {
                    func.apply(context, args);
                }, wait);
            };

            // Auto-open event modal when arriving with ?open_event_id
            $(function(){
                try {
                    var params = new URLSearchParams(window.location.search);
                    var eid = params.get('open_event_id');
                    if (eid) {
                        var href = '{{ route('calendar.event.view', 0) }}'.replace(/\/0$/, '/' + eid);
                        var $link = $('<a>').attr('href', href).addClass('show-modal-lg').css('display','none').appendTo('body');
                        $link.trigger('click');
                        setTimeout(function(){ $link.remove(); }, 2000);
                    }
                } catch(err) { /* noop */ }
            });
        }

        // Function to update the list view based on search parameters
        function updateListView() {
            // Get all search parameters
            const searchParams = collectSearchParameters();

            // Add loading indicator to list view container
            $("#list-view-container").addClass("loading");

            // Use AJAX to fetch updated list view
            $.ajax({
                url: "{{ route('calendar.events.list') }}",
                type: "GET",
                data: searchParams,
                success: function(response) {
                    // Replace the list view content with the updated content
                    $("#list-view-container").html(response);
                    $("#list-view-container").removeClass("loading");
                },
                error: function(xhr, status, error) {
                    console.error("Error updating list view:", error);
                    $("#list-view-container").removeClass("loading");
                }
            });
        }

        // Function to collect all current search parameters
        function collectSearchParameters() {
            // Get checked event types (Task/Appointment)
            let eventTypes = [];
            $('.search_event_type:checked').each(function() {
                eventTypes.push($(this).val());
            });

            // Get selected users
            let selectedUsers = [];
            $('.user-checkbox:checked').each(function() {
                selectedUsers.push($(this).val());
            });

            // Collect all search parameters
            let searchParams = {
                timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
                search_priority: $('#search_priority').val(),
                search_status_state: $('#search_status_state').val(),
                search_event_type: eventTypes.length > 0 ? eventTypes : null,
                search_user: selectedUsers.length > 0 ? selectedUsers : null,
            };

            // Add any other search fields dynamically
            $('select[name^="search_"], input[name^="search_"]:not(.search_event_type)').each(function() {
                const field = $(this);
                if (field.val() && field.val() !== '') {
                    searchParams[field.attr('name')] = field.val();
                }
            });

            return searchParams;
        }


        // Initialize user search functionality
        function initializeUserSearch() {

            // Make sure the search field is empty on page load
            $("#userSearch").val('');
            $("#clearSearch").hide();

            // Add some CSS to ensure search behavior works properly
            var style = document.createElement('style');
            style.innerHTML = `
                .user-item:not(.search-matched) { display: none !important; }
                .user-item.search-matched { display: flex !important; }
                #userList.searching .user-item:not(.search-matched) { display: none !important; }
            `;
            document.head.appendChild(style);

            // Show all user items on init by adding matched class
            var userItems = document.querySelectorAll("#userList .list-group-item.user-item");
            userItems.forEach(function(item) {
                item.style.display = 'flex';
                item.classList.add('search-matched');
            });

            // Ensure no users found message is hidden initially
            document.getElementById("noUsersFound").style.display = 'none';

            // Detach any existing event handlers to prevent duplicates
            $("#userSearch").off("keyup input");
            $("#clearSearch").off("click");
            $("#searchIcon").off("click");

            // Attach event handler for search input using both keyup and input events for better compatibility
            document.getElementById("userSearch").addEventListener("input", function() {
                var value = this.value.toLowerCase().trim();
                performSearch(value);
            });

            // Also keep jQuery handler for complete compatibility
            $("#userSearch").on("keyup", function() {
                var value = $(this).val().toLowerCase().trim();
                performSearch(value);
            });

            // Handle clear search button with native DOM event
            document.getElementById("clearSearch").addEventListener("click", function(e) {
                e.preventDefault();
                e.stopPropagation();

                // Clear the search input
                var searchInput = document.getElementById("userSearch");
                searchInput.value = '';

                // Show all user items and mark them as matched
                var userItems = document.querySelectorAll("#userList .list-group-item.user-item");
                userItems.forEach(function(item) {
                    item.style.display = 'flex';
                    item.classList.add('search-matched');
                });

                // Hide the no users message
                document.getElementById("noUsersFound").style.display = 'none';

                // Hide the clear button
                this.style.display = 'none';

                // Focus back on search input
                searchInput.focus();

                // Check if we need to filter users based on search_viewing dropdown
                var viewingDropdown = document.querySelector('select[name="search_viewing"]');
                if (viewingDropdown && viewingDropdown.value) {
                    // If a specific user is selected in the dropdown, make sure only that user remains checked
                    var selectedUserId = viewingDropdown.value;
                    document.querySelectorAll('.user-checkbox').forEach(function(checkbox) {
                        var wasChecked = checkbox.checked;
                        var shouldBeChecked = (checkbox.value === selectedUserId);
                        checkbox.checked = shouldBeChecked;

                        // Update styling if changed
                        if (wasChecked !== shouldBeChecked) {
                            var userItem = checkbox.closest('.user-item');
                            if (shouldBeChecked) {
                                userItem.style.opacity = '1';
                                var userColor = userItem.getAttribute('data-user-color');
                                userItem.style.borderLeft = '3px solid ' + userColor;
                            } else {
                                userItem.style.opacity = '0.5';
                                userItem.style.borderLeft = '3px solid #ccc';
                            }
                        }
                    });
                }

                console.log('Search cleared, all users visible');
            });

            // Handle search icon click - focus search field
            $("#searchIcon").on("click", function() {
                $("#userSearch").focus();
            });

            // Call the initial check
            checkForNoUsers();
            console.log('User search initialization completed');
        }

        // Function to perform the search using direct DOM manipulation
        function performSearch(searchTerm) {
            console.log('Searching for:', searchTerm);

            // Show/hide the clear button based on search value
            $("#clearSearch").toggle(searchTerm.length > 0);

            // Get all user items directly from DOM
            var userItems = document.querySelectorAll("#userList .list-group-item.user-item");
            var userList = document.getElementById("userList");
            var visibleCount = 0;
            var totalItems = userItems.length;

            console.log('Total user items:', totalItems);

            // First hide the "No users found" message
            document.getElementById("noUsersFound").style.display = 'none';

            // Toggle the searching class based on whether we have a search term
            if (searchTerm.length > 0) {
                userList.classList.add('searching');
            } else {
                userList.classList.remove('searching');
            }

            // Reset all items to visible first if search is empty
            if (searchTerm.length === 0) {
                userItems.forEach(function(item) {
                    item.style.display = 'flex'; // Use flex display to maintain layout
                    item.classList.add('search-matched');
                });
                console.log('Search term empty, showing all users');
                return; // Exit early as no filtering needed
            }

            // Loop through each user item with native DOM methods
            userItems.forEach(function(item, index) {
                // Get the user name from the data attribute instead of text content
                var userName = (item.getAttribute("data-user-name") || "").toLowerCase();

                // Check if the search term is in the user name - using includes for better matching
                var isMatch = userName.includes(searchTerm);

                // Debug info for each user
                if (index < 5 || isMatch) { // Limit logging to avoid console spam
                    console.log(`User ${index + 1}: "${userName}" - Match: ${isMatch} - Search term: "${searchTerm}"`);
                }

                // Show or hide the item based on the match - use direct style property
                if (isMatch) {
                    item.style.display = 'flex'; // Use flex display to maintain layout
                    item.classList.add('search-matched');
                    visibleCount++;
                } else {
                    // Force hide unmatched users with !important
                    item.style.display = 'none';
                    item.classList.remove('search-matched');
                }
            });

            // Show/hide the "No users found" message if we have a search term
            if (searchTerm.length > 0) {
                if (visibleCount === 0) {
                    var noUsersElement = document.getElementById("noUsersFound");
                    noUsersElement.style.display = 'block';
                    noUsersElement.querySelector("p").textContent = "No users found matching '" + searchTerm + "'";
                    console.log('No users found matching search term, showing message');
                }
            }

            console.log('Visible count after filtering:', visibleCount);

            // Update the list view to match the search criteria
            updateListView();
        }

        // Helper function to check if there are any users to display using direct DOM methods
        function checkForNoUsers() {
            var userItems = document.querySelectorAll("#userList .list-group-item.user-item");
            var totalUsers = userItems.length;
            var noUsersElement = document.getElementById("noUsersFound");

            // console.log("Total users in list:", totalUsers);

            if (totalUsers === 0) {
                // No users at all in the list
                noUsersElement.style.display = 'block';
                noUsersElement.querySelector("p").textContent = "No users available";
            } else {
                // Hide the message since we have users
                noUsersElement.style.display = 'none';

                // Check if we have an active search
                var searchValue = document.getElementById("userSearch").value.toLowerCase().trim();
                if (searchValue.length > 0) {
                    // Count visible users with direct DOM check
                    var visibleUsers = 0;

                    userItems.forEach(function(item) {
                        // Use the data-user-name attribute to determine if it should be visible
                        var userName = (item.getAttribute("data-user-name") || "").toLowerCase();
                        if (userName.includes(searchValue)) {
                            visibleUsers++;
                        }
                    });

                    if (visibleUsers === 0) {
                        noUsersElement.style.display = 'block';
                        noUsersElement.querySelector("p").textContent = "No users found matching '" + searchValue + "'";
                    }
                }
            }
        }


    });
</script>

<script>
    // Define calendar variable in a higher scope so it's accessible by other functions
    let calendar;

    document.addEventListener('DOMContentLoaded', function() {
        const calendarEl = document.getElementById('calendar');
        const csrf = document.querySelector('meta[name=\"csrf-token\"]').content;

        // Debug the events endpoint URL
        const eventsEndpoint = '{{ route("calendar.events") }}';

        calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            initialView: 'dayGridMonth',
            selectable: true,
            editable: true,
            displayEventTime: false, // We'll handle time display manually
            timeZone: 'local',
            eventTimeFormat: {
                hour: 'numeric',
                minute: '2-digit',
                meridiem: 'short'
            },
            views: {
                dayGridMonth: {
                    titleFormat: {
                        month: 'long',
                        year: 'numeric'
                    }
                },
                timeGridWeek: {
                    titleFormat: {
                        month: 'short',
                        day: 'numeric',
                        year: 'numeric'
                    },
                    slotDuration: '00:30:00',
                    slotLabelFormat: {
                        hour: 'numeric',
                        minute: '2-digit',
                        meridiem: 'short'
                    }
                },
                timeGridDay: {
                    titleFormat: {
                        month: 'long',
                        day: 'numeric',
                        weekday: 'long'
                    },
                    slotDuration: '00:30:00',
                    slotLabelFormat: {
                        hour: 'numeric',
                        minute: '2-digit',
                        meridiem: 'short'
                    }
                }
            },
            // Style all events with white background and user-specific border color
            eventDidMount: function(info) {
                // Style the event element
                const eventEl = info.el;
                const eventInner = eventEl.querySelector('.fc-event-main');

                // Set event view type class for more specific styling
                const isTimeGrid = info.view.type.includes('timeGrid');
                if (isTimeGrid) {
                    eventEl.classList.add('fc-timegrid-event');
                }

                // Apply core styling - we'll use CSS for most styling now
                // but keep basic inline styles for backwards compatibility
                if (eventInner) {
                    eventInner.style.color = '#222222';
                }

                // Add shadow effect for better visual appearance
                eventEl.style.boxShadow = '0 1px 2px rgba(0,0,0,0.05)';

                let priorityText = info.event.extendedProps?.priorityText;
                let dotColor = info.event.extendedProps?.priorityColor;
                let eventStatus = info.event.extendedProps?.status;
                let setForUserName = info.event.extendedProps?.setForUserName;
                let typeText = info.event.extendedProps?.typeText;

                // Use event's borderColor if available, fallback to #cccccc
                const eventBorderColor = info.event.borderColor || '#cccccc';

                // Ensure pointer cursor for better UX
                eventEl.style.cursor = 'pointer';

                // Check event status and apply opacity if status is 2
                if (eventStatus == 2) {
                    eventEl.style.border = `1px solid ${eventBorderColor}`;
                    eventEl.style.opacity = '.6';
                    eventEl.style.backgroundColor = '#fff'
                } else {
                    eventEl.style.border = `1px solid ${eventBorderColor}`;
                    eventEl.style.backgroundColor = `${eventBorderColor}15`; // 15 adds 8% opacity for very light background
                }

                // Add hover effect with border color shadow
                eventEl.addEventListener('mouseenter', function() {
                    this.style.boxShadow = `0 2px 4px ${eventBorderColor}80`; // 80 adds 50% opacity
                    this.style.transform = 'translateY(-2px)';
                    this.style.transition = 'all 0.2s ease';
                });

                eventEl.addEventListener('mouseleave', function() {
                    this.style.boxShadow = '0 1px 2px rgba(0,0,0,0.05)';
                    this.style.transform = 'translateY(0)';
                });


                const dot = document.createElement('div');
                dot.className = 'priority-dot';
                dot.style.backgroundColor = dotColor;
                dot.title = `Priority: ${priorityText || 'None'}`;
                eventEl.appendChild(dot);

                // Format title with start time if available
                const eventTitle = info.event.title != null ? info.event.title : '';
                let startTime = '';

                if (info.event.start) {
                    startTime = formatTimeWithAMPM(info.event.start);
                }

                // Update title element to show time + title with proper formatting
                const titleEl = eventEl.querySelector('.fc-event-title');
                if (titleEl) {
                    if (startTime) {
                        titleEl.innerHTML = `<span class="event-time">${startTime}</span> ${eventTitle}`;
                    } else {
                        titleEl.textContent = eventTitle;
                    }

                    // Make sure title doesn't overflow
                    titleEl.style.overflow = 'hidden';
                    titleEl.style.textOverflow = 'ellipsis';

                    // Add tooltip for setForUserName if available
                    if (setForUserName) {
                        titleEl.title = `Set ${typeText} for ${setForUserName}`;
                    }
                }

                // Helper function to format time with AM/PM
                function formatTimeWithAMPM(date) {
                    let hours = date.getHours();
                    const minutes = date.getMinutes().toString().padStart(2, '0');
                    const ampm = hours >= 12 ? 'PM' : 'AM';
                    hours = hours % 12;
                    hours = hours ? hours : 12; // the hour '0' should be '12'
                    return `${hours}:${minutes} ${ampm}`;
                }
            },


            events: function(info, successCallback, failureCallback) {
                // Get checked event types (Task/Appointment)
                let eventTypes = [];
                $('.search_event_type:checked').each(function() {
                    eventTypes.push($(this).val());
                });

                // Get selected users
                let selectedUsers = [];
                $('.user-checkbox:checked').each(function() {
                    selectedUsers.push($(this).val());
                });

                // Collect all search parameters
                let searchParams = {
                    start: info.startStr,
                    end: info.endStr,
                    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
                    search_priority: $('#search_priority').val(),
                    search_event_type: eventTypes.length > 0 ? eventTypes : null,
                    search_user: selectedUsers.length > 0 ? selectedUsers : null,
                };

                // Add any other search fields dynamically
                $('select[name^="search_"], input[name^="search_"]:not(.search_event_type)').each(function() {
                    const field = $(this);
                    if (field.val() && field.val() !== '') {
                        searchParams[field.attr('name')] = field.val();
                    }
                });

                // Use axios instead of the built-in AJAX to have more control
                axios.get(eventsEndpoint, {
                        params: searchParams
                    })
                    .then(response => {
                        console.log('Raw events data:', response.data);

                        // Process events to ensure start/end times are properly formatted
                        const events = response.data.map(event => {
                            return event;
                        });

                        successCallback(events);
                    })
                    .catch(error => {
                        console.error('Failed to load events:', error);
                        failureCallback(error);
                    });
            },


            eventClick: function(info) {
                // Get the event ID
                const eventId = info.event.id;

                // Generate the edit URL for the event (for getting the form)
                const editUrl = "{{ route('calendar.event.view', '') }}/" + eventId;

                // Create a hidden anchor with the show-modal-lg class
                const modalTrigger = document.createElement("a");
                modalTrigger.href = editUrl;
                modalTrigger.className = "show-modal-lg";
                modalTrigger.style.display = "none";
                document.body.appendChild(modalTrigger);

                // Simulate a click on the anchor to open the PHP modal
                modalTrigger.click();

                // Clean up the temporary element
                setTimeout(function() {
                    document.body.removeChild(modalTrigger);
                }, 100);
            },

            // Handle event drag-and-drop to reschedule
            eventDrop: function(info) {
                // Prevent dragging events to past dates
                const now = new Date();
                const newStart = info.event.start;
                if (newStart < now.setHours(0, 0, 0, 0)) {
                    info.revert();
                    // Optionally show a message to the user
                    if (window.toastr) {
                        toastr.warning('You cannot move events to a past date.');
                    } else {
                        alert('You cannot move events to a past date.');
                    }
                    return;
                }

                // Get the event ID and new end time
                const eventId = info.event.id;
                const newEnd = info.event.end || new Date(newStart.getTime() + 60 * 60 * 1000); // Default to 1 hour later if no end time

                // Format dates for URL parameters
                const formattedStart = formatDateForParam(newStart);
                const formattedEnd = formatDateForParam(newEnd);

                // Generate the reschedule URL with start/end times as parameters
                const rescheduleUrl = "{{ route('calendar.event.reschedule', '') }}/" + eventId +
                    "?start=" + encodeURIComponent(formattedStart) +
                    "&end=" + encodeURIComponent(formattedEnd);

                // Create a hidden anchor with the show-modal-lg class
                const modalTrigger = document.createElement("a");
                modalTrigger.href = rescheduleUrl;
                modalTrigger.className = "show-modal-lg";
                modalTrigger.style.display = "none";
                document.body.appendChild(modalTrigger);

                // Simulate a click on the anchor to open the reschedule modal
                modalTrigger.click();

                // Clean up the temporary element
                setTimeout(function() {
                    document.body.removeChild(modalTrigger);
                }, 100);

                // Helper function to format date for URL parameter
                function formatDateForParam(date) {
                    return date.toISOString();
                }
            },

            // Handle date click to create a new event
            dateClick: function(info) {
                return;

                // Prevent creating events on past dates
                const clickedDate = info.date;
                const now = new Date();
                // Compare only the date part (ignore time)
                const clickedDateOnly = new Date(clickedDate.getFullYear(), clickedDate.getMonth(), clickedDate.getDate());
                const todayOnly = new Date(now.getFullYear(), now.getMonth(), now.getDate());
                if (clickedDateOnly < todayOnly) {
                    return;
                }

                const newStart = info.date;
                const newEnd = info.date || new Date(newStart.getTime() + 60 * 60 * 1000); // Default to 1 hour later if no end time

                // Format dates for URL parameters
                const formattedStart = formatDateForParam(newStart);
                const formattedEnd = formatDateForParam(newEnd);

                // Generate the create URL with start/end times as parameters
                const createUrl = "{{ route('calendar.event.create') }}" +
                    "?start=" + encodeURIComponent(formattedStart) +
                    "&end=" + encodeURIComponent(formattedEnd);

                // Create a hidden anchor with the show-modal-lg class
                const modalTrigger = document.createElement("a");
                modalTrigger.href = createUrl;
                modalTrigger.className = "show-modal-lg";
                modalTrigger.style.display = "none";
                document.body.appendChild(modalTrigger);

                // Simulate a click on the anchor to open the create modal
                modalTrigger.click();

                // Clean up the temporary element
                setTimeout(function() {
                    document.body.removeChild(modalTrigger);
                }, 100);

                // Helper function to format date for URL parameter
                function formatDateForParam(date) {
                    return date.toISOString();
                }
            }


        });

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

@endpush