@extends('layouts.master')

@section('title', 'Koreksi Alur')

@section('content-header','Koreksi Alur')

@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 justify-content-center">
        <div class="col-md-12 col-lg-8">
            <div class="card card-outline card-danger">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-print"></i> Koreksi Alur</h3>
                    <!-- /.card-tools -->
                </div>
                <!-- /.card-header -->
                <form role="form" class="form-horizontal" id="form-mobile" method="POST" action="{{ url('koreksi/mundur-alur/update') }}">
                {{ csrf_field() }}
                {{ method_field('patch') }}
                <input type="hidden" id="jamaahid" name="jamaahid">
                <div class="card-body">
                    <div class="form-group row">
                        <label for="inputNomor" class="col-sm-4 col-form-label text-right">No. Permohonan / Porsi:</label>
                        <div class="col-sm-8 input-group">
                            <input type="text" name="nomor" id="inputNomor" 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="inputNoporsi" class="col-sm-3 col-form-label text-right">Porsi :</label>
                        <div class="col-sm-9">
                            <p class="form-control-plaintext" id="inputNoporsi"></p>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputNopermohonan" class="col-sm-3 col-form-label text-right">Permohonan :</label>
                        <div class="col-sm-9">
                            <p class="form-control-plaintext" id="inputNopermohonan"></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="inputAlur" class="col-sm-3 col-form-label text-right">Alur Haji :</label>
                        <div class="col-sm-9">
                            <h4 class="form-control-plaintext"><strong id="inputAlur"></strong></h4>
                        </div>
                    </div>
                    <div class="form-group row" id="inputAlurForm">
                        <label for="inputAlurBaru" class="col-sm-3 col-form-label text-right">Mundur ke Alur :</label>
                        <div class="col-sm-9">
                            <select name="alur" id="inputAlurBaru" class="form-control select2bs4" data-placeholder="Alur Baru" data-dropdown-css-class="select2-danger" style="width: 100%;">
                                <option></option>
                            </select>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <div class="float-right">
                        <button type="submit" class="btn btn-info" id="btSimpan"><i class="fas fa-share-square fa-flip-horizontal"></i> Update</button>
                    </div>
                </div>
                <!-- /.card-footer-->
            </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">
    $(function() {
        'use strict';
        $("#btSimpan").hide();
        $("#inputAlurForm").hide();
        $("#inputNomor").focus();

        function cekNomor() {
            $("#jamaahid").val('');
            $("#inputNoporsi").text('');
            $("#inputNopermohonan").text('');
            $("#inputNama").text('');
            $("#inputDob").text('');
            $("#inputAlur").text('');
            $.ajax({
                url: "{{ url('koreksi/mundur-alur/ajax/data-jamaah') }}",
                type: 'POST',
                // dataType: 'json',
                data: {
                    _token: "{{ csrf_token() }}",
                    nomor: $("#inputNomor").val(),
                },
            })
            .done(function(dt) {
                // console.log(dt);
                if (dt == 'gaketemu') {
                    $("#errornya").text('PERMOHONAN TIDAK DITEMUKAN!');
                    $("#error-modal").modal('show');
                } else {
                    $("#jamaahid").val(dt.jamaah.id);
                    $("#inputNoporsi").text(dt.jamaah.noporsi);
                    $("#inputNopermohonan").text(dt.jamaah.nopermohonan);
                    $("#inputNama").text(dt.jamaah.nama);
                    $("#inputDob").text(dt.jamaah.dob);
                    $("#inputAlur").text(dt.status.status);
                    $("#btSimpan").show();

                    $('#inputAlurBaru').empty();
                    if (dt.statusEdit.length > 0) {
                        $.each(dt.statusEdit, function(index, val) {
                            var newOption = new Option(val.text, val.id, false, false);
                            $('#inputAlurBaru').append(newOption);
                        });
                        $("#inputAlurForm").show();
                    } else {
                        $('#kodeklasifikasi').hide();
                    }
                    $('#inputAlurBaru').trigger('change');
                }
            })
            .fail(function() {
                $("#btSimpan").hide();
                $("#errornya").text('PERMOHONAN TIDAK DITEMUKAN!');
                $("#error-modal").modal('show');
            });
        }

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

        $("#btCek").on('click', function(evt) {
            evt.preventDefault();
            cekNomor();
        });
    });
</script>
@endsection