@extends('layouts.admin')
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Roles</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Roles</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    @if (Session::has('success'))
                        <div class="alert alert-success alert-dismissible">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                            <strong>Success!</strong> {{ Session::get('success') }}
                        </div>
                    @endif
                    @if (Session::has('error'))
                        <div class="alert alert-danger alert-dismissible">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                            <strong>Success!</strong> {{ Session::get('error') }}
                        </div>
                    @endif
                    <div class="card">
                        <div class="card-header">

                            @can('role-create')
                                <div class="row">
                                    <div class="col-md-12">
                                        <a href="{{ route('admin.roles.add') }}" type="button"
                                            class="btn btn-success float-end my-1"><i class="fas fa-plus me-1"></i>Add Role
                                        </a>
                                    </div>
                                </div>
                            @endcan
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <table id="role_list" class="table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Actions</th>

                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>

                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->


                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
@endsection
@section('scripts')
    <script>
        function handleFormSubmit(formId, successDivId, errorDivId) {
            // Serialize the form data
            var formData = $(formId).serialize();

            // Make an AJAX request
            $.ajax({
                type: 'POST',
                url: $(formId).attr('action'),
                data: formData,
                success: function(response) {

                    if (response.status == 200) {
                        $(errorDivId).hide();
                        $(successDivId).show();
                        $(successDivId).text(response.msg);

                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);
                    } else {
                        $(successDivId).hide();
                        $(errorDivId).show();
                        $(errorDivId).text(response.msg);
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);

                    if (xhr.status === 422) {
                        var errors = JSON.parse(xhr.responseText);
                        $.each(errors.errors, function(key, value) {
                            // Display error messages on the form
                            $('#' + key).setCustomValidity(value[0]);
                            $('#' + key).reportValidity();
                        });
                    }
                }
            });
        }

        function Submit() {
            handleFormSubmit('#roleForm', '#successDiv', '#errorDiv');
        }

        function Update() {
            handleFormSubmit('#editroleForm', '#rolesuccessDiv', '#roleerrorDiv');
        }
    </script>
    <script>
        $(document).ready(function() {

            var table;
            table = $('#role_list').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.roles') }}",
                },
                order: [
                    [0, "desc"]
                ],
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },

                ],
                drawCallback: function(response) {
                    /*$('#countTotal').empty();
                    $('#countTotal').append(response['json'].recordsTotal);*/
                }
            });
        });
    </script>
@endsection