@extends('admin.layout.master')

@section('title', 'Roles')

@section('body')
    <!--Page header-->
    <div class="page-header d-xl-flex d-block">
        <div class="page-leftheader">
            <h4 class="page-title">ROLE LIST</h4>
        </div>
    </div>
    <!--End Page header-->

    <div class="row">
        <div class="col-xl-12 col-md-12 col-lg-12">
            <div class="card">
                <div class="card-header border-0">
                    <h4 class="card-title">Role List</h4>
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show mb-5 hdo-alert">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li> <strong> {{ $error }} </strong> </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    @can('role-create')
                        <button class="btn btn-primary" data-toggle="modal" data-target="#editclientmodal">
                            Add
                        </button>
                    @endcan
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-vcenter text-nowrap table-bordered border-bottom" id="role_table">
                            <thead>
                                <tr>
                                    <th class="border-bottom-0 w-5">No</th>
                                    <th class="border-bottom-0">Role Name</th>
                                    <th class="border-bottom-0">Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editclientmodal">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Role</h5>
                    <button class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form action="{{ route('admin.add_role') }}" method="post" id="add_role">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-label">Role Name</label>
                                    <input class="form-control" name="name" type="text" placeholder="Enter Name">
                                </div>
                            </div>
                        </div>
                        @if (isset($permission))
                            @if (isset($role_category))
                                @foreach ($role_category as $cate)
                                    <h4>
                                        {{ $cate }}
                                    </h4>
                                    <div class="row">
                                        @foreach ($permission as $per)
                                            @if ($per->category == $cate)
                                                <div class="col-sm-6 col-lg-3">
                                                    <div class="form-group d-flex gap-2">
                                                        <label class="custom-control custom-checkbox">
                                                            <input type="checkbox" class="custom-control-input permission"
                                                                name="permission[]" id="{{ $per->name }}"
                                                                value="{{ $per->name }}">
                                                            <span class="custom-control-label">{{ $per->name }}</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                @endforeach
                            @endif
                        @endif

                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-primary" data-dismiss="modal">Close</button>
                        <button class="btn btn-success">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('script')
    <script type="text/javascript">
        var table;
        $(document).ready(function() {
            table = $('#role_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.role_list') }}",
                    type: "POST",
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name',
                        orderable: true
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });

        function reload_datatable() {
            table.ajax.reload(); //just reload table
        }

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

        $("#add_role").validate({
            highlight: function(element) {
                $(element).closest('.form').removeClass('has-success').addClass('has-error');
            },
            success: function(element) {
                $(element).closest('.form').removeClass('has-error').addClass('has-success');
                $(element).closest('.error').remove();
            },

            rules: {
                name: {
                    required: true,
                }
            },
            messages: {
                name: {
                    required: "Role name is required",
                }
            },
            submitHandler: function(form, e) {
                e.preventDefault();
                form.submit();
            }
        });

        $(document).on('click', '.edit_role', function(event) {
            event.preventDefault();
            var id = $(this).attr('data-id');
            var editRoute = "{{ route('admin.edit_role', ':id') }}";
            var editUrl = editRoute.replace(':id', id);
            if (id != '') {
                window.location = editUrl
            }
        })

        $(document).on("click", ".delete_role", function(e) {
            swal({
                title: "Are you sure?",
                text: "Once deleted, you will not be able to recover this!",
                icon: "warning",
                buttons: !0,
                dangerMode: !0,
            }).then((willDelete) => {
                if (willDelete) {
                    var id = $(this).attr('data-id');
                    $.ajax({
                        url: "{{ route('admin.delete_role') }}",
                        method: 'POST',
                        data: {
                            "_token": "{{ csrf_token() }}",
                            'role_id': id,
                        },
                        success: function(response) {
                            reload_datatable();
                            var response = $.parseJSON(response);
                            if (response.status == true) {
                                custom_message('success', response.message);
                            } else {
                                custom_message('error', response.message);
                            }
                        }
                    });
                }
            });
        });

        $('#editclientmodal').on('hidden.bs.modal', function (e) {
            $(this).find('form').trigger('reset');
        })
    </script>
@endpush