@extends('layouts.app')

@section('content')
<style>
    .file {
        visibility: hidden;
        position: absolute;
    }
</style>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb pb-3">
                  <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                  <li class="breadcrumb-item active" aria-current="page">Pengenalan Diri</li>
                </ol>
              </nav>

            <div class="card">
                <div class="card-body">
                    <div class="text-center">
                        <h5 class="text-uppercase">masukkan nombor kad pengenalan</h5>
                        <form name="frmsearch" onsubmit="verifynokp()" action="{{ route('customer.search') }}" method="GET">
                            <div class="row justify-content-center">
                                <div class="col-md-9">
                                    <div class="input-group my-3">
                                        <input type="text" class="form-control" id="noic" name="noic" placeholder="No Kad Pengenalan Pelanggan" aria-label="No Kad Pengenalan Pelanggan" autocomplete="off" value="{{$search == false ? '' : $noic ?? ''}}" aria-describedby="button-addon2">
                                        <div class="input-group-append">
                                            <select class="form-select" id="customerIDType" name="customerIDType" class="form-control">
                                                <option value="nokp" {{ $idtype == 'nokp' ? 'selected' : ''}}>Kad Pengenalan</option>
                                                <option value="passport" {{ $idtype == 'passport' ? 'selected' : ''}}>Passport</option>
                                            </select>
                                        </div>
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-primary" type="submit" id="button-addon2">Cari</button>
                                        </div>
                                    </div>
                                        <span class="btn btn-outline-primary" id="button_read_mykad">Baca MyKad</span>
                                </div>
                            </div>
                        </form>
                    </div>
                    @if($search == true && $blacklist_search == false)
                    <div class="text-center mt-3">
                        <button type="button" style="margin:auto" class="btn btn-primary" onclick="newcustomer()">
                            Daftar Pelanggan
                        </button>
                    </div>
                    @endif
                </div>
            </div>
            <!-- Modal No KP -->
            <div class="modal fade" id="daftar_pelanggan" tabindex="-1" data-backdrop="static"  aria-labelledby="ModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="ModalLabel">Daftar Pelanggan</h5>
                        </div>
                        <div class="modal-body">
                            <form action="{{ route('customer.store') }}" onsubmit="verifycustomer()" method="POST">
                                @csrf
                                <div class="row form-group">
                                    <div class="col-md-12 d-flex justify-content-center pb-3 d-none" id="photo-mykad-container">
                                        <img src="" alt="" id="photo-mykad">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row form-group">
                                            <div class="col-md-4">Nama</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="name" id="name" autocomplete="off" placeholder="Nama"></div>
                                            <div class="col-md-4">No KP</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="noic" id="noic" value="{{$noic ?? ''}}" readonly></div>
                                            <div class="col-md-4">Tarikh Lahir</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="tarikh_lahir" id="tarikh_lahir" readonly></div>
                                            <div class="col-md-4">Negeri Lahir</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="negeri_lahir" id="negeri_lahir" readonly></div>
                                            <div class="col-md-4">Jantina</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="jantina" id="jantina" readonly></div>
                                            <div class="col-md-4">No Telefon 1</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="main_phone" id="main_phone" autocomplete="off" placeholder="No Telefon"></div>
                                            <div class="col-md-4">No Telefon 2</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="alternate_phone" id="alternate_phone" autocomplete="off" placeholder="No Telefon"></div>
                                            <div class="col-md-12 ml-4">
                                                <div class="form-group row">
                                                    <div class="form-check form-check-inline">
                                                        <input checked class="form-check-input" type="checkbox" id="warganegara" name="warganegara" value="warganegara">
                                                        <label class="form-check-label" for="warganegara">Warganegara</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input checked class="form-check-input" type="checkbox" id="bumiputera" name="bumiputera" value="bumiputera">
                                                        <label class="form-check-label" for="bumiputera">Bumiputera</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">Agama</div>
                                            <div class="col-md-8">
                                                <select class="form-control" name="agama" id="agama">
                                                    <option selected value="01">Islam</option>
                                                    <option value="02">Hindu</option>
                                                    <option value="03">Buddha</option>
                                                    <option value="04">Kristian</option>
                                                    <option value="05">Lain-lain</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4">Ahli</div>
                                            <div class="col-md-8">
                                                <select class="form-control" name="kumpulan_sahabat" id="kumpulan_sahabat">
                                                    <option value="0">Tidak</option>
                                                    <option value="1">Kumpulan PKINK</option>
                                                    <option value="2">Sahabat</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row form-group">
                                            <div class="col-md-4">Alamat</div>
                                            <div class="col-md-8"><textarea class="form-control" style="resize:none" name="alamat" id="alamat" cols="30" rows="3" placeholder="Alamat Pelanggan"></textarea></div>
                                            <div class="col-md-4">Poskod</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="poskod" id="poskod" autocomplete="off" placeholder="Poskod"></div>
                                            <div class="col-md-4">Daerah</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="daerah" id="daerah" readonly autocomplete="off"></div>
                                            <div class="col-md-4">Negeri</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="negeri" id="negeri" readonly autocomplete="off"></div>
                                            <div class="col-md-4">Umur</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="age" id="age" readonly></div>
                                            <div class="col-md-4">Bangsa</div>
                                            <div class="col-md-8">
                                                <select class="form-control" name="bangsa" id="bangsa">
                                                    <option selected value="M">Melayu</option>
                                                    <option value="C">Cina</option>
                                                    <option value="I">India</option>
                                                    <option value="L">Lain-lain</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4">Bank</div>
                                            <div class="col-md-8">
                                                <select class="form-control" name="bank_name" data-placeholder="Pilih Bank" id="bank_name">
                                                    <option disabled selected value> -- Pilih Bank -- </option>
                                                    @foreach($bank as $banks)
                                                        <option value="{{ $banks['abbreviation'] }}">{{ $banks['name'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-4">No Akaun</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="no_akaun" id="no_akaun" placeholder="No Akaun Bank"></div>
                                            <div class="col-md-4">Tujuan Gadai</div>
                                            @php
                                                $tujuangadai = Http::withOptions(['verify' => config('app.api_verify')])->get($api_url . '/api/tujuangadai')->json();
                                            @endphp
                                            <div class="col-md-8">
                                                <select class="form-control" name="tujuan_gadai" data-placeholder="Pilih Tujuan Gadai" id="tujuan_gadai">
                                                    <option disabled selected value> -- Pilih Tujuan Gadai -- </option>
                                                    @foreach($tujuangadai as $tujuan)
                                                        <option value="{{ $tujuan['keterangan'] }}">{{ $tujuan['keterangan'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-4">Pekerjaan</div>
                                            @php
                                                $pekerjaan = Http::withOptions(['verify' => config('app.api_verify')])->get($api_url . '/api/pekerjaan')->json();
                                            @endphp
                                            <div class="col-md-8">
                                                <select class="form-control" name="pekerjaan" data-placeholder="Pilih Pekerjaan" id="pekerjaan">
                                                    <option disabled selected value> -- Pilih Pekerjaan -- </option>
                                                    @foreach($pekerjaan as $kerja)
                                                        <option value="{{ $kerja['kodkerja'] }}">{{ $kerja['keterangan'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-4">Nota</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="nota" id="nota" placeholder="Nota"></div>
                                        </div>
                                    </div>
                                </div>

                        </div>
                        <div class="modal-footer">
                            <input type="text" hidden name="idtype"  value="nokp">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
                            <input type="submit" name="submit" class="btn btn-primary" id="terima_ic" value="Terima">
                        </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- Modal Passport -->
            <div class="modal fade" id="passport_pelanggan" tabindex="-1" data-backdrop="static"  aria-labelledby="ModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="ModalLabel">Daftar Pelanggan</h5>
                        </div>
                        <div class="modal-body">
                            <form action="{{ route('customer.store') }}" onsubmit="verifycustomerpassport()" method="POST">
                                @csrf
                                <div class="row form-group">
                                    <div class="col-md-6">
                                        <div class="row form-group">
                                            <div class="col-md-4">Nama</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="name" id="passport_name" autocomplete="off" placeholder="Nama"></div>
                                            <div class="col-md-4">No Passport</div>
                                            <div class="col-md-8"><input class="form-control" readonly type="text" name="noic" id="passport_noic" value="{{$noic ?? ''}}"></div>
                                            <div class="col-md-4">Tarikh Lahir</div>
                                            <div class="col-md-8"><input class="form-control" type="text" placeholder="Tarikh Lahir" onchange="calculatePassportAge()" name="tarikh_lahir" id="passport_tarikh_lahir"></div>
                                            <div class="col-md-4">Jantina</div>
                                            <div class="col-md-8">
                                                <select name="jantina" id="jantina_passport" class="form-control">
                                                    <option value="Lelaki" selected>Lelaki</option>
                                                    <option value="Perempuan">Perempuan</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4">No Telefon 1</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="main_phone" id="passport_main_phone" autocomplete="off" placeholder="No Telefon"></div>
                                            <div class="col-md-4">No Telefon 2</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="alternate_phone" id="passport_alternate_phone" autocomplete="off" placeholder="No Telefon"></div>
                                            <div class="col-md-4">Agama</div>
                                            <div class="col-md-8">
                                                <select class="form-control" name="agama" id="passport_agama">
                                                    <option selected value="01">Islam</option>
                                                    <option value="02">Hindu</option>
                                                    <option value="03">Buddha</option>
                                                    <option value="04">Kristian</option>
                                                    <option value="05">Lain-lain</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4">Ahli</div>
                                            <div class="col-md-8">
                                                <select class="form-control" name="kumpulan_sahabat" id="passport_kumpulan_sahabat">
                                                    <option value="0">Tidak</option>
                                                    <option value="1">Kumpulan PKINK</option>
                                                    <option value="2">Sahabat</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row form-group">
                                            <div class="col-md-4">Alamat</div>
                                            <div class="col-md-8"><textarea class="form-control" style="resize:none" name="alamat" id="passport_alamat" cols="30" rows="3" placeholder="Alamat Pelanggan"></textarea></div>
                                            <div class="col-md-4">Poskod</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="poskod" id="passport_poskod" autocomplete="off" placeholder="Poskod"></div>
                                            <div class="col-md-4">Daerah</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="daerah" id="passport_daerah" readonly autocomplete="off"></div>
                                            <div class="col-md-4">Negeri</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="negeri" id="passport_negeri" readonly autocomplete="off"></div>
                                            <div class="col-md-4">Umur</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="age" id="passport_age" readonly></div>
                                            <div class="col-md-4">Bangsa</div>
                                            <div class="col-md-8">
                                                <select class="form-control" name="bangsa" id="passport_bangsa">
                                                    <option selected value="M">Melayu</option>
                                                    <option value="C">Cina</option>
                                                    <option value="I">India</option>
                                                    <option value="L">Lain-lain</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4">Bank</div>
                                            <div class="col-md-8">
                                                <select class="form-control" name="bank_name" data-placeholder="Pilih Bank" id="passport_bank_name">
                                                    <option disabled selected value> -- Pilih Bank -- </option>
                                                    @foreach($bank as $banks)
                                                        <option value="{{ $banks['abbreviation'] }}">{{ $banks['name'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-4">No Akaun</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="no_akaun" id="passport_no_akaun" placeholder="No Akaun Bank"></div>
                                            <div class="col-md-4">Tujuan Gadai</div>
                                            @php
                                                $tujuangadai = Http::withOptions(['verify' => config('app.api_verify')])->get($api_url . '/api/tujuangadai')->json();
                                            @endphp
                                            <div class="col-md-8">
                                                <select class="form-control" name="tujuan_gadai" data-placeholder="Pilih Tujuan Gadai" id="passport_tujuan_gadai">
                                                    <option disabled selected value> -- Pilih Tujuan Gadai -- </option>
                                                    @foreach($tujuangadai as $tujuan)
                                                        <option value="{{ $tujuan['keterangan'] }}">{{ $tujuan['keterangan'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-4">Pekerjaan</div>
                                            @php
                                                $pekerjaan = Http::withOptions(['verify' => config('app.api_verify')])->get($api_url . '/api/pekerjaan')->json();
                                            @endphp
                                            <div class="col-md-8">
                                                <select class="form-control" name="pekerjaan" data-placeholder="Pilih Pekerjaan" id="passport_pekerjaan">
                                                    <option disabled selected value> -- Pilih Pekerjaan -- </option>
                                                    @foreach($pekerjaan as $kerja)
                                                        <option value="{{ $kerja['kodkerja'] }}">{{ $kerja['keterangan'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-4">Nota</div>
                                            <div class="col-md-8"><input class="form-control" type="text" name="nota" id="passport_nota" placeholder="Nota"></div>
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <div class="modal-footer">
                            <input type="text" hidden name="idtype" value="passport">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
                            <input type="submit" name="submit" class="btn btn-primary" id="terima_passport" value="Terima">
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var api_url = "<?php echo $api_url ?>";
    var search = "<?php echo $search ?>";
    var type_id = "<?php echo $idtype ?>";
    var blacklist_search = "<?php echo $blacklist_search ?>";
    $(document).ready(function(){
        $('#passport_tarikh_lahir').datepicker({
            format: 'dd/mm/yyyy',
            endDate: new Date()
        });
        var noic = $('#noic').val();
        identifyIC(noic);

        if(search == true){
            if(blacklist_search == true){
                Swal.fire({
                    icon: 'warning',
                    title: 'Amaran!',
                    text: 'Pelanggan telah disenarai hitamkan dari gadaian'
                });
                event.preventDefault();
                return false;
            }else{
                Swal.fire({
                    icon: 'info',
                    title: 'Pelanggan Tiada Dalam Rekod!',
                    text: 'Sila Daftar Pelanggan'
                });
                event.preventDefault();
                return false;
            }

        }

    });

    function calculatePassportAge(){
        var passport_lahir = $('#passport_tarikh_lahir').val();
        var split_date = passport_lahir.split('/');
        var count_leap_year = countLeapYears(split_date[2],split_date[1],split_date[0]) - 1;

        var start = new Date(split_date[2] + '-' + split_date[1] + '-' + split_date[0]),
            end   = new Date(),
            diff  = new Date(end - start),
            days  = ((diff/1000/60/60/24)- count_leap_year)/365;

        var age = parseInt(days);
        $('#passport_age').val(age);
    }

    function newcustomer(){
        var id_type = $('#customerIDType').val();
        if(id_type=='nokp'){
            $('#daftar_pelanggan').modal('show');
        }else if(id_type=='passport'){
            $('#passport_pelanggan').modal('show');
        }
    }

    $('#warganegara').on('click',function(){
        if(this.checked == false) {
            $('#bumiputera').prop('checked',false);
        }
    });

    $('#bumiputera').on('click',function(){
        if(this.checked) {
            $('#warganegara').prop('checked',true);
        }
    });

    $(document).on("click", ".browse", function() {
        var file = $(this).parents().find(".file");
        file.trigger("click");
    });
    $('input[type="file"]').change(function(e) {
        var fileName = e.target.files[0].name;
        $("#file").val(fileName);

        var reader = new FileReader();
        reader.onload = function(e) {
            // get loaded data and render thumbnail.
            document.getElementById("preview").src = e.target.result;
        };
        // read the image file as a data URL.
        reader.readAsDataURL(this.files[0]);
    });

    $('#poskod').change(function(){
        var poskod = this.value;

        $.ajax({
            method:'GET',
            url:api_url+'/api/poskod/'+poskod,
            success:function(poskod_detail){
                var koddaerah = poskod_detail['koddaerah'];
                var kodnegeri = poskod_detail['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']);
                    }
                });
            }
        });
    });

    $('#passport_poskod').change(function(){
        var poskod = this.value;

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

    function verifycustomer(){
        $("#terima_ic").prop('disabled', true);
        var customername = $('#name').val();
        var customeralamat = $('#alamat').val();
        var customerposkod = $('#poskod').val();
        var customerphone = $('#main_phone').val();
        var customerphone_alternate = $('#alternate_phone').val();
        var age = $('#age').val();
        if(age < 18){
            $("#terima_ic").prop('disabled', false);
            Swal.fire({
                icon: 'error',
                title: 'Amaran!',
                text: 'Umur Pelanggan Tidak Mencukupi 18 Tahun'
            });
            event.preventDefault();
            return false;
        }
        if(customername == ''){
            $("#terima_ic").prop('disabled', false);
            Swal.fire({
                icon: 'error',
                title: 'Amaran!',
                text: 'Sila Masukkan Nama Pelanggan'
            });
            event.preventDefault();
            return false;
        }
        if(customeralamat == ''){
            $("#terima_ic").prop('disabled', false);
            Swal.fire({
                icon: 'error',
                title: 'Amaran!',
                text: 'Sila Masukkan Alamat Pelanggan'
            });
            event.preventDefault();
            return false;
        }
        if(customerposkod == ''){
            $("#terima_ic").prop('disabled', false);
            Swal.fire({
                icon: 'error',
                title: 'Amaran!',
                text: 'Sila Masukkan Poskod'
            });
            event.preventDefault();
            return false;
        }else{
            if(customerposkod.length != 5){
                $("#terima_ic").prop('disabled', false);
                Swal.fire({
                    icon: 'error',
                    title: 'Amaran!',
                    text: 'Sila Periksa Poskod'
                });
                event.preventDefault();
                return false;
            }else{
                if($.isNumeric(customerposkod) == false){
                    $("#terima_ic").prop('disabled', false);
                    Swal.fire({
                        icon: 'error',
                        title: 'Amaran!',
                        text: 'Sila Periksa Poskod'
                    });
                    event.preventDefault();
                    return false;
                }
            }
        }
        if(customerphone == ''){
            $("#terima_ic").prop('disabled', false);
            Swal.fire({
                icon: 'error',
                title: 'Amaran!',
                text: 'Sila Masukkan No Telefon Pelanggan'
            });
            event.preventDefault();
            return false;
        }else{
            if((customerphone.length < 9 || customerphone.length >= 12)){
                $("#terima_ic").prop('disabled', false);
                Swal.fire({
                    icon: 'error',
                    title: 'Amaran!',
                    text: 'Sila Periksa No Telefon Pelanggan'
                });
                event.preventDefault();
                return false;
            }else{
                if($.isNumeric(customerphone) == false){
                    $("#terima_ic").prop('disabled', false);
                    Swal.fire({
                        icon: 'error',
                        title: 'Amaran!',
                        text: 'Sila Masukkan Nombor Sahaja Pada No Telefon Pelanggan'
                    });
                    event.preventDefault();
                    return false;
                }
            }
        }
        if(customerphone_alternate != ''){
            if(customerphone_alternate.length < 8 && customerphone_alternate.length > 12){
                $("#terima_ic").prop('disabled', false);
                Swal.fire({
                    icon: 'error',
                    title: 'Amaran!',
                    text: 'Sila Periksa No Telefon Pelanggan'
                });
                event.preventDefault();
                return false;
            }else{
                if($.isNumeric(customerphone_alternate) == false){
                    $("#terima_ic").prop('disabled', false);
                    Swal.fire({
                        icon: 'error',
                        title: 'Amaran!',
                        text: 'Sila Masukkan Nombor Sahaja Pada No Telefon Pelanggan'
                    });
                    event.preventDefault();
                    return false;
                }
            }
        }
        return true;
    }

    function verifycustomerpassport(){
        $("#terima_passport").prop('disabled', true);
        var customername = $('#passport_name').val();
        var customeralamat = $('#passport_alamat').val();
        var customerposkod = $('#passport_poskod').val();
        var customerphone = $('#passport_main_phone').val();
        var customerphone_alternate = $('#passport_alternate_phone').val();
        var tarikh_lahir = $('#passport_tarikh_lahir').val();
        var age = $('#passport_age').val();

        if(age < 18){
            $("#terima_passport").prop('disabled', false);
            Swal.fire({
                icon: 'error',
                title: 'Amaran!',
                text: 'Umur Pelanggan Tidak Mencukupi 18 Tahun'
            });
            event.preventDefault();
            return false;
        }
        if(customername == ''){
            $("#terima_passport").prop('disabled', false);
            Swal.fire({
                icon: 'error',
                title: 'Amaran!',
                text: 'Sila Masukkan Nama Pelanggan'
            });
            event.preventDefault();
            return false;
        }
        if(tarikh_lahir == ''){
            $("#terima_passport").prop('disabled', false);
            Swal.fire({
                icon: 'error',
                title: 'Amaran!',
                text: 'Sila Masukkan Tarikh Lahir Pelanggan'
            });
            event.preventDefault();
            return false;
        }
        if(customeralamat == ''){
            $("#terima_passport").prop('disabled', false);
            Swal.fire({
                icon: 'error',
                title: 'Amaran!',
                text: 'Sila Masukkan Alamat Pelanggan'
            });
            event.preventDefault();
            return false;
        }
        if(customerposkod == ''){
            $("#terima_passport").prop('disabled', false);
            Swal.fire({
                icon: 'error',
                title: 'Amaran!',
                text: 'Sila Masukkan Poskod'
            });
            event.preventDefault();
            return false;
        }else{
            if(customerposkod.length != 5){
                $("#terima_passport").prop('disabled', false);
                Swal.fire({
                    icon: 'error',
                    title: 'Amaran!',
                    text: 'Sila Periksa Poskod'
                });
                event.preventDefault();
                return false;
            }else{
                if($.isNumeric(customerposkod) == false){
                    $("#terima_passport").prop('disabled', false);
                    Swal.fire({
                        icon: 'error',
                        title: 'Amaran!',
                        text: 'Sila Periksa Poskod'
                    });
                    event.preventDefault();
                    return false;
                }
            }
        }
        if(customerphone == ''){
            $("#terima_passport").prop('disabled', false);
            Swal.fire({
                icon: 'error',
                title: 'Amaran!',
                text: 'Sila Masukkan No Telefon Pelanggan'
            });
            event.preventDefault();
            return false;
        }else{
            if(customerphone.length <= 9 || customerphone.length >= 12){
                $("#terima_passport").prop('disabled', false);
                Swal.fire({
                    icon: 'error',
                    title: 'Amaran!',
                    text: 'Sila Periksa No Telefon Pelanggan'
                });
                event.preventDefault();
                return false;
            }else{
                if($.isNumeric(customerphone) == false){
                    $("#terima_passport").prop('disabled', false);
                    Swal.fire({
                        icon: 'error',
                        title: 'Amaran!',
                        text: 'Sila Masukkan Nombor Sahaja Pada No Telefon Pelanggan'
                    });
                    event.preventDefault();
                    return false;
                }
            }
        }
        if(customerphone_alternate != ''){
            if(customerphone_alternate.length <= 8 && customerphone_alternate.length >= 12){
                $("#terima_passport").prop('disabled', false);
                Swal.fire({
                    icon: 'error',
                    title: 'Amaran!',
                    text: 'Sila Periksa No Telefon Pelanggan'
                });
                event.preventDefault();
                return false;
            }else{
                if($.isNumeric(customerphone_alternate) == false){
                    $("#terima_passport").prop('disabled', false);
                    Swal.fire({
                        icon: 'error',
                        title: 'Amaran!',
                        text: 'Sila Masukkan Nombor Sahaja Pada No Telefon Pelanggan'
                    });
                    event.preventDefault();
                    return false;
                }
            }
        }
        return true;
    }

    function identifyIC(noic){
        if(noic.match(/^(\d{2})(\d{2})(\d{2})-?\d{2}-?\d{4}$/)) {
            var year = noic.slice(0,2);
            var month = noic.slice(2,4);
            var day = noic.slice(4,6);
            var nl = noic.slice(6,8);
            var last_ic = noic.slice(8,12);

            var now = new Date().getFullYear().toString();

            var decade = now.substr(0, 2);
            if (now.substr(2,2) > year) {
                year = parseInt(decade.concat(year.toString()), 10);
            }

            if (parseInt(last_ic,10)%2 != 0){
                var jantina = 'Lelaki';
            }
            else{
                var jantina = 'Perempuan';
            }

            var johor_ic = ['01','21','22','23','24'];
            var kedah_ic = ['02','25','26','27'];
            var kelantan_ic = ['03','28','29'];
            var melaka_ic = ['04','30'];
            var negeri_ic = ['05','31','59'];
            var pahang_ic = ['06','32','33'];
            var penang_ic = ['07','34','35'];
            var perak_ic = ['08','36','37','38','39'];
            var perlis_ic = ['09','40'];
            var selangor_ic = ['10','41','42','43','44'];
            var terengganu_ic = ['11','45','46'];
            var sabah_ic = ['12','47','48','49'];
            var sarawak_ic = ['13','50','51','52','53'];
            var kl_ic = ['14','54','55','56','57'];
            var labuan_ic = ['15','58'];
            var putrajaya_ic = ['16'];
            var unknown_ic = ['82'];

            if(johor_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Johor';
            }else if(kedah_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Kedah';
            }else if(kelantan_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Kelantan';
            }else if(melaka_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Melaka';
            }else if(negeri_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Negeri Sembilan';
            }else if(pahang_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Pahang';
            }else if(penang_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Pulau Pinang';
            }else if(perak_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Perak';
            }else if(perlis_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Perlis';
            }else if(selangor_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Selangor';
            }else if(terengganu_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Terengganu';
            }else if(sabah_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Sabah';
            }else if(sarawak_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Sarawak';
            }else if(kl_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Kuala Lumpur';
            }else if(labuan_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Labuan';
            }else if(putrajaya_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Putrajaya';
            }else if(unknown_ic.indexOf(nl)>=0){
                var negeri_lahir = 'Negeri Tidak Diketahui';
            }
            var date = new Date(year, (month - 1), day, 0, 0, 0, 0);
            var tarikh_lahir_test = date.getFullYear() + '-' + month + '-' + day;

            var count_leap_year = countLeapYears(date.getFullYear(),month,day) - 1;

            var start = new Date(tarikh_lahir_test),
                end   = new Date(),
                diff  = new Date(end - start),
                days  = ((diff/1000/60/60/24)- count_leap_year)/365;

            var age = parseInt(days);
            $('#age').val(age);
            var tarikh_lahir = day + '/' + month + '/' + date.getFullYear();
            $('#jantina').val(jantina);
            $('#tarikh_lahir').val(tarikh_lahir);
            $('#negeri_lahir').val(negeri_lahir);
        }
    }

    var countLeapYears = function(y,m,d){
        var yearNow = new Date().getFullYear(),
            yearThen = y,
            beginYear = 0,
            endYear = 0,
            leapYearCount = 0;

        var isLeapYear = function(year){
            return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
        }

        if(yearNow < y){
            beginYear = yearNow;
            endYear = y;
        }else if(yearNow > y){
            beginYear = y;
            endYear = yearNow;
        }else if(yearNow == y){
            beginYear = y;
            endYear = y;
        }

        for(i = beginYear; i <= endYear; i++){
            if(isLeapYear(i)){
                leapYearCount++;
            }
        }

        return leapYearCount;
    }
    var regex = /^[a-zA-Z0-9]+$/g;

    function verifynokp(){
        var id_type = $('#customerIDType').val();
        var nokp = $('#noic').val();
        if(id_type=='nokp'){
            if($.isNumeric(nokp) == false){
                Swal.fire({
                    icon: 'error',
                    title: 'Amaran!',
                    text: 'Sila Masukkan Nombor Sahaja Pada No KP Pelanggan'
                });
                event.preventDefault();
                return false;
            }
            if(nokp.length != 12){
                Swal.fire({
                    icon: 'error',
                    title: 'Amaran!',
                    text: 'Sila Periksa No KP Pelanggan'
                });
                event.preventDefault();
                return false;
            }
        }else if(id_type=='passport'){
         //   if(nokp.length < 5){
          //      Swal.fire({
        //            icon: 'error',
        //            title: 'Amaran!',
        //            text: 'Sila Periksa Passport Pelanggan'
        //        });
        //        event.preventDefault();
        //        return false;
        //    }
        //    if(nokp.indexOf(' ') > 0){
        //        Swal.fire({
        //            icon: 'error',
        //            title: 'Amaran!',
        //            text: 'Sila Masukkan Passport Tanpa Ruang \'Kosong\' \n e.g(AP1111111)'
        //        });
        //        event.preventDefault();
        //        return false;
        //    }
        //    if(regex.test(nokp) == false){
        //        Swal.fire({
        //            icon: 'error',
        //            title: 'Amaran!',
        //            text: 'Sila Periksa Passport Pelanggan'
        //        });
        //        event.preventDefault();
        //        return false;
        //    }
        }
    }
</script>
<script>
    // mycard-read endpoint initialization
    let mykad_reader_endpoint = "{{ config('mykad-reader.endpoint') }}";
    let wakil_caricustomer_endpoint = "{{ route('wakil.caricustomer') }}"; 

</script>
<script src="{{ asset('js/mykad-reader.js') }}"></script>
@endsection