@extends('layouts.adminmaster')

@section('styles')
    <!-- INTERNAL Data table css -->
    <link href="{{ asset('build/assets/plugins/datatable/css/dataTables.bootstrap5.min.css') }}?v=1746409384"
        rel="stylesheet" />
    <link href="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.css') }}?v=1746409384"
        rel="stylesheet" />

    <!-- INTERNAL Sweet-Alert css -->
    <link href="{{ asset('build/assets/plugins/sweet-alert/sweetalert.css') }}?v=1746409384" rel="stylesheet" />

    <!-- INTERNAL Datepicker css-->
    <link href="{{ asset('build/assets/plugins/modal-datepicker/datepicker.css') }}?v=1746409384" rel="stylesheet" />

    <!-- INTERNAL Sweet-Alert css -->
    <link href="{{ asset('build/assets/plugins/sweet-alert/sweetalert.css') }}?v=1746409384" rel="stylesheet" />

    <!-- INTERNAl color css -->
    <link rel="stylesheet" href="{{ asset('build/assets/plugins/colorpickr/themes/nano.min.css') }}?v=1746409384">
@endsection

@section('content')
    {{-- page header start --}}
    <div class="page-header d-xl-flex d-block">
        <div class="page-leftheader">
            <div class="page-title"><span
                    class="font-weight-normal text-muted ms-2">{{ lang('Holiday Announcement') }}</span></div>
        </div>
    </div>
    {{-- page header start --}}

    {{-- card start --}}
    <div class="card">
        <div class="card-header  border-0">
            <h4 class="card-title">{{ lang('Holidays Lists') }}</h4>
            <div class="card-options mt-sm-max-2 d-md-max-block">
                @can('Holidays Create')
                    <a href="#" class="btn btn-success mb-md-max-2 me-3 text-capitalize" id="addholidaymodal"><i
                            class="feather feather-user-plus"></i> {{ lang('add holiday') }}</a>
                @endcan
                @can('Holidays Import Access')
                    <a href="{{ route('holidays.import') }}" class="btn btn-info mb-md-max-2 me-3"><i
                            class="feather feather-download"></i> {{ lang('Import Holidays List') }}</a>
                @endcan
            </div>
        </div>

        <div class="card-body">
            <div class="table-responsive spruko-delete" style="min-height: 230px;">
                @can('Holidays Delete')
                    <button id="massdeletenotify" class="btn btn-outline-light btn-sm mb-4 data-table-btn"
                        style="display: none;"><i class="fe fe-trash"></i> {{ lang('Delete') }}</button>
                @endcan

                <table class="table table-bordered border-bottom text-nowrap ticketdeleterow w-100"
                    id="support-articlelists">
                    <thead>
                        <tr>
                            <th width="10">{{ lang('Sl.No') }}</th>
                            @can('Holidays Delete')
                                <th width="10">
                                    <input type="checkbox" id="customCheckAll">
                                    <label for="customCheckAll"></label>
                                </th>
                            @endcan
                            @cannot('Holidays Delete')
                                <th width="10">
                                    <input type="checkbox" id="customCheckAll" disabled>
                                    <label for="customCheckAll"></label>
                                </th>
                            @endcannot

                            <th>{{ lang('ocassion') }}</th>
                            <th>{{ lang('Day') }}</th>
                            <th>{{ lang('Date') }}</th>
                            <th>{{ lang('Status') }}</th>
                            <th>{{ lang('Holiday Type') }}</th>
                            <th>{{ lang('Actions') }}</th>
                        </tr>
                    </thead>
                    <div id="hideAfterloading"><img src="{{ asset('build/assets/images/loader.svg') }}" alt="">
                        <p>loading.. Please Wait</p>
                    </div>
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </table>
            </div>
        </div>
    </div>
    {{-- card end --}}
@endsection
@section('modal')
    @include('admin.holidays.modal')
@endsection

