@extends('layouts.master')

@section('title', 'Input Data Ijin Tinggal')
{{-- @section('content-header', 'Template') --}}

@section('style-plugins')
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
<!-- SweetAlert2 -->
<link rel="stylesheet" href="{{ asset('assets/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
<!-- Select2 -->
<link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="{{ asset('assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
@endsection

@section('style-custom')

@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Data Ijin Tinggal</h3>
                    <div class="card-tools">
                        <button class="btn btn-tool btn-refresh"><i class="fas fa-sync-alt"></i></button>
                    </div>
                </div>
                <div class="card-body">
                    <table id="table-intal" class="table table-bordered table-hover table-striped">
                        <thead>
                            <tr>
                                <th width="15%">Permohonan</th>
                                <th width="25%">Nama</th>
                                <th width="25%">Layanan</th>
                                <th width="20%">Tahapan</th>
                                <th width="15%">No. HP</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                        <tfoot>
                            <tr>
                                <th>Permohonan</th>
                                <th>Nama</th>
                                <th>Layanan</th>
                                <th>Tahapan</th>
                                <th>No. HP</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script-plugins')
<!-- DataTables  & Plugins -->
<script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('assets/plugins/pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('assets/plugins/pdfmake/vfs_fonts.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>
<!-- SweetAlert2 -->
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
<!-- Select2 -->
<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
<!-- Validation -->
<script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-validation/localization/messages_id.js') }}"></script>
@endsection

@section('script-custom')
<script>
    $(function () {
        var oTablePaspor = $("#table-intal").DataTable({
            "ajax": {
                url: "{{ url('ijin-tinggal/ajax/list-data-wna') }}",
                type: "POST",
                data : function (dt) {
                    dt._token = "{{ csrf_token() }}";
                    // dt.bidang = $("#filterBidang").val();
                    // dt.seksi = $("#filterSeksi").val();
                }
            },
            "processing": true,
            "serverSide": true,
            "columnDefs": [
                // { "orderable": false, "targets": 3 },
                // { "searchable": false, "targets": 3 }
            ],
            // "order": [[ 2, "asc" ]]
        });
        $("#table-intal_filter input").unbind().bind('keyup', function(e) {
            console.log('search');
            // e.preventDefault();
            var code = e.keyCode || e.which;
            if(code == 13 && this.value !== "") {
                oTablePaspor.search( this.value ).draw();
            }
            if(this.value == "") {
                oTablePaspor.search("").draw();
            }
            // console.log(this.value);
            return;
        });
        $(".btn-refresh").on('click', function(event) {
            event.preventDefault();
            oTablePaspor.ajax.reload();
        });
    });
</script>
@endsection