@extends('reachassuree_admin/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    ::-webkit-scrollbar {
        width: 16px;
       
    }
    .row{
        align-items: center;
    }
    .dataTables_scrollBody {
        position: relative;
        overflow: auto;
        width: 100%;
        max-height: 496px;
      height: 426px !important; 
    }
    ::-webkit-scrollbar-thumb {
        background-color: #d6dee1;
        border-radius: 20px;
        border: 6px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .pos-middle {
        vertical-align: middle;
    }

    @media only screen and (max-width: 575px) {
        .page-title-right {
            text-align: center;
        }

        div#datatable_length {
            text-align: right;
        }

        div#datatable_filter {
            text-align: right;
        }

        .mb-3.d-flex {
            width: 200px;
            margin: 0 0 0 auto;
        }
    }

    @media only screen and (max-width: 680px) {
        .page-title-right {
            text-align: center;
        }

        div#datatable_filter {
            text-align: right;
        }

        .mb-3.d-flex {
            width: 200px;
            margin: 0 0 0 auto;
        }

        div#datatable_length {
            text-align: right;
        }

        div#datatable_length {
            text-align: left;
        }
    }

    .user tr td {
        padding: 5px 10px;
    }

    #user-email-check {
        display: block !important;
    }

    #user_username_check {
        display: block !important;
    }

    .client-tr .page-title-box {
        padding-bottom: 12px;
    }
    label.privilege-label {
    font-size: 12px;
    }
   
</style>

<div class="page-content client-tr">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    @include('../reachassuree_admin/comman/header')
                    <div class="page-title-right">
                        <a type="button" data-bs-toggle="modal" data-bs-target="#modalUser" id="addUserBtn" class="btn btn-primary w-md"><i class="bx bx-plus font-size-16 align-middle me-2"></i>User</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <!-- start row -->
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <br>
                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100 user">
                            <thead class="table-light">
                                @csrf
                                <tr>
                                    <th>Action</th>
                                    <th>Id</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Username</th>
                                    <th>Email</th>
                                    <th>Type</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>
    <!-- container-fluid -->
</div>
<!-- End Page-content -->

<!-- MODEL -->
<div class="modal fade" id="modalUser" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalUserLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalUserLabel">User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="closeActiveStatus"></button>
            </div>

            <div class="modal-body">
                <form id="formUser" action="{{route('user.admin.save')}}" method="POST" class="needs-validation" novalidate>
                    @csrf
                    <input type="hidden" name="user_id" id="user_id">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="user_first_name" class="form-label">First Name</label>
                                <input type="text" class="form-control" id="user_first_name" name="user_first_name" placeholder="First name" value="" required data-error="Please enter username">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="user_last_name" class="form-label">Last Name</label>
                                <input type="text" class="form-control" id="user_last_name" name="user_last_name" placeholder="Last name" value="" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="username" class="form-label">Username*</label>
                                <input type="text" class="form-control" id="user_username" name="user_username" required data-error="Please enter your username" placeholder="Username" value="" required onkeypress="return validation(event);">
                                <div class="invalid-feedback" id="user_username_check"></div>
                            </div>
                           
                        </div>
                        <div class="col-md-6">
                            <label for="password" class="form-label">Password*</label>
                            <div class="mb-3 d-flex">
                                <input type="password" class="form-control" id="user_password" name="user_password" readonly placeholder="Password" value="">
                                <button class="btn btn-light" id="eye1" type="button"><i class="mdi mdi-eye-off-outline"></i></button>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="user_email" class="form-label">Email*</label>
                                <input type="text" class="form-control" id="user_email" name="user_email" required data-error="Please enter your email" placeholder="Enter your email" value="" required onkeypress="return emailvalidation(event);">
                                <div class="invalid-feedback" id="user-email-check"></div>
                            </div>
                    
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="formrow-type-input" class="form-label">Type*</label>
                                <select id="user_type" name="user_type" class="form-select" required>
                                    <option value=""></option>
                                    <option value="0" id="super_admin">Super Admin</option>
                                    <option value="1" id="sub_admin">Sub Admin</option>
                                </select>
                                <div class="invalid-feedback">
                                    Please select a type.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row" id="reset_checkbox">
                        <div class="form-check">
                            <div class="form-input-inline">
                                <input class="form-check-inline" type="checkbox" name="reset_password" id="reset_password" value="Reset Password" required>
                                <label class="form-check-label me-5" for="reset_password">Reset Password</label>
                            </div>
                        </div>
                    </div>

                    <div class="row role" id="privilegeTable" style="display:none;">
                        <div class=" card">
                            <div class="card-body">
                                <div class="row py-4">
                                    @php
                                    $tabList=array();
                                    $tabList= $data['UserPrivilegesJsonData'];

                                    $tabCount = count($tabList);
                                    @endphp
                                    @foreach($tabList as $key => $main_tab_value)
                                    <div class="col-md-3">
                                        <h6 class="m-0">
                                            <strong class="f-16">{{ $main_tab_value['tab_name'] }}</strong>
                                        </h6>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="row">
                                            @foreach($main_tab_value['child_category'] as $key1 => $sub_tab_value)
                                            <div class="col-md-3 ">
                                                <div class="form-check form-switch form-switch-md pb-2" dir="ltr">
                                                    <input class="form-check-input privileges" type="checkbox" name="privilege[user-privileges][{{$main_tab_value['id']}}][{{ $sub_tab_value['id']}}]" id="child_{{ $main_tab_value['id'] }}_{{$sub_tab_value['id']}}" data-main-tab="{{$sub_tab_value['dependent_id']}}" data-tab-id="{{$sub_tab_value['id']}}" data-parent-id="{{ $main_tab_value['id'] }}" value="1">
                                                    <label for="{{ $key }}_{{ $key1 }}" class="privilege-label">{{ $sub_tab_value['tab_name'] }}</label>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    @if ($key < $tabCount - 1) <hr>
                                        @endif
                                        @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal" id="closestatus">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- End modal -->