@section('scripts')
    <!-- INTERNAL Data tables -->
    <script src="{{ asset('build/assets/plugins/datatable/js/jquery.dataTables.min.js') }}?v=1746409384"></script>
    <script src="{{ asset('build/assets/plugins/datatable/js/dataTables.bootstrap5.js') }}?v=1746409384"></script>
    <script src="{{ asset('build/assets/plugins/datatable/dataTables.responsive.min.js') }}?v=1746409384">
    </script>
    <script src="{{ asset('build/assets/plugins/datatable/responsive.bootstrap5.min.js') }}?v=1746409384">
    </script>
    <script src="{{ asset('build/assets/plugins/datatable/datatablebutton.min.js') }}?v=1746409384"></script>
    <script src="{{ asset('build/assets/plugins/datatable/buttonbootstrap.min.js') }}?v=1746409384"></script>

    <!-- INTERNAL Sweet-Alert js-->
    <script src="{{ asset('build/assets/plugins/sweet-alert/sweetalert.min.js') }}?v=1746409384"></script>

    <script src="{{ asset('build/assets/plugins/jquery/jquery-ui.js') }}?v=1746409384"></script>

    <!-- INTERNAL color pickr -->
    <script src="{{ asset('build/assets/plugins/colorpickr/pickr.min.js') }}?v=1746409384"></script>


    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", (event) => {

            let tableDataObject = @json($holidays);
            let tableData = Object.values(tableDataObject);

            let delPerm = @json(Auth::user()->can('Holidays Delete'));
            let editPerm = @json(Auth::user()->can('Holidays Edit'));
            let dateFormat = @json(setting('date_format'));
            var dataTable;
            var tableDropDown;

            function truncateTitle(title) {
                const maxLength = 40;
                return title.length > maxLength ? title.substring(0, maxLength) + '...' : title;
            }

            function dateTime(createdTime) {
                const jsDate = new Date(createdTime);

                let format = @json(setting('date_format'));
                switch (format) {
                    case 'd M, Y':
                        return jsDate.toLocaleDateString('en-GB', {
                            day: '2-digit',
                            month: 'short',
                            year: 'numeric'
                        });
                    case 'm.d.y':
                        return jsDate.toLocaleDateString('en-US', {
                            day: '2-digit',
                            month: '2-digit',
                            year: '2-digit'
                        }).replace(/\//g, '.');
                    case 'Y-m-d':
                        return jsDate.toISOString().split('T')[0];
                    case 'd-m-Y':
                        return jsDate.toLocaleDateString('en-GB').replace(/\//g, '-');
                    case 'd/m/Y':
                        return jsDate.toLocaleDateString('en-GB');
                    case 'Y/m/d':
                        return jsDate.toISOString().split('T')[0].replace(/-/g, '/');
                    default:
                        return jsDate.toLocaleDateString(); // Default format
                }

            }

            function getDayOfWeek(startDateString, endDateString) {
                const startDate = new Date(startDateString);
                const endDate = new Date(endDateString);

                // If both dates are the same, return the day for that single date
                if (startDate.getTime() === endDate.getTime()) {
                    const options = { weekday: 'long' };
                    return startDate.toLocaleDateString('en-US', options);
                } else {
                    // Get the days of the week for the start and end dates
                    const options = { weekday: 'long' };
                    const startDay = startDate.toLocaleDateString('en-US', options);
                    const endDay = endDate.toLocaleDateString('en-US', options);
                    return `${startDay} -- ${endDay}`; // Format as "StartDay -- EndDay"
                }
            }

            function dateTimeRange(startDate, endDate = null) {
                const formattedStartDate = dateTime(startDate);
                const formattedEndDate = endDate ? dateTime(endDate) : null;

                if (formattedEndDate) {
                    // Check if the start and end dates are the same
                    if (formattedStartDate === formattedEndDate) {
                        return formattedStartDate; // Return only the start date
                    }
                    return `${formattedStartDate} -- ${formattedEndDate}`; // Return the date range
                }
                return formattedStartDate;
            }

            function formatDate(dateStr) {
                const jsDate = new Date(dateStr);
                // Example formatting (adjust as needed)
                return jsDate.toLocaleDateString('en-US', {
                    weekday: 'long'
                }); // e.g., "Monday"
            }

            function formatHoliday(holiday) {
                const start = new Date(holiday.startdate);
                const end = new Date(holiday.enddate);

                if (holiday.enddate == holiday.startdate) {
                    return formatDate(start);
                } else {
                    return `${formatDate(start)} -- ${formatDate(end)}`;
                }
            }


            function fixedDay(startDateString, endDateString) {
                const startDate = new Date(startDateString);
                const endDate = new Date(endDateString);

                const formatDate = (date) => {
                    const day = date.getDate();
                    const month = date.toLocaleString('default', { month: 'short' });
                    
                    

                    return `${day} ${month}`;
                };

                 // Check if both dates are the same
                if (startDate.getTime() == endDate.getTime()) {
                    return formatDate(startDate);
                }

                // Check if both dates are in the same month
                if (startDate.getMonth() == endDate.getMonth() && startDate.getFullYear() == endDate.getFullYear()) {
                    return `${formatDate(startDate)} - ${formatDate(endDate)}`;
                } else {
                    return `${formatDate(startDate)} - ${formatDate(endDate)}`;
                }
            }

            loadTable(tableData);

            function loadTable(tableData) {
                document.getElementById('hideAfterloading')?.classList.remove('d-none');
                document.getElementById('theadShow')?.classList.add('d-none');
                if (tableDropDown)
                    tableDropDown.destroy();

                // if (dataTable)
                //     dataTable.destroy();
                if ($.fn.DataTable.isDataTable('#support-articlelists')) {
                    $('#support-articlelists').DataTable().clear().destroy(); 
                }

                if (document.getElementById('tableBody'))
                    document.getElementById('tableBody').remove();

                let createTbody = document.createElement('tbody');
                createTbody.setAttribute('id', "tableBody");
                let rows = tableData.map((data, index) => {

                    return `
                        <tr class="odd">
                            <td  class="sorting_1" >${index + 1}</td>
                            <td class="sorting_1 ">
                                ${delPerm
                                    ? ` <input type="checkbox" name="spruko_checkbox[]" class="checkall" value="${data.id}" />` : '~'
                                }
                            </td>

                            <td class="font-weight-semibold">${truncateTitle(data.occasion)}</td>

                            <td>
                               ${data.is_fixed == '1' ? (data.start_date  ? getDayOfWeek(data.start_date, data.end_date) : formatHoliday(data)  )  : formatHoliday(data)}   
                            </td>

                            <td>
                                ${data.is_fixed == '1' ? fixedDay(data.startdate, data.enddate)  : dateTimeRange(data.startdate, data.enddate)}
                            </td>

                            <td>
                                ${ editPerm ? ( data.status == '1' ? `<label class="custom-switch form-switch mb-0">
                                    <input type="checkbox" name="status" data-id="${data.id}" id="myonoffswitch${data.id}" value="1" class="custom-switch-input tswitch" checked>
                                    <span class="custom-switch-indicator"></span>
                                </label>` : `<label class="custom-switch form-switch mb-0">
                                    <input type="checkbox" name="status" data-id="${data.id}" id="myonoffswitch${data.id}" value="1" class="custom-switch-input tswitch">
                                    <span class="custom-switch-indicator"></span>
                                </label>` ) : '~' }    
                            </td>
                            
                            <td>
                                ${ data.is_fixed == '1' ? `{{lang('Repeats every year')}}`  : `{{lang('Only once in year')}}` }
                            </td>


                            <td>
                                <div class="d-flex">
                                    ${editPerm ? `  <a href="javascript:void(0);" class="action-btns1" id="editholidaymodal" data-id="${data.id}" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ lang('Edit') }}">
                        									<i class="feather feather-edit text-primary"></i>
                        								</a> ` : '~' 
                                    }


                                    ${delPerm  ? `  <a href="javascript:void(0);" class="action-btns1 deleteholiday" id="deleteholidaymodal" data-id="${data.id}" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ lang('Delete') }}">
                        									<i class="feather feather-trash-2 text-danger"></i>
                        								</a>` : '~' 
                                    }

                                </div>
                            </td>

                        </tr>
                    `;
                });

                createTbody.innerHTML = rows.length ? rows.join('') : '';
                document.getElementById('support-articlelists').appendChild(createTbody);
                let prev = {!! json_encode(lang('Previous')) !!};
                let next = {!! json_encode(lang('Next')) !!};
                let nodata = {!! json_encode(lang('No data available in table')) !!};
                let noentries = {!! json_encode(lang('No entries to show')) !!};
                let showing = {!! json_encode(lang('showing page')) !!};
                let ofval = {!! json_encode(lang('of')) !!};
                let maxRecordfilter = {!! json_encode(lang('- filtered from ')) !!};
                let maxRecords = {!! json_encode(lang('records')) !!};
                let entries = {!! json_encode(lang('entries')) !!};
                let show = {!! json_encode(lang('Show')) !!};
                let search = {!! json_encode(lang('Search...')) !!};
                // Reinitialize DataTable
                dataTable = $('#support-articlelists').DataTable({
                    language: {
                        searchPlaceholder: search,
                        scrollX: "100%",
                        sSearch: '',
                        paginate: {
                            previous: prev,
                            next: next
                        },
                        emptyTable: nodata,
                        infoFiltered: `${maxRecordfilter} _MAX_ ${maxRecords}`,
                        info: `${showing} _PAGE_ ${ofval} _PAGES_`,
                        infoEmpty: noentries,
                        lengthMenu: `${show} _MENU_ ${entries}`,
                    },
                    order: [],
                    columnDefs: [{
                        "orderable": false,
                        "targets": [0, 1, 3]
                    }],
                });

                document.querySelector('.card-body').style.setProperty('filter','')

                $('.form-select').select2({
                    minimumResultsForSearch: Infinity,
                    width: '100%'
                });
                $('.form-select').on('focus', function() {
                    $(this).attr('aria-hidden', 'false');
                });
                document.getElementById('hideAfterloading')?.classList.add('d-none');
                document.getElementById('theadShow')?.classList.remove('d-none');

                initializeTooltips();
                // checkboxNoLabel()
                // buttonAlertFunctions();
                // Pagenate();

                function initializeTooltips() {
                    var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
                    tooltipElements.forEach(function(element) {
                        new bootstrap.Tooltip(element);
                    });
                }


            }

            $(function() {
                "use strict";

                // Variables
                var SITEURL = '{{ url('') }}';

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


                window.setColorPicker = (elem, defaultValue) => {
                    elem = document.querySelector(elem);
                    let pickr = Pickr.create({
                        el: elem,
                        default: defaultValue,
                        theme: 'nano', // or 'monolith', or 'nano'
                        useAsButton: true,
                        swatches: [
                            '#217ff3',
                            '#11cdef',
                            '#fb6340',
                            '#f5365c',
                            '#f7fafc',
                            '#212529',
                            '#2dce89'
                        ],
                        components: {
                            // Main components
                            preview: true,
                            opacity: true,
                            hue: true,
                            // Input / output Options
                            interaction: {
                                hex: true,
                                rgba: true,
                                // hsla: true,
                                // hsva: true,
                                // cmyk: true,
                                input: true,
                                clear: true,
                                silent: true,
                                preview: true,
                            }
                        }
                    });
                    pickr.on('init', pickr => {
                        elem.value = pickr.getSelectedColor().toRGBA().toString(0);
                    }).on('change', color => {
                        elem.value = color.toRGBA().toString(0);
                    });

                    return pickr;

                }
                // Color Pickr variables
                setTimeout(() => {
                    let themeColor = setColorPicker('#primary_color-input', document
                        .querySelector(
                            '#primary_color-input')?.value);
                    let themeColorDark = setColorPicker('#secondary_color-input', document
                        .querySelector('#secondary_color-input').value);
                }, 100);

                // Datepicker
                setTimeout(() => {
                    $('#startdate').datepicker({
                        dateFormat: 'yy-mm-dd',
                        prevText: '<i class="fa fa-angle-left"></i>',
                        nextText: '<i class="fa fa-angle-right"></i>',
                        minDate: 0,
                        firstDay: {{ setting('start_week') }},

                        onSelect: function(selectedDate) {

                            var diff = ($("#enddate").datepicker("getDate") -
                                    $("#startdate").datepicker("getDate")) /
                                1000 / 60 / 60 / 24 + 1; // days
                            if ($("#enddate").datepicker("getDate") != null) {
                                $('#count').html(diff);
                                $('#days').val(diff);
                            }
                            $('#enddate').datepicker('option', 'minDate',
                                selectedDate);
                        }
                    });
                }, 100);
                setTimeout(() => {
                    $('#enddate').datepicker({
                        dateFormat: 'yy-mm-dd',
                        prevText: '<i class="fa fa-angle-left"></i>',
                        nextText: '<i class="fa fa-angle-right"></i>',
                        firstDay: {{ setting('start_week') }},
                        onSelect: function(selectedDate) {

                            $('#startdate').datepicker('option', 'maxDate',
                                selectedDate);

                            var diff = ($("#enddate").datepicker("getDate") -
                                    $("#startdate").datepicker("getDate")) /
                                1000 / 60 / 60 / 24 + 1; // days
                            if ($("#startdate").datepicker("getDate") != null) {
                                $('#count').html(diff);
                                $('#days').val(diff);
                            }
                        }
                    });
                }, 100);

                // Holiday status change
                $('body').on('click', '.tswitch', function() {
                    var _id = $(this).data("id");
                    var status = $(this).prop('checked') == true ? '1' : '0';
                    $.ajax({
                        type: "post",
                        url: SITEURL + "/admin/holidays/statuschange/" + _id,
                        data: {
                            'status': status
                        },
                        success: function(data) {
                            toastr.success(data.success);
                            // location.reload();
                        },
                        error: function(data) {
                            console.log('Error:', data);
                        }
                    });
                });

                //trigger next modal
                $("#addholidaymodal").on("click", function() {
                    $('#Holidayform').trigger("reset");
                    $('#holiday_id').val('');
                    $('#holidaysave').html("Add");
                    $('.modal-title').html("{{ lang('Add Holiday Announcement') }}");
                    $('#holidaymodal').modal({
                        backdrop: 'static',
                        keyboard: false 
                    }).modal('show');

                });

                


                //edit holiday
                $('body').on('click', '#editholidaymodal', function() {
                    $('#Holidayform').trigger("reset");
                    var holiday_id = $(this).data('id');
                    $.get('holidays/' + holiday_id, function(data) {
                        $('#startdateError').html('');
                        $('#enddateError').html('');
                        $('.modal-title').html(
                            "{{ lang('Edit Holiday Announcement') }}");
                        $('#holiday_id').val(data.id);
                        $('#occasion').val(data.occasion);
                        $('#startdate').val(data.startdate.substr(0, 10));
                        $('#enddate').val(data.enddate.substr(0, 10));
                        $('#holidaydescription').val(data.holidaydescription);
                        $('#primary_color-input').val(data.primaray_color);
                        $('#secondary_color-input').val(data.secondary_color);
                        document.querySelector("#holidaystatus").checked = data.status ==1 ? true : false
                        document.querySelector("#is_fixed").checked = data.is_fixed ==1 ? true : false
                        $('#holidaysave').html("Save");
                        $('#holidaymodal').modal('show');
                    });
                });




                //checkbox script
                $(document).ready(function() {

                    $(document).on('click', '#customCheckAll', function() {
                        $('.checkall').prop('checked', this.checked);
                        updateMassDeleteVisibility();
                    });

                    $(document).on('click', '.checkall', function() {
                        updateCustomCheckAll();
                        updateMassDeleteVisibility();
                    });


                    // $(document).on('click', '.pagination a', function() {

                    //     setTimeout(function() {
                    //         updateMassDeleteVisibility();
                    //     }, 100);
                    // });


                    $('#customCheckAll').prop('checked', false);


                    function updateMassDeleteVisibility() {
                        if ($('.checkall:checked').length === 0) {
                            $('#massdeletenotify').hide();
                        } else {
                            $('#massdeletenotify').show();
                        }
                    }


                    function updateCustomCheckAll() {
                        var totalCheckboxes = $('.checkall').length;
                        var checkedCheckboxes = $('.checkall:checked').length;

                        if (checkedCheckboxes === totalCheckboxes) {
                            $('#customCheckAll').prop('checked', true);
                        } else {
                            $('#customCheckAll').prop('checked', false);
                        }
                    }
                });

                // Clear error messages when the modal is hidden
                $('#holidaymodal').on('hidden.bs.modal', function () {
                    $('#occasionError').text('');
                    $('#startdateError').text('');
                    $('#enddateError').text('');
                    $('#holidaydescriptionError').text('');
                    $('#occasion').val('');
                    $('#startdate').val('');
                    $('#enddate').val('');
                    $('#holidaydescription').val('');
                });

                $('body').on("click", "#holidaysave", function() {
                    var form = document.getElementById('Holidayform');                    
                    var occasion = $('#occasion').val();
                    var startdate = $('#startdate').val();
                    var enddate = $('#enddate').val();
                    var holidaydescription = $('#holidaydescription').val();
                    var hasError = false;

                    // Clear previous error messages
                    $('#occasionError').text('');
                    $('#startdateError').text('');
                    $('#enddateError').text('');

                    // Validate required fields
                    if (!occasion) {
                        $('#occasionError').text('This field is required.');
                        hasError = true;
                    }
                    if (!startdate) {
                        $('#startdateError').text('This field is required.');
                        hasError = true;
                    }
                    if (!enddate) {
                        $('#enddateError').text('This field is required.');
                        hasError = true;
                    }
                    if (!holidaydescription) {
                        $('#holidaydescriptionError').text('This field is required.');
                        hasError = true;
                    }
                    if (hasError) {
                        return; 
                    }
                    var formData = new FormData(form);
                    $('#holidaysave').html('Sending ... <i class="fa fa-spinner fa-spin"></i>');
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: '{{ route('saveholidays') }}',
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(data) {
                            $('#holidaysave').html('Save Changes');
                            $('#holidaymodal').modal('hide');
                            // location.reload();
                            // if (data.should_display || data.data.is_fixed=='1') {
                                toastr.success(data.success);
                                let newHoliday = data.data
                                let exists = false;
                                tableData = tableData.map(category => {
                                    if (category.id === newHoliday.id) {
                                        exists = true;
                                        return newHoliday;
                                    }
                                    return category;
                                });

                                if (!exists) {
                                    tableData.push(newHoliday);
                                }
                                document.getElementById('hideAfterloading')?.classList.remove('d-none');
                                document.querySelector('.card-body').style.setProperty('filter','blur(1px)');
                                loadTable(tableData);
                          

                        },
                        error: function(data) {
                            $('#holidaysave').html('Save Changes');
                            toastr.error(
                                '{{ lang('Please fill required fields.', 'alerts') }}'
                            );
                        }
                    });
                });

                // Delete the Holiday
                $('body').on('click', '#deleteholidaymodal', function() {
                    var holiday_id = $(this).data("id");
                    let parent = $(this).closest('tr');

                    swal({
                            title: `{{ lang('Are you sure you want to continue?', 'alerts') }}`,
                            text: "{{ lang('This might erase your records permanently', 'alerts') }}",
                            icon: "warning",
                            buttons: true,
                            dangerMode: true,
                        })
                        .then((willDelete) => {
                            if (willDelete) {
                                $.get('holidays/delete/' + holiday_id, function(data) {
                                    toastr.success(
                                        '{{ lang('successfully deleted .', 'alerts') }}'
                                    );
                                    $(parent[0]).addClass('fade-out');
                                    let newData = tableData.filter(
                                        item => item
                                        .id != parseInt(holiday_id));
                                    tableData = newData;
                                    document.getElementById('hideAfterloading')?.classList.remove('d-none');
                                    document.querySelector('.card-body').style.setProperty('filter','blur(1px)');

                                    setTimeout(() => {
                                        parent.remove();
                                        loadTable(tableData);
                                    }, 1500);
                                    

                                });

                            }
                        });
                });

                // Mass Delete
                $('body').on('click', '#massdeletenotify', function() {
                    var id = [];
                    var parent = [];
                    $('.checkall:checked').each(function() {
                        id.push($(this).val());
                        parent.push($(this).closest('tr'));
                    });
                    if (id.length > 0) {
                        swal({
                                title: `{{ lang('Are you sure you want to continue?', 'alerts') }}`,
                                text: "{{ lang('This might erase your records permanently', 'alerts') }}",
                                icon: "warning",
                                buttons: true,
                                dangerMode: true,
                            })
                            .then((willDelete) => {
                                if (willDelete) {
                                    $.ajax({
                                        url: "{{ url('admin/holidays/massdelete') }}",
                                        method: "GET",
                                        data: {
                                            id: id
                                        },
                                        success: function(data) {
                                            toastr.success(data.success);
                                            parent.forEach(element => {
                                                element.addClass(
                                                    'fade-out');
                                            });

                                            let newData = tableData.filter(
                                                item => !id.includes(
                                                    String(item.id)));
                                            tableData = newData;
                                            document.getElementById('hideAfterloading')?.classList.remove('d-none');
                                            document.querySelector('.card-body').style.setProperty('filter','blur(1px)');
                                            setTimeout(() => {
                                                loadTable(
                                                    tableData);
                                            }, 1500);
                                            $('.checkall:checked').prop('checked', false);
                                            $('#customCheckAll').prop('checked', false);
                                            $('#massdelete').hide();
                                            // location.reload();
                                        },
                                        error: function(data) {

                                        }
                                    });
                                }
                            });
                    } else {
                        toastr.error(
                            '{{ lang('Please select at least one check box.', 'alerts') }}'
                        );
                    }

                });
            })
        });
    </script>
@endsection