@extends('backend.layouts.app')

@section('content')
    <!-- Content -->

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

    <!-- /Modal -->
    <!-- Edit Permission Modal -->
    <div class="modal fade" id="editPermissionModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-simple modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="text-center mb-6">
                        <h4 class="mb-2">Edit Permission</h4>
                        <p>Edit permission as per your requirements.</p>
                    </div>
                    <div class="alert alert-warning d-flex align-items-start" role="alert">
                        <span class="alert-icon me-4 rounded-2"><i class="ri-alert-line ri-22px"></i></span>
                        <span>
                            <h5 class="alert-heading mb-1">Warning</h5>
                            <p class="mb-0">By editing the permission name, you might break the system permissions functionality. Please ensure you're absolutely certain before proceeding.</p>
                        </span>
                    </div>
                    <form id="editPermissionForm" class="row pt-2 gx-4" onsubmit="return false">
                        @csrf
                        @method('PUT')
                        <div class="col-sm-9 mb-4">
                            <input type="text" id="permission_name_update" name="permission_name_update" class="form-control form-control-sm" placeholder="@lang('messages.permissions.permission_name')" tabindex="-1" />
                        </div>
                        <div class="col-sm-3 mb-4">
                            <button type="submit" class="btn btn-primary mt-1 mt-sm-0">@lang('messages.permissions.submit')</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--/ Edit Permission Modal -->

    <!--  Add Permission Modal -->
    @include('backend.rolesnpermissions.models.addpermission')
    <!--/ Add Permission Modal -->
    <!-- /Modal -->
</div>
    <!-- / Content -->
@endsection
@section('footer_scripts')
    <script>
        $(document).ready(function() {

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

            var table = $("#dataTablePermissionsList").DataTable({
                processing: true,
                serverSide: false,
                ajax: "{{ route('permissions.index') }}",
                columns: [
                    { data: "name" },
                    { data: "roles" },
                    { data: "created_at" }, // Use created_at instead of status
                    { data: "action" }
                ],

            });

            $("#addPermissionForm").submit(function(e) {
                e.preventDefault();
            }).validate({
                rules: {
                    permission_name: {
                            required: true,
                            pattern: /^[a-zA-Z\s]+$/, // Alphabets and spaces only
                        }
                    },
                    messages: {
                        permission_name: {
                            required: "Please enter a permission",
                            pattern: "Permission must contain only alphabets and spaces",
                        }
                    },

                errorElement: 'span',
                submitHandler: function(form) {
                    var formData = new FormData(form);

                    jQuery.ajax({
                        url: jQuery('#addPermissionForm').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();
                                $("#addPermissionModal").modal('hide');
                                table.ajax.reload();
                            }
                        },
                        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", ".editPermission", function() {
                jQuery.ajax({
                    url: $(this).data('href'),
                    type: 'get',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        table.ajax.reload();
                        if(data.status){
                            $("#permission_name_update").val(data.data.name);
                            $("#editPermissionForm").attr('action', data.route);
                            $("#editPermissionModal").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')
                            }
                    }
                })
            });

            $("#editPermissionForm").submit(function(e) {
                e.preventDefault();
                }).validate({
                rules: {
                    permission_name_update: {
                        required: true,
                        pattern: /^[a-zA-Z\s]+$/, // Alphabets and spaces only
                    }
                },
                messages: {
                    permission_name_update: {
                        required: "Please enter a permission",
                        lettersonly: "Permission must contain only alphabets and spaces",
                    }
                },
                errorElement: 'span',
                submitHandler: function(form) {
                    var formData = new FormData(form);
                    jQuery.ajax({
                        url: jQuery('#editPermissionForm').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();
                                $("#editPermissionModal").modal('hide');
                                table.ajax.reload();
                            }
                        },
                        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;
                }
            });

        });
    </script>
@endsection