@extends('layouts/master')
<!--main content start-->
@section('content')
<section id="main-content">
<style type="text/css">
  body{
    background: #eaeaea;
  }
</style>
    <section class="wrapper">
        <div class=".container">
            <div class="heading">
            <div>
            <h2>Tambah Data WNA</h2>
            </div>
            <form method="POST" action="{{route('wna.store')}}">
            @csrf
            <div class="form-group">
                <label for="formGroupExampleInput">No Permohonan</label>
                <input type="text" class="form-control @error ('no_permohonan') is-invalid @enderror" id="no_permohonan" name="no_permohonan" placeholder="Masukan No Permohonan" value="{{ old('no_permohonan') }}" id="no_permohonan">
                <button class="btn btn-info" type="button" id="cekpermohonan">Cek</button>
                @error('no_permohonan')<div class="invalid-feedback alert alert-danger">{{ $message }}</div>@enderror
            </div>
            <div class="form-group">
                <label for="formGroupExampleInput2">Nama Lengkap</label>
                <input type="text" class="form-control @error ('nama') is-invalid @enderror" id="nama" name="nama" placeholder="Masukan Nama Lengkap" value="{{ old('nama') }}">
                @error('nama')<div class="invalid-feedback alert alert-danger">{{ $message }}</div>@enderror
            </div>
            <div class="form-group">
                <label for="formGroupExampleInput2">Jenis Permohonan</label>
                <div class="col-auto my-1">
                <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
                <select class="custom-select mr-sm-2 @error ('jenis_permohonan') is-invalid @enderror" id="jenis_permohonan" name="jenis_permohonan" value="{{ old('jenis_permohonan') }}">
                    <option selected>Pilih Jenis Permohonan</option>
                    <option value="Mutasi Alamat">Mutasi Alamat</option>
                    <option value="Mutasi Data Paspor">Mutasi Data Paspor</option>
                    <option value="Lapor Kematian">Lapor Kematian</option>
                    <option value="REP TK">REP TK</option>
                    <option value="Lapor Lahir">Lapor Lahir</option>
                    <option value="Pemberian ITK">Pemberian ITK</option>
                    <option value="Perpanjangan ITK">Perpanjangan ITK</option>
                    <option value="Perpanjangan ITAP">Perpanjangan ITAP</option>
                    <option value="Perpanjangan ITAS">Perpanjangan ITAS</option>
                    <option value="ITAS Online">ITAS Online / Penerbitan ITAS</option>
                    <option value="Altus ITAS-ITAP">Altus ITAS-ITAP</option>
                    <option value="MREP tahun">MREP</option>
                    <option value="Alih Sponsor">Alih Sponsor</option>
                    <option value="VOA">VOA</option>
                    <option value="EPO">EPO</option>
                    <option value="Pengembalian DOKIM">Pengembalian DOKIM</option>
                    <option value="Lain-lain">Lain-lain</option>
                </select>
                </div>
                @error('jenis_permohonan')<div class="invalid-feedback alert alert-danger">{{ $message }}</div>@enderror
            </div>
            <div class="form-group">
                <label for="formGroupExampleInput2">Negara</label>
                <input type="text" class="form-control @error ('negara') is-invalid @enderror" id="negara" name="negara" placeholder="Masukan Negara" value="{{ old('negara') }}">
                @error('negara')<div class="invalid-feedback alert alert-danger">{{ $message }}</div>@enderror
            </div>
            <div class="form-group">
                <label for="formGroupExampleInput2">Tanggal Lahir</label>
                <div class="col-auto my-1">
                <input type="date" id="tgl_lahir" name="tgl_lahir" value="{{ old('tgl_lahir') }}">
                </div>
                @error('tgl_lahir')<div class="invalid-feedback alert alert-danger">{{ $message }}</div>@enderror
            </div>
            <div class="form-group">
                <label for="formGroupExampleInput2">No Arsip</label>
                <input type="text" class="form-control @error ('no_arsip') is-invalid @enderror" id="no_arsip" name="no_arsip" placeholder="Masukan No Arsip" value="{{ old('no_arsip') }}">
                @error('no_arsip')<div class="invalid-feedback alert alert-danger">{{ $message }}</div>@enderror
            </div>
                <button type="submit" class="btn btn-success">Tambah</button>
            </form>
            

        </div>
        <!-- /row -->
    </section>
</section>
    <!--main content end-->
@endsection
@section('custom-script')
<script type="application/javascript">
    $(function() {
        $('#no_permohonan').on('keydown', function(evt) {
            var code = evt.keyCode || evt.which;
            if((code == 13 || code == 9) && this.value !== "") {
                evt.preventDefault();
                cekPermohonan();
            }
        });
        $("#cekpermohonan").on('click', function(event) {
            event.preventDefault();
            /* Act on the event */
            cekPermohonan();
        });

        function cekPermohonan() {
            $("#nama").val("");
            $("#tgl_lahir").val("");
            $("#negara").val("");
            $.ajax({
                url: "{{url('wnas/ajax/get-permohonan')}}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    no_permohonan: $('#no_permohonan').val(),
                },
            })
            .done(function(response) {
                if (response.status == "error") {
                    alert(response.message);
                } else {
                    data = response.message;
                    $("#nama").val(data.wna.nama_pemohon);
                    $("#tgl_lahir").val(data.wna.tgl_lahir);
                    $("#negara").val(data.kebangsaan.kebangsaan);
                }
            });
        }
    });
</script>
@endsection