@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-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Input Data Ijin Tinggal</h3>
                </div>
                <form action="{{ url('ijin-tinggal/simpan') }}" id="form-intal" method="POST" autocomplete="off">
                    @csrf
                    <input type="hidden" name="permohonan_id" id="permohonan_id">
                    <div class="card-body">
                        <div class="form-group">
                            <label for="nopermohonan">No. Permohonan</label>
                            {{-- <input type="text" class="form-control" name="nopermohonan" id="nopermohonan" placeholder="No Permohonan"> --}}
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" name="nopermohonan" id="nopermohonan" placeholder="No Permohonan">
                                <span class="input-group-append">
                                    <button type="button" class="btn btn-primary" id="btn-check-intal">Check! <i class="fas fa-hand-point-right"></i></button>
                                </span>
                            </div>
                            <small id="helpNoPermohonan" class="form-text text-muted">Input No. Permohonan</small>
                        </div>
                        <div class="form-group">
                            {{-- <label for="nama">Nama</label> --}}
                            <input type="text" class="form-control-plaintext" name="nama" id="nama" placeholder="Nama" readonly>
                        </div>
                        <div class="form-group">
                            {{-- <label for="tgl_lahir">Tanggal Lahir</label> --}}
                            <input type="text" class="form-control-plaintext" name="tgl_lahir" id="tgl_lahir" placeholder="Tanggal Lahir" readonly>
                        </div>
                        <div class="form-group">
                            {{-- <label for="kebangsaan">Kebangsaan</label> --}}
                            <input type="text" class="form-control-plaintext" name="kebangsaan" id="kebangsaan" placeholder="Kebangsaan" readonly>
                        </div>
                        <div class="form-group">
                            {{-- <label for="nopaspor">No. Paspor</label> --}}
                            <input type="text" class="form-control-plaintext" name="nopaspor" id="nopaspor" placeholder="No. Paspor" readonly>
                        </div>
                        <div class="form-group">
                            {{-- <label for="niora">NIORA</label> --}}
                            <input type="text" class="form-control-plaintext" name="niora" id="niora" placeholder="NIORA" readonly>
                        </div>
                        {{-- <div class="form-group">
                            <label for="dokim">DOKIM</label>
                            <input type="text" class="form-control-plaintext" name="dokim" id="dokim" placeholder="DOKIM" readonly>
                        </div> --}}
                        <div class="form-group">
                            {{-- <label for="layanan">Layanan</label> --}}
                            <textarea class="form-control-plaintext" rows="1" name="layanan" id="layanan" placeholder="Layanan" wrap="soft" readonly></textarea>
                        </div>
                        <div class="form-group">
                            <label for="telepon">Telepon</label>
                            <input type="text" class="form-control" name="telepon" id="telepon" placeholder="No. Telepon">
                        </div>
                    </div>
                    <div class="card-footer text-center">
                        <button type="submit" class="btn btn-primary" id="btSimpan">Simpan</button>
                        <button type="reset" class="btn btn-danger" id="btBatal">Batal</button>
                    </div>
                </form>
                <div class="overlay dark" style="display: none;">
                    <i class="fas fa-2x fa-sync-alt fa-spin"></i>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Tahapan Layanan</h3>
                </div>
                <div class="card-body">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Seq</th>
                                <th>Nama Tahapan</th>
                                <th>Notifikasi</th>
                            </tr>
                        </thead>
                        <tbody id="list-tahapan">
                            {{-- Tahapan --}}
                        </tbody>
                    </table>
                </div>
                <div class="overlay dark" style="display: none;">
                    <i class="fas fa-2x fa-sync-alt fa-spin"></i>
                </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>
<script src="{{ asset('assets/plugins/autosize/autosize.js') }}"></script>
@endsection

@section('script-custom')
<script>
    $(function () {
        autosize($('textarea'));
        $(".overlay").hide();
        $("#btSimpan").hide();
        $("#nopermohonan").select();
        $("#btBatal").click(function (e) {
            $("#btSimpan").hide();
            $("#nopermohonan").select();
            $("html, body").scrollTop(0);
        });

        function checkPermohonanIntal() {
            $(".overlay").show();
            $.ajax({
                type: "POST",
                url: "{{ url('ijin-tinggal/ajax/data-intal') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    nopermohonan: $("#nopermohonan").val()
                },
                success: function (response) {
                    if (response != "error") {
                        $("#permohonan_id").val(response.datawna.permohonanid);
                        $("#nama").val(response.datawna.nama_pemohon);
                        $("#tgl_lahir").val(response.datawna.tgl_lahir);
                        $("#kebangsaan").val(response.datawna.kebangsaan);
                        $("#nopaspor").val(response.datawna.no_paspor);
                        $("#niora").val(response.datawna.niora);
                        // $("#dokim").val(response.datawna.dokim_no);
                        $("#layanan").val(response.datawna.nama_layanan);
                        autosize.update($("#layanan"));
                        $("#telepon").val(response.datawna.no_hp);
                        $("#list-tahapan").html(response.tahapan);
                        $("#telepon").select();
                        $("#btSimpan").show();
                        $("html, body").scrollTop(1000);
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Data tidak ditemukan!',
                            // showConfirmButton: false,
                            timer: 1500,
                        });
                    }
                },
                complete: function (response) { $(".overlay").hide(); }
            });
        }
        $("#btn-check-intal").on("click", function (evt) {
            evt.preventDefault();
            checkPermohonanIntal();
        });
        $("#nopermohonan").keypress(function (evt) {
            var code = (evt.keyCode ? evt.keyCode : evt.which);
            if (code == '13' || code == '9') {
                evt.preventDefault();
                checkPermohonanIntal();
            }
        });
        $("#form-intal").validate({
            rules: {
                nopermohonan: {
                    required: true,
                    digits: true,
                },
                telepon: {
                    required: true,
                    digits: true,
                },
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });
</script>
@endsection