@extends('layouts.app')
@include('plugins.datatables')
@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <h3 class="content-header-title">Role Management</h3>
                <div class="row breadcrumbs-top">
                    <div class="breadcrumb-wrapper col-12">
                        {{ Breadcrumbs::render('srbac.rolemanagement') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <section>
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">Role Management</h2>
                    </div>
                    <div class="card-body">
                        <table class="table" id="table" style="width:100%">
                            <thead>
                                <tr>
                                    <th class="fit">No.</th>
                                    <th>Role ID</th>
                                    <th>Role Name</th>
                                    <th>Total User Registered</th>
                                    <th>Date</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="modal-add" tabindex="-1" role="dialog" aria-labelledby="addModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content ">
            <div class="modal-header bg-cara white">
                <h5 class="modal-title white" id="addModalTitle">Add <span class="bold">Role</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="text-white">&times;</span>
                </button>
            </div>
            <div class="modal-body m-t-20">
                <form id='form-role-add' role="form" method="post" action="{{ route('srbac.rolemanagement.insert') }}">
                    @csrf
                    <div class="form-group form-group-default required">
                        <label>
                            <span id="label_name" style="">Role ID</span>
                                </label>
                        <input id="name" class="form-control " name="name" placeholder="" required="" type="text" value="">
                    </div>

                    <div class="form-group form-group-default required">
                        <label>
                            <span id="label_name" style="">Role Name</span>
                                </label>
                        <input id="description" class="form-control " name="description" placeholder="" required="" type="text" value="">
                    </div>
                    <div class="alert alert-light" role="alert">
                        <div class="form-group form-group-default {{ isset($mode) ? $mode : '' }}">
                            <label>
                                <span>General</span>
                            </label>
                            <div class="custom-control custom-checkbox col-md-12">
                                <div class="row"> 
                                    @foreach($permission1 as $index => $permission)
                                    <div class="col-md-6" style="padding-left: 7px">
                                        <input name="permissions[]" value="{{ $permission->name }}" id="permission_add_{{ $permission->id }}" class="custom-control-input" type="checkbox">
                                        <label class="custom-control-label" for="permission_add_{{ $permission->id }}">{{ $permission->description }}
                                        </label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group form-group-default {{ isset($mode) ? $mode : '' }}">
                            <label>
                                <span>Administration</span>
                            </label>
                            <div class="custom-control custom-checkbox col-md-12">
                                <div class="row"> 
                                    @foreach($permission2 as $index => $permission)
                                    <div class="col-md-6" style="padding-left: 7px">
                                        <input name="permissions[]" value="{{ $permission->name }}" id="permission_add_{{ $permission->id }}" class="custom-control-input" type="checkbox">
                                        <label class="custom-control-label" for="permission_add_{{ $permission->id }}">{{ $permission->description }}
                                        </label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group form-group-default {{ isset($mode) ? $mode : '' }}">
                            <label>
                                <span>Module</span>
                            </label>
                            <div class="custom-control custom-checkbox col-md-12">
                                <div class="row"> 
                                    @foreach($permission3 as $index => $permission)
                                    <div class="col-md-6" style="padding-left: 7px">
                                        <input name="permissions[]" value="{{ $permission->name }}" id="permission_add_{{ $permission->id }}" class="custom-control-input" type="checkbox">
                                        <label class="custom-control-label" for="permission_add_{{ $permission->id }}">{{ $permission->description }}
                                        </label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" onclick="submitForm('form-role-add')"><i class="la la-check m-r-5"></i> Submit</button>
            </div>
        </div>
    </div>
</div>
</div>
@endsection

@push('js')
<script type="text/javascript">

var table = $('#table');
var settings = {
    "processing": true,
    "serverSide": true,
    "deferRender": true,
    "scrollX": true,
    "ajax": "{{ fullUrl() }}",
    "columns": [
        { data: 'index', defaultContent: '', orderable: false, searchable: false, render: function (data, type, row, meta) {
        return meta.row + meta.settings._iDisplayStart + 1;
        }},
        { data: "name", name: "name", render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "description", name: "description"},
        { data: "total_user", name: "total_user", render: function(data, type, row){
            return $("<div/>").html(data).text();
        }},
        { data: "created_at", name: "created_at"},
        { data: "action", name: "action", orderable: false, searchable: false},
    ],
    "dom": "Blfrtip",
    "buttons": [
        {
            text: '<i class="la la-plus-circle m-r-5"></i> Add Role',
            className: 'btn btn-success btn-sm',
            action: function ( e, dt, node, config ) {
                add();
            }
        },
        {
            text: '<i class="la la-print m-r-5"></i> Print',
            extend: 'print',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
        {
            text: '<i class="la la-download m-r-5"></i> Excel',
            extend: 'excelHtml5',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
        {
            text: '<i class="la la-download m-r-5"></i> PDF',
            extend: 'pdfHtml5',
            className: 'btn btn-secondary btn-sm',
            exportOptions: {
                columns: ':visible:not(.nowrap)'
            }
        },
    ],
    "iDisplayLength": 200
};
table.dataTable(settings);

// table.api().ajax.reload(null, false);
function add() {
    $('#modal-add').modal("show");
    $('.modal form').trigger("reset");
    $('.modal form').validate();
}

function edit(id) {
    $("#modal-div").load("{{ route('srbac.rolemanagement') }}/"+id);
}

$("#form-role-add").submit(function(e) {
    e.preventDefault();
    var form = $(this);

    if(!form.valid())
      return;

    $.ajax({
        url: form.attr('action'),
        method: form.attr('method'),
        data: new FormData(form[0]),
        dataType: 'json',
        async: true,
        contentType: false,
        processData: false,
        success: function(data) {
          swal(data.title, data.message, data.status);
          $("#modal-add").modal("hide");
          table.api().ajax.reload(null, false);        
        }
    });
});

function remove(id) {
    swal({
        title: "Delete Data",
        text: "Deleted data cannot be restored. Proceed?",
        icon: "warning",
        buttons: ["Cancel", { text: "Delete", closeModal: false }],
        dangerMode: true,
    })
    .then((confirm) => {
        if (confirm) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: '{{ route('srbac.rolemanagement') }}/' + id,
                method: 'delete',
                dataType: 'json',
                async: true,
                contentType: false,
                processData: false,
                success: function(data) {
                    swal(data.title, data.message, data.status);
                    table.api().ajax.reload(null, false);
                }
            });
        }
    });
}

function userlist(id) {
    $("#modal-div").load("{{ route('srbac.rolemanagement') }}/"+id+"/user-list/list/view");
}

</script>
@endpush