kaunter/resources/views/onetimepassword/home.blade.php

@extends('layouts.app')

@section('content')

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Generated OTP</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <h4>dd@KDS132</h4>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Print</button>
        </div>
      </div>
    </div>
  </div>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">{{ __('One Time Password') }}</div>

                <div class="card-body">
                 
                <div id="form-ic">    
                    <div class="row mx-auto d-flex justify-content-center">    
                        <label class="col-1 text-center"> No IC</label>
                        <input type="text" id="noic" class="form-control input-lg col-3"/>
                        <button class="btn btn-primary ml-3 col-2" onclick="carila()">Cari</button>
                    </div>
                </div>

                <div class="form-display" id="form-display" style="display:none;">

                    <div class="row">
                    <div class="col-6 mt-3">
                    <label> Nama </label>
                    <input type="text" id="nama" class="form-control" readonly/>
                    </div>
                    <div class="col-6 mt-3">
                        <label> No IC </label>
                        <input type="text" id="noic1" class="form-control" readonly/>
                    </div>
                    <div class="col-6 mt-3">
                    <label> Alamat </label>
                    <textarea id="alamat" class="form-control" rows="3" readonly></textarea>
                    </div>
                    <div class="col-3 mt-3">
                        <label> No Telefon 1</label>
                        <input type="text" id="notel" class="form-control" readonly/>
                    </div>
                    <div class="col-3 mt-3">
                        <label> No Telefon 2</label>
                        <input type="text" id="notel2" class="form-control" readonly/>
                    </div>
                    <div class="col-3 mt-3">
                        <label> Poskod </label>
                        <input type="text" id="poskod" class="form-control" readonly/>
                        </div>
                        <div class="col-3 mt-3">
                            <label> Daerah </label>
                            <input type="text" id="daerah" class="form-control" readonly/>
                            </div>
                            <div class="col-6 mt-3">
                                <label> Negeri </label>
                                <input type="text" id="negeri" class="form-control" readonly/>
                                </div>

                                <div class="form-group mt-4 mx-auto justify-content-end">
                                    <button class="btn btn-primary px-3 py-3" onclick="$('#form-ic').show();$('#form-display').hide();">Cari Semula</button>
                                    <button id="generateotp" class="btn btn-primary px-3 py-3" data-toggle="modal" data-target="#exampleModal">Jana OTP</button>
                                </div>
            
                </div>

                </div>
            </div>
        </div>
    </div>
 </div>
</div>

<script>

$(document).ready(function()
{




});

function carila()
{

    var api_url = "{{ api_url_for_browser() }}";

    var noic = $('#noic').val();

    $.ajax({
        method:"GET",
        url: api_url + "/api/customers/" + noic,
        success: function(customerdata)
        {

            if(customerdata.length == 0)
            {
            Swal.fire({
                icon: 'error',
                title: 'Amaran',
                text: 'Tiada maklumat pelanggan!'
            });
            $('#form-display').hide();
            }
            else
            {

                
                $( "#form-ic" ).fadeOut( "slow", function() {
                    $('#form-ic').hide();
                });

                $( "#form-display" ).fadeIn( "slow", function() {
                    $('#form-display').show();
                    $('#nama').val(customerdata['nama']);
                    $('#noic1').val(customerdata['kpbaru']);
                    $('#alamat').val(customerdata['alamat1']);
                    $('#notel').val(customerdata['telefon']);
                    $('#notel2').val(customerdata['telefon2']);
                    $('#poskod').val(customerdata['poskod']);


                    var poskod = $('#poskod').val();

                    

                    $.ajax({
                        method:"GET",
                        url: api_url + "/api/poskod/" + poskod,
                        success: function(poskoddetail)
                        {
                            var koddaerah = poskoddetail['koddaerah'];
                            var kodnegeri = poskoddetail['kodnegeri'];
                            
                            $.ajax({
                                url: api_url + "/api/negeri/" + kodnegeri,
                                method:'GET',
                                success:function(negeri){
                                    $('#negeri').val(negeri['negeri']);
                                }
                            });
                            $.ajax({
                                url: api_url + '/api/daerah/' + koddaerah,
                                method:'GET',
                                success:function(daerah){
                                    $('#daerah').val(daerah['namadaerah']);
                                }
                            });
                        }




                    });

                });
                

            }
                
        }
    });
}


</script>
@endsection