@extends('layouts.master')

@section('title', 'Proses Mobile')

@section('content-header','Proses Mobile')

@section('plugin-styles')
<!-- DataTables -->
<link rel="stylesheet" href="{{asset('plugins/datatables-bs4/css/dataTables.bootstrap4.css')}}">
<!-- Select2 -->
<link rel="stylesheet" href="{{asset('plugins/select2/css/select2.min.css')}}">
{{-- <link rel="stylesheet" href="{{asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css')}}"> --}}
<!-- DateRange Picker -->
<link rel="stylesheet" href="{{asset('plugins/daterangepicker/daterangepicker.css')}}">
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-5 col-sm-12">
            <div class="card card-outline card-warning">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-laptop"></i> Mobile</h3>
                    <!-- /.card-tools -->
                </div>
                <!-- /.card-header -->
                <form role="form" class="form-horizontal" id="form-mobile" method="POST" action="{{ url('proses/mobile/simpan') }}" target="_blank">
                {{ csrf_field() }}
                <div class="card-body">
                    <input type="hidden" name="jamaah" id="inputJamaahID" value="0">
                    <div class="form-group row">
                        <label for="inputPorsi" class="col-sm-3 col-form-label text-right">Porsi:</label>
                        <div class="col-sm-9">
                            <input type="text" name="noporsi" id="inputPorsi" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputNama" class="col-sm-3 col-form-label text-right">Nama:</label>
                        <div class="col-sm-9">
                            <p class="form-control-plaintext" id="inputNamaPorsi"></p>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputDob" class="col-sm-3 col-form-label text-right">Tgl Lahir:</label>
                        <div class="col-sm-9">
                            <p class="form-control-plaintext" id="inputDobPorsi"></p>
                        </div>
                    </div>
                    <div id="pasporGrup">
                        <div class="form-group row">
                            <label for="inputFormno" class="col-sm-3 col-form-label text-right">Permohonan:</label>
                            <div class="col-sm-9">
                                <input type="text" name="formno" id="inputFormno" class="form-control">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputJenis" class="col-sm-3 col-form-label text-right">Jenis:</label>
                            <div class="col-sm-9">
                                <p class="form-control-plaintext" id="inputJenis"></p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputNama" class="col-sm-3 col-form-label text-right">Nama:</label>
                            <div class="col-sm-9">
                                <p class="form-control-plaintext" id="inputNama"></p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputDob" class="col-sm-3 col-form-label text-right">Tgl Lahir:</label>
                            <div class="col-sm-9">
                                <p class="form-control-plaintext" id="inputDob"></p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputPaspor" class="col-sm-3 col-form-label text-right">Paspor:</label>
                            <div class="col-sm-9">
                                <p class="form-control-plaintext" id="inputPaspor"></p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputAlur" class="col-sm-3 col-form-label text-right">Alur:</label>
                            <div class="col-sm-9">
                                <p class="form-control-plaintext" id="inputAlur"></p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputBilling" class="col-sm-3 col-form-label text-right">Billing:</label>
                            <div class="col-sm-9">
                                <p class="form-control-plaintext" id="inputBilling"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <div class="float-right">
                        <button type="button" class="btn btn-info" id="btSimpan"><i class="fas fa-download"></i> Simpan</button>
                    </div>
                </div>
                <!-- /.card-footer-->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
        <div class="col-md-7 col-sm-12">
            <div class="card card-outline card-warning">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-laptop"></i> List Mobile</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" id="btn-refresh" data-toggle="tooltip" data-trigger="hover" data-original-title="Refresh"><i class="fas fa-sync-alt"></i></button>
                    </div>
                    <!-- /.card-tools -->
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <table id="table-jamaah" class="table table-bordered table-hover">
                        <thead class="thead-dark">
                            <tr>
                                <th>No. Porsi</th>
                                <th>No. Permohonan</th>
                                <th>Nama</th>
                                <th>Kota</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot class="thead-dark">
                            <tr>
                                <th>No. Porsi</th>
                                <th>No. Permohonan</th>
                                <th>Nama</th>
                                <th>Kota</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</div>
<div class="modal fade" id="error-modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content bg-danger">
            <div class="modal-header">
                <h4 class="modal-title">ERROR</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h4 id="errornya">PERMOHONAN TIDAK DITEMUKAN!</h4>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-outline-light" data-dismiss="modal">TUTUP</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
@endsection

@section('plugin-scripts')
<!-- DataTables -->
<script src="{{asset('plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('plugins/datatables-bs4/js/dataTables.bootstrap4.js')}}"></script>
<!-- Select2 -->
<script src="{{asset('plugins/select2/js/select2.full.min.js')}}"></script>
<!-- DateRange Picker -->
<script src="{{asset('plugins/daterangepicker/moment.min.js')}}"></script>
<script src="{{asset('plugins/daterangepicker/daterangepicker.js')}}"></script>
<!-- JQuery Validate -->
<script src="{{ asset('plugins/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="{{ asset('plugins/jquery-validation/localization/messages_id.min.js') }}"></script>
@endsection

