@extends('lay.dnekcab.retsam')

@section('css')
<style>
    .select2-container{
        z-index: 1100;
    }
</style>
@endsection
@section('title')
  {{ $page_title }}
@endsection

@section('page-content')
    <div class="page-content">
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="card">
                        <div class="card-body list-heading">
                            <!-- card-header -->
                            <!--cenario 1: only header, 2:header and add button, 3:header and print, other:header , add button and prin. type:both[pdf,excel], type:[pdf], type:[excel] -->
                            <x-card-header 
                                :scenario="'2'"
                                :pageTitle="$page_title"
                                :permission="'Employee - Add New Employee'"
                                :buttonLabel="__('employee.item')"
                                :buttonClass="'addNewEmployeeBtn'"
                                :totalCount="$allEmployees->total()"
                                :modal="'add-employee-modal'"
                            />
    
                            <div class="mt-3">
                                {{-- Search --}}
                                <x-search-filter 
                                    :rows="1" 
                                    :inputs-per-row="5" 
                                    :col-md-classes="[
                                        ['col-md-3', 'col-md-3','col-md-3','col-md-2','col-md-1']
                                    ]" 
                                    :input-config="[
                                        [
                                            ['type' => 'text'], 
                                            ['type' => 'select', 'options' => $directorates],
                                            ['type' => 'select', 'options' => $designations],
                                            ['type' => 'select', 'options' => [
                                                'active' => __('employee.active'), 
                                                'inactive' => __('employee.inactive')
                                            ]],
                                            ['type' => 'select', 'options' => $paginationArray]
                                        ]
                                    ]"
                                    :names="[
                                        [
                                        'term_searh_name',
                                        'directorate_searh_name',
                                        'designation_searh_name',
                                        'status_searh_name',
                                        'pagination_searh_name',
                                        ]
                                    ]"
                                    :ids="[
                                        [
                                        'term_searh_id',
                                        'directorate_searh_id',
                                        'designation_searh_id',
                                        'status_searh_id',
                                        'pagination_searh_id',
                                        ]
                                    ]"
                                    :placeholders="[
                                        [
                                        __('employee.name'). ' | ' .__('employee.father_name'). ' | ' .__('employee.last_name').', ...',
                                        __('employee.directorate'),
                                        __('employee.designation'),
                                        __('employee.status'),
                                        key($paginationArray) ? key($paginationArray) : __('global.pagination')
                                        ]
                                    ]"
                                    form-action="{{ route('allEmployee') }}"
                                    report-type="both" 
                                    :lang="$lang"
                                />
                                                
                                <!-- end Search -->
                            </div>

                            <div class="card">
                                <div class="card-body pe-0 ps-0" id="data_content">
                                    @include('dnekcab.nimda.employee.employeeList')
                                </div>
                            </div>
    
                        </div>
                        <!-- /.card-header -->
                    </div>
                </div>
            </div>

        </div> <!-- container-fluid -->
    </div>

    <!-- Add Employee  modal -->
    <div class="modal fade add-employee-modal" id="add-employee-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            @csrf
            <form id="addEmployeeForm" style="display: contents;" action="{{ route('add-employee')}}" method="POST" enctype="multipart/form-data">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="add-employee-title">{{ __('employee.add_new')}}</h5>
                        <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">

                        <div class="col-12 mb-2">
                            <label>{{ __('employee.location_type') }}</label><br>
                            <select id="employee_type" name="employee_type" class="form-control">
                                <option value="office">{{ __('employee.office') }}</option>
                                <option value="outoffice">{{ __('employee.outoffice') }}</option>
                            </select>
                        </div>

                        <!-- This is where the dynamic fields will be injected -->
                        <div id="dynamicFields"></div>

                        @php
                            // OutOffice Fields
                            $outOfficeHtml = '
                            <div id="outofficeFields">
                                <div class="col-12 mb-2">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label for="add_employee_name">'.__('employee.name').' <span class="required">*</span></label>
                                            <input type="text" class="form-control" name="r_add_employee_name" id="add_employee_name" placeholder="'.__('employee.name').'" />
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>

                                        <div class="col-md-4">
                                            <label for="add_employee_father_name">'.__('employee.father_name').'</label>
                                            <input type="text" class="form-control" name="add_employee_father_name" id="add_employee_father_name" placeholder="'.__('employee.father_name').'" />
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>

                                        <div class="col-md-4">
                                            <label for="add_employee_grand_father_name">'.__('employee.grand_father_name').'</label>
                                            <input type="text" class="form-control" name="add_employee_grand_father_name" id="add_employee_grand_father_name" placeholder="'.__('employee.grand_father_name').'" />
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 mb-2">
                                    <hr>
                                    <div class="row">
                                        <div class="col-md-5">
                                            <label for="add_employee_last_name">'.__('employee.last_name').'</label>
                                            <input type="text" class="form-control" name="add_employee_last_name" id="add_employee_last_name" placeholder="'.__('employee.last_name').'" />
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>
                                        <div class="col-md-5">
                                            <label for="add_employee_phone">'.__('employee.phone').'</label>
                                            <input type="text" class="form-control" name="add_employee_phone" id="add_employee_phone" placeholder="'.__('employee.phone').'" />
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>
                                        <div class="col-md-2">
                                            <label for="add_employee_statuss">'.__('employee.status').' <span class="required">*</span></label>
                                            <select name="r_add_employee_statuss" id="add_employee_statuss" class="form-control">
                                                <option value="">--'.__('employee.status').'--</option>
                                                <option value="active" selected>'.__('employee.active').'</option>
                                                <option value="inactive">'.__('employee.inactive').'</option>
                                            </select>
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            ';

                            // Office Fields
                            $officeHtml = '
                            <div id="officeFields">
                                <div class="col-12 mb-2">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label for="add_employee_name">'.__('employee.name').' <span class="required">*</span></label>
                                            <input type="text" class="form-control" name="r_add_employee_name" id="add_employee_name" placeholder="'.__('employee.name').'" />
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>

                                        <div class="col-md-4">
                                            <label for="add_employee_father_name">'.__('employee.father_name').' <span class="required">*</span></label>
                                            <input type="text" class="form-control" name="r_add_employee_father_name" id="add_employee_father_name" placeholder="'.__('employee.father_name').'" />
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>

                                        <div class="col-md-4">
                                            <label for="add_employee_grand_father_name">'.__('employee.grand_father_name').' <span class="required">*</span></label>
                                            <input type="text" class="form-control" name="r_add_employee_grand_father_name" id="add_employee_grand_father_name" placeholder="'.__('employee.grand_father_name').'" />
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 mb-2">
                                    <hr>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label for="add_employee_last_name">'.__('employee.last_name').' <span class="required">*</span></label>
                                            <input type="text" class="form-control" name="r_add_employee_last_name" id="add_employee_last_name" placeholder="'.__('employee.last_name').'" />
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="add_employee_email">'.__('employee.email').' <span class="required">*</span></label>
                                            <input type="email" class="form-control" name="r_add_employee_email" id="add_employee_email" placeholder="'.__('employee.email').'" />
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>

                                        <div class="col-md-4">
                                            <label for="add_employee_phone">'.__('employee.phone').' <span class="required">*</span></label>
                                            <input type="text" class="form-control" name="r_add_employee_phone" id="add_employee_phone" placeholder="'.__('employee.phone').'" />
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 mb-2">
                                    <hr>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label for="add_employee_directorates">'.__('employee.directorate').' <span class="required">*</span></label>
                                            <select name="r_add_employee_directorates" id="add_employee_directorates" class="form-control select2">
                                                <option value="">--'.__('employee.directorate').'--</option>';
                                                if($directorates) {
                                                    foreach($directorates as $dept) {
                                                        $officeHtml .= '<option value="'.$dept->id.'">'.$dept->name.'</option>';
                                                    }
                                                }
                            $officeHtml .= '
                                            </select>
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>

                                        <div class="col-md-4">
                                            <label for="add_employee_department" style="display: block; margin-bottom: 5px;">'.__('employee.department').' <span class="required">*</span></label>
                                            <select name="r_add_employee_department" id="add_employee_department" class="form-control select2">
                                                <option value="">--'.__('employee.department').'--</option>
                                            </select>
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>

                                        <div class="col-md-4">
                                            <label for="add_employee_designation" style="display: block; margin-bottom: 5px;">'.__('employee.designation').' <span class="required">*</span></label>
                                            <select name="r_add_employee_designation" id="add_employee_designation" class="form-control select2">
                                                <option value="">--'.__('employee.designation').'--</option>
                                            </select>
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 mt-2">
                                    <hr>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label for="add_employee_manager">'.__('employee.manager').' <span class="required">*</span></label>
                                            <select name="add_employee_manager" id="add_employee_manager" class="form-control">
                                                <option value="">--'.__('employee.manager').'--</option>';
                                                if($managers) {
                                                    foreach($managers as $manager) {
                                                        $officeHtml .= '<option value="'.$manager->id.'">'.$manager->name.' - '.$manager->last_name.'</option>';
                                                    }
                                                }
                            $officeHtml .= '
                                            </select>
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>

                                        <div class="col-md-2">
                                            <label for="add_employee_statuss">'.__('employee.status').' <span class="required">*</span></label>
                                            <select name="r_add_employee_statuss" id="add_employee_statuss" class="form-control">
                                                <option value="">--'.__('employee.status').'--</option>
                                                <option value="active" selected>'.__('employee.active').'</option>
                                                <option value="inactive">'.__('employee.inactive').'</option>
                                            </select>
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>

                                        <div class="col-md-3">
                                            <label for="add_employee_role">'.__('employee.role').' <span class="required">*</span></label>
                                            <select name="r_add_employee_role" id="add_employee_role" class="form-control">
                                                <option value="">--'.__('employee.role').'--</option>';
                                                foreach($roles as $role) {
                                                    $officeHtml .= '<option value="'.$role->id.'">'.$role->name.'</option>';
                                                }
                            $officeHtml .= '
                                            </select>
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>

                                        <div class="col-md-3">
                                            <div class="form-check form-switch form-switch-md mb-3" style="padding-left:0px !important;">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <label class="form-check-label pull-'.(app()->getLocale() == 'en' ? 'left' : 'right').'" for="add_employee_user">'.__('employee.create_user').'</label>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <input class="form-check-input pull-'.(app()->getLocale() == 'en' ? 'left' : 'right').'" type="checkbox" id="add_employee_user" name="add_employee_user" style="margin-'.(app()->getLocale() == 'en' ? 'left' : 'right').':'.(app()->getLocale() == 'en' ? 10 : -10).'px !important;" value="1" checked onchange="toggleCheckboxState(this)">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 mt-2 mb-2">
                                    <hr>
                                    <div class="row">
                                        <div class="col-md-5 pull-'.(app()->getLocale() == 'en' ? 'left' : 'right').'">
                                            <label class="pull-'.(app()->getLocale() == 'en' ? 'left' : 'right').'" for="add_employee_photo" id="img-label" style="border: 1px solid #CCC; padding: 3px 5px; border-radius: 5px; text-align: center;">
                                                '.__('employee.image').' <span class="required">*</span> <hr style="margin:2px; border-bottom: 1px solid #CCC;">
                                                <img id="previewImage" src="'.asset('assets/img/default-img.png').'" for="add_employee_photo" style="width: 100px; height: 100px;">
                                            </label>
                                            <input type="hidden" id="form-action" value="add">
                                            <input type="file" class="custom-file-input" name="r_add_employee_photo_pic" id="add_employee_photo" onchange="showImages(event, \'add_employee_photo\', \'previewImage\')" style="display:none;">
                                            <span class="text-danger hiddens">'.__('global.required').'</span>
                                        </div>

                                        <div class="col-md-2">
                                            <div class="form-check form-switch form-switch-md mb-3" style="padding-left:0px !important;">
                                                <div class="col-md-12">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <label class="form-check-label pull-'.(app()->getLocale() == 'en' ? 'left' : 'right').'" for="is_specialist">'.__('employee.is_specialist').'</label>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <input class="form-check-input pull-'.(app()->getLocale() == 'en' ? 'left' : 'right').'" type="checkbox" id="is_specialist" name="is_specialist" style="margin-'.(app()->getLocale() == 'en' ? 'left' : 'right').':'.(app()->getLocale() == 'en' ? 10 : -10).'px !important;" value="0" onchange="toggleCheckboxState(this)">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-5 pull-'.(app()->getLocale() == 'en' ? 'right' : 'left').'">
                                            <label class="pull-'.(app()->getLocale() == 'en' ? 'right' : 'left').'" for="add_employee_signature" id="img-label" style="border: 1px solid #CCC; padding: 3px 5px; border-radius: 5px; text-align: center;">
                                                '.__('employee.signature').'<hr style="margin:2px; border-bottom: 1px solid #CCC;">
                                                <img id="previewSignature" src="'.asset('assets/img/signature.png').'" for="add_employee_signature" style="width: 100px; height: 100px;">
                                            </label>
                                            <input type="hidden" id="form-action" value="add">
                                            <input type="file" class="custom-file-input" name="add_employee_signature_pic" id="add_employee_signature" onchange="showImages(event, \'add_employee_signature\', \'previewSignature\')" style="display:none;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            ';
                        @endphp

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"class="btn-close" data-bs-dismiss="modal" aria-label="Close">{{ __('global.cancel')}}</button>
                        <button type="submit" class="btn btn-primary">{{ __('global.submit')}}</button>
                    </div>
                </div><!-- /.modal-content -->
            </form>
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Separate Employee Confirm modal -->
    <div class="modal fade" id="separateModal" tabindex="-1" aria-labelledby="separateModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="separateModalLabel">{{ __('employee.separate') }}</h5>
            <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">{{ __('global.are_you_sure_want_to_proceed') }}</div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('global.cancel') }}</button>
            <button type="button" class="btn btn-danger" id="confirmButton">{{ __('global.confirm') }}</button>
            </div>
        </div>
        </div>
    </div>

