{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{$page_title}}
@endsection
<style>
    /* ── General event text wrapping ─────────────────────────── */
    .fc-event {
        font-size: 12px !important;
        padding-left: 5px;
        white-space: normal !important;
        word-break: break-word;
    }
    /* Month view: allow auto height so text wraps fully */
    .fc-daygrid-event {
        height: auto !important;
    }
    /* Week / Day timegrid: clip to slot height — prevents bottom whitespace */
    .fc-timegrid-event {
        overflow: hidden !important;
    }
    .fc-timegrid-event .fc-event-main {
        overflow: hidden !important;
        white-space: normal !important;
        word-break: break-word;
    }
    .fc-h-event .fc-event-main,
    .fc-h-event .fc-event-main-frame {
        white-space: normal !important;
        word-break: break-word;
        display: block !important;
    }

    /* ── Month view: scrollable "+X more" popover ─────────────── */
    .fc-popover {
        max-width: 239px !important;
        z-index: 1050 !important;
    }
    .fc-popover-body {
        max-height:  239px !important;
        overflow-y: auto !important;
    }
    .form-control.datepicker {
        padding: .75rem 1rem;
        border-radius: .475rem;
    }


</style>
{{-- Content --}}
@section('content')
<link href="{{asset('backend/plugins/custom/multiselect/css/multi-select.css')}}" media="screen" rel="stylesheet" type="text/css">
<!--begin::Card-->
<div class="accordion mb-5" id="kt_accordion_1">
    <div class="accordion-item">
        <h2 class="accordion-header" id="kt_accordion_1_header_1">
            <button class="accordion-button fs-4 fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_1" aria-expanded="true" aria-controls="kt_accordion_1_body_1">
                Filters
            </button>
        </h2>
        <div id="kt_accordion_1_body_1" class="accordion-collapse collapse" aria-labelledby="kt_accordion_1_header_1" data-bs-parent="#kt_accordion_1">
            <div class="accordion-body">
                <div class="row">
                    <!--begin::Input Group-->
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="mb-5">
                            <label class="form-label fs-5 fw-bold mb-3">Select Participant:</label>
                            <select class="form-control form-control-solid form-select calendar_filter" name="client_list" data-control="select2">
                                <option value="-1" selected>All Participant</option>
                                @if (!empty($client_list))
                                    @foreach ($client_list ??[] as $uId => $userName)
                                        <option value="{{$uId}}" {{isset($filters_data) && isset($filters_data['client_list']) && $filters_data['client_list'] == $uId ? "selected" : ""}}>{{$userName}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <!--begin::Input group-->
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="mb-10">
                            <label class="form-label fs-5 fw-bold mb-3">Select User:</label>
                            <select class="form-control form-control-solid form-select calendar_filter" name="users_list" data-control="select2">
                                <option value="-1" selected>All Users</option>
                                @if (!empty($users_list))
                                    @foreach ($users_list ??[] as $uId => $userName)
                                        <option value="{{$uId}}" {{isset($filters_data) && isset($filters_data['users_list']) && $filters_data['users_list'] == $uId ? "selected" : ""}}>{{$userName}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <!--end::Input group-->
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <div class="mb-10">
                            <label class="form-label fs-5 fw-bold mb-3">Select Shift Type:</label>
                            <select class="form-control form-control-solid form-select calendar_filter" name="shift_type" data-control="select2">
                                <option value="-1" selected>All Shift Type</option>
                                @if (!empty($shift_type))
                                    @foreach ($shift_type ??[] as $uId => $userName)
                                        <option value="{{$uId}}" {{isset($filters_data) && isset($filters_data['shift_type']) && $filters_data['shift_type'] == $uId ? "selected" : ""}}>{{$userName}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <!--begin::Input Group-->
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                       <div class="mb-10">
                            <label class="form-label fs-5 fw-bold mb-3">Select Event Type:</label>
                            <select class="form-control form-control-solid form-select calendar_filter" name="event_type" data-control="select2" multiple data-placeholder="All Event Type">
                                @php
                                    $selectedEventTypes = [];
                                    if(isset($filters_data['event_type'])) {
                                        $selectedEventTypes = is_array($filters_data['event_type']) ? $filters_data['event_type'] : explode(',', $filters_data['event_type']);
                                    }
                                @endphp
                                @if (!empty($event_type))
                                    @foreach ($event_type ??[] as $uId => $userName)
                                        <option value="{{$uId}}" {{ in_array($uId, $selectedEventTypes) ? "selected" : ""}}>{{$userName}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row flex-row-reverse">
                    <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
                        <a class="btn btn-secondary float-end" id="resetFilters" href="{{ route('my_calendar.index') }}"> Reset Filter</a>
                        <a class="btn btn-primary float-end me-2" href="javascript:;" id="applyFilters">Apply</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card shadow-sm" id="calander_card">
    <!--begin::Header-->
    <div class="card-header flex-wrap border-0 pt-6 pb-0">
        <div class="card-title d-flex flex-column align-items-start">
            <div class="d-flex align-items-center mb-1">
                <div class="d-flex align-items-center me-3" title="Dynamic Event Data" data-bs-toggle="tooltip">
                    <span class="bullet bullet-dot h-15px w-15px" style="background-color: #009ef7f5;"></span>
                </div>
                <div class="d-flex align-items-center me-3" title="Birthdays" data-bs-toggle="tooltip">
                    <span class="bullet bullet-dot h-15px w-15px" style="background-color: orange;"></span>
                </div>
                <div class="d-flex align-items-center me-3" title="Work Anniversaries" data-bs-toggle="tooltip">
                    <span class="bullet bullet-dot h-15px w-15px" style="background-color: blue;"></span>
                </div>
                <div class="d-flex align-items-center me-3" title="Approved Leaves" data-bs-toggle="tooltip">
                    <span class="bullet bullet-dot h-15px w-15px" style="background-color: green;"></span>
                </div>
                <div class="d-flex align-items-center me-3" title="Roster Shifts" data-bs-toggle="tooltip">
                    <span class="bullet bullet-dot h-15px w-15px" style="background-color: purple;"></span>
                </div>
            </div>
            <div class="text-muted fs-7 mt-1">
                <strong>Notes:</strong> Hover over the colors above to see what event types they represent.
            </div>
        </div>
        <div class="card-toolbar">
            <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                <button id="addEventBtn" class="btn btn-primary btn-hover-rise">
                    <span class="svg-icon svg-icon-muted svg-icon-2x"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path opacity="0.3" d="M3 13V11C3 10.4 3.4 10 4 10H20C20.6 10 21 10.4 21 11V13C21 13.6 20.6 14 20 14H4C3.4 14 3 13.6 3 13Z" fill="currentColor"/>
                    <path d="M13 21H11C10.4 21 10 20.6 10 20V4C10 3.4 10.4 3 11 3H13C13.6 3 14 3.4 14 4V20C14 20.6 13.6 21 13 21Z" fill="currentColor"/></svg></span> Add Event
                </button>
            </div>
        </div>
    </div>
    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body">
        <div class="row">
            <div class="col-12">
                <div id="calendar"></div>
            </div>
        </div>
    </div>
    <!--end::Body-->
</div>
<!--end::Card-->
<!-- Event edit Form Modal -->
<div class="modal fade" id="eventEditModal" tabindex="-1" role="dialog" aria-labelledby="eventEditModalLabel" data-bs-keyboard="false" data-bs-focus="false" data-bs-target="#eventEditModal">

    <div class="modal-dialog modal-lg" role="document" id="eventEditModalDetails">
    </div>
</div>
<!-- Event Form Modal -->
<div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="eventModalLabel" data-bs-keyboard="false" data-bs-focus="false" data-bs-target="#eventModal">

    <div class="modal-dialog modal-lg" role="document" id="eventModalDetails">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="eventModalLabel">Add New Event</h5>
                <!--begin::Close-->
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                <span class="svg-icon svg-icon-2x">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
                        <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
                    </svg>
                </span>
            </div>
            <!--end::Close-->
            </div>
            <div class="modal-body">
                @include('backend.hr.users.add_my_calendar_modal_content')
            </div>
        </div>
    </div>
</div>
@endsection

{{-- Scripts Section --}}
@section('scripts')
<link rel="stylesheet" href="{{asset('theme1/plugins/custom/fullcalendar/fullcalendar.bundle.css')}}">
<script src="{{asset('theme1/plugins/custom/fullcalendar/fullcalendar.bundle.js')}}"></script>
<script src="{{asset('backend/plugins/custom/multiselect/js/jquery.multi-select.js')}}" type="text/javascript"></script>
<script src="{{asset('backend/plugins/custom/multiselect/js/jquery.quicksearch.js')}}" type="text/javascript"></script>
<script type="text/javascript">
    /**
     * Update URL params — handles both single values and arrays (multi-select).
     * For arrays the key is stored as key[] with one entry per selected value.
     */
    function updateUrlParams(params) {
        if (!history.pushState) return;
        let searchParams = new URLSearchParams(window.location.search);

        $.each(params, function(key, value) {
            // Remove all existing entries for this key (both 'key' and 'key[]')
            searchParams.delete(key);
            searchParams.delete(key + '[]');

            if (Array.isArray(value) && value.length > 0) {
                // Multi-select: append each selected value as key[]
                $.each(value, function(i, v) {
                    searchParams.append(key + '[]', v);
                });
            } else if (!Array.isArray(value) && value !== null && value !== '') {
                // Single select: set as plain key
                searchParams.set(key, value);
            }
        });

        let newurl = window.location.protocol + '//' + window.location.host +
            window.location.pathname + '?' + searchParams.toString();
        window.history.pushState({path: newurl}, '', newurl);
    }

    var fetchUrl = "{{route('my_calendar.post.index')}}";
    var useId = "{{$user_id}}";
    // $(document).on('change', '.calendar_filter', function() {
    //     let keyVal = $(this).val();
    //     insertUrlParam($(this).attr('name'), keyVal);
    //     calendar.refetchEvents();
    // });

    $('#resetFilters').on('click', function() {
        // Reset single selects
        $('.calendar_filter').not('[multiple]').val('-1').trigger('change');
        // Reset multi-selects and refresh Select2 UI
        $('.calendar_filter[multiple]').val(null).trigger('change');
        // Clear URL params
        let newurl = window.location.protocol + '//' + window.location.host + window.location.pathname;
        window.history.pushState({path: newurl}, '', newurl);
        $("#kt-toolbar-filter").hide();
        calendar.refetchEvents();
    });

    $('#applyFilters').on('click', function() {
        let params = {};
        $('.calendar_filter').each(function() {
            let key = $(this).attr('name');
            let value = $(this).val();
            params[key] = value;
        });
        updateUrlParams(params);
        $("#kt-toolbar-filter").hide();

        // Change apply button state to loading
        var applyBtn = $('#applyFilters');
        applyBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm align-middle ms-2"></span> Applying...');

        calendar.refetchEvents();
    });

    // Reset filter inputs → restore Apply button immediately
    $('.calendar_filter').on('change', function() {
        var applyBtn = $('#applyFilters');
        if (applyBtn.hasClass('btn-success')) {
            applyBtn.html('Apply').addClass('btn-primary').removeClass('btn-success').prop('disabled', false);
        }
    });

    var calendar;
    var calendarEl;
    var target;
    var blockUI;
    document.addEventListener('DOMContentLoaded', function() {
        target = $("#calander_card .card-body");
        var todayDate = moment().startOf('day');
        var YM = todayDate.format('YYYY-MM');
        var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
        var TODAY = todayDate.format('YYYY-MM-DD');
        var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');

        calendarEl = document.getElementById('calendar');
        calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
            },

            height: 800,
            contentHeight: 780,
            aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
            // timeZone: "local",
            nowIndicator: true,
            now: TODAY + 'T09:25:00', // just for demo

            views: {
                dayGridMonth: {
                    buttonText: 'month'
                },
                timeGridWeek: {
                    buttonText: 'week',
                    slotEventOverlap: false,
                    eventMaxStack: 3
                },
                timeGridDay: {
                    buttonText: 'day',
                    slotEventOverlap: false,
                    eventMaxStack: 10,
                }
            },

            initialView: 'dayGridMonth',
            initialDate: TODAY,
            loading: function(bool) {
                if (bool) {
                    blockUI = new KTBlockUI(target);
                } else {
                    // unBlockUi()

                    // Restore Apply button after events finish loading
                    var applyBtn = $('#applyFilters');
                    if (applyBtn.prop('disabled')) {
                        applyBtn.prop('disabled', false)
                                .html('<i class="bi bi-check-circle-fill me-1 fs-5"></i> Filters Applied')
                                .addClass('btn-success')
                                .removeClass('btn-primary');

                        // Revert back to "Apply" after 3 seconds
                        setTimeout(function() {
                            if (applyBtn.hasClass('btn-success')) {
                                applyBtn.html('Apply').addClass('btn-primary').removeClass('btn-success');
                            }
                        }, 3000);
                    }
                }
            },
            editable: false,
            dayMaxEventRows: 3, // cap stacked events per day cell at 3 rows
            navLinks: true,
            selectable:true,
            eventClick: function(info) {
                // Show edit/delete popup
                const event = info.event;
                showEditEventModal(event.id);
            },
            
            // custom code to set background color for events when date time is given
            eventDidMount: function(info) {
                // console.log(info.event.extendedProps, info.el)
                if (info.event.extendedProps.resourceId) {
                    info.el.style.backgroundColor = info.event.extendedProps.resourceId;
                    info.el.style.borderColor = 'black';
                    info.el.style.color = 'white';
                }
                if (info.event.extendedProps.is_editable) {
                    info.el.style.cursor = "pointer";
                }
            },
            events: {
                url: fetchUrl,
                method: 'POST',
                extraParams: function() {
                    return {
                        users_list: $('[name="users_list"]').val(),
                        client_list: $('[name="client_list"]').val(),
                        shift_type: $('[name="shift_type"]').val(),
                        event_type: $('[name="event_type"]').val(),
                        "_token": "{{ csrf_token() }}",
                    };
                },
                failure: function() {
                    unBlockUi()
                    // alert('there was an error while fetching events!');
                },
                color: 'black', // a non-ajax option
                // textColor: 'black' // a non-ajax option
            },
            eventContent: function(args) {
                const title = args.event.title || args.event._def.title;
                const description = args.event.extendedProps.description || args.event._def.extendedProps.description || '';
                
                // Wrap everything in a single block container so flexbox doesn't put them side-by-side
                let html = "<div style='display: block; width: 100%; white-space: normal;'>";
                
                // Render title in bold
                html += "<div class='eventTitle' title='" + description + "' style='font-weight: bold;'>" + title + "</div>";
                
                // Add description as a smaller sub-line, skipped in listMonth view
                if (args.view.type !== 'listMonth' && description) {
                    html += "<div class='eventDesc' style='font-size: 12.5px; opacity: 1; margin-top: 1px;'>" + description + "</div>";
                }
                
                html += "</div>";
                
                return {
                    html: html
                };
            },
        });
        calendar.render();
    });

    function unBlockUi() {
        if (blockUI.isBlocked()) {
            setTimeout(function() {
                blockUI.release();
            }, 500)
        }
    }

    function reloadEvents(eventsArray) {

        // var blockUI = new KTBlockUI(target);
        // if (blockUI.isBlocked()) {
        //     blockUI.release();
        //     button.innerText = "Block";
        // }
        // calendar.setOption('timeZone', '34200');

        // Remove all events
        const removeEvents = calendar.getEvents();
        removeEvents.forEach(event => {
            event.remove();
        });

        // Add events with new timezone offset
        const newEvents = eventsArray;
        newEvents.forEach(event => {
            var start = event.start;
            var end = event.end;

            calendar.addEvent(event);
        });

        calendar.render();
    }
    function initTimepicker4() {
        $(".bt_timepicker_without_inc").flatpickr({
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i:S",
            minuteIncrement: 5,
            enableSeconds: true,
        });
    }

    $('#addEventBtn').on('click', function() {
        initDatePicker();
        initTimepicker();
        initTimepicker4();
        clearEventForm();
        $('#users').val(useId).trigger('change');
        $("#client, #repeat, #users").select2('destroy');
        $('#eventModal').modal('show');
        $("#client, #repeat, #users").select2({
            dropdownParent: $('#eventModal')
        });
    });

    function showEditEventModal(id) {
        if (id) {
            $(".fc-popover").hide();

            // Display loading indicator in modal immediately
            $('#eventEditModalDetails').html(`
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="eventEditModalLabel">Edit Event</h5>
                        <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                            <span class="svg-icon svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div class="modal-body py-15 text-center">
                        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <div class="text-gray-600 fs-6 fw-bold mt-4">Loading event details...</div>
                    </div>
                </div>
            `);
            $('#eventEditModal').modal('show');
            if (typeof showLoader === 'function') {
                showLoader('#eventEditModal .modal-content');
            }

            $.ajax({
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                    "_token": "{{ csrf_token() }}",
                },
                url: "{!! route('my_calendar_edit_modal') !!}",
                success: function(data) {
                    if (typeof hideLoader === 'function') {
                        hideLoader('#eventEditModal .modal-content');
                    }
                    if (data.html) {
                        $('#eventEditModalDetails').html(data.html);
                        if ($("#allDay_edit").is(':checked')) {
                            $('.allDayTime').hide();
                        } else {
                            $('.allDayTime').show();
                        }
                        if ($("#reminder_edit").is(':checked')) {
                            $('.reminder_input').removeClass('d-none');
                        } else {
                            $('.reminder_input').addClass('d-none');
                        }
                        $("#client_edit, #users_edit, #repeat_edit").select2({
                            dropdownParent: $('#eventEditModal')
                        });
                        initDatePicker();
                        initTimepicker();
                        initTimepicker4();
                        if (typeof initEventEditFormValidation === "function") {
                            initEventEditFormValidation();
                        }
                        if (typeof updateRepeatLabels === "function") {
                            updateRepeatLabels(true);
                        }
                        if (typeof toggleEndsInputs === "function") {
                            toggleEndsInputs('_edit');
                        }
                    } else {
                        $('#eventEditModal').modal('hide');
                        Swal.fire({ text: data.message || 'Failed to load event details.', icon: 'error', showCancelButton: false });
                    }
                },
                error: function(xhr) {
                    if (typeof hideLoader === 'function') {
                        hideLoader('#eventEditModal .modal-content');
                    }
                    $('#eventEditModal').modal('hide');
                    Swal.fire({ text: 'An error occurred while loading event details.', icon: 'error', showCancelButton: false });
                }
            });            
        }
    }
</script>
@include('backend.hr.users.my_calendar_script')
@endsection