@endsection

@section('custom-scripts')
<script src="{{ asset('ra-assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('ra-assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    var ajaxURLUserDetail = '{{route("user.admin.detail")}}';
    var deleteUser = '{{route("delete.user.admin")}}';
    var deleteUser = '{{route("delete.user.admin")}}';
    var addForm = "{{route('users.admin')}}";

    $(document).ready(function() {
        $("#user_type").select2({
            placeholder: "Choose",
            dropdownParent: $("#modalUser .modal-body"),
        });

        $('#user_type').change(function() {
            if ($('#user_type :selected').text() == 'Sub Admin') {
                $('#privilegeTable').show();
            } else {
                $('#privilegeTable').hide();
            }
        });
    });

    // check email already exists
    $("#user_email").on('input', function() {
        var user_email = $(this).val();
        if (user_email !== '') {
            $.ajax({
                type: "GET",
                url: "{{ route('user.email')}}",
                data: {
                    user_email: user_email
                },
                success: function(resultData) {
                    if (resultData['status'] == 1) {
                        $('#user_email').removeClass('is-invalid');
                        $('#user-email-check').text('');
                    } else {
                        $('#user_email').addClass('is-invalid');
                        $('#user-email-check').text('Email is already exists..!!');
                    }
                }
            });
        }
    });

    // check user name is already registered
    $("#user_username").on('input', function() {
        var user_username = $(this).val();
        if (user_username !== '') {
            $.ajax({
                type: "GET",
                url: "{{ route('username.check')}}",
                data: {
                    user_username: user_username,

                },
                success: function(resultData) {
                    if (resultData['status'] == 1) {
                        $('#user_username').addClass('is-invalid');
                        $('#user_username_check').text('This username is already in use..!!');
                    } else {
                        $('#user_username').removeClass('is-invalid');
                        $('#user_username_check').text('');
                    }
                }
            });
        }
    });

    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest, // pre-submit callback
            success: showResponse // post-submit callback
        };
        
         $('#formUser').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    function showRequest(formData, jqForm, options) {
        var queryString = $.param(formData);
        return true;
    }

    // post-submit callback
    function showResponse(responseText, statusText, xhr, $form) {
        if (responseText['status'] == 1) {

            toastr["success"](responseText['msg']);
            $("#modalUser").modal('hide');
            $("#modalUser").hide();
        
            $('#datatable').DataTable().ajax.reload(null, false);
            resetInputForm();
        } else if (responseText['status'] == 0) {
            toastr["error"](responseText['msg']);
        }
    }

    function emailvalidation(evt) {
        var ch = String.fromCharCode(evt.which);
        if (!/^[a-zA-Z0-9._@-]+$/.test(ch)) {
            evt.preventDefault();
        }
    }

    function validation(evt) {
        var ch = String.fromCharCode(evt.which);
        if (!/(^[a-z0-9]+[a-z0-9\\-]*$)/.test(ch)) {
            evt.preventDefault();
        }
    }

    //- soft delete record
    function userDelete(id) {
        swal.fire({
            title: "Are you sure want to delete this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                remove(id);
            }
        });
    }

    function remove(id) {
        $.ajax({
            type: 'GET',
            url: deleteUser + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    $("#addUserBtn").click(function() {
        resetInputForm();
        $("#modalUserLabel").html("Add User");
        $("#user_id").val(0);
        $(".loadingcls").hide();
        $("#formUser .row").show();
        $("#privilegeTable").hide();
        $('#user_email').removeClass('is-invalid');
        $('#user-email-check').text('');
        $('#user_username').removeClass('is-invalid');
        $('#user_username_check').text('');
        $("#modalUser .modal-footer").show();
        $('#user_password').attr('required', true);
        $("#user_password").prop('readonly', false);
        $("#user_type").trigger('change');
        $("#reset_checkbox").hide();
    });

    function resetInputForm() {
        $('#formUser').trigger("reset");
        $('#user-email-check').text('');
        $('#user_email').removeClass('is-invalid');
        $('#user_username').removeClass('is-invalid');
        $('#user_username_check').text('');
        $("#formUser").removeClass('was-validated');
    }

    var editModeLoading = 0;

    function editView(id) {
        $("#reset_checkbox").show();   
        
      

        editModeLoading = 1;

        resetInputForm();

        $("#modalUser").modal('show');
        $("#user_password").prop('readonly', true);
        $("#modalUserLabel").html("Edit User #" + id);
        $("#formUser .row").hide();
        $(".loadingcls").show();
        $("#modalUser .modal-footer").hide();

        $.ajax({
            type: 'GET',
            url: ajaxURLUserDetail + "?id=" + id,
            success: function(resultData) {
                $('input[type="checkbox"][name="reset_password"]').on("change",function(){
                    var checkedValue = $('input[type="checkbox"][name="reset_password"]:checked').val();

                    if(checkedValue == "Reset Password"){
                        $("#user_password").prop('readonly', false);
                        $("#user_password").val('');
                    }else{
                        $("#user_password").prop('readonly', true);
                        $("#user_password").val(resultData['data']['password']);
                    }
                });

                $("#user_id").val(resultData['data']['id']);
                $("#user_username").val(resultData['data']['username']);
                $("#user_first_name").val(resultData['data']['first_name']);
                $("#user_last_name").val(resultData['data']['last_name']);
                $("#user_password").val(resultData['data']['password']);
                $("#user_email").val(resultData['data']['email']);
                $("#user_type").select2("val", "" + resultData['data']['type'] + "");

                if (resultData['data']['type'] == 0) {

                    setTimeout(function() {
                        $("#privilegeTable").hide();
                    }, 0);

                    $("#user_type").prop('readonly', true);
                } else {
                    const jsonData = resultData['data']['privileges'];

                    if (jsonData != '' && jsonData != 'null' && jsonData != null) {
                        var Privileges = JSON.parse(jsonData);


                        var chkPrivilegesStatus = "{{route('chk.privileges.status')}}";
                        $.ajax({
                            url: chkPrivilegesStatus,
                            type: "GET",
                            data: {
                                data: {
                                    privilege: [Privileges]
                                }
                            },
                            success: function(response) {
                                // Handle success
                                console.log("Updated privileges sent successfully:", response);
                            },
                            error: function(xhr, status, error) {
                                // Handle error
                                console.error("Error sending updated privileges:", error);
                            }
                        });

                        var subTab = {
                            'user-privileges': {
                                '1': {
                                    '2': 1,
                                    '3': 1,
                                    '4': 1,
                                    '5': 1,
                                    '6': 1,
                                    '7': 1,
                                    '8': 1,
                                    '9': 1,
                                    '10': 1,
                                },
                                '11': {
                                    '12': 11,
                                    '13': 11,
                                    '14': 11,
                                    '15': 11,
                                    '16': 11,
                                },
                                '17': {
                                    '18': 17,
                                    '19': 17,
                                },
                                '20': {
                                    '21': 20,
                                    '22': 20,
                                },
                                '23': {
                                    '24': 23,
                                },
                                '25': {
                                    '26': 25,
                                    '27': 25,
                                    '28': 25,
                                    '29': 25,
                                    '30': 25,
                                },
                                '31': {
                                    '32': 31,
                                    '33': 31,
                                    '34': 31,
                                    '35': 31,
                                    '36': 31,
                                },
                                '37': {
                                    '38': 37,
                                    '39': 37,
                                    '40': 37,
                                    '41': 37,
                                    '42': 37,

                                },
                                '43': {
                                    '44': 43,
                                    '45': 43,
                                    '46': 43,
                                    '47': 43,
                                    '48': 43,
                                    '49': 43,
                                },
                                '50': {
                                    '51': 50,
                                    '52': 50,
                                    '53': 50,
                                    '54': 50,
                                },
                                '55': {
                                    '56': 55,
                                    '57': 55,
                                    '58': 55,
                                    '59': 55,

                                },
                                '60': {
                                    '61': 60,
                                    '62': 60,
                                    '63': 60,
                                },
                                '64': {
                                    '65': 64,
                                    '66': 64,
                                    '67': 64,
                                },
                                '68': {
                                    '69': 68,
                                    '70': 68,
                                    '71': 68,
                                },
                                '72': {
                                    '73': 72,
                                    '74': 72,
                                    '75': 72,
                                    '76': 72,
                                    '77': 72,
                                },
                                '78': {
                                    '79': 78,
                                    '80': 78,
                                },
                                '81': {
                                    '82': 81,
                                    '83': 81,
                                },
                                '84': {
                                    '85': 84,
                                    '86': 84,
                                },
                            }
                        }

                        for (var main in subTab) {
                            if (subTab.hasOwnProperty(main)) {
                                var mainTab1 = subTab[main];
                                if (Privileges.hasOwnProperty(main)) {
                                    for (var sub in mainTab1) {
                                        if (mainTab1.hasOwnProperty(sub)) {
                                            if (Privileges[main].hasOwnProperty(sub)) {
                                                for (var innerKey in Privileges[main][sub]) {
                                                    if (Privileges[main][sub].hasOwnProperty(innerKey)) {
                                                        var innerValue = Privileges[main][sub][innerKey];

                                                        var classValue = "child_" + sub + "_" + innerKey;
                                                        $("#" + classValue).prop("checked", true);
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                    }
                }
                $(".loadingcls").hide();
                $("#formUser .row").show();
                $("#modalUser .modal-footer").show();
                // $('#user_password').attr('required', false);
            }
        });
    }
</script>

<script type="text/javascript">
    var ajaxURL = '{{route("users.admin.ajax")}}';
    var changeUserPrivilegesStatusURL = '{{route("user.privileges.status")}}';
    var ajaxActiveStatusClose = '{{route("active.status")}}';

    var csrfToken = $("[name=_token").val();

    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": false,"aTargets": []}],
        "order": [[0, 'desc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 320;},
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURL,
            "type": "POST",
            "data": {"_token": csrfToken,}
        },
        "aoColumns": [
            {"mData": "action","bSortable": false,},
            {"mData": "id"},
            {"mData": "first_name"},
            {"mData": "last_name"},
            {"mData": "username"},
            {"mData": "email"},
            {"mData": "type"},
        ]
    });

    $(function() {
        $('#eye1').click(function() {
            if ($('#eye1 i').hasClass('mdi-eye-off-outline')) {
                $('#eye1 i').removeClass('mdi-eye-off-outline').addClass('mdi-eye-outline');
                $('#user_password').attr('type', 'text');
            } else {
                $('#eye1 i').removeClass('mdi-eye-outline').addClass('mdi-eye-off-outline');
                $('#user_password').attr('type', 'password');
            }
        });
    });

    $(".privileges").on('change', function() {
        var checkbox = $(this);
        var status = $(this).is(':checked') ? 1 : 0;
        var dependent_id = $(this).data('main-tab'); // Get the main-tab value from data attribut
        var activeSubTab = $(this).closest('.col-md-3').find('.privilege-label').text().trim(); // Get the sub-tab value
        var tabId = $(this).data('tab-id');
        var ParentId = $(this).data('parent-id');

        $.ajax({
            type: 'GET',
            url: changeUserPrivilegesStatusURL + "?dependent_id=" + dependent_id + "&status=" + status + "&activeSubTab=" + activeSubTab + "&tabIdentifier=" + tabId + "&ParentId=" + ParentId,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    if (status == 1) {
                        checkbox.prop("checked", true);
                    }
                    toastr["success"](resultData['msg']);

                } else if (resultData['status'] == 0) {
                    if (resultData['msg'] == 'active') {
                        toastr["error"]('You can\'t disable your dependent privilegs active status');
                        checkbox.prop("checked", true);
                    } else {
                        toastr["error"](resultData['msg']);
                        checkbox.prop("checked", false);
                    }
                }
            }
        });
    });

    // close modal set serch fields null
    $("#closeActiveStatus").click(function() {
        $.ajax({
            type: 'GET',
            url: ajaxActiveStatusClose + "?close=" + 0,
            success: function(resultData) {
                if (resultData['status'] == 1) {}
            }
        });
    });

    $("#closeStatus").click(function() {
        $.ajax({
            type: 'GET',
            url: ajaxActiveStatusClose + "?close=" + 0,
            success: function(resultData) {
                if (resultData['status'] == 1) {}
            }
        });
    });
</script>
@endsection