@extends('master')

@section('content')
@php $key_='User'; @endphp
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">{{ session()->get('title') }}</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                    <li class="breadcrumb-item active">{{ session()->get('title') }}</li>
                </ol>
            </div>

        </div>
    </div>
</div>
<!-- end page title -->

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <!-- <div class="card-header">
                <button type="button" class="btn btn-primary btn-label waves-effect waves-light rounded-pill" onclick="add();"><i class="ri-add-circle-line label-icon align-middle rounded-pill fs-16 me-2"></i> Tambah Data Baru</button>
            </div> -->
            <div class="card-body">
                <table id="table" class="table table-bordered dt-responsive nowrap table-striped align-middle" style="width:100%">
                    <thead>
                        <tr>
                            <th class="ctr">No.</th>
                            <th class="ctr">Name</th>
                            <th class="ctr">Kode Satker</th>
                            <th class="ctr">Key Dev</th>
                            <th class="ctr">URL</th>
                            <th class="ctr">Status</th>
                            <th class="ctr">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div><!--end col-->
</div><!--end row-->

<div class="modal fade" id="modal_form" tabindex="-1" aria-labelledby="exampleModalgridLabel" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-title">Tambah Data Baru</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="form">
                <input type="hidden" name="id" id="id">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="name" class="form-label">Nama</label>
                                <input type="text" class="form-control" id="name" name="name">
                                <div class="text-danger text-error" id="name_error">*error</div>
                            </div>
                        </div>
                        <!--end col-->
                        <div class="col-12">
                            <div class="form-group">
                                <label for="kode_satker" class="form-label">Kode Satker</label>
                                <input type="text" class="form-control" id="kode_satker" name="kode_satker">
                                <div class="text-danger text-error" id="kode_satker_error">*error</div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-group">
                                <label for="key_dev" class="form-label">Key Dev</label>
                                <input type="text" class="form-control" id="key_dev" name="key_dev">
                                <div class="text-danger text-error" id="key_dev_error">*error</div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="url" class="form-label">URL</label>
                                <input type="text" class="form-control" id="url" name="url">
                                <div class="text-danger text-error" id="url_error">*error</div>
                            </div>
                        </div>
                        <!--end col-->
                        <!--end col-->
                        <!--end col-->
                    </div>
                    <!--end row-->
                </div>
                <div class="modal-footer">
                    <div class="hstack gap-2 justify-content-end">
                        <a href="javascript:void(0);" class="btn btn-link link-success fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
                        <button type="button" id="btnSave" class="btn btn-success btn-load" onclick="save();"><i class="ri-save-line label-icon align-middle fs-16 me-2"></i> Simpan</button>
                        <!-- <button type="button" id="btnSave" class="btn btn-success btn-load">
                            <span class="d-flex align-items-center">
                                <span class="flex-grow-1 me-2">
                                    Loading...
                                </span>
                                <span class="spinner-border flex-shrink-0" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </span>
                            </span>
                        </button> -->
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('after-script')
<script type="text/javascript">
    var loading_animation = '<span class="d-flex align-items-center"><span class="flex-grow-1 me-2">Loading...</span><span class="spinner-border flex-shrink-0" role="status"><span class="visually-hidden">Loading...</span></span></span>';
    var edit_loading_animation = '<span class="d-flex align-items-center"><span class="flex-grow-1 me-2" style="font-size:10px;">Loading...</span><span class="spinner-border flex-shrink-0" role="status" style="width:10px;height:10px;"><span class="visually-hidden">Loading...</span></span></span>';
    var save_text = '<i class="ri-save-line label-icon align-middle fs-16 me-2"></i> <span class="align-middle">Simpan</span>';
    var update_text = '<i class="ri-save-line label-icon align-middle fs-16 me-2"></i> <span class="align-middle">Update</span>';
    $(document).ready(function() {
        table = new DataTable('#table', {
            "responsive": true,
            "autoWidth": false,
            "processing": true, //Feature control the processing indicator.
            "serverSide": true, //Feature control DataTables' server-side processing mode.
            // "order": [], //Initial no order.

            // Load data for the table's content from an Ajax source
            "ajax": {
                "type": "POST",
                "url": "{{ url('/admin/web-service-setting/show') }}",
                "data": {
                    "_token": "{{ csrf_token() }}"
                },
                "error": function(jqXHR, textStatus, errorThrown) {
                    // alert('Error adding / update data');
                    console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);
                    // $('#btnSave').attr('disabled', false); //set button enable 
                },
            },
            "bDestroy": true,
            // "buttons": [
            //     'copy', 'csv', 'excel', 'pdf', 'print'
            // ],
            // // dom: 'Bfrtip',
            // dom: 'lBfrtip',
            //Set column definition initialisation properties.
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'kode_satker',
                    name: 'kode_satker'
                },
                {
                    data: 'key_dev',
                    name: 'key_dev'
                },
                {
                    data: 'url',
                    name: 'url'
                },
                {
                    data: 'status_toggle',
                    name: 'status_toggle'
                },