@extends('backend.layouts.app')

@section('content')
    <!-- Content -->
    <h4 class="mb-1">@lang('messages.roles.roles_title')</h4>
    <p class="mb-4">@lang('messages.roles.roles_discription')</p>
    <!-- Role cards -->
    <div id="roles_data" class="row g-4 mb-5">
        @include('backend.rolesnpermissions.role', ['roles' => $roles])
    </div>
    <!--/ Role cards -->

    @include('backend.rolesnpermissions.data_tables.roles_table')


    <!--  Modal -->
    <!-- Add Role Modal -->
    @include('backend.rolesnpermissions.models.addrole', ['roles' => $roles, 'permissions' => $permissions])
    <!--/ Add Role Modal -->

    <!-- Edit Role Modal -->
    <div class="modal fade" id="editRoleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-simple modal-dialog-centered modal-add-new-role">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <button type="button" class="btn-close btn-pinned" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="text-center mb-6">
                        <h3 class="role-title mb-2 pb-0">@lang('messages.roles.update_roles')</h3>
                        <p>@lang('messages.roles.roles_permissions')</p>
                    </div>
                    <!-- Edit role form -->
                    <form id="editRoleForm" action="" method="POST" class="row g-3">
                        @csrf
                        @method('PUT')
                        <div class="col-12 mb-4">
                            <div class="form-floating form-floating-outline form-group">
                                <input type="text" id="editrolename" name="rolename" class="form-control" placeholder="@lang('messages.roles.roles_name_placeholder')" required/>
                                <label for="editrolename">@lang('messages.roles.role_name')</label>
                            </div>
                        </div>
                        <div class="col-12" id="edit_permissions_form">

                        </div>
                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primary me-sm-3 me-1">@lang('messages.roles.submit')</button>
                            <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-label="Close">@lang('messages.roles.cancel')</button>
                        </div>
                    </form>
                    <!--/ Edit role form -->
                </div>
            </div>
        </div>
    </div>
    <!--/ Edit Role Modal -->
    <div class="content-backdrop fade"></div>
    <!-- Content -->
@endsection

@section('footer_scripts')
    <script>
        $(document).ready(function() {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });


            $('body').on('click', '#selectAllEdit', function() {
                var checked = $(this).prop('checked');
                $('body').find('.permissions_box_edit').prop('checked', checked);
            });
            $('body').on('click', '#selectAllAdd', function() {
                var checked = $(this).prop('checked');
                $('body').find('.permissions_box_add').prop('checked', checked);
            });


            $("#addRoleForm").submit(function(e) {
                e.preventDefault();
                }).validate({
                rules: {
                    rolename: {
                        required: true,
                        pattern: /^[a-zA-Z\s]+$/, // Alphabets and spaces only

                    }
                },
                messages: {
                    rolename: {
                        required: "Please enter a role",
                        lettersonly: "Role must contain only alphabets and spaces.",
                    }
                },
                errorElement: 'span',
                submitHandler: function(form) {
                    var formData = new FormData(form);

                    // url = "{{ route('roles.store') }}";
                    jQuery.ajax({
                        url: jQuery('#addRoleForm').attr('action'),
                        data: formData,
                        type: 'POST',
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            if(data.status){
                                Swal.fire({
                                    title : data.title,
                                    text : data.message,
                                    icon : 'success',
                                });
                                $(form)[0].reset();
                                $("#roles_data").html('');
                                $("#roles_data").html(data.data);
                                $("#addRoleModal").modal('hide');
                            }
                        },
                        error: function(xhr, status, error) {
                            var jsonResponse = JSON.parse(xhr.responseText);
                            var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                            if (locale == 'en') {
                                // English error messages
                                var errorMessage = "Validation failed";
                            } else if (locale == 'ro') {
                                // Romanian error messages
                                errorMessage = "Validarea a eșuat";
                            } else if (locale == 'ar') {
                                // Arabic error messages
                                errorMessage = "فشل التحقق من الصحة";
                            } else {
                                // Default to English
                                // errorMessage += Object.values(errors).join(", ");
                            }
                            if (jsonResponse.errors) {
                                errorMessage += ":<br> ";
                                errorMessage += Object.values(jsonResponse.errors).join(
                                    "<br>");
                                Swal.fire('', errorMessage, 'error')
                            }
                        }
                    });
                    return false;
                }
            });

            $("body").on("click", ".editRole", function() {
                jQuery.ajax({
                    url: $(this).data('href'),
                    type: 'get',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if(data.status){
                            $("#edit_permissions_form").html('');
                            $("#edit_permissions_form").html(data.data);
                            $("#editrolename").val(data.rolename);
                            $("#editRoleForm").attr('action', data.route);
                            $("#editRoleModal").modal('show');
                        }
                    },
                    error: function(xhr, status, error) {
                            var jsonResponse = JSON.parse(xhr.responseText);
                            var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                            if (locale == 'en') {
                                // English error messages
                                var errorMessage = "Validation failed";
                            } else if (locale == 'ro') {
                                // Romanian error messages
                                errorMessage = "Validarea a eșuat";
                            } else if (locale == 'ar') {
                                // Arabic error messages
                                errorMessage = "فشل التحقق من الصحة";
                            } else {
                                // Default to English
                                // errorMessage += Object.values(errors).join(", ");
                            }
                            if (jsonResponse.errors) {
                                errorMessage += ":<br> ";
                                errorMessage += Object.values(jsonResponse.errors).join(
                                    "<br>");
                                Swal.fire('', errorMessage, 'error')
                            }
                    }
                })
            });

            $("#editRoleForm").submit(function(e) {
                e.preventDefault();
            }).validate({
                rules: {
                    editrolename: {
                        required: true,
                        lettersonly: true,
                    }
                },
                messages: {
                    editrolename: {
                        required: "Please enter a role",
                        lettersonly: "Role must contain only alphabets",
                    }
                },
                errorElement: 'span',
                submitHandler: function(form) {
                    var formData = new FormData(form);
                    jQuery.ajax({
                        url: jQuery('#editRoleForm').attr('action'),
                        data: formData,
                        type: 'POST',
                        dataType: 'json',
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(data) {
                            if(data.status){
                                Swal.fire({
                                    title : data.title,
                                    text : data.message,
                                    icon : 'success',
                                });
                                $(form)[0].reset();
                                $("#roles_data").html('');
                                $("#roles_data").html(data.data);
                                $("#editRoleModal").modal('hide');
                            }
                        },
                        error: function(xhr, status, error) {
                            // alert("Validation failed: " + xhr.responseText); // Display error message from server
                            var jsonResponse = JSON.parse(xhr.responseText);
                            var errorMessage = "Validation failed";

                            // Concatenate multiple error messages
                            if (jsonResponse.errors) {
                                errorMessage += ": ";
                                errorMessage += Object.values(jsonResponse.errors).join(", ");
                                Swal.fire('', errorMessage, 'error')
                            }
                        }
                    });
                    return false;
                }
            });


            var table = $("#dataTableUserList").DataTable({
                processing: true,
                serverSide: false,
                ajax: "{{ route('users.index') }}",
                columns: [
                    { data: "DT_RowIndex" },
                    { data: "user" },
                    { data: "email" },
                    { data: "roles" },
                    { data: "status" },
                    { data: "action" }
                ],
                columnDefs: [{
                    targets: [-1],
                    orderable: false,
                }]
            });
        });
    </script>
@endsection