@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">
    <link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="/assets/css/daterangepicker.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">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="../../../assets/css/jquery-ui.min.css">
    <!-- END: Page CSS-->
@endpush
@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0"> Reports</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('') }}/member/{{ $alias }}/home">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ url('') }}/member/{{ $alias }}/global/reports">Go Back</a>
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
<div class="content-header-right text-end col-md-3">
    <div class="form-group breadcrumb-right">
        <div class="row">
            <div class="col-md-12">
                <button class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button"
                    data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd"
                    type="button"><i data-feather='filter'></i>
                </button> 
                <a href="/member/{{$alias}}/global/report-view?module={{$customReports->type}}&template_id={{$request->template_id}}"  class="btn btn-primary box-shadow-2 cretareportbtn">
                    Clear
                </a>
                <a href="/member/{{$alias}}/global/export?{{ http_build_query($_GET)}}"  class="btn btn-primary box-shadow-2 cretareportbtn" onclick="exportToExcel()">
                    Export
                </a>
                <div class="loaderhvhj" id="loadergujj">
                    {{-- <img src="/assets/img/logo-gif.png" style="
                        height: 40px;
                        ">                                             --}}
                </div>   
            </div>
        </div>
    </div>
</div>
@endpush
@section('content')
    <!-- Column Search -->
    <section id="column-search-datatable">
        <a style="display: none" id="downloadTxt" href="#"></a>
        @if($reportType == 'attendance')
        @include('employee-report.partials.filters', [
            "templateId" => $templateId,
            "request" => $request,
            "organization" => $organization,
            "locations" => $locations,
            "subLocations" => $subLocations,
            "departments" => $departments,
            "designations" => $designations,
            "month" => $month,
            "year" => $year,
            "module" => $module
        ])
        @elseif($reportType == 'task')
            @include('employee-report.partials.task-filters', [
                "templateId" => $templateId,
                "request" => $request,
                "organization" => $organization,
                "module" => $module,
            ])
        @elseif($reportType == 'employee')
            @include('employee-report.partials.employee-filters', [
                "templateId" => $templateId,
                "request" => $request,
                "organization" => $organization,
                "module" => $module,
            ])
        @elseif($reportType == 'lms')
            @include('employee-report.partials.lms-filters', [
                "templateId" => $templateId,
                "request" => $request,
                "organization" => $organization,
                "module" => $module,
            ])
        @elseif($reportType == 'visitor')
            @include('employee-report.partials.visitor-filters', [
                "templateId" => $templateId,
                "request" => $request,
                "organization" => $organization,
                "module" => $module,
            ])
        @elseif($reportType == 'travel-expense')
            @include('employee-report.partials.travel-expense-filters', [
                "templateId" => $templateId,
                "request" => $request,
                "organization" => $organization,
                "module" => $module,
            ])
        @elseif($reportType == 'expense-detail')
        @include('employee-report.partials.detail-expense-filters', [
            "templateId" => $templateId,
            "request" => $request,
            "organization" => $organization,
            "module" => $module,
        ])
        @elseif($reportType == 'expense-date-wise-detail')
        @include('employee-report.partials.datewise-detail-filters', [
            "templateId" => $templateId,
            "request" => $request,
            "organization" => $organization,
            "module" => $module,
        ])
        @elseif($reportType == 'lms-contact')
        @include('employee-report.partials.lms-contact-filters', [
            "templateId" => $templateId,
            "request" => $request,
            "organization" => $organization,
            "module" => $module,
        ])
        @elseif($reportType == 'attendance-monthly-data')
            @include('employee-report.partials.month-data-filters', [
                "templateId" => $templateId,
                "request" => $request,
                "organization" => $organization,
                "module" => $module,
            ])
        @elseif($reportType == 'payroll')
            @include('employee-report.partials.payroll-filters', [
                "templateId" => $templateId,
                "request" => $request,
                "organization" => $organization,
                "module" => $module,
            ])
        @elseif($reportType == 'leave')
            @include('employee-report.partials.leave-filters', [
                "templateId" => $templateId,
                "request" => $request,
                "organization" => $organization,
                "module" => $module,
            ])
        @endif

        <div class="row mt-2">
            <div class="col-12">
                <div class="card row">
                    <div class="card-datatable table-responsive">
                        <table class="dt-column-search table table-responsive attendance-reg-table tablenewheadfixed"
                            id="organization">   
                            
                            @if ($templateId)
                                <thead>
                                    <tr>
                                        <th>S.No.</th>
                                        @foreach ($headersData as $sequence)
                                            @php
                                                $val = explode('...', $sequence['value']);
                                                $headersAlias = '';
                                                if (isset($sequence['alias']) && $sequence['alias']) {
                                                    $headersAlias = $sequence['alias'];
                                                }
                                                
                                                if ($headersAlias) {
                                                    $val = $headersAlias;
                                                } else {
                                                    if (isset($val[1])) {
                                                        $val = $val[1];
                                                    } else {
                                                        $val = $val[0];
                                                    }
                                                }
                                                    
                                            @endphp
                                            <th>{{ ($val) }} </th>
                                            
                                        @endforeach
                                    </tr>
                                </thead>

                            @if($reportType == 'attendance')
                                @include("employee-report.partials.table-attendnace", [
                                    "records" => $records,
                                    "headersData" => $headersData
                                ])
                            @elseif($reportType == 'task')
                                @include("employee-report.partials.table-task", [
                                    "records" => $records,
                                    "headersData" => $headersData
                                ])
                            @elseif($reportType == 'payroll')
                            @include("employee-report.partials.table-salary", [
                                "records" => $records,
                                "headersData" => $headersData
                            ])
                            @elseif($reportType == 'leave')
                            @include("employee-report.partials.table-leave", [
                                "records" => $records,
                                "headersData" => $headersData
                            ])
                            @elseif($reportType == 'employee')
                            @include("report.partials.table-employee", [
                                "records" => $records,
                                "headersData" => $headersData
                            ])
                            @elseif($reportType == 'lms')
                            @include("employee-report.partials.table-lms", [
                                "records" => $records,
                                "headersData" => $headersData
                            ])
                            @elseif($reportType == 'visitor')
                            @include("employee-report.partials.table-visitor", [
                                "records" => $records,
                                "headersData" => $headersData
                            ])
                            @elseif($reportType == 'travel-expense')
                            @include("employee-report.partials.table-travel-expense", [
                                "records" => $records,
                                "headersData" => $headersData
                            ])
                            @elseif($reportType == 'expense-detail')
                            @include("employee-report.partials.table-expense-detail", [
                                "records" => $records,
                                "headersData" => $headersData
                            ])
                            @elseif($reportType == 'expense-date-wise-detail')
                            @include("employee-report.partials.table-expense-datewise-detail", [
                                "records" => $records,
                                "headersData" => $headersData
                            ])
                            @elseif($reportType == 'lms-contact')
                            @include("employee-report.partials.table-lms-contact", [
                                "records" => $records,
                                "headersData" => $headersData
                            ])
                            @elseif($reportType == 'attendance-monthly-data')
                            @include("employee-report.partials.table-monthly-data", [
                                "records" => $records,
                                "headersData" => $headersData
                            ])
                            @endif
                            <tfoot>
                                <tr>
                                </tr>
                            </tfoot>
                            @endif
                        </table>
                        {{ $records->appends($request->except('page'))->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    @if($reportType == 'attendance')
    @include("employee-report.partials.attendance-modals", $attendanceModalData)
    @elseif($reportType == 'task')
    @include("employee-report.partials.task-modals", $taskModalData)
    @elseif($reportType == 'payroll')
    @include("employee-report.partials.payroll-modals", $salaryModalData)
    @elseif($reportType == 'employee')
    @include("employee-report.partials.employee-modals",$employeeModalData)
    @elseif($reportType == 'lms')
    @include("employee-report.partials.lms-modals",$lmsModalData)
    @elseif($reportType == 'visitor')
    @include("employee-report.partials.visitor-modals",$visitorModalData)
    @elseif($reportType == 'travel-expense')
    @include("employee-report.partials.travel-expense-modals",$expenseModalData)
    @elseif($reportType == 'expense-detail')
    @include("employee-report.partials.detail-expense-modals",$expenseDetailModal)
    @elseif($reportType == 'expense-date-wise-detail')
    @include("employee-report.partials.datewise-detail-modals",$expenseDateWiseDetailModal)
    @elseif($reportType == 'attendance-monthly-data')
    @include("employee-report.partials.monthly-data-modals",$montlyModalData)
    @elseif($reportType == 'leave')
    @include("employee-report.partials.leave-modals",$leaveModalData)
    @elseif($reportType == 'lms-contact')
    @include("employee-report.partials.lms-contact-modals",$lmsContactModalData)
    @endif
@endsection
@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <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="/assets/js/moment.min.js"></script>
    <script src="/assets/js/daterangepicker.js"></script>

    <script src="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    <script src="/assets/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <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/vendors/js/extensions/toastr.min.js"></script>


    <!-- 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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
    <script src="/../assets/js/jquery-ui.min.js"></script>
    <!-- END: Page JS-->



    <script>
        var subLocations = [];
        function callDt() {
            var dt_filter_table = $('.dt-column-search');

            if ($('body').attr('data-framework') === 'laravel') {
                assetPath = $('body').attr('data-asset-path');
            }

            if (dt_filter_table.length) {

                var dt_filter = dt_filter_table.DataTable({
                    "bPaginate": false,
                    "bInfo" : false,
                    "ordering": false,
                    dom: '<"card-header border-bottom p-1"<"head-label"><"dt-action-buttons text-end"B>><"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
                    orderCellsTop: true,
                    language: {
                        paginate: {
                            previous: '&nbsp;',
                            next: '&nbsp;'
                        }
                    },
                    
                    buttons: [
                        @if (isset($templateId))
                            {
                                text: "{{ $template->name }}  " + feather.icons['edit-3'].toSvg({
                                    class: 'font-medium-4'
                                }),
                                className: 'btn btn-outline-warning me-2',
                                attr: {
                                    'type': "button",
                                    'onclick': "getSequence({{ $templateId }})",
                                    'title': 'Edit Sequence'
                                },
                                init: function(api, node, config) {
                                    $(node).removeClass('btn-secondary');
                                }
                            }, {
                                text: feather.icons['trash'].toSvg({
                                    class: 'font-medium-4'
                                }),
                                className: 'btn btn-outline-danger me-2',
                                attr: {
                                    'type': "button",
                                    'onclick': "deleteTemplate({{ $templateId }})",
                                    'title': 'Delete Template'
                                },
                                init: function(api, node, config) {
                                    $(node).removeClass('btn-secondary');
                                }
                            },
                            // {
                            //     text: feather.icons['file'].toSvg({
                            //         class: 'font-medium-4'
                            //     }) + ' Export',
                            //     className: 'btn btn-outline-success me-2',
                            //     text: feather.icons['share'].toSvg({ class: 'font-small-4 me-50' }) + "{{trans('common/common.export')}}",
                            //     attr: {
                            //         'type': "button",
                            //         'onclick': 'location.href="/{{$alias}}/report/export?{!!Request::getQueryString()!!}"',
                            //         'title': 'Export Template'
                            //     },
                            //     init: function(api, node, config) {
                            //         $(node).removeClass('btn-secondary');
                            //     }
                            // },

                        @endif 
                        // {
                        //     extend: 'collection',
                        //     className: 'btn btn-outline-secondary dropdown-toggle me-2',
                        //     text: feather.icons['share'].toSvg({
                        //         class: 'font-small-4 me-50'
                        //     }) + "{{ trans('manager/manager.export') }}",
                        //     buttons: [
                                
                        //         {
                        //             extend: 'excel',
                        //             filename: '{{ $organization->name }}, {{ Auth::user()->name }} - {{ date('d-m-Y H-i-s') }}',
                        //             title: '{{ $organization->name }} - {{ date('d-m-Y H-i-s') }}',
                        //             text: feather.icons['file'].toSvg({
                        //                 class: 'font-small-4 me-50'
                        //             }) + 'Excel',
                        //             className: 'dropdown-item',
                        //             // exportOptions: { columns: Array.from(Array($("#organization thead tr:nth-child(2) th").length).keys()) },

                        //         },
                        //     ],
                        //     init: function(api, node, config) {
                        //         $(node).removeClass('btn-secondary');
                        //         $(node).parent().removeClass('btn-group');
                        //         setTimeout(function() {
                        //             $(node).closest('.dt-buttons').removeClass('btn-group')
                        //                 .addClass('d-inline-flex');
                        //         }, 50);
                        //     }
                        // },
                    ],

                });
            }

        };

        $(window).on('load', function() {
            $('.select2').select2();

            $('input[name="date_range"]').daterangepicker({
                opens: 'left'}, function(start, end, label) {
                console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
            });
            
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        });

        function submitForm() {
            console.log("submit form");
            var form = $('#template_form');
            var actionUrl = form.attr('action');
            console.log(actionUrl);

            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(),
                success: function(data) {
                    var data = data.data;
                    var sequenceAr = data.sequence;
                    $('#templateModal').modal('hide');
                    $('#sequenceModal').modal('show');
                    $('#report-name').val(data.name);
                    $('#seq_template_id_temp').val(data.id);
                    var tHtml = '';
                    $.each(sequenceAr, function(key, value) {
                        value.alias = '';
                        var seqString = value.value;
                        var seqVal = seqString.split('...');

                        tHtml +=
                            '<div class="col-md-12"><div class="form-check form-check-secondary  sequenceRow" data-value=';
                        tHtml += "'" + JSON.stringify(value) + "'>";
                        tHtml += '<div class="row"><div class="col-md-6">';
                        tHtml += '<label class="form-check-label">' + seqVal[1] + '</label>';
                        tHtml += '</div><div class="col-md-6">';
                        tHtml +=
                            '<input type="text" class="form-control custom-component-alias" name="custom_name[]" placeholder="Custom Header Title"/>';
                        tHtml += '</div></div>';
                        tHtml += '</div></div>';


                    });
                    $('#set-data').html(tHtml);
                }
            });

        }

        function submitSequenceForm() {

            var form = $('#sequence-template-form');
            var actionUrl = form.attr('action');
            var dataSet = [];
            $(".sequenceRow").each(function(e, row) {
                dataSet.push(JSON.parse($(row).attr("data-value")));
            });

            var tempId = $('#seq_template_id_temp').val();
            var name = $('#report-name').val();

            $.ajax({
                type: "POST",
                url: actionUrl,
                data: {
                    'id': tempId,
                    'name': name, 
                    'sequence': dataSet,
                    'rate': $('input[name="rate"]').is(":checked") ? '1' : '0',
                    'arrear': $('input[name="arrear"]').is(":checked") ? '1' : '0',
                },
                success: function(res) {
                    console.log(res);
                    if (res.status == true) {
                        Swal.fire({
                            title: "Success",
                            text: "Successfully Updated",
                            icon: "success",
                            confirmButtonColor: "#00c292",
                            confirmButtonText: "Ok",
                        });
                        setTimeout(function() {
                            location.reload();
                        }, 2200);
                    }
                }
            });
        }

        $(document).ready(function() {
            callDt();

            var status = "{{ $request->status }}";
            if (status == 1) {
                $('#filter-form').submit();
            }
        });

        $('#add').click(function(){
            $("#template_id_temp").val('');
            $("#name").val('');
            $('#selectAllHeader').prop('checked',false);
            $('.HeaderCheck').prop('checked', false);
        });
        
        // $('#add_template').click(function(e){

        //     var templateId = $('#template_id_temp').val();
        //     var name = $('#name').val();
        //     var template_type = $('#template_type').val();
        //     var headers = $('input[name="headers[]"]:checkbox:checked').map(function(){return $(this).val();}).get();
        //     var components = $('input[name="components[]"]:checkbox:checked').map(function(){return $(this).val();}).get();
        //     $.ajax({
        //         url: '/{{$alias}}/report-template/validate-template',
        //         type: 'POST',
        //         data: {
        //             '_token': "{{ csrf_token() }}",
        //             '_method': 'POST',
        //             'name' : name,
        //             'type' : template_type,
        //             'templateId' : templateId,
        //             'headers' : headers,
        //             'components' : components,
        //         },
        //         success: function(response) {
        //             if (response == '') {
        //                 submitForm();
        //             }else{
        //                 Swal.fire("Error!", response[0], "error");
        //             }
        //         }

        //     });
        // });

        $('#add').click(function() {
            $("#template_id_temp").val('');
            $("#name").val('');
            $('#selectAllHeader').prop('checked', false);
            $('.HeaderCheck').prop('checked', false);
        });

        function getSequence(template_id) {
            $.ajax({
                url: '/member/{{ $alias }}/report-template/get-template',
                type: 'POST',
                data: {
                    '_token': "{{ csrf_token() }}",
                    '_method': 'POST',
                    'template_id': template_id,

                },
                success: function(response) {
                    var sequenceAr = response.sequence;
                    $('#report-name').val(response.name);
                    console.log('hi');
                    $('#seq_template_id_temp').val(response.id);
                    if (response.rate == 1) {
                        $('input[name="rate"]').prop('checked', true);
                    }
                    if (response.arrear == 1) {
                        $('input[name="arrear"]').prop('checked', true);
                    }

                    var tHtml = '';
                    $.each(sequenceAr, function(key, value) {
                        var seqString = value.value;
                        var seqVal = seqString.split('...');
                        if (value.alias == null) {
                            alias = '';
                            value.alias = '';
                        } else {
                            alias = value.alias;
                        }

                        tHtml +=
                            '<div class="col-md-12"><div class="form-check form-check-secondary  sequenceRow" data-value=';
                        tHtml += "'" + JSON.stringify(value) + "'>";
                        tHtml += '<div class="row"><div class="col-md-6">';
                        tHtml += '<label class="form-check-label">' + seqVal[1] + '</label>';
                        tHtml += '</div><div class="col-md-6">';
                        tHtml +=
                            '<input type="text" class="form-control custom-component-alias" name="custom_name[]" value="' +
                            alias + '" placeholder="Custom Header Title" />';
                        tHtml += '</div></div>';
                        tHtml += '</div></div>';
                    });
                    $('#set-data').html(tHtml);
                    console.log(tHtml);
                    $('#sequenceModal').modal('show');
                }
            });
        }

        function setCustomAlisa(event) {
            var data = event.value;
            $oldData = $(event.parents)('.sequenceRow').attr('value');
            console.log($oldData);
        }

        $('body').on('change', '.custom-component-alias', function() {
            const dataValue = JSON.parse($(this).closest('.sequenceRow').attr('data-value'));
            let alias = $(this).val();
            dataValue["alias"] = alias;
            neDataValue = JSON.stringify(dataValue);
            $(this).closest('.sequenceRow').attr('data-value', neDataValue);

        })

        function getTemplate(template_id) {
            $("#template_id_temp").val(template_id);
            $("#template_id_temp_2").val(template_id);
            $.ajax({
                url: '/member/{{ $alias }}/report-template/get-template',
                type: 'POST',
                data: {
                    '_token': "{{ csrf_token() }}",
                    '_method': 'POST',
                    'template_id': template_id,
                },
                success: function(response) {
                    var name = $('#name').val(response.name);
                    var reportName = $('#report-name').val(response.name);
                    console.log('Name', name);
                    console.log('Report Name', reportName);
                    $('.HeadingCheck').prop('checked', false);

                    if (response.headers) {
                        response.headers.map(function(val) {
                            $('input[value="' + val + '"]:checkbox').prop('checked', true).trigger(
                                'change');
                        });
                    }
                    if (response.components) {
                        response.components.map(function(val) {
                            $('input[value="' + val + '"]:checkbox').prop('checked', true).trigger(
                                'change');
                        });
                    }
                    if (response.salary_slip_components) {
                        response.salary_slip_components.map(function(val) {
                            $('input[value="' + val + '"]:checkbox').prop('checked', true).trigger(
                                'change');
                        });
                    }
                    $('#sequenceModal').modal('hide');
                    $('#templateModal').modal('show');
                }
            });
        }

        
        function deleteTemplate(template_id) {
            Swal.fire({
                text: "Are you sure want to delete the template?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "@lang('messages.deleteConfirmation')",
                cancelButtonText: "@lang('messages.confirmNoArchive')",
            }).then(function(result) {
                if (result.isConfirmed) {
                    window.location.href = '/{{ $alias }}/global/' + template_id + '/delete';
                } else {
                    //  do nothing 
                }
            });
        }


        function downloadTextFile() {
            var href = $('#downloadTxt').attr('href');
            window.location.href = href;
        }

        function selectAll(name) {
            if ($('#selectAll' + name).is(":checked")) {
                $('.' + name + 'Check').prop('checked', true);
            } else {
                $('.' + name + 'Check').prop('checked', false);
            }
        }

        function reverseSelect(name) {
            var boxes = $('.' + name + 'Check:checked');
            if ($('.' + name + 'Check').length == boxes.length) {
                $('#selectAll' + name).prop('checked', true);
            } else {
                $('#selectAll' + name).prop('checked', false);
            }
        }

        $(function() {
            $('body').on('change', '.HeaderCheck', function() {
                var boxes = $('.HeaderCheck:checked');
                if ($('.HeaderCheck').length == boxes.length) {
                    $('#selectAllHeader').prop('checked', true);
                } else {
                    $('#selectAllHeader').prop('checked', false);
                }
            });
        });

        function templateFilter(templateId) {
            $('#template_id').val(templateId);
            $('#filter-form').submit();
        }

        $(function() {
            $(".sortable").sortable({
                cursor: "move"
            })
        });
        var subLocations = $('#sub_location_id').val();
        $(document).ready(function(){
            if ($('#location_id').val()) {
                getsubLocations();
            }
        })

        function getsubLocations(th) {
            var locationId = $('#location_id').val();
            
            var subLocationId = "";

            var data = {
                'location_id': locationId,
                '_token': '{{{csrf_token()}}}'
            }
            $.ajax({
                url: '/member/{{$alias}}/location/sub-locations',
                type: 'POST',
                data: data,
                success: function(data) {

                    var selectbox = '';
                    if (data) {
                        selectbox = '<label for="sub_location_id">Sub Location</label>';
                        selectbox += '<div class="form-label-group"><select name="sub_location_id[]" class="form-control select2" id="sub_location_id" multiple>';
                        $.each(data, function(i, item) {
                            if (subLocations.includes(i)) {
                                selectbox += '<option value="' + i + '" selected="selected">' + item + '</option>';
                            } else {
                                selectbox += '<option value="' + i + '">' + item + '</option>';
                            }
                        });
                        selectbox += '</select></div>';
                    }
                    $('#sub_location_id').html(selectbox);
                    $("#sub_location_id").select2({
                        multiple: true
                    });
                }
            });
            
        }

        function getSubCategories(th, level) {
            var parentCatId = $(th).val();
            $('.category_id').removeAttr('name');
            
            var data = {
                'level' : level,
                parent_category_id: parentCatId,
                '_token': '{{{csrf_token()}}}'
            }
            $.ajax({
                url: '/member/{{$alias}}/first-level-categories',
                type: 'POST',
                data: data,
                success: function(data) {
                    $(th).closest('.category-level').nextAll('.category-level').remove();
                    $(th).attr('name', "category_id");
                    $(th).closest(".col-sm-12").append(data);
                    $('#category_select_level_'+level).select2();
                }
            });
        }
        
        function exportToExcel() {
            $('#loader').show();
            
        }

        $('.from_to_date').change(function(){
            var periodDropdown = $('.periodDropdown').val();
            if($(this).hasClass("periodDropdown")){
                if(periodDropdown == ''){
                    clearInputFields();
                    $('.periodTypeDropdown-div').hide();
                    $('.from_date').prop('readonly', false);
                    $('.to_date').prop('readonly', false);
                } else {
                    $('.periodTypeDropdown-div').show();
                    setDropDowns(periodDropdown);
                    $('.from_date').prop('readonly', true);
                    $('.to_date').prop('readonly', true);
                }
            }

            var periodTypeDropdown = $('.periodTypeDropdown').val();
            var dateArr = getFromToDate(periodDropdown, periodTypeDropdown);

            $('.from_date').val(dateArr['from_date']);
            $('.to_date').val(dateArr['to_date']);
        });

        function setDropDowns(periodDropdown){
            if(periodDropdown != "yearly"){
                $('.periodTypeDropdown-div').show();
                var dropDowns = [];
                switch(periodDropdown){
                    case 'half-yearly':
                        dropDowns = ['H1', 'H2'];
                    break;
                    case 'quarterly':
                        dropDowns = ['Q1', 'Q2', 'Q3', 'Q4'];
                    break;
                    case 'monthly':
                        dropDowns = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
                    break;
                }

                var html = "";
                $.each(dropDowns, (key, item) => {
                    html += `<option value="${item}">${item}</option>`;
                });

                $('.periodTypeDropdown').html(html);

                }else{
                    
                    $('.periodTypeDropdown-div').hide();
                }
        }

        function getFromToDate(period, subPeriod) {
            console.log(period, subPeriod);
            var fromDate, toDate;
            var currentYear = new Date().getFullYear();

            switch (period) {
                case 'yearly':
                    fromDate = new Date(currentYear, 0, 1);
                    toDate = new Date(currentYear, 11, 31);
                break;
                case 'half-yearly':
                    fromDate = new Date(currentYear, subPeriod === 'H1' ? 0 : 6, 1);
                    toDate = new Date(currentYear, subPeriod === 'H1' ? 6 : 12, 0);
                break;
                case 'quarterly':
                    var quarterRange = {
                        'Q1': [0, 2],
                        'Q2': [3, 5],
                        'Q3': [6, 8],
                        'Q4': [9, 11]
                    }[subPeriod];
                    fromDate = new Date(currentYear, quarterRange[0], 1);
                    toDate = new Date(currentYear, quarterRange[1] + 1, 0);
                break;
                case 'monthly':
                    var monthRange = {
                        'January': [0, 0],
                        'February': [1, 1],
                        'March': [2, 2],
                        'April': [3, 3],
                        'May': [4, 4],
                        'June': [5, 5],
                        'July': [6, 6],
                        'August': [7, 7],
                        'September': [8, 8],
                        'October': [9, 9],
                        'November': [10, 10],
                        'December': [11, 11]
                    }[subPeriod];
                    var monthIndex = monthRange[0];
                    fromDate = new Date(currentYear, monthIndex, 1);
                    toDate = new Date(currentYear, monthRange[1] + 1, 0); // Add one more month for the full month
                break;
            }

            return { from_date: formatDate(fromDate), to_date: formatDate(toDate) };
        }

        function formatDate(date) {
            var day = date.getDate().toString().padStart(2, '0');
            var month = (date.getMonth() + 1).toString().padStart(2, '0');
            var year = date.getFullYear();
            console.log([day, month, year]);
            return year + '-' + month + '-' + day ;
        }

        // Function to clear input fields
    function clearInputFields() {
        $('.from_date').val('');
        $('.to_date').val('');
    }

    </script>
@endpush