@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">User</a></li>
    <li class="breadcrumb-item active" aria-current="page">Role</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Data Role</h6>
        <div class="table-responsive">
            <table id="datatable-serverside" class="table" style="width: 100%;">
                <thead>
                    <tr>
                        <th class="kolomNomor">No.</th>
                        <th>Nama Role</th>
                        <th class="kolomAksi">Aksi</th>
                    </tr>
                </thead>
            </table>
        </div>
      </div>
      <div class="card-footer" style="text-align: right;">
        <a class="btn btn-info btn-custom1" href="/user/role/create">Tambah Data</a>
      </div>
    </div>
  </div>
</div>

{{-- Modal --}}
{{-- <div id="modalRole" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Form Role</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_role" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Nama Role</label>
                                <input type="text" class="form-control required" name="name" autocomplete="off" placeholder="Nama Role">
                            </div>
                        </div>

                        @foreach ($dataModule as $valModule)
                            <div class="col-4">
                                <div class="mb-4">
                                    <label class="form-label">{{ $valModule['name'] }}</label>
                                    <div class="form-check mb-2">
                                        <input type="checkbox" class="form-check-input checkPermission" value=".create">
                                        <label class="form-check-label" for="checkDefault">
                                            Create
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input type="checkbox" class="form-check-input checkPermission" value=".edit">
                                        <label class="form-check-label" for="checkDefault">
                                            Edit
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input type="checkbox" class="form-check-input checkPermission" value=".view">
                                        <label class="form-check-label" for="checkDefault">
                                            View
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input type="checkbox" class="form-check-input checkPermission" value=".delete">
                                        <label class="form-check-label" for="checkDefault">
                                            Delete
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input type="checkbox" class="form-check-input checkPermission" value=".report_lvl_1">
                                        <label class="form-check-label" for="checkDefault">
                                            Report Level 1
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input type="checkbox" class="form-check-input checkPermission" value=".report_lvl_2">
                                        <label class="form-check-label" for="checkDefault">
                                            Report Level 2
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input type="checkbox" class="form-check-input checkPermission" value=".report_lvl_3">
                                        <label class="form-check-label" for="checkDefault">
                                            Report Level 3
                                        </label>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanRole" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div> --}}
{{-- Akhiran Modal --}}
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
  <script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

  <script>
    var URLs = "{{ url('user/role') }}";

    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: URLs+'/get-data',
      columns: [
        {data: 'DT_RowIndex', name: 'id'},
        {data: 'name', name: 'name'},
        {data: 'aksi', name: 'aksi', searchable: false, orderable: false, class: 'text-center'},
      ],
    });

    function hapusData(id){
        swal({
            title: "Konfirmasi",
            text: "Apakah anda ingin menghapus data ?",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonText: "Lanjutkan"
        }).then(function(){
            var data = {act: "delete", id: id, _token:'{{ csrf_token() }}'};
            sendJson(URLs+"/delete", data, rSends);
        })
    }
  </script>
@endpush