@extends('adminlte::page')

@section('title', config('adminlte.title') . ' | Calendar')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Calendar</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('holidays.index') }}">Holidays</a></li>
                    <li class="breadcrumb-item active">Calendar</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.10/index.global.min.js'></script>
    <style>
        .calendar-container {
            position: relative;
        }

        #calendar-loader,
        #calendar-loader1 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }

        /* Dark Mode Popover Support */
        .dark-mode .popover {
            background-color: #2d3238 !important;
            border-color: #3d434a !important;
        }

        .dark-mode .popover-header {
            background-color: #3a4047 !important;
            color: #fff !important;
            border-bottom-color: #4a5158 !important;
        }

        .dark-mode .popover-body {
            background-color: #2d3238 !important;
            color: #e6e6e6 !important;
        }
    </style>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if (session('success'))
                        <script>
                            toastr.options = {
                                "closeButton": true,
                                "debug": false,
                                "newestOnTop": false,
                                "progressBar": true,
                                "positionClass": "toast-top-right",
                                "preventDuplicates": false,
                                "onclick": null,
                                "showDuration": "300",
                                "hideDuration": "1000",
                                "timeOut": "5000",
                                "extendedTimeOut": "1000",
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            };
                            toastr.success('{{ session('success') }}');
                        </script>
                    @endif


                    <div class="row">
                        <div class="col-12">
                            <div class="d-grid gap-1 d-sm-flex">
                                <a href="{{ route('holidays.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left"></i> Back
                                </a>
                                <a href="{{ route('holidays.create') }}" class="btn btn-success">
                                    <i class="fa fa-plus"></i> Add leave request
                                </a>
                            </div>
                        </div>
                    </div>
                    <hr class="bg-secondary">

                    <div class="card">
                        <div class="card-body">
                            {{-- Filter Section --}}
                            <div class="row mb-4">
                                <div class="col-12 mb-2">
                                    <strong>Filter by:</strong>
                                </div>
                                <div class="col-sm-3">
                                    <select class="custom-select" id="AssignResources">
                                        <option value="team" selected>Team</option>
                                        <option value="department">Department</option>
                                        <option value="location">Location</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <select class="custom-select" id="AssignFiltering">
                                        {{-- Populated by JS --}}
                                    </select>
                                </div>
                            </div>

                            {{-- Legend Section --}}
                            @include('components.calendar-legend')
                        </div>
                    </div>
                    <div class="card shadow-sm">
                        <div class="card-body p-0">
                            <div class="calendar-container p-3">
                                <div id="calendar"></div>
                                <img id="calendar-loader" src="{{ asset('img/Spinner.apng') }}" alt="Loading..." width="100"
                                    height="100">
                                <img id="calendar-loader1" src="{{ asset('img/Spinner.apng') }}" alt="Loading..." width="100"
                                    height="100">
                            </div>
                        </div>
                    </div>
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {

                            var filterValue = $('#AssignFiltering').val();
                            var filterType = $('#AssignResources').val();
                            var userTeamName = null; // Will be set from the first resource fetch

                            const teamOptions = @json($teamOptions);
                            const departmentOptions = @json($departmentOptions);
                            const locationOptions = @json($locationOptions);

                            const optionsData = {
                                "team": teamOptions,
                                "department": departmentOptions,
                                "location": locationOptions
                            };

                            function sortOptions(options, key) {
                                return options.sort((a, b) => {
                                    const nameA = a[key].toUpperCase();
                                    const nameB = b[key].toUpperCase();
                                    if (nameA < nameB) {
                                        return -1;
                                    }
                                    if (nameA > nameB) {
                                        return 1;
                                    }
                                    return 0;
                                });
                            }

                            const assignResources = document.getElementById('AssignResources');
                            const assignFiltering = document.getElementById('AssignFiltering');

                            assignResources.addEventListener('change', function() {
                                const selectedValue = this.value;
                                updateAssignFilteringOptions(selectedValue);
                            });

                            function updateAssignFilteringOptions(category, defaultValue = null) {
                                let options = optionsData[category] || [];

                                // Sort options before updating the dropdown
                                if (category === 'team') {
                                    options = sortOptions(options, 'team');
                                } else if (category === 'department') {
                                    options = sortOptions(options, 'departmentname');
                                } else if (category === 'location') {
                                    options = sortOptions(options, 'locationname');
                                }

                                // Clear existing options
                                assignFiltering.innerHTML = '<option value="">All</option>';

                                // Add new options based on the structure of the JSON data
                                options.forEach(option => {
                                    const optionElement = document.createElement('option');

                                    let labelField;
                                    if (category === 'team') {
                                        labelField = option.team;
                                        optionElement.value = option.team;
                                    } else if (category === 'department') {
                                        labelField = option.departmentname;
                                        optionElement.value = option.departmentname;
                                    } else if (category === 'location') {
                                        labelField = option.locationname;
                                        optionElement.value = option.locationname;
                                    }

                                    optionElement.textContent = labelField;

                                    // Set as selected if it matches the default value
                                    if (defaultValue && optionElement.value === defaultValue) {
                                        optionElement.selected = true;
                                    }

                                    assignFiltering.appendChild(optionElement);
                                });

                                // Set filterValue if defaultValue is provided
                                if (defaultValue) {
                                    filterValue = defaultValue;
                                }
                            }

                            // Initially populate based on the default selected value in AssignResources
                            // Don't set default yet - wait for resources to load to get userTeamName
                            updateAssignFilteringOptions(assignResources.value);

                            var calendarEl = document.getElementById('calendar');
                            var calendar;

                            function sortResources(resources, field) {
                                return resources.sort((a, b) => {
                                    if (a[field] < b[field]) {
                                        return -1;
                                    }
                                    if (a[field] > b[field]) {
                                        return 1;
                                    }
                                    return 0;
                                });
                            }

                            function initializeCalendar(assignResource, assignFiltering) {
                                if (calendar) {
                                    calendar.destroy();
                                }

                                calendar = new FullCalendar.Calendar(calendarEl, {

                                    schedulerLicenseKey: '0236013615-fcs-1706868278',
                                    displayEventTime: false,

                                    eventDidMount: function(info) {
                                        var eventObj = info.event;
                                        var props = eventObj.extendedProps;

                                        if (props.PopUp == true) {
                                            $(info.el).popover({
                                                title: props.popType,
                                                content: props.popTime,
                                                placement: 'auto',
                                                trigger: 'hover',
                                                container: 'body'
                                            });
                                        }
                                    },

                                    themeSystem: 'bootstrap',
                                    timeZone: 'GMT',
                                    initialView: 'resourceTimelineMonth',
                                    slotDuration: "12:00:00",
                                    scrollTime: "00:00:00",
                                    slotLabelInterval: {
                                        "hours": 24
                                    },
                                    slotLabelFormat: [{
                                        weekday: 'narrow',
                                        day: 'numeric'
                                    }],

                                    aspectRatio: 1.5,
                                    resourceAreaWidth: "15vw",
                                    editable: false,
                                    resourceAreaHeaderContent: 'Employee',
                                    resourceGroupField: assignResource,
                                    resourceOrder: 'title, team, department, location',

                                    headerToolbar: {
                                        left: 'prev,next today',
                                        center: 'title',
                                        right: 'resourceTimelineMonth,resourceTimelineWeek,resourceTimelineDay'
                                    },

                                    businessHours: {
                                        startTime: '00:00',
                                        endTime: '24:00',
                                    },
                                    refetchResourcesOnNavigate: true,
                                    filterResourcesWithEvents: true,

                                    resources: function(fetchInfo, successCallback) {
                                        document.getElementById('calendar-loader1').style.display = 'block';
                                        fetch('/resources/fetch', {
                                                method: 'POST',
                                                headers: {
                                                    'Content-Type': 'application/json',
                                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                                },
                                                body: JSON.stringify({
                                                    start: fetchInfo.start,
                                                    end: fetchInfo.end,
                                                }),
                                            })
                                            .then(response => response.json())
                                            .then(data => {
                                                console.log("Resources Data:", data);

                                                // Set userTeamName from first resource on initial load
                                                if (userTeamName === null && data.length > 0) {
                                                    userTeamName = data[0].userTeamName || 'Other';
                                                    // Update the dropdown to show user's team as default
                                                    updateAssignFilteringOptions('team', userTeamName);
                                                    filterValue = userTeamName;
                                                    filterType = 'team';
                                                }

                                                let filteredResources = data;
                                                if (filterValue) {
                                                    if (filterType === 'team') {
                                                        filteredResources = data.filter(resource => resource.team ==
                                                            filterValue);
                                                    } else if (filterType === 'department') {
                                                        filteredResources = data.filter(resource => resource
                                                            .department == filterValue);
                                                    } else if (filterType === 'location') {
                                                        filteredResources = data.filter(resource => resource
                                                            .location == filterValue);
                                                    }
                                                }
                                                successCallback(filteredResources);
                                                console.log('successCallback [resources]');

                                                document.getElementById('calendar-loader1').style.display = 'none';
                                            })
                                            .catch(error => {
                                                console.error('Error fetching resources:', error);
                                                document.getElementById('calendar-loader1').style.display = 'none';
                                            });
                                    },

                                    events: function(info, successCallback) {
                                        console.log("Events info: " + info.startStr);
                                        document.getElementById('calendar-loader').style.display = 'block';
                                        fetch('/events/fetch', {
                                                method: 'POST',
                                                headers: {
                                                    'Content-Type': 'application/json',
                                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                                },
                                                body: JSON.stringify({
                                                    start: info.startStr,
                                                    end: info.endStr,
                                                }),
                                            })
                                            .then(response => response.json())
                                            .then(data => {
                                                successCallback(data);
                                                document.getElementById('calendar-loader').style.display = 'none';
                                                console.log("SuccessCallback [events]");
                                            })
                                            .catch(error => {
                                                console.error('Error fetching events:', error);
                                                document.getElementById('calendar-loader').style.display = 'none';
                                            });
                                    },

                                });

                                calendar.render();

                                // Event listener for the select element
                                document.getElementById('AssignFiltering').addEventListener('change', function() {
                                    filterValue = this.value;
                                    calendar.refetchResources();
                                });
                            }

                            var assignResource = $('#AssignResources').val();
                            initializeCalendar(assignResource, assignFiltering);

                            $('#AssignResources').on('change', function() {
                                assignResource = $(this).val();
                                filterValue = '';
                                filterType = $(this).val();

                                // Reset to user's team if switching back to team view
                                if (assignResource === 'team' && userTeamName) {
                                    updateAssignFilteringOptions(assignResource, userTeamName);
                                    filterValue = userTeamName;
                                } else {
                                    updateAssignFilteringOptions(assignResource);
                                }

                                initializeCalendar(assignResource);
                            });

                        });

                        $(function() {
                            $('[data-toggle="tooltip"]').tooltip()
                        })
                    </script>
                </div>
            </div>
        </div>
    </div>

@stop

@section('footer')
    &nbsp;
@stop