@endsection

@section('js')
    <!-- jquery step -->
    <script src="{{asset('assets/libs/jquery-steps/build/jquery.steps.min.js')}}"></script>

    <!-- form wizard init -->
    <script src="{{asset('assets/dnekcab/js/pages/form-wizard.init.js')}}"></script>
    <script type="text/javascript">

        var flag = 1;
        $(document).ready(function(){

            const officeFields = `{!! addslashes($officeHtml) !!}`;
            const outOfficeFields = `{!! addslashes($outOfficeHtml) !!}`;

            $('#employee_type').on('change', function () {
                const selected = $(this).val();
                const $target = $('#dynamicFields');

                $target.empty(); // Clear any previous content

                if (selected === 'office') {
                    $target.append(officeFields);
                } else if (selected === 'outoffice') {
                    $target.append(outOfficeFields);
                }
            });

            $('#employee_type').trigger('change');
            
            $('[data-toggle="tooltip"]').tooltip();

            $(document).on("click", "#addNewEmployeeBtn", function(){
                $('#add-employee').modal('show');
            });

            $(document).on("click", ".editBtn", function(){
                var id = $(this).attr('data-id');
                $('#edit_employee_id').val(id);
                $.ajax({
                    url: "{{ route('fetchEmployee') }}",
                    method: "GET",
                    data: {
                        id: id,
                    },
                    success: function(response) {
                        // Handle the success response
                        if(response){
                            $('#edit_employee_name').val(response.name);
                            $('#edit_employee_father_name').val(response.father_name);
                            $('#edit_employee_last_name').val(response.last_name);
                            $('#edit_employee_email').val(response.email)
                            $('#edit_employee_phone').val(response.phone);
                            $('#edit_employee_designation').val(response.designation);
                            $('#edit_employee_department').val(response.department_id);
                            $('#edit_employee_manager').val(response.manager);
                            $('#edit_employee_salary').val(response.salary);
                            $('#edit_employee_status').val(response.status);
                            $('#edit_employee_id_number').val(response.id_number);
                            $('#edit_employee_photo_pic').val(response.image);

                            $('#edit-employee').modal('show');
                            
                        } else {
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(response);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle the error response
                        console.error('Form submission failed');
                        console.error(error);
                    }
                });
            });

            $(document).on('change', '#add_employee_directorates', function(e) {
                var access_token = $("#access_token").val();
                var directorate = $("#add_employee_directorates option:selected").val();

                $.ajax({
                    type: "GET",
                    url: "{{ route('getDirectorateDepartment')}}",
                    data: { 
                        access_token: access_token,
                        directorate: directorate
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        $('#add_employee_department').html(result.content);
                        $('#add_employee_department').trigger('change');
                    },
                    error:function(result){
                        var errors = result.responseJSON;
                        $('#add_employee_department').html(errors);
                    }
                });
            });

            $(document).on('change', '#add_employee_department', function(e) {
                var access_token = $("#access_token").val();
                var department = $("#add_employee_department option:selected").val();
                var directorate = $("#add_employee_directorates option:selected").val();

                $.ajax({
                    type: "GET",
                    url: "{{ route('getDirectorateDesignation')}}",
                    data: { 
                        access_token: access_token,
                        department: department,
                        directorate: directorate
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        $('#add_employee_designation').html(result.content);
                        $('#add_employee_designation').trigger('change');
                    },
                    error:function(result){
                        var errors = result.responseJSON;
                        $('#add_employee_designation').html(errors);
                    }
                });
            });

            $(document).on('submit', '#addEmployeeForm', function(e) {
                e.preventDefault();

                var employee_id_number = $('#add_id_number').val();

                if(!validateForm('addEmployeeForm')){
                    return false;
                }

                checkForExist(employee_id_number, 0, 'add')

                if(flag == 1){
                    var formData = new FormData(this);
                    $.ajax({
                        url: $(this).attr('action'),
                        type: "POST",
                        data: formData,
                        contentType: false,
                        cache: false,
                        processData: false,
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                        },
                        success: function(response) {
                            if(response.status == 'success'){
                                $("#addEmployeeForm")[0].reset();
                                $('#add-employee').modal('hide');
                                toastr.options = {
                                    "closeButton" : true,
                                    "progressBar" : true
                                }
                                toastr.success(response.message);
                                setTimeout(function() {
                                    window.location.href = '{{ route("allEmployee") }}';
                                }, 2000); // 2 seconds in milliseconds (1000 milliseconds = 1 second)
                            } else {
                                console.log(response);
                                toastr.options = {
                                    "closeButton" : true,
                                    "progressBar" : true
                                }
                                toastr.error(response.message);
                            }
                        },
                        error: function(xhr, status, error) {
                            // Handle error response
                            toastr.options = {
                                "closeButton" : true,
                                "progressBar" : true
                            }
                            toastr.error(error);
                        }
                    });
                }
                
            });

            // منفک
            $(document).on("click", ".separateBtn", function() {
                // Store the row element and the record ID (or any other relevant data)
                var $row = $(this).closest("tr");
                var employee_id = $(this).attr('data-id');
                var originalRoute = $(this).attr('data-url');
                
                var newRoute = originalRoute.replace(/_route/g, '').replace(/s/g, '');
                // Construct the URL using the new route
                var urllink = '/hr/employee/' + newRoute;
                
                // Show the confirmation modal
                $("#separateModal").modal("show");

                // Add a click event listener to the "Confirm" button
                $("#confirmButton").off("click").on("click", function() {
                    // Perform AJAX request to delete the record
                    $.ajax({
                        url: urllink,
                        type: "POST",
                        data: { id: employee_id },
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                        },
                        success: function(response) {
                            if(response.status == 'success'){
                                $row.remove();// Remove the row from the table
                                $("#separateModal").modal("hide"); // Hide the confirmation modal
                                toastr.options =
                                {
                                "closeButton" : true,
                                "progressBar" : true
                                }
                                toastr.success(response.message);
                                setTimeout(function() {
                                    location.reload(); // Refresh the current page
                                }, 2000); // 2 seconds in milliseconds (1000 milliseconds = 1 second)
                            } else {
                                toastr.options =
                                {
                                "closeButton" : true,
                                "progressBar" : true
                                }
                                toastr.error(response.message);
                            }
                        },
                        error: function(error) {
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(error);
                            $("#separateModal").modal("hide"); // Hide the confirmation modal
                        }
                    });
                });
            });

            $(document).on("click", ".deleteBtn", function() {
                // Store the row element and the record ID (or any other relevant data)
                var $row = $(this).closest("tr");
                var id = $(this).attr('data-id');
                var originalRoute = $(this).attr('data-url');
                
                var newRoute = originalRoute.replace(/_route/g, '').replace(/s/g, '');
                // Construct the URL using the new route
                var urllink = '/hr/employee/' + newRoute;
                
                // Show the confirmation modal
                $("#confirmModal").modal("show");

                // Add a click event listener to the "Confirm" button
                $("#confirmButton").off("click").on("click", function() {
                    // Perform AJAX request to delete the record
                    $.ajax({
                        url: urllink,
                        type: "POST",
                        data: { id: id },
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                        },
                        success: function(response) {
                            if(response.status == 'success'){
                                $row.remove();// Remove the row from the table
                                $("#confirmModal").modal("hide"); // Hide the confirmation modal
                                toastr.options =
                                {
                                "closeButton" : true,
                                "progressBar" : true
                                }
                                toastr.success(response.message);
                            } else {
                                toastr.options =
                                {
                                "closeButton" : true,
                                "progressBar" : true
                                }
                                toastr.error(response.message);
                            }
                        },
                        error: function(error) {
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(error);
                            $("#confirmModal").modal("hide"); // Hide the confirmation modal
                        }
                    });
                });
            });

        });

        function checkForExist(identity, id, status){
            var access_token = $("#access_token").val();
            var identity = identity;
            var id = id;
            var status = status;

            $.ajax({
                type: "GET",
                url: "{{ route('checkForDupID')}}",
                data: { 
                    access_token: access_token,
                    identity: identity,
                    id: id,
                    status: status
                },
                success:function(result){
                    if(result.status == 'exist'){
                        if(status == 'add'){
                            $('.add_employee_identity_duplicate_error').show();
                        } else {
                            $('.edit_employee_identity_duplicate_error').show();
                        }
                        flag = 0;
                    } else {
                        if(status == 'add'){
                            $('.add_employee_identity_duplicate_error').hide();
                        } else {
                            $('.edit_employee_identity_duplicate_error').hide();
                        }
                        flag = 1;
                    }
                },
                error:function(result){
                    var errors = result.responseJSON;
                    if(status == 'add'){
                        $('.add_employee_identity_duplicate_error').html(errors);
                    } else {
                        $('.edit_employee_identity_duplicate_error').html(errors);
                    }
                }
            });
        }

        function toggleCheckboxState(checkbox) {
            checkbox.value = checkbox.checked ? "1" : "0";
            if (checkbox.checked) {
                checkbox.setAttribute("checked", "");
            } else {
                checkbox.removeAttribute("checked");
            }
        }

        function enableDisableEmployee(switchId){
            let switchInput = document.getElementById(switchId);
            let id = $('#'+switchId).val();
            let status = $('#'+switchId).attr('data-status');

            if (status === 'active') {
                switchInput.checked = true; 
                var confirmation = confirm('Are you sure you want to deactivate the user?');
            } else {
                switchInput.checked = false; 
                var confirmation = confirm('Are you sure you want to activate the user?');
            }
            
            // Send AJAX request based on confirmation and status
            if (confirmation === true) {
                $.ajax({
                    url: "{{ route('enable-disable-employee') }}",
                    type: 'POST',
                    data: {
                        "id": id,
                        "status": status,
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success: function (response) {
                        console.log(response);
                        if(response.status == 'success'){
                            if(response.updateStatus == 'active'){
                                switchInput.checked = true; 
                            } else {
                                switchInput.checked = false;
                            }
                            toastr.success(response.message);
                            setTimeout(function() {
                                window.location.reload();
                            }, 2000); // 2 seconds in milliseconds (1000 milliseconds = 1 second)
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function (xhr, status, error) {
                        toastr.error("Ops! Error");
                        console.error(error);
                    }
                });
            } else {
                // User cancelled the operation, do nothing
            }
        }
    </script>
@endsection