@extends('layouts.master')

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

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

@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">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-laptop-medical"></i> Mobile plus Pendaftaran</h3>
                    <!-- /.card-tools -->
                </div>
                <!-- /.card-header -->
                <form role="form" class="form-horizontal" id="form-mobile-plus" method="POST" action="{{ url('proses/mobile-plus/simpan') }}" target="_blank">
                {{ csrf_field() }}
                <div class="card-body">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label text-right">Group Kota :</label>
                        <div class="col-sm-9 form-input">
                            <select id="kota" name="kota" class="form-control select2bs4" data-placeholder="Group Kota" data-dropdown-css-class="select2-info" style="width: 100%;">
                                <option></option>
                                @foreach(Haji\Model\Kota::where('id','<>','1')->get() as $kota)
                                <option value="{{$kota->id}}">{{$kota->keterangan}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputPorsi" class="col-sm-3 col-form-label text-right">Porsi:</label>
                        <div class="col-sm-9 form-input">
                            <input type="text" name="noporsi" id="inputPorsi" class="form-control">
                        </div>
                    </div>
                    <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-group">
                            <input type="text" name="formno" id="inputFormno" class="form-control">
                            <div class="input-group-append">
                                <button class="btn btn-info" type="button" id="btCek"><i class="fas fa-search"></i> Cek</button>
                            </div>
                        </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>
                <!-- /.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">
                <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();

    $(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();
        });

        $("#inputFormno").on('keypress',function(evt) {
            var code = (evt.keyCode ? evt.keyCode : evt.which);
            $("#btSimpan").hide();
            // console.log(code);
            if (code == '13' || code == '9') {
                evt.preventDefault();
                getPaspor();
            }
        });

        $("#btCek").on('click', function(event) {
            event.preventDefault();
            /* Act on the event */
            getPaspor();
        });

        function getPaspor() {
            $.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();
            });
        }

        $('#form-mobile-plus').validate({
            ignore: [],
            rules: {
                'noporsi': {
                    required: true,
                    digits: true,
                    minlength: 10,
                    remote: {
                        url: "{{ url('jamaah/ajax/validasi-noporsi') }}",
                        type: "post"
                    }
                },
                'formno': {
                    required: true,
                },
                'kota': {
                    required: true,
                }
            },
            messages: {
                'noporsi': {
                    remote: jQuery.validator.format("No. Porsi \"{0}\" sudah terdaftar!")
                }
            },
            highlight: function (input) {
                $(input).addClass('is-invalid').removeClass('is-valid');
            },
            unhighlight: function (input) {
                $(input).addClass('is-valid').removeClass('is-invalid');
            },
            errorPlacement: function (error, element) {
                $(element).parents('.form-input').append(error);
            },
            errorClass : "error text-danger font-weight-light",
        });

        $(document).on("change", ".select2bs4", function() {
            $('#form-mobile-plus').valid();
        });

        $("#btSimpan").on('click', function(event) {
            event.preventDefault();
            if ($("#form-mobile-plus").valid()) {
                $("#form-mobile-plus").submit();
                $("#inputFormno").val('');
                $("#inputNama").text('');
                $("#inputDob").text('');
                $("#inputJenis").text('');
                $("#inputPaspor").text('');
                $("#inputAlur").text('');
                $("#inputBilling").text('');
                $("#inputPorsi").val('');
                $("#btSimpan").hide();
                setTimeout(function(){ 
                    oTable.ajax.reload();
                    location.reload(true);
                }, 500);
            }
        });
    });
</script>
@endsection