@section('custom-script')
<script type="text/javascript">
    $("#inputPorsi").focus();
    $("#btSimpan").hide();
    $("#pasporGrup").hide();

    $(function() {
        'use strict';
        $('.select2bs4').select2();

        var oTable = $("#table-jamaah").DataTable({
            "ajax": {
                url: "{{ url('proses/mobile/ajax/tabel-jamaah') }}",
                type: "POST",
                data : function (dt) {
                    dt._token = "{{ csrf_token() }}";
                    dt.kota = $("#filterKota").val();
                }
            },
            "processing": true,
            "serverSide": true,
            "order": [[ 0, "desc" ]],
            "columnDefs": [
                // { "orderable": false, "targets": 2 },
                // { "orderable": false, "targets": 4 },
                // { "orderable": false, "targets": 7 },
                // { "searchable": false, "targets": 7 },
            ]
        });

        $("#btn-refresh").on('click', function(event) {
            event.preventDefault();
            oTable.ajax.reload();
        });

        $("#inputPorsi").on('keypress',function(evt) {
            var code = (evt.keyCode ? evt.keyCode : evt.which);
            $("#kirim").hide();
            // console.log(code);
            if (code == '13' || code == '9') {
                evt.preventDefault();
                $.ajax({
                    url: "{{ url('proses/mobile/ajax/data-jamaah') }}",
                    type: 'POST',
                    // dataType: 'json',
                    data: {
                        _token: "{{ csrf_token() }}",
                        noporsi: $("#inputPorsi").val(),
                    },
                })
                .done(function(dt) {
                    // console.log(dt);
                    $("#inputJamaahID").val('');
                    $("#inputNamaPorsi").text('');
                    $("#inputDobPorsi").text('');
                    $("#inputNama").text('');
                    $("#inputFormno").val('');
                    $("#inputDob").text('');
                    $("#inputJenis").text('');
                    $("#inputPaspor").text('');
                    $("#inputAlur").text('');
                    $("#inputBilling").text('');
                    $("#btSimpan").hide();
                    $("#pasporGrup").hide();
                    if (dt == 'gaketemu') {
                        $("#errornya").text('PERMOHONAN TIDAK DITEMUKAN!');
                        $("#error-modal").modal('show');
                    } else if(dt == 'gaboleh') {
                        $("#errornya").text('BUKAN ALUR ANDA!');
                        $("#error-modal").modal('show');
                    } else {
                        $("#inputJamaahID").val(dt.id);
                        $("#inputNamaPorsi").text(dt.nama);
                        $("#inputDobPorsi").text(dt.dob);
                        $("#pasporGrup").show();
                        $("#inputFormno").focus();
                        if (dt.hasOwnProperty('paspor')) {
                            $("#inputFormno").val(dt.paspor.nopermohonan);
                            $("#inputNama").text(dt.paspor.nama);
                            $("#inputDob").text(dt.paspor.tanggallahir);
                            $("#inputJenis").text(dt.paspor.jenis);
                            $("#inputPaspor").text(dt.paspor.nopaspor.toUpperCase());
                            $("#inputAlur").text(dt.paspor.alur);
                            $("#inputBilling").text(dt.paspor.billing);
                            $("#btSimpan").show('fast');
                            $("#btSimpan").focus();
                        }
                    }
                })
                .fail(function() {
                    $("#kirim").hide();
                });
            }
        });

        $("#inputFormno").on('keypress',function(evt) {
            var code = (evt.keyCode ? evt.keyCode : evt.which);
            $("#kirim").hide();
            // console.log(code);
            if (code == '13' || code == '9') {
                evt.preventDefault();
                $.ajax({
                    url: "{{ url('proses/mobile/ajax/data-paspor') }}",
                    type: 'POST',
                    // dataType: 'json',
                    data: {
                        _token: "{{ csrf_token() }}",
                        formno: $("#inputFormno").val(),
                    },
                })
                .done(function(dt) {
                    // console.log(dt);
                    $("#inputNama").text('');
                    $("#inputFormno").val('');
                    $("#inputDob").text('');
                    $("#inputJenis").text('');
                    $("#inputPaspor").text('');
                    $("#inputAlur").text('');
                    $("#inputBilling").text('');
                    $("#btSimpan").hide();
                    if (dt == 'gaketemu') {
                        $("#errornya").text('PERMOHONAN TIDAK DITEMUKAN!');
                        $("#error-modal").modal('show');
                    } else if(dt == 'gaboleh') {
                        $("#errornya").text('BUKAN ALUR ANDA!');
                        $("#error-modal").modal('show');
                    }else {
                        $("#inputFormno").val(dt.nopermohonan);
                        $("#inputNama").text(dt.nama);
                        $("#inputDob").text(dt.tanggallahir);
                        $("#inputJenis").text(dt.jenis);
                        $("#inputPaspor").text(dt.nopaspor.toUpperCase());
                        $("#inputAlur").text(dt.alur);
                        $("#inputBilling").text(dt.billing);
                        $("#btSimpan").show('fast');
                        $("#btSimpan").focus();
                    }
                })
                .fail(function() {
                    $("#btSimpan").hide();
                });
            }
        });

        $("#btSimpan").on('click', function(event) {
            event.preventDefault();
            $("#form-mobile").submit();
            oTable.ajax.reload();
            $("#inputFormno").val('');
            $("#inputNama").text('');
            $("#inputDob").text('');
            $("#inputJenis").text('');
            $("#inputPaspor").text('');
            $("#inputAlur").text('');
            $("#btSimpan").hide();
            $("#inputPorsi").val('');
            $("#inputJamaahID").val('');
            $("#inputNamaPorsi").text('');
            $("#inputDobPorsi").text('');
            $("#inputBilling").text('');
            $("#btSimpan").hide();
            $("#pasporGrup").hide();
        });
    });
</script>
@endsection