@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">Modul & Akses</li>
    </ol>
</nav>

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-header">
          <h4>Data Modul & Akses</h4>
        </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="datatable-serverside" class="table" style="width: 100%;">
                        <thead>
                            <tr>
                                <th class="kolomNomor">No.</th>
                                <th>Nama Modul & Akses</th>
                                <th class="kolomAksi">Aksi</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="card-footer" style="text-align: right;">
                <button class="btn btn-info btn-custom1" id="tambahModulAkses">Tambah Data</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal --}}
<div id="modalModulAkses" 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 Modul & Akses</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_modul_akses" class="forms-sample">
                    @csrf
                    <input type="hidden" name="id">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Nama Modul & Akses</label>
                                <input type="text" class="form-control required" name="name" autocomplete="off" placeholder="Nama Modul & Akses">
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="submit" id="btnSimpanModulAkses" 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/modul-akses') }}";

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

    $('#tambahModulAkses').on('click', function(e) {
        // stat = "add";
        $('#modalModulAkses').modal('show');
    });

    $('#form_modul_akses').on('submit', function(e) {
        e.preventDefault();
        if (cekForm('form_modul_akses') == true) {
            let data = $('#form_modul_akses').serialize();
            if(!$('#form_modul_akses input[name="id"]').val()){
                sendJson(URLs + "/add", data, rSends);
            } else {
                sendJson(URLs + "/update", data, rSends);
            }
            // data += "&_token={{ csrf_token() }}";
            // if (stat == "add") {
            //     sendJson(URLs + "/add", data, rSends);
            // } else {
            //     data += "&id=" + IDs;
            //     sendJson(URLs + "/update", data, rSends);
            // }
        }
    });

    function rSends(data) {
        let titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
        swal({
            title: titles,
            text: data.response,
            type: data.type,
            confirmButtonText: "OK"
        }).then(function() {
            if (data.type == "success") {
                $('#modalModulAkses').modal('hide');
                datatable.ajax.reload();
            }
        })
    }

    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);
        })
    }

    $('#modalModulAkses').on('hidden.bs.modal', function(e) {
        $('#form_modul_akses input:not([name="_token"])').val('');
        // IDs = '';
        // stat = '';
    });

    function editData(data){
        $('#modalModulAkses input[name="id"]').val(data.id);
        $('#modalModulAkses input[name="name"]').val(data.display);
        $('#modalModulAkses').modal('show');
    }
</script>
@endpush