@include('admin.layout.header')
<link rel="stylesheet" href="{{ asset('assets/modules/select2/dist/css/select2.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/datatables.min.css') }}" />
{{-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /> --}}

{{-- List User Modal --}}
<div class="modal fade" id="userListModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">View User Record</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row user_details_view_odd">
                    <div class="col-lg-4 col-4 col-md-4">
                        Name
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="user_name">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Email ID
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="user_email">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Parent Position Code
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important"
                        id="user_parent_position_code">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Position Code
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="user_position_code">

                    </div>
                </div>

                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Position Name
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="user_position_name">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Code
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="user_emp_code">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Type
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="Usertype">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Designation
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="userDesignation">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Device Type
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="deviceType">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Status
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="userStatus">

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- Edit User Modal --}}
<div class="modal fade" id="userModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            {!! Form::open([
                'url' => '#',
                'name' => 'userForm',
                'id' => 'userForm',
                'enctype' => 'multipart/form-data',
            ]) !!}
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Edit User</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row">
                            <input type="hidden" name="user_id" id="user_id">
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="text">User Name</label>
                                    <input type="text" class="form-control" name="emp_name" id="emp_name">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="email">Email ID</label>
                                    <input type="email" class="form-control" name="email" id="email">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="parent_position_code">Parent Position Code </label>
                                    <input type="text" class="form-control" name="parent_position_code"
                                        id="parent_position_code">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="position_code"> Position Code </label>
                                    <input type="text" class="form-control" name="position_code"
                                        id="position_code">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="position_name"> Position Name </label>
                                    <input type="text" class="form-control" name="position_name"
                                        id="position_name">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="emp_code">Emp Code</label>
                                    <input type="text" class="form-control" name="emp_code" id="emp_code"
                                        disabled>
                                </div>
                            </div>
                            {{-- Need to do select --}}
                            {{-- <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="text">Type</label>
                                    <input type="text" class="form-control" name="text">
                                </div>
                            </div> --}}
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="designation">Designation</label>
                                    <input type="text" class="form-control" name="designation" id="designation">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" id="userFormSubmit">Submit</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<div class="main-content">
    <section class="section">
        <div class="section-header">
            <div class="row w-100 justify-content-end g-2">
                <div class="col-lg-auto col-md-auto my-auto">
                    <h1>Manage User</h1>
                </div>
                <div class="col-lg-auto  ml-auto col-md-6">
                    <div class="form-group mb-0">
                        <select class="select2 form-select w-100" name="SMFilter" id="SMFilter" onchange="getRBMFilterData()">
                            <option value="" default selected disabled>Select SM</option>
                            <option value="">Select All</option>
                            @foreach ($sm_users as $user)
                                <option value="{{ $user->position_code }}">{{ $user->emp_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-lg-auto  col-md-6">
                    <div class="form-group mb-0">
                        <select class="select2 form-select w-100" name="RBMFilter" id="RBMFilter" onchange="getABMfilterData()">
                            <option value="" default selected disabled>Select RBM</option>
                            <option value="">Select All</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-auto  col-md-6">
                    <div class="form-group mb-0">
                        <select class="select2 form-select w-100" name="ABMFilter" id="ABMFilter" onchange="getBEFilterData()">
                            <option value="" default selected disabled>Select ABM</option>
                            <option value="">Select All</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-auto  col-md-6">
                    <div class="form-group mb-0">
                        <select class="select2 form-select w-100" name="BEFilter" id="BEFilter">
                            <option value="" default selected disabled>Select BE</option>
                            <option value="">Select All</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-auto my-2 my-lg-0 my-md-2 col-md-6">
                    <button id="applyButton" class="btn btn-primary mr-2">Apply</button>
                    <button id="clearButton" class="btn btn-danger">Clear</button>
                </div>
            </div>
        </div>

        <div class="row mb-5">
            <div class="col-lg-12">
                <div class="card">
                    <!-- <div class="card-header">
                    <h4>Striped</h4>
                  </div> -->
                    <div class="card-body">
                        <div class="">
                            <table class="w-100 table table-striped table-hover datatable text-center" id="datatable"
                                name="datatable">
                                <thead class="w-100">
                                    <tr>
                                        <th>Sr. No.</th>
                                        <th>EMP Code</th>
                                        <th>Action</th>
                                        <th>Name</th>
                                        <th>Email ID</th>
                                        <th>Parent Position Code</th>
                                        <th>Position Code</th>
                                        <th>Position Name</th>
                                        <th>Designation</th>
                                        <th>Type</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@include('admin.layout.footer')
{{-- <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script> --}}
<script src="{{ asset('assets/js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/js/additional-methods.min.js') }}"></script>
<script src="{{ asset('assets/notify.js') }}"></script>
<script src="{{ asset('assets/modules/select2/dist/js/select2.min.js') }}"></script>
{{-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> --}}

<script>
    let UserDataTable;

    function getRBMFilterData() {
        let code = $('#SMFilter option:selected').val();
        if (code && code.trim() !== '') {
            $.ajax({
                url: "{{ route('getChildUserData') }}",
                type: "POST",
                data: {
                    position_code: code,
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#RBMFilter').html('<option value="" default selected disabled>Select RBM</option>');
                    $('#ABMFilter').html('<option value="" default selected disabled>Select ABM</option>');
                    $('#BEFilter').html('<option value="" default selected disabled>Select BE</option>');

                    if (result.status === 1) {
                        $.each(result.data, function(key, value) {
                            $("#RBMFilter").append('<option value="' + value.position_code + '">' + value.emp_name + '</option>');
                        });
                    } else {
                        $.notify(result.message || 'An error occurred while fetching the data.', "error");
                    }
                },
                error: function(xhr, status, error) {
                    alert('Error: ' + (xhr.responseJSON ? xhr.responseJSON.message : 'An error occurred while processing the request.'));
                }
            });
        }
    }

    function getABMfilterData() {
        $.ajax({
            url: "{{ route('getChildUserData') }}",
            type: "POST",
            data: {
                position_code: $('#RBMFilter option:selected').val(),
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {
                $('#ABMFilter').html('<option value="" default selected disabled>Select ABM</option>');
                $('#BEFilter').html('<option value="" default selected disabled>Select BE</option>');
                $.each(result.data, function(key, value) {
                    $("#ABMFilter").append('<option value="' + value.position_code + '">' + value.emp_name + '</option>');
                });
            }
        })
    }

    function getBEFilterData() {
        $.ajax({
            url: "{{ route('getChildUserData') }}",
            type: "POST",
            data: {
                position_code: $('#ABMFilter option:selected').val(),
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {
                $('#BEFilter').html('<option value="" default selected disabled>Select BE</option>');
                $.each(result.data, function(key, value) {
                    $("#BEFilter").append('<option value="' + value.position_code + '">' + value.emp_name + '</option>');
                });
            }
        })
    }

    function editUserSet(user_id, emp_name, emp_code, position_code, position_name, parent_position_code, user_type,
        designation, email) {
        $("#user_id").val(user_id);
        $("#email").val(email);
        $("#emp_name").val(emp_name);
        $("#emp_code").val(emp_code);
        $("#position_code").val(position_code);
        $("#position_name").val(position_name);
        $("#parent_position_code").val(parent_position_code).trigger('change');
        // $("#user_type").val(user_type).trigger('change');

        $("#designation").val(designation);
        // $("#position_code").prop('disabled', true);
    }

    function listUserSet(emp_name, emp_code, position_code, position_name, parent_position_code, user_type,
        designation, email, deviceType, userStatus) {
        $("#user_name").text(emp_name);
        $("#user_email").text(email);
        $("#user_emp_code").text(emp_code);
        $("#user_position_code").text(position_code);
        $("#user_position_name").text(position_name);
        $("#user_parent_position_code").text(parent_position_code);
        $("#Usertype").text(user_type);
        $("#userDesignation").text(designation);
        $("#deviceType").text(deviceType);
        // Check userStatus and set the appropriate text
        if (userStatus === 'Y') {
            $("#userStatus").text('Active');
        } else {
            $("#userStatus").text('Deactive');
        }
    }

    // , message
    function userStatusChange(userId, status) {
        // var decodedMessage = decodeURIComponent(message.replace(/\+/g, ' '));
        // Swal.fire({
        //     title: 'Are you sure?',
        //     text: decodedMessage,
        //     icon: 'warning',
        //     showDenyButton: true,
        //     confirmButtonColor: '#3085d6',
        //     denyButtonColor: '#d33',
        //     denyButtonText: 'No',
        //     confirmButtonText: 'Yes'
        // }).

        // Initialize the swalConfig object with common properties
        let swalConfig = {
            title: "Are you sure?",
            showCloseButton: true,
            focusConfirm: false,
            cancelButtonText: `No`,
        };

        // Add conditional properties based on the status
        if (status == 'D') {
            swalConfig.icon = 'warning';
            swalConfig.confirmButtonText = `Yes, Delete it!`;
            swalConfig.showDenyButton = true;
            swalConfig.html = `You won't be able to revert this!`;
        } else {
            swalConfig.icon = 'info';
            swalConfig.confirmButtonText = `Yes`;
            swalConfig.showCancelButton = true;
            swalConfig.html = `You want to change user status`;
        }
        // Show Swal alert with the configured object
        Swal.fire(swalConfig).then((result) => {
            if (result.isConfirmed) {
                // This block runs if the user clicks 'Yes'
                $.ajax({
                    url: "{{ route('updateUserStatus') }}",
                    type: 'POST',
                    data: {
                        'user_id': userId,
                        'status': status,
                        '_token': "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            if (status == 'D') {
                                Swal.fire({
                                    title: "Deleted!",
                                    text: "User has been deleted.",
                                    icon: "success"
                                });
                                $.notify('User deleted successfully!', "success");
                            } else {
                                $.notify(response.msg, "success");
                            }
                        } else {
                            $.notify(response.msg, "error");
                        }
                        // $('#datatable').DataTable().ajax.reload();
                        UserDataTable.draw();
                    },
                    error: function(jqXHR) {
                        $.notify(jqXHR.responseJSON.msg, "error");
                    }
                });
            } else {
                $.notify("The status remains unchanged.", "info");
                if (status != 'D') {
                    // setTimeout(function() {
                    //     window.location.reload();
                    // }, 1000);
                    UserDataTable.draw();
                }
            }
        });
    }

    $(document).ready(function() {
        $('#userModal').on('hidden.bs.modal', function() {
            // Reset form fields
            $(this).find('form')[0].reset();

            // Reset hidden input specifically
            $('#user_id').val('');

            // Reset select boxes to their default value (usually the first option)
            $(this).find('select').val('').trigger('change');

            // Reset other elements if needed
            // $("#userModalStatus").text("Add User"); // Reset the modal title
            // $("#position_code").prop('disabled', false);

            // Clear validation error messages and reset the form's validation state
            let form = $(this).find('form');
            form.validate().resetForm(); // Clears error messages
            form.find('.is-invalid').removeClass('is-invalid'); // Remove error class from input fields
        });

        $.validator.addMethod("notOnlySpaces", function(value, element) {
            return $.trim(value).length > 0;
        }, "This field cannot contain only spaces.");

        $('#userForm').validate({
            ignore: ".ignore",
            rules: {
                emp_name: {
                    required: true,
                    pattern: /^[a-zA-Z0-9\s]*$/,
                    minlength: 1,
                    maxlength: 150,
                    notOnlySpaces: true,
                },
                email: {
                    required: true,
                    pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                    minlength: 1,
                    maxlength: 100,
                    notOnlySpaces: true,
                },
                parent_position_code: {
                    required: true,
                    number: true,
                    minlength: 1,
                    maxlength: 10,
                    notOnlySpaces: true,
                },
                position_code: {
                    required: true,
                    number: true,
                    minlength: 1,
                    maxlength: 10,
                    notOnlySpaces: true,
                },
                position_name: {
                    required: true,
                    minlength: 1,
                    maxlength: 100,
                    notOnlySpaces: true,
                },
                designation: {
                    required: true,
                    minlength: 1,
                    maxlength: 200,
                    notOnlySpaces: true,
                }
            },
            messages: {
                emp_name: {
                    required: "User Name is required.",
                    pattern: "User Name can only contain letters and spaces.",
                    minlength: "User Name must be at least 1 character long.",
                    maxlength: "User Name must not exceed 150 characters.",
                },
                email: {
                    required: "Email Id is required.",
                    pattern: "Email Id can only contain letters and spaces.",
                    minlength: "Email Id must be at least 1 character long.",
                    maxlength: "Email Id must not exceed 100 characters.",
                },
            },
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                $("#userFormSubmit").attr('disabled', true);
                var formData = new FormData($("#userForm")[0]);

                $.ajax({
                    url: '{{ route('updateUser') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            $('#userModal').modal('hide');
                            $.notify(response.msg, "success");
                            // $('#datatable').DataTable().ajax.reload();
                        } else if (response.status == 0) {
                            $.notify(response.error, "error");
                        }
                        UserDataTable.draw();
                        $("#userFormSubmit").attr('disabled', false);
                    },
                    error: function(xhr, status, error) {
                        console.error('An error occurred:', error);
                        $("#userFormSubmit").attr('disabled', false);
                        UserDataTable.draw();
                    }
                });
            }
        });

        let columns = [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                searchable: false,
                orderable: false,
            },
            {
                data: 'emp_code',
                name: 'emp_code'
            },
            {
                data: 'action',
                name: 'action',
                searchable: false,
                orderable: false,
            },
            {
                data: 'emp_name',
                name: 'emp_name'
            },
            {
                data: 'email',
                name: 'email'
            },
            {
                data: 'parent_position_code',
                name: 'parent_position_code'
            },
            {
                data: 'position_code',
                name: 'position_code'
            },
            {
                data: 'position_name',
                name: 'position_name'
            },
            {
                data: 'designation',
                name: 'designation'
            },
            {
                data: 'user_type',
                name: 'user_type'
            },
            {
                data: 'status',
                name: 'status',
                searchable: false,
                orderable: false,
            }
        ];
        let columnDefs = [{
            "width": "150",
            "targets": [5]
        }];
        getDataTable("{{ route('manageUserPaginate') }}", columns, columnDefs);

        $("#applyButton").click(function() {
            UserDataTable.draw();
        });

        $("#clearButton").click(function() {
            $("#SMFilter").val('').change();
            $('#RBMFilter').html('<option value="" default selected disabled>Select RBM</option>');
            $('#ABMFilter').html('<option value="" default selected disabled>Select ABM</option>');
            $('#BEFilter').html('<option value="" default selected disabled>Select BE</option>');
            UserDataTable.draw();
        });

        function getDataTable(url, columns, columnDefs) {
            if ($.fn.DataTable.isDataTable('#datatable')) {
                $('#datatable').DataTable().destroy();
            }
            UserDataTable = $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                "bDestroy": true,
                order: [],
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}",
                        d.SM = $('#SMFilter option:selected').val(),
                        d.RBM = $('#RBMFilter option:selected').val(),
                        d.ABM = $('#ABMFilter option:selected').val(),
                        d.BE = $('#BEFilter option:selected').val();
                    }
                }
            });
        }
    });
</script>