@extends('layouts.master')

@section('title', 'Cetak Tanda Terima')

@section('content-header','Cetak Tanda Terima')

@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-purple">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-print"></i> Cetak Tanda Terima</h3>
                    <!-- /.card-tools -->
                </div>
                <!-- /.card-header -->
                <form role="form" class="form-horizontal" id="form-mobile" method="POST" action="{{ url('jamaah/tandaterima') }}" target="_blank">
                {{ csrf_field() }}
                <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="inputBilling" class="col-sm-4 col-form-label text-right">Billing :</label>
                        <div class="col-sm-8">
                            <h4 class="form-control-plaintext"><strong id="inputBilling"></strong></h4>
                        </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-print"></i> Cetak</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';
        $("#inputNomor").focus();
        $("#btSimpan").hide();

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

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

        function getBilling() {
            $.ajax({
                url: "{{ url('jamaah/ajax/data-billing') }}",
                type: 'POST',
                // dataType: 'json',
                data: {
                    _token: "{{ csrf_token() }}",
                    nomor: $("#inputNomor").val(),
                },
            })
            .done(function(dt) {
                if (dt.pesan == 'sukses') {
                    $("#inputBilling").text(dt.billing);
                    $("#btSimpan").show();
                    $("#btSimpan").focus();
                } else {
                    $("#btSimpan").hide();
                    $("#inputBilling").text('Belum ada');
                }
            })
            .fail(function() {
                $("#btSimpan").hide();
                $("#inputBilling").text('');
            });
        }

        $("#btSimpan").on('click', function(event) {
            event.preventDefault();
            $("#form-mobile").submit();
            $("#inputNomor").val('');
            $("#inputBilling").text('');
            $("#btSimpan").hide();
            $("#inputNomor").focus();
        });
    });
</script>
@endsection