@extends('layout.app')
@section('title')
    Data Role | {{env('APP_NAME')}}
@endsection
@section('content')
    <div class="m-grid__item m-grid__item--fluid m-wrapper">
        <div class="m-content">
            <div class="row">
                <div class="col-12">
                    <div class="m-portlet m-portlet--primary m-portlet--head-solid-bg m-portlet--head-sm" m-portlet="true" id="data">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <span class="m-portlet__head-icon">
                                        <i class="flaticon-users"></i>
                                    </span>
                                    <h3 class="m-portlet__head-text">
                                        Data Role
                                    </h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools">
                                <ul class="m-portlet__nav">
                                    <li class="m-portlet__nav-item">
                                        <a href="javascript:void(0)" m-portlet-tool="toggle" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-angle-down"></i></a>
                                    </li>
                                    <li class="m-portlet__nav-item">
                                        <a href="javascript:void(0)" m-portlet-tool="fullscreen" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-expand"></i></a>
                                    </li>
                                    <li class="m-portlet__nav-item">
                                        <a href="javascript:void(0)" m-portlet-tool="remove" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="m-portlet__body">
                            <div class="m-section" id="data-kategori">
                                <div class="m-section__content">

                                    @if(Session::has('status'))
										<div class="alert alert-{{Session::get('alert')}}" role="alert">
											{{Session::get('status')}}
										</div>
                                    @endif
                                    
                                    <a href="{{ route('role-add') }}" class="btn btn-success" style="margin-bottom:10px;">Add Role</a>

                                    <table class="table table-bordered table-hover m-table" id="tabel">
                                        <thead>
                                            <tr>
                                                <th>Role</th>
                                                <th>Menu</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('css')
    <link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
@endsection
@section('js')
    <!--begin::Page Vendors -->
    <script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            $('#tabel').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{ route('role-json') }}",
                "columns": [
                    {data: 'role',orderable: true, searchable: true},
                    {data: 'menu', orderable: false, searchable: false, class:'text-center'}
                ]
            });

        });
    </script>
@endsection