@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/plugins/forms/form-wizard.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-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{ trans('admin/template.generate_salary') }}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/home">Home</a>
                    </li>
                    <li class="breadcrumb-item active">{{ trans('admin/template.salary_view') }}
                    </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-8">
                    <a href="/{{ $alias }}/attendance-fetch" class="btn btn-secondary btn-sm"><i
                            data-feather="arrow-left-circle"></i> Prev</a>
                </div>
                <div class="col-md-4">

                    <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>

                </div>
            </div>
        </div>
    @endpush

    @section('content')
        @include('filtters.common', $fillterData)
        {{-- error message --}}
        <section>
            <div class="row">
                {{-- <div class="col-md-12">
                    @if ($hasComponents <= 0)
                        <div class="demo-spacing-0">
                            <div class="alert alert-danger" role="alert">
                                <div class="alert-body"><strong>Please define Components first.</strong></div>
                            </div>
                        </div> --}}
                    @else
                        {{-- @if (isset($status))
                        @foreach ($status['messages'] as $m)
                            <div class="demo-spacing-0">
                                <div class="alert alert-{{ $status['code'] }}" role="alert">
                                    <div class="alert-body"><strong>{{ $m }}</strong></div>
                                </div>
                            </div>
                        @endforeach
                        
                    @endif --}}
                    @endif
                </div>
            </div>
        </section>
        <!-- Column Search -->
        <form method="post" action="generate-salary?{!! $queryString !!}">
            <!-- <input type="hidden" name=""> -->
            {{ csrf_field() }}
            <section id="column-search-datatable">
                <div class="row">


                    @if (Auth::user()->hasPermission('/salary-fetch-generate'))
                        <div class="col-md-8 mb-2 row">
                            <div class="col-md-4">
                                <label class="form-label mt-2" for="area_id">{{ trans('admin/template.month') }}</label>
                                <select class="form-control select2" name="month" id="month">
                                    @foreach ($months as $key => $val)
                                        <option class="form-control" value="{{ $key }}"
                                            @if ($key == $month) selected @endif>{{ $val }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label mt-2" for="year">{{ trans('admin/template.year') }}</label>
                                <select class="form-control select2" name="year" id="year">
                                    @foreach ($years as $val)
                                        <option class="form-control" value="{{ $val }}"
                                            @if ($val == $year) selected @endif>{{ $val }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4">
                                <br>
                                <button type="button" onclick="putInFilters()" class="btn btn-primary mt-2 mb-1 me-2 px-1">
                                    Search</button>

                                <button type="submit" id="attendance-fetch-btn"
                                    class="btn btn-warning mt-2 mb-1">Fetch</button>
                            </div>

                            @if ($payrollType == 'multiple_payments')
                                <div class="col-md-8">
                                    <label class="form-label"
                                        for="year">{{ trans('admin/template.date_range') }}</label>
                                    <select class="form-control select2" name="payroll_period_id" id="payroll_period_id"
                                        data-selected="{{ @$payrollPeriod->id }}">
                                    </select>
                                </div>
                            @endif
                        </div>
                    @else
                        <div class="col-md-8"></div>
                    @endif
                    <div class="col-md-4">
                        <br>
                        <div class="alert alert-danger alert-dismissible fade show alerfetchatten" role="alert">
                            <!-- <div class="alert-heading"></div> -->
                            <div class="alert-body">
                                <b>Salary of <strong>{{ count($salaryLists) }} / {{ $totalEmployees }}</strong> Employees
                                    has been fetched.</b>
                                <br>
                                <b>Salary of <strong>{{ count($lockedSalaryLists) }} / {{ count($salaryLists) }}</strong>
                                    has been Locked.</b>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </form>
        <form method="post" id="salary-fetch" action="salary-lock">
            {{ csrf_field() }}

            <input type="hidden" name="month" value="{{ $month }}">
            <input type="hidden" name="year" value="{{ $year }}">
            <input type="hidden" name="payroll_period_id" value="{{ @$payrollPeriod->id }}">
            <input type="hidden" name="type" id="type" value="lock">
            <input type="hidden" name="id" id="selectedIds" value="[]">

        </form>
        <form class="loder-disabled" method="post" id="download-salary-slip" action="payroll/download-payslip">
            {{ csrf_field() }}
            <input type="hidden" name="month" value="{{ $month }}">
            <input type="hidden" name="year" value="{{ $year }}">
            <input type="hidden" name="employee_ids" id="selectedemployee" value="[]">

        </form>

        <div class="row">
            <div class="col-12">
                <div class="card px-1">
                    <div class="card-header salaryhead attfetchmthhead" style="margin-bottom: -15px;">
                        <h4 class="card-title"><span>Salary Month:
                            </span><strong>{{ $month_name }}'{{ $year }}</strong></h4>
                        <h5 class="card-title">{{ $total_day }} Month Days</h5>
                    </div>
                    <div class="card-datatable table-responsive">
                        <table
                            class="dt-column-search table table-responsive table-bordered attfetchnewtabdesign tablenewheadfixed"
                            id="organization">
                            <thead>
                                <th></th>
                                <th class="text-center">
                                    <input type="checkbox" id="selectAll" class="form-check-input" />
                                </th>
                                <!-- <th>Lock / Unlock</th> -->
                                <th><!--  {{ trans('admin/template.s_no') }}  --></th>
                                <th class="text-nowrap">Employee Name</th>
                                <th class="text-nowrap">Employee Code</th>
                                <!-- <th>{{ trans('admin/template.month_days') }}</th> -->
                                <th>{{ trans('admin/template.org_holiday_n') }}</th>
                                <th>{{ trans('admin/template.holidays') }}</th>
                                <th>{{ trans('admin/template.week_offs') }}</th>
                                <th>{{ trans('admin/template.present_days_n') }}</th>
                                {{-- <th>{{ trans('admin/template.po_days_n') }}</th> --}}
                                <th>{{ trans('admin/template.absent_days_n') }}</th>
                                <th>{{ trans('admin/template.leave_days_n') }}</th>
                                <th>{{ trans('admin/template.arrear_days') }}</th>
                                <th>{{ trans('admin/template.paid_days') }}</th>
                                <th>{{ trans('admin/template.paid_hrs') }}</th>
                                {{-- <th>{{ trans('admin/template.month_ctc') }}</th> --}}
                                <th>{{ trans('admin/template.total_earning') }} </th>
                                <th>{{ trans('admin/template.total_deduction') }} </th>
                                <th>{{ trans('admin/template.net_pay') }}</th>
                                <th>{{ trans('admin/template.status') }}</th>
                            </thead>
                            <tbody class="mb-2">
                                @foreach ($salaryLists as $value)
                                    <tr class="odd">
                                        <td>
                                            @if ($value->is_lock == 'Yes')
                                                <button type="button" class="btn rounded-circle btn-icon bg-light-danger"
                                                    title="Locked"><i data-feather="lock"></i></button>
                                            @else
                                                <button type="button"
                                                    class="btn rounded-circle btn-icon bg-light-success"
                                                    title="UnLocked"><i data-feather="unlock"></i></button>
                                            @endif
                                            <!-- <input data-id="{{ $value->id }}" class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-style="ios" data-on="Lock" data-off="UnLock"{{ $value->is_lock ? 'checked' : '' }}@if ($value->is_lock == 'Yes') {{ 'checked' }} @endif>   -->
                                        </td>
                                        <td class="text-center">
                                            @if ($value->is_lock == 'Yes')
                                                <input type="checkbox" name="id[]" id="checked"
                                                    class="form-check-input idCheck" value="{{ $value->id }}"
                                                    data-empid="{{ $value->employee_id }}"><br>
                                                <a
                                                    href="/{{ $alias }}/payslip-view?employee_id={{ $value->employee_id }}&month={{ $value->month }}&year={{ $value->year }}&payroll_period_id={{ $value->year }}">{{ trans('admin/template.view') }}</a>
                                            @else
                                                <input type="checkbox" name="id[]" id="checked"
                                                    class="form-check-input idCheck" value="{{ $value->id }}"
                                                    data-empid=""><br>
                                                <a
                                                    href="/{{ $alias }}/payslip-preview?employee_id={{ $value->employee_id }}&month={{ $value->month }}&year={{ $value->year }}&payroll_period_id={{ $value->payroll_period_id }}">{{ trans('admin/template.preview') }}</a>
                                            @endif
                                        </td>

                                        <td> {{ $loop->iteration }}</td>
                                        <td><strong>{{ $value->employee->name }}</strong></td>
                                        <td><strong>{{ $value->employee->employee_code }}</strong></td>

                                        <!-- <td>{{ $value->total_month_days }}</td> -->
                                        <td>{{ $value->organization_holidays }}</td>
                                        <td>{{ $value->holidays }}</td>
                                        <td>{{ $value->week_offs }}</td>
                                        <td>{{ $value->total_present_days }}</td>
                                        {{-- <td>{{ $value->total_po_days }}</td> --}}
                                        <td>{{ $value->total_absent_days }}</td>
                                        <td>{{ $value->total_leave_days }}</td>
                                        <td>{{ $value->total_ariyor_days }}</td>
                                        <td>{{ $value->total_paid_days - $value->total_ariyor_days > 0 ? $value->total_paid_days - $value->total_ariyor_days : 0 }}
                                        <td>{{ $value->total_payable_hours ?: 0 }}</td>
                                        </td>
                                        {{-- <td>{{ $value->ctc_for_month }}</td> --}}
                                        <td>{{ $value->total_earning }}</td>
                                        <td>{{ $value->total_deduction }}</td>
                                        <td>{{ round($value->net_salary) }}</td>
                                        <td>{{ ucfirst($value->salary_status) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>

        </section>
        <!--/ Column Search -->
        @php
            $resHeader = $resMessage = '';
        @endphp
        @if (isset($status))
            @php
                $resMessage = $status['messages'][0];
                $resHeader = $status['header'];
            @endphp
        @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 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/forms/form-wizard.js"></script>
        <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>
            var dt_filter_table;
            $(document).ready(function() {
                callDt();
                $('#selectAll').click(function(e) {
                    if ($('#selectAll').is(":checked")) {
                        $('.idCheck').prop('checked', true);
                    } else {
                        $('.idCheck').prop('checked', false);
                    }
                });

                $('#month').trigger('change')
            });

            function callDt() {
                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({
                        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: {
                                // remove previous & next text from pagination
                                previous: '&nbsp;',
                                next: '&nbsp;'
                            }
                        },
                        columnDefs: [{
                            orderable: false,
                            targets: [0, 1]
                        }],
                        order: [
                            [2, 'asc']
                        ],

                        buttons: [{
                                extend: 'collection',
                                className: 'btn btn-outline-secondary dropdown-toggle me-1',
                                text: feather.icons['share'].toSvg({
                                    class: 'font-small-4 me-50'
                                }) + "{{ trans('common/common.export') }}",
                                buttons: [{
                                        extend: 'csv',
                                        filename: '{{ $organization->name }} Monthly Salary Report, {{ Auth::user()->name }} - {{ date('d-m-Y H-i-s') }}',
                                        title: '{{ date('d-m-Y H-i-s') }}',
                                        text: feather.icons['file-text'].toSvg({
                                            class: 'font-small-4 me-50'
                                        }) + "{{ trans('common/common.csv') }}",
                                        className: 'dropdown-item',
                                        exportOptions: {
                                            columns: Array.from(Array($("#organization th").length).keys())
                                        },
                                    },
                                    {
                                        extend: 'excel',
                                        filename: '{{ $organization->name }} Monthly Salary Report, {{ Auth::user()->name }} - {{ date('d-m-Y H-i-s') }}',
                                        title: '{{ date('d-m-Y H-i-s') }}',
                                        text: feather.icons['file'].toSvg({
                                            class: 'font-small-4 me-50'
                                        }) + "{{ trans('common/common.excel') }}",
                                        className: 'dropdown-item',
                                        exportOptions: {
                                            columns: Array.from(Array($("#organization th").length).keys())
                                        },
                                    },
                                    {
                                        extend: 'pdf',
                                        orientation: 'landscape',
                                        pageSize: 'LEGAL',
                                        filename: '{{ $organization->name }} Monthly Salary Report, {{ date('d-m-Y H-i-s') }}',
                                        title: '{{ date('d-m-Y H-i-s') }}',
                                        text: feather.icons['clipboard'].toSvg({
                                            class: 'font-small-4 me-50'
                                        }) + "{{ trans('common/common.pdf') }}",
                                        className: 'dropdown-item',
                                        exportOptions: {
                                            columns: Array.from(Array($("#organization th").length).keys())
                                        },
                                        customize: function(doc) {
                                            doc['footer'] = (function() {
                                                return {
                                                    columns: [{
                                                        alignment: 'center',
                                                        text: ['Downloaded by: ', {
                                                                text: '{{ Auth::user()->name }}'
                                                            },
                                                            ' on {{ date('d-m-Y') }} at {{ date('g:i A') }}'
                                                        ]
                                                    }],
                                                    margin: 10
                                                }
                                            });
                                        },
                                    },
                                    {
                                        extend: 'copy',
                                        filename: '{{ $organization->name }} Monthly Salary Report, {{ Auth::user()->name }} - {{ date('d-m-Y H-i-s') }}',
                                        title: '{{ date('d-m-Y H-i-s') }}',
                                        text: feather.icons['copy'].toSvg({
                                            class: 'font-small-4 me-50'
                                        }) + "{{ trans('common/common.copy') }}",
                                        className: 'dropdown-item',
                                        exportOptions: {
                                            columns: Array.from(Array($("#organization 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);
                                }
                            },

                            @if (Auth::user()->hasPermission('/salary-lock'))
                                {
                                    text: feather.icons['lock'].toSvg({
                                        class: 'me-50 font-medium-4'
                                    }) + "{{ trans('admin/template.salary_lock') }}",
                                    className: 'btn btn-danger me-1',
                                    attr: {
                                        'type': "submit",
                                        'id': 'lock',
                                        'onclick': "submitform('lock')"
                                    },
                                    init: function(api, node, config) {
                                        $(node).removeClass('btn-secondary');
                                    }
                                },
                            @endif
                            @if (Auth::user()->hasPermission('/salary-unlock'))
                                {
                                    text: feather.icons['unlock'].toSvg({
                                        class: 'me-50 font-medium-4'
                                    }) + "Salary UnLock",
                                    className: 'btn btn-success me-1',
                                    attr: {
                                        'type': "submit",
                                        'id': 'unlock',
                                        'onclick': "submitform('unlock')"
                                    },
                                    init: function(api, node, config) {
                                        $(node).removeClass('btn-secondary');
                                    }
                                },
                            @endif
                            @if (Auth::user()->hasPermission('/salary-component-import'))
                                {
                                    text: feather.icons['upload'].toSvg({
                                        class: 'me-50 font-medium-4'
                                    }) + "{{ trans('common/common.import_salary_component_n') }}",
                                    className: 'btn btn-primary me-1',
                                    attr: {
                                        'type': "button",
                                        'id': 'import-salary-component',
                                        'onclick': "document.location.href='/{{ $alias }}/payroll/import-salary-component?month={{ $month }}&year={{ $year }}';"
                                    },
                                    init: function(api, node, config) {
                                        $(node).removeClass('btn-secondary');
                                    }
                                },
                            @endif {
                                text: feather.icons['download'].toSvg({
                                    class: 'me-50 font-medium-4'
                                }) + "{{ trans('admin/template.download_salary_slip') }}",
                                className: 'btn btn-success me-1',
                                attr: {
                                    'type': "submit",
                                    'id': 'download-salary-slip',
                                    'onclick': "downloadSlip('download-salary-slip')"
                                },
                                init: function(api, node, config) {
                                    $(node).removeClass('btn-secondary');
                                }
                            },
                            {
                                extend: 'collection',
                                text: 'Action',
                                text: "Action " + feather.icons['chevron-down'].toSvg({
                                    class: 'me-50 font-medium-4'
                                }),
                                className: 'btn btn-primary me-2',
                                buttons: [{
                                        text: feather.icons['check-square'].toSvg({
                                            class: 'me-50 font-medium-4'
                                        }) + ' Mark as Paid',
                                        className: 'dropdown-item',
                                        attr: {
                                            'onclick': "submitform('paid')"
                                        }
                                    },
                                    {
                                        text: feather.icons['x-square'].toSvg({
                                            class: 'me-50 font-medium-4'
                                        }) + ' Mark as Hold',
                                        className: 'dropdown-item',
                                        attr: {
                                            'onclick': "submitform('hold')"
                                        }
                                    },
                                    {
                                        text: feather.icons['check-square'].toSvg({
                                            class: 'me-50 font-medium-4'
                                        }) + ' Mark as Unpaid',
                                        className: 'dropdown-item',
                                        attr: {
                                            'onclick': "submitform('unpaid')"
                                        }
                                    }
                                ],
                                fade: true
                            }

                        ],

                    });
                }

                //$('div.head-label').html('<h6 class="mb-0">Salary View</h6>');
            };

            $('.toggle-class').change(function() {
                var status = $(this).prop('checked') == true ? 0 : 1;
                var id = $(this).data('id');

                $.ajax({
                    url: "{{ route('salary-lock-unlock', ['slug' => $alias]) }}",
                    type: "POST",
                    dataType: "json",
                    data: {
                        "id": id,
                        "status": status,
                        "month": {{ $month }},
                        "year": {{ $year }},
                    },
                    success: function(response) {
                        window.location.reload();
                    },

                });
            });

            function submitform(type) {
                $('#type').val(type);
                if (type == 'paid') {

                    Swal.fire({
                        title: "Are you sure?",
                        text: "You will not be able to mark as unpaid after mark as paid!",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: '#DD6B55',
                        confirmButtonText: 'Yes, I am sure!',
                        cancelButtonText: "No, cancel it!",
                        closeOnConfirm: true,
                        closeOnCancel: true
                    }).then(function(isConfirm) {
                        if (isConfirm) {
                            $('#salary-fetch').submit();
                        }
                    });

                } else {
                    $('#salary-fetch').submit();
                }

            }

            function downloadSlip() {
                $('#download-salary-slip').submit();
            }

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

            $(document).ready(function() {
                $('#organization').dataTable().fnDestroy();
                $resMessage = "{{ $resMessage }}";
                $resHeader = "{{ $resHeader }}";
                $alertType = "Success!";
                if ($resHeader == 'danger') {
                    $resHeader = 'error';
                    $alertType = 'Failed!';
                } else {
                    $resHeader = 'success';
                }

                if ($resMessage) {
                    Swal.fire($alertType, $resMessage, $resHeader);
                }

                callDt();
                var allPages = dt_filter_table.dataTable().fnGetNodes();

                $('body').on('click', '#selectAll', function() {
                    if ($(this).hasClass('allChecked')) {
                        $('input[type="checkbox"]', allPages).prop('checked', false);
                    } else {
                        $('input[type="checkbox"]', allPages).prop('checked', true);
                    }
                    $(this).toggleClass('allChecked');

                    var arr = [];
                    var emparr = [];
                    $('input[type="checkbox"]', allPages).each((key, val) => {
                        if ($(val).is(':checked')) {
                            arr.push($(val).val());
                            if ($(val).data('empid')) {
                                emparr.push($(val).data('empid'));
                            }
                        }
                    });
                    $('#selectedIds').val(JSON.stringify(arr));
                    $('#selectedemployee').val(JSON.stringify(emparr));
                    // console.log('checkbox',arr);
                })

                $('input[type="checkbox"]', allPages).change(function() {
                    var arr = [];
                    var emparr = [];
                    $('input[type="checkbox"]', allPages).each((key, val) => {
                        if ($(val).is(':checked')) {
                            arr.push($(val).val());
                            if ($(val).data('empid')) {
                                emparr.push($(val).data('empid'));
                            }
                        }
                    });
                    $('#selectedIds').val(JSON.stringify(arr));
                    $('#selectedemployee').val(JSON.stringify(emparr));
                    // console.log('checkbox',arr);
                });
            });

            function putInFilters() {
                var month = $('#month').val();
                var year = $('#year').val();
                var payroll_period_id = $('#payroll_period_id').val();

                $('#monthFilter').val(month);
                $('#yearFilter').val(year);
                $('#payrollPeriodIdFilter').val(payroll_period_id);

                $('#filterSubmitBtn').click();
            }

            @if ($payrollType == 'hourly')
                $('#month, #year').change(function() {
                    $.ajax({
                        url: "{{ $orgUrl }}/get-payroll-periods-by-month",
                        data: {
                            month: $('#month').val(),
                            year: $('#year').val(),
                        },
                        type: 'GET',
                        success: function(res) {
                            let html = '';
                            let selectedId = $('#payroll_period_id').data('selected');
                            res.data.payrollPeriods.map(function(item, key) {
                                let fromDate = moment(item.from_date).format('DD/MM/YYYY');
                                let toDate = moment(item.to_date).format('DD/MM/YYYY');
                                html +=
                                    `<option value="${item.id}" ${selectedId == item.id ? 'selected' : ''}>${fromDate} - ${toDate}</option>`
                            })

                            $('#payroll_period_id').html(html).trigger('change');
                        }
                    });
                })
            @endif
        </script>
        <style>
            .toggle.ios,
            .toggle-on.ios,
            .toggle-off.ios {
                border-radius: 20px;
            }

            .toggle.ios .toggle-handle {
                border-radius: 20px;
            }
        </style>
    @endpush