@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <!-- END: Page CSS-->
    <style>
        .select2-container {
            width: 100% !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .select2-container--default .select2-results__option {
            white-space: nowrap;
        }
    </style>
@endpush

@push('footer-script')
    <script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>

    <script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
    <!-- END: Page Vendor JS-->
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>

    {{-- date range picker --}}
    <script type="text/javascript" src="/assets/js/moment.min.js"></script>
    <script type="text/javascript" src="/assets/js/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="/assets/css/daterangepicker.css" />

    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
    <script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script>
    <!-- END: Page JS-->
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
    <script src="/js/common-script.js"></script>

    <script>
        
        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        });
        
        $(document).ready(function() {
            $('.select2').select2();
            if ($('#location_id').val()) {
                getsubLocations();
            }
            getsubDepartments();

            var selectedEmployeeIds = JSON.parse('{!! json_encode(request()->input('employee_id', [])) !!}');
            var selectedManagerIds = JSON.parse('{!! json_encode(request()->input('manager_id', [])) !!}');

            // Initialize Select2 for employee_id and manager_id
            initializeSelect2('#employee_id', selectedEmployeeIds, '/ajax/hod-list', 0);
            initializeSelect2('#manager_id', selectedManagerIds, '/ajax/hod-list', 1);

            @if(@$dateRange)
                var month = $('#month_id').val();
                var year = $('#year_id').val();
                
                initializeDateRange(month, year, true);
            @endif
        });

        $('#month_id, #year_id').change(function(){
            var month = $('#month_id').val();
            var year = $('#year_id').val();

            initializeDateRange(month, year);
        });

        function initializeDateRange(month = null, year = null, keepSelected = false) {
            if(month && year){
                month = String(month).padStart(2, '0');
                var totalDaysInMonth = daysInMonth(month, year);

                var fromDate = month + '/' + '01' + '/' + year;
                var toDate = month + '/' + totalDaysInMonth + '/' + year;

                var options = {
                    minDate: fromDate,
                    maxDate: toDate,
                };
                // On page load keep the submitted range from the input value
                if (!keepSelected) {
                    options.startDate = fromDate;
                    options.endDate = toDate;
                }
                $('input[name="date_range"]').daterangepicker(options);
            }else{
                $('input[name="date_range"]').daterangepicker();
            }
        }

        function initializeSelect2(selector, preSelectedIds, url, flag) {
            $(selector).select2({
                multiple: true,
                ajax: {
                    url: url,
                    dataType: 'json',
                    data: function(params) {
                        return {
                            alias: '{{ $organization->alias }}',
                            exclude_user_id: '',
                            has_contractor_employees: true,
                            employee_type: $('#employee_type').val(),
                            search: params.term,
                            is_manager: flag,
                            only_current_organization: true
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data.data, function(item) {
                                return {
                                    id: item.id,
                                    text: item.name + ' (' + (item.employee_code || '') +
                                        ')' +
                                        ' (' + item.email + ')',
                                };
                            })
                        };
                    },
                    cache: true
                },
                placeholder: 'Search with name',
                minimumInputLength: 1,
                allowClear: true
            });

            function loadPreSelectedOptions() {
                if (preSelectedIds.length > 0) {
                    $.ajax({
                        url: url,
                        data: {
                            alias: '{{ $organization->alias }}',
                            employee_ids: preSelectedIds
                        },
                        success: function(data) {
                            data.data.forEach(function(item) {
                                var option = new Option(
                                    item.name + ' (' + (item.employee_code || '') +
                                    ')' +
                                    ' (' + item.email + ')', item.id, true, true
                                );
                                $(selector).append(option).trigger('change');
                            });
                        }
                    });
                }
            }

            loadPreSelectedOptions();
        }

        function getsubLocations(th) {
            var subLocations = @json(request()->input('sub_location_id', []));
            var locationId = $('#location_id').val();
            var data = {
                location_id: locationId,
                '_token': '{{ csrf_token() }}'
            }
            $.ajax({
                url: '{{ $orgUrl}}/location/sub-locations',
                type: 'POST',
                data: data,
                success: function(data) {
                    var selectbox = '';
                    if (data) {
                        $.each(data, function(i, item) {
                            if (subLocations.includes(i)) {
                                selectbox += '<option value="' + i + '" selected="selected">' + item + '</option>';
                            } else {
                                selectbox += '<option value="' + i + '">' + item + '</option>';
                            }
                        });
                    }
                    $('#sub_location_id').html(selectbox);
                }
            });
        }
        
        function getsubDepartments(th) {
            var subDepartments = @json(request()->input('sub_department_id', []));
            var departmentId = $('#department_id').val();

            if (!departmentId || departmentId.length === 0) {
                departmentId = 'all';
            }

            var data = {
                department_id: departmentId,
                '_token': '{{ csrf_token() }}'
            }
            $.ajax({
                url: '{{ $orgUrl}}/department/sub-departments',
                type: 'POST',
                data: data,
                success: function(data) {
                    var selectbox = '';
                    if (data) {
                        $.each(data, function(i, item) {
                            if (subDepartments.includes(i)) {
                                selectbox += '<option value="' + i + '" selected="selected">' + item + '</option>';
                            } else {
                                selectbox += '<option value="' + i + '">' + item + '</option>';
                            }
                        });
                    }
                    $('#sub_department_id').html(selectbox);
                }
            });
        }

        function daysInMonth(month, year) {
            return new Date(year, month, 0).getDate();
        }
        function putInFilters() {
            var search = $('#search').val();
            $('#SearchFilterBtn').val(search);
            $('#filterSubmitButton').click();
        }
    </script>
    @stack('custom-footer-script')
@endpush