@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.finalize_attendance') }}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Home</a>
                    </li>
                    <li class="breadcrumb-item active">{{ trans('admin/template.attendance_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">
            <a href="/{!! $alias !!}/attendance-register?{!! request()->getQueryString() !!}" class="btn btn-secondary btn-sm"><i
                    data-feather="arrow-left-circle"></i> Prev</a>
            <a href="/{!! $alias !!}/salary-fetch?{!! request()->getQueryString() !!}" class="btn btn-primary btn-sm"><i
                    data-feather="arrow-right-circle"></i> Next</a>

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

@section('content')
    <!-- Column Search -->
    <form method="post" action="attendancefetchsend?{!! $queryString !!}">
        {{ csrf_field() }}
        <section id="column-search-datatable">
            <div class="row">

                {{-- @if (isset($status))
                    <div class="card-header">
                        @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
                    </div>
                @endif --}}

                @if (Auth::user()->hasPermission('/attendance-fetch'))
                    <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>
                            <div class="col-md-4">
                                <button type="button" data-bs-target="#addPayrollPeriod" data-bs-toggle="modal"
                                    class="mt-2 btn btn-primary">
                                    <i data-feather="plus-square"></i>
                                </button>
                            </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>CTC of <strong>{{ $ctcCount }} / {{ $totalEmployees }}</strong> Employees has been
                                Defined.</b>
                            <br>
                            <b>Attendance of <strong>{{ $attendanceLock }} /
                                    {{ $totalAttendance }}</strong> has been Locked.</b>
                        </div>
                    </div>
                </div>

            </div>
        </section>
    </form>

    <form method="post" id="attendance-fetch" action="attendance-fetchaction">
        {{ csrf_field() }}
        @php
            function renderHiddenInputs($name, $value) {
                if (is_array($value)) {
                    foreach ($value as $subKey => $subValue) {
                        renderHiddenInputs($name . '[' . $subKey . ']', $subValue);
                    }
                } else {
                    echo '<input type="hidden" name="' . e($name) . '" value="' . e($value) . '">';
                }
            }
        @endphp
        @foreach(request()->query() as $key => $value)
            @if($value && !in_array($key, ['auth_user', 'auth_type']))
                {!! renderHiddenInputs($key, $value) !!}
            @endif
        @endforeach
        <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>
    @include('filtters.common', $fillterData)

    <div class="">
        <div class="card px-1">
            <div class="card-header salaryhead attfetchmthhead" style="margin-bottom: -15px;">
                <div class="d-flex justify-content-between align-items-center mx-0">
                    <div>
                        <h4 class="card-title"><span>Salary Month:
                            </span><strong>{{ $month_name }}'{{ $year }}</strong></h4>
                        <h5 class="card-title">{{ $total_days }} Month Days</h5>
                    </div>
                    <div id="organization_filter" class="dataTables_filter">
                        <label><input type="search" id="search" class="form-control form-control-sm" placeholder="Search here....." value="{{request()->search}}"
                                aria-controls="organization"></label>
                    </div>
                </div>
            </div>
            <div class="card-datatable mb-1">
                <table
                    class="dt-column-search w-100 table table-responsive table-bordered attendancefetchleftfixed attfetchnewtabdesign tablenewheadfixed tablenewheadfixedtwo"
                    id="organization">
                    <thead>
                        <th></th>
                        <th class="text-center">
                            <input type="checkbox" id="selectAll" class="form-check-input" />
                        </th>
                        <th></th>
                        <th class="text-nowrap">EMP. NAME & CODE</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.absent_days_n') }}</th>
                        <th>{{ trans('admin/template.leave_days_n') }}</th>
                        <th>{{ trans('admin/template.paid_leave_days_n') }}</th>
                        <th>{{ trans('admin/template.unpaid_leave_days_n') }}</th>
                        <th>{{ trans('admin/template.ot_days_n') }}</th>
                        <th>{{ trans('admin/template.fine_days') }}</th>
                        <th scope="col" class="text-nowrap">{{ trans('admin/template.paid_days') }}</th>
                        <th>{{ trans('admin/template.paid_hrs') }}</th>
                        <th>{{ trans('admin/template.arrear_days') }}</th>
                        <th>{{ trans('common/common.actions') }}</th>
                    </thead>
                    <tbody>
                        @foreach ($dataArr 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
                                </td>

                                <td class="text-center">
                                    @if ($value['is_salary_lock'] == 'No')
                                        <input type="checkbox" name="id[]" id="checked"
                                            class="form-check-input idCheck"
                                            data-employee-id="{{ $value['employee_id'] }}"
                                            value="{{ $value['id'] }}"><br>
                                    @endif
                                </td>
                                <td> {{ $loop->iteration }}
                                </td>
                                <td><strong>{{ $value['employee_name'] }}</strong> <br /><span
                                        class="employeecodereport">{{ $value['employee_code'] }}</span></td>
                                <td>{{ $value['organization_holidays'] }}</td>
                                <td>{{ $value['holidays'] }}</td>
                                <td>{{ $value['week_offs'] }}</td>
                                <td>{{ $value['present_days'] }}</td>
                                <td>{{ $value['absent_days'] }}</td>
                                <td>
                                    <a class="dropdown-item" href="javascript:void(0);" data-bs-target="#viewaccess"
                                        data-bs-toggle="modal"
                                        onclick="viewLeave({{ $value['employee_id'] }},{{ $month }},{{ $year }})">
                                        {{ $value['leave_days'] }}
                                    </a>
                                </td>
                                <td>{{ @$value['paid_leaves'] }}</td>
                                <td>{{ @$value['unpaid_leaves'] }}</td>
                                <td>{{ $value['ot_days'] }}</td>
                                <td>{{ $value['fine_days'] }}</td>
                                <td>{{ $value['total_paid_days'] }} </td>
                                <td>{{ $value['total_payable_hrs'] ?: 0 }}</td>
                                <td><input type="number" class="form-control" name="arrear_days[]"
                                        id="arrear_days{{ $value['id'] }}" value="{{ $value['ariyor_days'] }}"
                                        onkeypress="return isNumberKey(event)" oninput="return lengthInRange.call(this)">
                                </td>

                                <td>
                                    @if (Auth::user()->hasPermission('/attendance-fetch-edit'))
                                        @if ($value['is_lock'] == 'No')
                                            <button type="button" class="btn btn-sm btn-outline-primary"
                                                onclick="update({{ $value['id'] }}, {{ $value['organization_holidays'] + $value['leave_days'] }})">Update</button>
                                        @endif
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div class="text-muted" style="margin-top: -25px;">
                    Showing {{ $attendancefetchSyncLists->firstItem() }} to {{ $attendancefetchSyncLists->lastItem() }} of
                    {{ $attendancefetchSyncLists->total() }} entries
                </div>
                <div>
                    {{ $attendancefetchSyncLists->appends(request()->except('page'))->links('pagination::bootstrap-4') }}
                </div>
            </div>
        </div>
    </div>
    </div>

    <div id="pendingLeavesModal" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1"
        role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered sidebar-sm modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pending Leaves</h5>
                </div>
                <div class="modal-content text-center my-1" id="leaveTitle"></div>
                <div class="modal-body">
                    <table id="pendingLeavesTable" class="table table-responsive table-bordered">
                        <thead>
                            <tr>
                                <th>Name/Emp. code</th>
                                <th>From</th>
                                <th>To</th>
                                <th>Status</th>
                                <th>Pending At</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    <div id="paginationLinks"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="viewaccess" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered sidebar-sm">
            <div class="modal-content pt-0">
                <div id="page-modal-render">
                    {{-- render dynamic pages modal here --}}
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade bs-modal-md in" id="addPayrollPeriod" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered ">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-5 pt-50">
                    <div class="mb-2">
                        <h3 class="mb-2" id="modelHeading">Add New Payroll Period</h3>
                    </div>
                    <form id="approval-form" role="post-data" method="POST"
                        action="{{ $orgUrl . '/payroll-periods' }}">
                        <input type="hidden" name="month" value="">
                        <input type="hidden" name="year" value="">
                        <div class="row">
                            <div class="col-12">
                                <label class="form-label mt-2"
                                    for="year">{{ trans('admin/template.date_range') }}</label>
                                <input type="text" name="date_range" class="form-control mb-2" id="date_range">
                            </div>
                        </div>
                        <div class="col-12 d-flex justify-content-end mt-2 pt-50">
                            <button type="button" data-request="ajax-submit" data-target="[role=post-data]"
                                class="btn btn-primary" id="submit-btn">{{ trans('common/common.submit') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </section>
    <!--/ Column Search -->
@endsection
@push('footer-script')
    <script src="/js/common-script.js"></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="/assets/js/moment.min.js"></script>
    <script type="text/javascript" src="/assets/js/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="/assets/css/daterangepicker.css" />

    <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() {

            @if (isset($status))
                @php
                    $message = $status['messages'][0];
                @endphp
                Swal.fire("Success!", "{{ $message }}", "success");
            @endif

            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,
                    "bPaginate": false,
                    "ordering": false,
                    "searching": false,
                    "info": false,
                    displayLength: 50,
                    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') }}",
                            @if (Auth::user()->hasPermission('/attendance-fetch-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') }}",
                                        attr: {
                                            'onclick': "document.location.href='/{!! $alias !!}/attendance-fetch-export?{!! request()->getQueryString() !!}';"
                                        },
                                        className: 'dropdown-item',
                                        exportOptions: {
                                            columns: Array.from(Array($("#organization th").length - 1)
                                                .keys())
                                        },
                                    },
                                    {
                                        extend: 'pdf',
                                        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 - 1)
                                                .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 - 1)
                                                .keys())
                                        }
                                    }
                                ],
                            @endif
                            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('/attendance-lock'))
                            {
                                text: feather.icons['lock'].toSvg({
                                    class: 'me-50 font-medium-4'
                                }) + "{{ trans('admin/template.attendance_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('/attendance-unlock'))
                            {
                                text: feather.icons['unlock'].toSvg({
                                    class: 'me-50 font-medium-4'
                                }) + "Attendance 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

                        {
                            text: feather.icons['unlock'].toSvg({
                                class: 'me-50 font-medium-4'
                            }) + "Calculate Overtime",
                            className: 'btn btn-primary me-1',
                            attr: {
                                'type': "submit",
                                'id': 'incentive',
                                'onclick': "window.open('/{!! $alias !!}/overtime-fetch?month={{ $month }}&year={{ $year }}', '_self')"
                            },
                            init: function(api, node, config) {
                                $(node).removeClass('btn-secondary');
                            }
                        },
                        @if (Auth::user()->hasPermission('/incentive-fetch'))
                            {
                                text: feather.icons['unlock'].toSvg({
                                    class: 'me-50 font-medium-4'
                                }) + "Calculate Incentive",
                                className: 'btn btn-warning me-1',
                                attr: {
                                    'type': "submit",
                                    'id': 'incentive',
                                    'onclick': "window.open('/{!! $alias !!}/incentive-fetch?month={{ $month }}&year={{ $year }}', '_self')"
                                },
                                init: function(api, node, config) {
                                    $(node).removeClass('btn-secondary');
                                }
                            },
                        @endif
                        @if (Auth::user()->hasPermission('/canteen-attendance-fetch'))
                            {
                                text: feather.icons['unlock'].toSvg({
                                    class: 'me-50 font-medium-4'
                                }) + "Calculate Canteen Charges",
                                className: 'btn btn-warning me-1',
                                attr: {
                                    'type': "submit",
                                    'id': 'canteen',
                                    'onclick': "window.open('/{!! $alias !!}/canteen-attendance-fetch?month={{ $month }}&year={{ $year }}', '_self')"
                                },
                                init: function(api, node, config) {
                                    $(node).removeClass('btn-secondary');
                                }
                            },
                        @endif
                        @if ($organization->alias == 'sales' || Auth::user()->hasPermission('/manual-leave-processing'))
                            {
                                text: feather.icons['arrow-right-circle'].toSvg({
                                    class: 'me-50 font-medium-4'
                                }) + "Credit Leaves",
                                className: 'btn btn-secondary me-1',
                                attr: {
                                    'type': "submit",
                                    'id': 'lock',
                                    'onclick': "submitform('credit_leave')"
                                }
                            },
                        @endif {
                            text: feather.icons['upload'].toSvg({
                                class: 'me-50 font-medium-4'
                            }) + "{{ trans('Import') }}",
                            className: 'btn btn-primary me-1',
                            attr: {
                                'type': "button",
                                'id': 'import-salary-component',
                                'onclick': "document.location.href='/{!! $alias !!}/attendance-fetch/import-attendance-component?month={{ $month }}&year={{ $year }}';"
                            },
                            init: function(api, node, config) {
                                $(node).removeClass('btn-secondary');
                            }
                        }
                    ],

                });
            }

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



        function isNumberKey(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode != 46 && charCode > 31 &&
                (charCode < 48 || charCode > 57))
                return false;

            return true;
        }

        function lengthInRange() {
            if (parseInt($(this).val()) > {{ count($dateArr) }}) {
                return $(this).val({{ count($dateArr) }});
            }
            return true;
        }

        function submitform(type) {
            if (type === 'lock' && {{ $pendingLeaveExists ? 'true' : 'false' }}) {
                Swal.fire({
                    title: "Check Pending Leaves?",
                    text: "Do you want to check the list of pending leaves before proceeding?",
                    icon: "question",
                    showCancelButton: true,
                    confirmButtonText: "Yes, show list",
                    cancelButtonText: "No, continue"
                }).then((result) => {
                    if (result.isConfirmed) {
                        loadPendingLeaves();
                    } else {
                        proceedWithSubmission(type);
                    }
                });
            } else {
                proceedWithSubmission(type);
            }
        }

        function proceedWithSubmission(type) {
            $('#type').val(type);
            $('#attendance-fetch').submit();
        }

        function loadPendingLeaves() {
            if ($.fn.DataTable.isDataTable("#pendingLeavesTable")) {
                $("#pendingLeavesTable").DataTable().clear().destroy();
            }

            let debounceTimer;
            let table = $("#pendingLeavesTable").DataTable({
                processing: true,
                serverSide: true,
                destroy: true,
                autoWidth: false,
                responsive: true,
                paging: true,
                searching: true,
                lengthChange: true,
                dom: 'Bfrtip',
                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: [{
                            text: feather.icons['file-text'].toSvg({
                                class: 'font-small-4 me-50'
                            }) + "{{ trans('common/common.csv') }}",
                            className: 'dropdown-item',
                            action: function() {
                                exportFullData('csv');
                            }
                        },
                        {
                            text: feather.icons['file'].toSvg({
                                class: 'font-small-4 me-50'
                            }) + "{{ trans('common/common.excel') }}",
                            className: 'dropdown-item',
                            action: function() {
                                exportFullData('excel');
                            }
                        }
                    ]
                }],
                ajax: {
                    url: "/{!! $alias !!}/get-leaves",
                    type: "POST",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                        d.status = 'pending';
                        d.employee_ids = getSelectedEmployees();
                        d.year = '{{ $year ?? date('Y') }}';
                        d.month = '{{ $month ?? date('m') }}';
                        return d;
                    }
                },
                columns: [{
                        data: "employee.name",
                        render: function(data, type, row) {
                            return `${data || ''} / ${row.employee.employee_code}`;
                        }
                    },
                    {
                        data: "from_date"
                    },
                    {
                        data: "to_date"
                    },
                    {
                        data: "status"
                    },
                    {
                        data: "approval_level.approver.email",
                        defaultContent: "-"
                    }
                ]
            });

            $("#pendingLeavesTable_filter input").off().on("keyup", function() {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => {
                    table.search(this.value).draw();
                }, 1500);
            });

            $("#pendingLeavesModal").modal("show");
        }

        $('#pendingLeavesModal').on('shown.bs.modal', function() {
            $('#pendingLeavesTable').DataTable().columns.adjust();
        });

        function getMonthNameIntl(monthNumber, locale = "en-US") {
            return new Intl.DateTimeFormat(locale, {
                month: "long"
            }).format(new Date(2000, monthNumber - 1));
        }

        function getSelectedEmployees() {
            var arr = [];
            $('input[type="checkbox"]').each((key, val) => {
                if ($(val).is(':checked')) {
                    arr.push($(val).attr('data-employee-id'));
                }
            });

            return arr;
        }

        function exportFullData(format) {
            $.ajax({
                url: "/{!! $alias !!}/get-leaves",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    status: 'pending',
                    employee_ids: getSelectedEmployees(),
                    year: '{{ $year ?? date('Y') }}',
                    month: '{{ $month ?? date('m') }}',
                    start: 0,
                    length: -1
                },
                success: function(response) {
                    if (response.data.length > 0) {
                        let csvContent = "data:text/csv;charset=utf-8,";
                        csvContent += "Employee Name, From Date, To Date, Status, Approver Email\n";
                        response.data.forEach(leave => {
                            let row = [
                                `"${leave.employee.name || ''} / ${leave?.employee.employee_code || ''}"`,
                                `"${leave.from_date}"`,
                                `"${leave.to_date}"`,
                                `"${leave.status}"`,
                                `"${leave.approval_level?.approver?.email || '-'}"`
                            ].join(",");

                            csvContent += row + "\n";
                        });

                        let encodedUri = encodeURI(csvContent);
                        let link = document.createElement("a");

                        if (format === 'csv') {
                            link.setAttribute("href", encodedUri);
                            link.setAttribute("download", "pending_leaves.csv");
                        } else if (format === 'excel') {
                            let blob = new Blob([csvContent], {
                                type: "application/vnd.ms-excel"
                            });
                            let url = URL.createObjectURL(blob);
                            link.setAttribute("href", url);
                            link.setAttribute("download", "pending_leaves.xls");
                        }

                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    } else {
                        Swal.fire("No Data", "No pending leaves available for export.", "info");
                    }
                }
            });
        }

        function update(id, minValue) {
            var arrearDays = $('#arrear_days' + id).val();
            var paidDays = $('#total_paid_days' + id).val();
            var fineDays = $('#fine_days' + id).val();

            Swal.fire({
                title: "@lang('messages.sweetAlertTitle')",
                text: "@lang('messages.confirmation.recoverDeleteUser')",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "@lang('messages.deleteConfirmation')",
                cancelButtonText: "@lang('messages.confirmNoArchive')",
                closeOnConfirm: true,
                closeOnCancel: true
            }).then(function(isConfirm) {
                if (isConfirm['isConfirmed']) {
                    $.ajax({
                        url: "/{!! $alias !!}/payroll/attendance-days-update",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            'id': id,
                            'arrearDays': arrearDays,
                            'paidDays': paidDays,
                            'fineDays': fineDays,
                            'monthDays': {{ count($dateArr) }},
                        },
                        success: function(response) {
                            if (response.code == "success") {
                                Swal.fire({
                                    title: "Success",
                                    text: response.messages[0],
                                    icon: "success",
                                    confirmButtonColor: "#00c292",
                                    confirmButtonText: "Ok",
                                    closeOnConfirm: true
                                }).then(function() {
                                    window.location.reload();
                                });
                            } else {
                                Swal.fire({
                                    title: "Error!",
                                    text: response.messages[0],
                                    icon: "warning",
                                    confirmButtonColor: "#DD6B55",
                                    confirmButtonText: "Ok",
                                    closeOnConfirm: true
                                });
                            }
                        }
                    });
                }
            });
        }

        //  $(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();

            callDt();

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

                var arr = [];

                if($(this).is(":checked")){
                    arr = [0]
                }

                $('#selectedIds').val(JSON.stringify(arr));
            })

            $('tbody input[type="checkbox"]').change(function() {
                var arr = [];
                let length = $('tbody input[type="checkbox"]').length;
                $('tbody input[type="checkbox"]').each((key, val) => {
                    if ($(val).is(':checked')) {
                        arr.push($(val).val());
                    }
                });

                if(length != arr.length){
                    $('#selectAll').removeClass('allChecked').prop('checked', false);
                }

                $('#selectedIds').val(JSON.stringify(arr));
            });
        });

        function viewLeave(employee_id, month, year) {
            $('#page-modal-render').html('');
            $_token = "{{ csrf_token() }}";
            $.ajax({
                headers: {
                    'X-CSRF-Token': $('meta[name=_token]').attr('content')
                },
                url: 'attendance-register-leave',
                type: 'POST',
                cache: false,
                data: {
                    '_token': $_token,
                    'employee_id': employee_id,
                    'month': month,
                    'year': year,
                },
                datatype: 'html',
                success: function(data) {
                    $('#loader-status').html('');
                    $('#page-modal-render').html(data.data);
                }
            });
        }
    </script>
    <script>
        $(function() {
            $(window).on('load', function() {
                if ('attendance-fetch' !=
                    '{{ app('router')->getRoutes(url()->previous())->match(app('request')->create(url()->previous()))->getName() }}'
                ) {
                    Swal.fire({
                        title: "@lang('messages.sweetAlertTitle')",
                        text: "You want to fetch attendance?",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "@lang('messages.yes')",
                        cancelButtonText: "@lang('messages.confirmNoArchive')",
                        closeOnConfirm: true,
                        closeOnCancel: true
                    }).then(function(res) {
                        if (res.isConfirmed) {
                            $("#attendance-fetch-btn").click();
                        }
                    });
                }
            });
        });

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

            $('#monthFilter').val(month);
            $('#yearFilter').val(year);
            $('#searchFilter').val(search);
            $('#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');
                    }
                });
            });

            $('#addPayrollPeriod').on('shown.bs.modal', function(e) {
                let month = $('#month').val();
                let year = $('#year').val();

                $(this).find("[name=month]").val(month);
                $(this).find("[name=year]").val(year);

                $.ajax({
                    url: "{{ $orgUrl }}/get-payroll-cycle-by-month",
                    data: {
                        month,
                        year,
                    },
                    type: 'GET',
                    success: function(res) {
                        $('#date_range').daterangepicker({
                            startDate: res.data.fromDate,
                            endDate: res.data.toDate,
                            minDate: res.data.fromDate,
                            maxDate: res.data.toDate,
                        });
                    }
                });
            });
        @endif

        $('#search').change(function(){
            putInFilters();
        })
    </script>
@endpush