@extends('backend.layouts.app')

@section('content')
    <!-- Content -->
    <h1 class="page-header">
        @lang('messages.roles.roles_title') <br>
        <small class="mb-4">@lang('messages.roles.roles_discription')</small>
    </h1>
    
    <!-- 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">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">@lang('messages.roles.update_roles')</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <!-- Edit role form -->
                <form id="editRoleForm" action="" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="editrolename">@lang('messages.roles.role_name')</label>
                                    <input type="text" id="editrolename" name="rolename" class="form-control" placeholder="@lang('messages.roles.roles_name_placeholder')" required/>
                                </div>
                            </div>
                            <div class="col-12" id="edit_permissions_form">

                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-white" data-dismiss="modal">@lang('messages.roles.cancel')</button>
                        <button type="submit" class="btn btn-success">@lang('messages.roles.submit')</button>
                    </div>
                </form>
                <!--/ Edit role form -->
            </div>
        </div>
    </div>
    <!--/ Edit Role Modal -->
    <div class="modal fade" id="editUserModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">@lang('messages.users.update_user_info')</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <form id="editUserForm" action="" autocomplete="off" >
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label for="edit_first_name">@lang('messages.users.first_name')</label>
                                    <input type="text" id="edit_first_name" name="first_name" class="form-control" placeholder="@lang('messages.users.first_name_placeholder')" />
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label for="edit_last_name">@lang('messages.users.last_name')</label>
                                    <input type="text" id="edit_last_name" name="last_name" class="form-control" placeholder="@lang('messages.users.last_name_placeholder')" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-4">
                                <div class="form-group">
                                    <label for="edit_username">@lang('messages.users.username')</label>
                                    <input type="text" id="edit_username" name="username" class="form-control" placeholder="@lang('messages.users.username_placeholder')"/>
                                </div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="form-group">
                                    <label for="edit_email">@lang('messages.users.email')</label>
                                    <input type="text" id="edit_email" name="email" class="form-control" placeholder="@lang('messages.users.email_placeholder')"/>
                                </div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="form-group">
                                    <label for="edit_skype_id">@lang('messages.users.skype_id')</label>
                                    <input type="text" id="edit_skype_id" name="skype_id" class="form-control" placeholder="@lang('messages.users.skype_id_placeholder')"/>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label for="id_country">@lang('messages.users.country')</label>
                                    <select id="edit_id_country" name="id_country" class="form-control select2">
                                        <option value="">@lang('messages.users.select_country')</option>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label for="edit_id_city">@lang('messages.users.city')</label>
                                    <select id="edit_id_city" name="id_city" class="form-control select2">
                                        <option value="" selected>@lang('messages.users.select_city')</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label for="city-select">@lang('messages.users.role')</label>
                                    <select id="edit_role" name="role" class="form-control" >
                                        @foreach($roles as $role)
                                            <option value="{{ $role->name }}">{{ $role->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label for="edit_status">@lang('messages.users.status')</label>
                                    <select id="edit_status" value="{{ $status}}" name="edit_status" class="form-control" aria-label="Default select example">
                                        <option value="Inactive" selected>@lang('messages.users.inactive')</option>
                                        <option value="Active">@lang('messages.users.active')</option>
                                        <option value="3">@lang('messages.users.suspended')</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label for="password">@lang('messages.register.password')</label>
                                    <input type="password" id="edit_password" class="form-control" name="password" value="Lmg@1234"  placeholder="*********" aria-describedby="password" autocomplete="new-password" />
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="reset" class="btn btn-white" data-dismiss="modal">@lang('messages.users.cancel')</button>
                            <button type="submit" class="btn btn-success">@lang('messages.users.submit')</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

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

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

            $("body").on("click", ".edituser", function() {
                jQuery.ajax({
                    url: $(this).data('href'),
                    type: 'get',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.status) {
                            $("#editUserForm").val(data.id);
                            $("#edit_first_name").val(data.first_name);
                            $("#edit_last_name").val(data.last_name);
                            $("#edit_username").val(data.username);
                            $("#edit_email").val(data.email);
                            $("#edit_skype_id").val(data.skype_id);
                            $("#edit_status").val(data.status);
                            $("#edit_role").val(data.role);
                            $("#edit_id_country").val(data.id_country);
                            setTimeout(() => {
                                $("#edit_id_country").trigger('change');
                            }, 1000);
                            setTimeout(() => {
                                $("#edit_id_city").val(data.id_city);
                            }, 2000);
                            $("#edit_password").val("");
                            $("#editUserForm").attr('action', data.route);
                            $("#editUserModal").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')
                        }
                    }
                })
            });

            $('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,
                }]
            });


            $("#editUserForm").submit(function(e) {
                e.preventDefault();
            }).validate({
                rules: {
                    first_name: {
                        required: true,
                    },
                    last_name: {
                        required: true,
                    },
                    email: {
                        required: true,
                        email: true,
                    },
                    skype_id: {
                        required: true,
                    },
                },
                errorElement: 'span',
                submitHandler: function(form) {
                    var formData = new FormData(form);
                    $.ajax({
                        url: $(form).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',
                                });
                                $("#editUserModal").modal('hide');
                                $("#dataTableUserList").DataTable().ajax.reload();
                            }
                        },
                        error: function(xhr, status, error) {
                            $("#editUserModal").modal('hide');
                            var jsonResponse = JSON.parse(xhr.responseText);
                            var errorMessage = "Validation failed";

                            if (jsonResponse.errors) {
                                errorMessage += ": ";
                                errorMessage += Object.values(jsonResponse.errors).join(", ");
                                Swal.fire('', errorMessage, 'error')
                            }
                        }
                    });
                    return false;
                }
            });
        });
    </script>
@endsection