@extends('backend.layouts.app')

@section('content')
    <div class="aiz-titlebar text-left mt-2 mb-3">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1 class="h3">{{ translate('All Staffs') }}</h1>
            </div>
            <div class="col-md-6 text-md-right">
                <a href="javascript:void(0);" class="add-items-btn ml-auto" data-toggle="modal"
                    data-target="#addnewStaff-modal"><span><i class="icons icon-plus"></i></span>
                    {{ translate('Add New Staffs') }}</a>
                <a href="javascript:void(0);" class="add-items-btn ml-auto " data-toggle="modal"
                    data-target="#addnewRole-modal"><span><i class="icons icon-plus"></i></span>
                    {{ translate('Add New Role') }}</a>
            </div>
        </div>
    </div>
    <div class="admin-list-table pt-0">
        <div class="d-flex align-items-center py-3 tableTab-freeze">
            <ul class="memberTable-tabs" id="AllMemberTabs">
                <li class="active"><a href="javascript:void(0);" data-tab="all_staff">All Staffs</a></li>
                <li class=@if (request()->get('tab_type') == 'staff_permissions') "active" @endif><a href="javascript:void(0);"
                        data-tab="staff_permissions">Staff Permissions</a></li>
            </ul>
            <div class="common-tbl-head m-0 ml-1">
                <div class="selected-prod">Selected Staffs (<span id="sProduct">0</span>)</div>
                <div class="delete-select" id="deletedData" style="display:none"><a href="javascript:void(0);"
                        data-data_type="" id="delete_records">Delete Selected <i class="icons icon-delete"></i></a>
                </div>
            </div>
        </div>
        <div class="admin-table table-freezed" id="stafflistData">
            
            <div class="table-responsive">
                <table class="table m-0">
                    <thead>
                        <tr>
                            <th width="4%" class="text-center tbl-shadow">
                                <div class="custom-checkbox m-auto">
                                    <input class="custom-control-input" type="checkbox" data-tab="staff" id="checkAll">
                                    <label class="custom-control-label" for="checkAll"></label>
                                </div>
                            </th>
                            <th width="5" class="text-center tbl-shadow">S.No.</th>
                            <th>{{ translate('Name') }}</th>
                            <th>{{ translate('Email') }}</th>
                            <th>{{ translate('Phone') }}</th>
                            <th>{{ translate('Role') }}</th>
                            <th>{{ translate('Activity') }}</th>

                            <th width="8%" class="text-center">{{ translate('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="staff_list_table">
                        @if (!empty($staffs) && sizeof($staffs) > 0)
                            @foreach ($staffs as $key => $staff)
                                @if ($staff->user != null)
                                    <tr id="{{ $staff->id }}">
                                        <td class="text-center tbl-shadow">
                                            <div class="custom-checkbox m-auto">
                                                <input type="checkbox" name="ids[]"
                                                    class="custom-control-input product_checkbox" data-data_tab="staff"
                                                    value="{{ $staff->id }}" id="checkAll_{{ $staff->id }}">
                                                <label class="custom-control-label"
                                                    for="checkAll_{{ $staff->id }}"></label>
                                            </div>
                                        </td>
                                        <td class="text-center tbl-shadow"> {{ $key + 1 + ($staffs->currentPage() - 1) * $staffs->perPage() }} </td>
                                        <td>{{ $staff->user->name }}</td>
                                        <td>{{ $staff->user->email }}</td>
                                        <td>
                                            <div class="countryWflag f16" style="width: max-content;font-size:12px;">
                                                <span class="text-truncate" style="display:block; font-size:12px;">
                                                    @if (!empty($staff->user->phone))
                                                        <span class="inline-flag flag {{ strtolower($staff->user->country) }}"></span>
                                                        {{ (strpos($staff->user->phone_code, '+') === 0 ? '' : '+') . $staff->user->phone_code . ' ' . $staff->user->phone }}
                                                    @else
                                                        N/A
                                                    @endif
                                                </span>
                                            </div>
                                        </td>

                                        <td>{{ isset($staff->role) ? $staff->role->name : '--' }}</td>
                                    @php
                                        $specificDomain = 'staging.powercozmo.com';
                                        $specificDomain_jordan = 'admin.jordanbaba.com';
                                        $currentDomain = request()->getHost();
                                        if ($currentDomain === $specificDomain) {
                                            $finalURL = 'https://staging.powercozmo.com' ;
                                        }elseif ($currentDomain === $specificDomain_jordan) {
                                            $finalURL =  'https://admin.jordanbaba.com';
                                        } else {
                                            $finalURL = 'http://localhost/PowercozmoLaravel-2024';
                                        }
                                    @endphp
                                        <td><a href="{{$finalURL}}/admin/staff_activities/{{ $staff->user->id }}" >See Activity</a> </td>
                                        <td>
                                            <div class="tbl-action-link">
                                                <a href="javascript:void(0);" data-toggle="modal"
                                                    data-target="#editStaffAndRole" data-staff_id="{{ $staff->id ?? '' }}"
                                                    class="open_staff_edit_model"><i class="icons icon-edit"
                                                        data-toggle="tooltip" data-placement="top" title="Edit"
                                                        data-original-title="Edit"></i></a>
                                                <a href="javascript:void(0);" id="deletebtn"
                                                    data-href="{{ route('staffs.destroy', $staff->id) }}"
                                                    data-toggle="tooltip" data-placement="top"
                                                    title="{{ translate('Delete') }}">
                                                    <i class="icons icon-delete"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                        @else
                            <tr class="no-data">
                                <td colspan="50">
                                    <div class="nodata-col">
                                        <i
                                            class="icons @if (!empty(request()->search)) icon-no-data @else icon-no-items @endif"></i>
                                        <h1>No data found</h1>
                                    </div>
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
            <div class="aiz-pagination">
                <div class="perPage">
                    Staffs Show per page: <strong>{{ $staffs->total() }}</strong>
                </div>
                {{ $staffs->appends(request()->input())->links() }}
            </div>
        </div>
    </div>
@endsection

@section('modal')
    @include('modals.delete_modal')

    <!--add new staffs start-->
    <div class="modal right fade addnewStaff-modal" data-refresh="true" id="addnewStaff-modal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header close-btn" style="padding: 16px 16px 0 16px;">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="" style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">{{ translate('Staff Information') }}</h4>
                </div>
                <div class="modal-body pt-1" style="padding: 16px;">

                    @include('backend.staff.staffs.create', ['roles' => $roles])

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" id="saveNewStaff" class="btn btn-primary">{{ translate('Save') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!--add new staffs start-->
    <div class="modal right fade addnewRole-modal" data-refresh="true" id="addnewRole-modal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header close-btn" style="padding: 16px 16px 0 16px">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="" style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">{{ translate('Role Information') }}</h4>
                </div>
                <div class="modal-body pt-1" id="role_list" style="padding: 16px;">
                    <form id="update_form" action="{{ route('roles.store') }}" method="POST">

                        <div class="form-group">
                            <label for="name" class="labelstyle">{{ translate('Name') }}</label>
                            <input type="text" placeholder="{{ translate('Name') }}" id="rolename" name="name"
                                class="form-control" required>
                            <input type="hidden" id="perm_def_lang" name="def_lang"
                                value="{{ env('DEFAULT_LANGUAGE') }}">
                            <!-- <small id="update_name" style="color:red;"></small> -->
                        </div>
                        <div class="card-header">
                            <h5 class="mb-0 h6" name="permissions">{{ translate('Permissions') }}</h5>
                        </div>
                        <div class="form-group">
                            <div class="permissionMenu">
                                <ul class="aiz-side-nav-list tree" name="permissions" id="main-menu"
                                    data-toggle="aiz-side-menu">

                                    @forelse($permission_List as $k => $list)
                                        @php
                                            $newMenus = $list;
                                            $newMe = [
                                                'name' => $newMenus['name'],
                                                'icon' => $newMenus['icon'] ?? '',
                                                'slug' => $newMenus['slug'] ?? '',
                                                'class' => $newMenus['class'] ?? '',
                                                'id' => $newMenus['id'] ?? '',
                                            ];
                                            $subData = [];
                                        @endphp
                                        <li class="aiz-side-nav-item">
                                            <a href="javascript:void(0);" class="aiz-side-nav-link">
                                                <i class="{{ $list['icon'] ?? '' }}"></i>
                                                <span class="aiz-side-nav-text">{{ $list['name'] ?? '' }}</span>
                                            </a>
                                            <div class="selectAll">
                                                <input type="checkbox" name="permissions[{{ $list['name'] }}]"
                                                    id="checkMenu" class="form-control demo-sw"
                                                    data-json='{!! json_encode($newMe) !!}'
                                                    value="{{ $list['name'] ?? '' }}">
                                            </div>
                                            <ul class="aiz-side-nav-list level-2 subroot">
                                                @if (!empty($list['submenu']))
                                                    @foreach ($list['submenu'] as $val)
                                                        @php
                                                            $subNNN = [
                                                                'name' => $val['name'],
                                                                'slug' => $val['slug'] ?? '',
                                                                'class' => $val['class'] ?? '',
                                                                'id' => $val['id'] ?? '',
                                                            ];
                                                            $subData[] = $subNNN;
                                                        @endphp
                                                        <li
                                                            class="aiz-side-nav-item @if ((!empty($val['name']) && $val['name'] == 'Soft Delete Product') || $val['name'] == 'All Soft delete Users') softDel-link @endif">
                                                            <a href="javascript:void(0);" class="aiz-side-nav-link">
                                                                <span
                                                                    class="aiz-side-nav-text">{{ $val['name'] ?? '' }}</span>
                                                                <input type="checkbox"
                                                                    name="permissions[{{ $list['name'] }}][submenu][]"
                                                                    class="form-control demo-sw submenu"
                                                                    data-json='{!! json_encode($subNNN) !!}'
                                                                    value="{{ $val['name'] ?? '' }}">

                                                            </a>
                                                        </li>
                                                    @endforeach
                                                @endif
                                            </ul>

                                            @php

                                                $newMe['submenu'] = $subData;
                                            @endphp

                                            <!-- <textarea>{!! json_encode($newMe) !!} </textarea> -->
                                        </li>
                                    @empty
                                    @endforelse
                                </ul>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer" id="save_staff">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" id="saveUnit" class="btn btn-primary">{{ translate('Save') }}</button>
                </div>
                <div class="modal-footer d-none" id="update_staff">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" id="updateUnit" class="btn btn-primary">{{ translate('Save') }}</button>
                </div>


            </div>
        </div>
    </div>
    <!--add new staffs end-->


    <!--Edit staffs start-->
    <div class="modal right fade editStaffAndRole" data-refresh="true" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header close-btn" style="padding: 16px 16px 0 16px;">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;" id="roleEditTitle">{{ translate('Staff Information') }}</h4>
                </div>
                <div class="modal-body pt-1" id="product_detail" style="padding: 16px;">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" id="updateUnit"
                        class="btn btn-primary saveButton">{{ translate('Save') }}</button>
                </div>
            </div>
        </div>
    </div>
    <!--Edit staffs end-->
@endsection

@section('script')
    <script type="text/javascript">
        function column_data() {
            var data = [];
            $("#mytable thead tr th").each(function(index) {
                if ($(this).data('filter') == 1) {
                    index += 1;
                    data.push('<div class="column-item"> <label class="switch-btn"> <input value="' + index + '" class="chkDatafill" type="checkbox"> <span class="slider round"></span>  </label>' +
                    $(this).text() + '</div>');
                }
            });

            $("#results").append(data);
            $('#results').find(':checkbox').each(function() {
                $(this).prop("checked", true);
            });
        }

        function staff_list(data, url) {
            $.ajax({
                url: url,
                type: "GET",
                data: data,
                success: function(obj) {
                    $("#stafflistData").html(obj);
                }
            });
        }
        $(document).on('click', '#AllMemberTabs li a', function() {
            var data = {
                'tab_type': $(this).data("tab")
            };
            var url = "{{ url('/admin/staffs/staff_list/ajax') }}";
            staff_list(data, url);
            $(this).parent().addClass('active').siblings().removeClass('active');

        });

        function RemoveSavePassword(){
            inputValue = $('.passValue').val();
            numChars = inputValue.length;
            showText = "";
            for (i = 0; i < numChars; i++) {
                showText += "&#8226;";
            }
            $('.fake-input').html(showText);
        }

        var input = document.querySelector("#phone_code");
        var iti = window.intlTelInput(input, {
            initialCountry: "in",
            separateDialCode: true,
            validationNumberType: 'MOBILE',
            nationalMode: true,
            strictMode: false,
            showSelectedDialCode: false,
            showFlags: true,
        });

        function updateCountryData() {
            var countryData = iti.getSelectedCountryData();
            document.getElementById('country_code').value = countryData.dialCode;
            document.getElementById('country_name').value = countryData.iso2;
        }

        input.addEventListener('countrychange', function() {
            updateCountryData();
        });
        updateCountryData();


        $(document).on('click', '#saveNewStaff', function() {
            var formData = new FormData($("#form-id")[0]);
            let action = $("#form-id").attr('action');
            $.ajax({
                method: "POST",
                url: action,
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    $("#phone_number").on("blur", function() {
                        var phoneNumber = $(this).val();
                        if (phoneNumber.length < 10) {
                            $("#phone_error").text("Invalid: Phone number must be at least 10 characters long.");
                        } else {
                            $("#phone_error").text("");
                        }
                    });
                    $("#form-id .invalid-feedback").remove();
                    if (data.errors) {

                        $.each(data.errors, function(k, val) {
                            var err =
                                '<span class="invalid-feedback" role="alert" style="display: block;"><p>' +
                                val + '</p></span>';
                            var a = $("#form-id input[name=" + k + "]").after(err);
                            //var text = $("#update_form textarea[name=" + k + "]").after(err);
                        });
                    } else {
                        if (data[0] == false) {
                            AIZ.plugins.notify('danger', 'Staff already exist!');
                        } else {
                            AIZ.plugins.notify('success', 'Staff created successfully');
                            setInterval(function() {
                                location.reload();
                            }, 1000);
                        }
                    }
                }
            });
        });

        $(document).on('click', '#saveUnit', function() {
            $("#staffEditUpdateForm").submit();
        });

        $('#addnewStaff-modal').on('hidden.bs.modal', function () {
            $('#form-id')[0].reset();
            $('#editable-div').html('');
            $("#form-id .invalid-feedback").hide();
        });

        $(document).on('click', '#update_staff', function() {
            var formData = new FormData($("#staffEditUpdateForm")[0]);
            let action = $("#staffEditUpdateForm").attr('action');
            $.ajax({
                method: "POST",
                url: action,
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    $("#form-id .invalid-feedback").remove();
                    if (data.errors) {
                        $.each(data.errors, function(k, val) {
                            var err = '<span class="invalid-feedback" role="alert" style="display: block;"><p>' +
                                val + '</p></span>';
                            var a = $("#form-id input[name=" + k + "]").after(err);
                            //var text = $("#update_form textarea[name=" + k + "]").after(err);
                        });
                    } else {
                        if (data[0] == false) {
                            AIZ.plugins.notify('warning', 'Staff already exist!');
                        } else {
                            AIZ.plugins.notify('success', 'Staff created successfully');
                            setInterval(function() {
                                location.reload();
                            }, 1000);
                        }
                    }
                }
            });
        });


        //create role
        $(document).on('click', '#saveUnit', function() {
            //saving the Menus into array
            let mainData = [];
            $(".tree li a input:checked").each(function() {

                let thismenu = $(this);
                let menu = [];
                let menudata = $(this).data('json');
                menu = menudata;
                //saving the Sub Menus into Menus array
                let submenuData = [];
                thismenu.closest('li').find('input:checked').each(function() {
                    let subdata = $(this).data('json');
                    if (subdata != menudata) {
                        submenuData.push(subdata);
                    }
                });
                menu['submenu'] = submenuData;
                mainData.push(menu);

            });

            let action = $("#update_form").attr('action');
            let data = {
                _token: '{{ csrf_token() }}',
                'name': $("#rolename").val(),
                'def_lang': $("#perm_def_lang").val(),
                'permissions': mainData
            }
            $.ajax({
                method: "POST",
                url: action,
                data: data,
                success: function(data) {
                    $("#update_form .invalid-feedback").remove();
                    if (data.errors) {
                        $.each(data.errors, function(k, val) {});
                    } else {
                        AIZ.plugins.notify('success', 'Role created successfully');
                        setInterval(function() {
                            location.reload();
                        }, 1000);
                    }
                }
            });
        });

        //update role
        $(document).on('click', '#updateUnit', function() {
            //saving the Menus into array
            let mainData = [];
            $(".root >li>a input:checked").each(function() {
                let thismenu = $(this);
                let menu = [];
                let menudata = $(this).data('json');
                menu = menudata;
                //saving the Sub Menus into Menus array
                let submenuData = [];
                thismenu.closest('li').find('input.submenu:checked').each(function() {
                    let subdata = $(this).data('json');
                    let thismenuSelected = $(this)
                    if (subdata != menudata) {
                        submenuData.push(subdata);
                    }
                });
                menu['submenu'] = submenuData;
                mainData.push(menu);
            });
            // Declaring permissions array
            let users_permission = [];

            $(".permission-list input:checked").each(function() {
                let permission = $(this).attr('name');
                users_permission.push(permission);
            });

            let action = $("#update_role_form").attr('action');
            let data = {
                _token: '{{ csrf_token() }}',
                'name': $("#update_rolename").val(),
                'role_id': $("#update_role_id").val(),
                'lang': $("#update_def_lang").val(),
                'permissions': mainData,
                'users_permission': users_permission
            }
            $.ajax({
                method: "POST",
                url: action,
                data: data,
                //cache: false,
                //contentType: false,
                //processData: false,
                success: function(data) {
                    $("#update_role_form .invalid-feedback").remove();
                    if (data.errors) {
                        $.each(data.errors, function(k, val) {});
                    } else {
                        AIZ.plugins.notify('success', 'Role updated successfully');
                        setInterval(function() {
                            location.reload();
                        }, 1000);
                    }
                }
            });
        });

        ////////////////////Stafff Delete
        $(document).on('click', '#deletebtn', function() {
            var url = $(this).data('href');
            var checkThis = $(this);
            $('#delete-modal').modal({
                backdrop: 'static',
                keyboard: false
            })
            .one('click', '#delete-link', function(e) {
                if (url) {
                    $.ajax({
                        url: url,
                        type: "GET",
                        success: function(obj) {
                            $('#delete-modal').modal('hide');
                            AIZ.plugins.notify('success',
                                '{{ translate('Staff Deleted successfully') }}');
                            checkThis.closest('tr').remove();
                            var data = {
                                tab_type: 'all_staff'
                            };
                            var url = "{{ url('/admin/staffs/staff_list/ajax') }}";
                            staff_list(data, url);

                        }
                    });
                }
            });
        });

        ///////////////////Stafff Role Permission
        $(document).on('click', '.confirm-delete', function() {
            var url = $(this).data('href');
            var checkThis = $(this);
            var deleteModal = $('#delete-modal');
            deleteModal.modal({
                backdrop: 'static',
                keyboard: false
            });

            $('#delete-link').one('click', function(e) {
                if (url) {
                    $.ajax({
                        url: url,
                        type: "GET",
                        success: function(obj) {
                            $('#delete-modal').modal('hide');
                            AIZ.plugins.notify('success',
                                '{{ translate('Staff Deleted successfully') }}');
                            checkThis.closest('tr').remove();
                            var data = {
                                tab_type: 'staff_permissions'
                            };
                            var url = "{{ url('/admin/staffs/staff_list/ajax') }}";
                            staff_list(data, url);
                        }
                    });
                }
            });
        });

        $('#delete-modal').on('hidden.bs.modal', function () {
            $(this).find('#delete-link').off('click');
        });

        $(document).on('click', '.closeBtn', function() {
            $('.editStaffAndRole').removeClass('active');
            $('#product_detail').html("");
        });
        $(document).on('click', '.open_staff_edit_model', function() {
            $('.editStaffAndRole').modal('show');
            var staff = $(this).data('staff_id');

            var url = "{{ url('/admin/staffs_staff/edit_staff/staff/ajax') }}";
            var checkThis = $(this);
            $.ajax({
                url: url,
                type: "GET",
                data: {
                    'id': staff
                },
                success: function(obj) {
                    $('#roleEditTitle').text('Staff Information');
                    $('.saveButton').text('Update');
                    $('.saveButton').attr('id', 'update_staff');
                    $('#product_detail').html(obj);
                    $(document).find('.PCSimpleVariablesAppend_New .accordion-card:first').find('h3')
                        .trigger('click');
                }
            });
        });

        $(document).on('click', '.open_role_edit_model', function() {
            $('.editStaffAndRole').modal('show');
            var role = $(this).data('role_id');
            var default_lang = $(this).data('default_lang');
            var checkThis = $(this);
            $.ajax({
                url: "{{ url('/admin/roles/edit/ajax') }}",
                type: "GET",
                data: {
                    'id': role,
                    'lang': default_lang
                },
                success: function(obj) {
                    $('#roleEditTitle').text('Role Information');
                    $('.saveButton').text('Update');
                    $('#product_detail').html(obj);
                    $(document).find('.PCSimpleVariablesAppend_New .accordion-card:first').find('h3')
                        .trigger('click');
                }
            });
        });

        $(document).on('input', '#phone_code', function() {
            this.value = this.value.replace(/[^0-9]/g, '').slice(0, 12);
        });

        function tosubmit() {
            var pattern = /^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%&]).*$/;
            var passValue = $(".passValue").val();
            var phoneno = /^[\+]?[0-9]{3}?[-\s\]?[0-9]{3}[-\s\]?[0-9]{4,6}$/im;
            if ($(".phonecheck").val().match(phoneno)) {
                $(".showphoneerror").hide();
                // return true;
            } else {
                $(".showphoneerror").show();
                return false;
            }

            if (pattern.test(passValue)) {
                $(".passValueerror").hide();

            } else {
                $(".passValueerror").show();
                return false;
            }
        }

        $(document).on('click', '#checkAll', function() {
            $("#sProduct").text("0");
            if ($(this).is(":checked")) {
                $("#deletedData").css("display", "block");
                $("#restoreData").css("display", "block");
                $(this).closest('table').find('.staff_list_table tr').addClass('active');
            } else {
                $("#deletedData").css("display", "none");
                $("#restoreData").css("display", "none");
                $(this).closest('table').find('.staff_list_table tr').removeClass('active');
            }
            var data_type = $(this).attr('data-tab');
            $("#delete_records").attr('data-data_type', data_type);
            $(".product_checkbox").prop("checked", this.checked);
            $("#select_count").html($("input.product_checkbox:checked").length + " Selected");
        });

        $(document).on('click', '.product_checkbox,#checkAll', function() {
            if ($(this).is(':checked')) {
                $(this).closest('tr').addClass('active');
            } else {
                $(this).closest('tr').removeClass('active');
            }
            if ($('.product_checkbox:checked').length == $('.product_checkbox').length) {
                $('#checkAll').prop('checked', true);
                var data_type = $(this).attr('data-tab');
                $("#delete_records").attr('data-data_type', data_type);
                $("#deletedData").css("display", "block");
                $("#restoreData").css("display", "block");
            } else {
                if ($('.product_checkbox:checked').length == "0") {
                    $("#deletedData").css("display", "none");
                    $("#restoreData").css("display", "none");
                } else {
                    $("#deletedData").css("display", "block");
                    $("#restoreData").css("display", "block");
                }
                $('#checkAll').prop('checked', false);
                var data_type = $(this).attr('data-data_tab');
                $("#delete_records").attr('data-data_type', data_type);
            }

            $("#sProduct").text($("input.product_checkbox:checked").length);
        });

        $(document).on('click', '#delete_records', function() {
            var row = $(this).closest('tr');
            var data_type = $(this).attr('data-data_type');
            var deleteModal = $('#delete-modal');
            var products = [];
            $(".product_checkbox:checked").each(function() {
                products.push($(this).val());
            });

            if (products.length <= 0) {
                alert("Please select records.");
            } else {
                var selected_values = products.join(",");
                var submitData = {
                    'productId': selected_values,
                    'data_type': data_type
                }
                deleteModal.modal({
                    backdrop: 'static',
                    keyboard: false
                });

                $('#delete-link').one('click', function(e) {
                    $.ajax({
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ url('/admin/staffs/staff_role_multi_delete') }}",
                        cache: false,
                        data: submitData,
                        success: function(response) {
                            AIZ.plugins.notify('success',
                                '{{ translate('Staff Deleted successfully') }}');
                            $("#sProduct").text("0");
                            if (data_type == 'role') {
                                var returndata = {
                                    'tab_type': 'staff_permissions'
                                };
                            }
                            if (data_type == 'staff') {
                                var returndata = {
                                    'tab_type': 'all_staff'
                                };
                            }
                            $('#delete-modal').modal('hide');
                            $("#deletedData").hide();
                            var url = "{{ url('/admin/staffs/staff_list/ajax') }}";
                            staff_list(returndata, url);
                        }
                    });
                });
            }
        });

        ///////////// Add Role Information Page ///////////////////////////////////////////////

        $(document).on('click', '#checkMenu', function() {
            var subroot = $(this).closest('.aiz-side-nav-item').find('.subroot');

            if ($(this).is(':checked')) {
                subroot.find('input[type="checkbox"]').prop('checked', true);
                subroot.show();
                subroot.css('visibility', 'visible');

            } else {
                subroot.find('input[type="checkbox"]').prop('checked', false);
                subroot.hide();
            }
        });

        $(document).on('click', '.aiz-side-nav-text', function() {
            $(this).closest('.aiz-side-nav-item').find('.subroot').show();
            var subroot = $(this).closest('a.aiz-side-nav-link').click();
        });

        ///////////// Edit  Role Information Page ///////////////////////////////////////////////
        $(document).on('click', '#checkedMenu', function() {
            var subroot = $(this).closest('.aiz-side-nav-item').find('.subroot');

            if ($(this).is(':checked')) {
                subroot.find('input[type="checkbox"]').prop('checked', true);
                subroot.show();
                subroot.css('visibility', 'visible');
            } else {

                subroot.find('input[type="checkbox"]').prop('checked', false);
                subroot.hide();
            }
        });

        $(document).on('click', '.aiz-side-nav-text', function() {
            $(this).closest('.aiz-side-nav-item').find('.subroot').show();
            var subroot = $(this).closest('a.aiz-side-nav-link').click();
        });

        const editableDiv = document.getElementById('editable-div');
        const hiddenInput = document.getElementById('hidden-input');

        editableDiv.addEventListener('input', (e) => {
            let text = editableDiv.innerText;
            hiddenInput.value = text;
            editableDiv.innerHTML = '*'.repeat(text.length);
            setCursorToEnd(editableDiv);
        });

        editableDiv.addEventListener('keydown', (e) => {
            if (e.key === 'Backspace' && hiddenInput.value.length > 0) {
                hiddenInput.value = hiddenInput.value.slice(0, -1);
                editableDiv.innerHTML = '*'.repeat(hiddenInput.value.length);
                setCursorToEnd(editableDiv);
                e.preventDefault();
            } else if (e.key.length === 1) {
                hiddenInput.value += e.key;
                editableDiv.innerHTML = '*'.repeat(hiddenInput.value.length);
                setCursorToEnd(editableDiv);
                e.preventDefault();
            }
        });

        function setCursorToEnd(el) {
            const range = document.createRange();
            const sel = window.getSelection();
            range.selectNodeContents(el);
            range.collapse(false);
            sel.removeAllRanges();
            sel.addRange(range);
            el.focus();
        }

        // Function to toggle password visibility
        $(document).ready(function () {
            $('#togglePassword').click(function () {
                const passwordField = $('#password');
                const type = passwordField.attr('type') === 'password' ? 'text' : 'password';
                passwordField.attr('type', type);
                $(this).find('i.icons').toggleClass('icon-show icon-hide');
                const icon = $(this).find('i.icons');
                icon.attr('data-original-title', icon.hasClass('icon-hide') ? 'Show Password' : 'Hide Password');
            });
        });

    </script>
@endsection