<div class="boxdaftar" id="status">
    <?php //include("stepstatus.php"); 
    ?>
    <center>
        <h1>Masukkan Nomor WA dan NIK untuk cek Status</h1><br />
    </center>
    <div style="margin-top:40px;"></div>
    <form id="fmswas" method="post" enctype="multipart/form-data">
        <label for="nowa" style="width:90px"><span id="lnowa">Nomor WA:</span></label>
        <input type="text" id="nowad" name="nowad" style="width:200px">
        <span class="info" id="inowa"></span>
        <label for="niks" style="width:90px">NIK:</label>
        <input type="text" id="niks" name="niks" style="width:300px">
        <span class="info" id="iniks"></span>
        <div style="margin-top:20px;"></div>
        <div class="lds-hourglass"></div>

        <center>
            <div style="margin-top:50px"></div>

            <a href="#" onclick="batalkan()">
                <button id="batal" type="button" class="btn btn-secondary" style="font-size:25px;width:125px;border-radius:20px;">Kembali</button></a>
        </center>
    </form>
    <div id="istatus"></div>

    <form id="tolengkapi" method="post" action="/lengkapi" class="inline">
        <input type="hidden" name="koded" value="1555">
    </form>



</div>

<script>
    $('#niks').on('input', function(e) {
        $('#istatus').hide(100);
        var nikl = $('#niks').val().length;
        if (nikl == 16) {
            $('.lds-hourglass').css('display', 'inline-block');
            //check status pendaftar
            thenik = $('#niks').val();
            thenowa = $('#nowad').val();
            $.ajax({
                type: 'post',
                url: "/cekkoded",
                data: {
                    thenik: thenik,
                    thenowa: thenowa,
                    "<?= csrf_token() ?>": "<?= csrf_hash() ?>"
                },
                success: function(data) {
                    $('.lds-hourglass').css('display', 'none');
                    var respon = $.parseJSON(data);
                    thekoded = respon.koded;
                    //console.log(respon);
                    if (respon.adadata == 1) {
                        if (respon.status == 1) {
                            $('#status').hide(200);
                            daftardetilu(respon.pemudik);
                        } else if (respon.status == 2) {
                            $('#status').hide(100);
                            $('#daftardetilok').show(500);
                            $('#pemudikall').html(respon.pemudikall);
                            $('#statusnow').html(respon.statusnow);
                            $('#kodeds').val(thekoded);

                        } else if (respon.status == 3) {
                            //cetak e-Tiket
                            $('#status').hide(100);
                            $('#daftardetilok').show(500);
                            $('#pemudikall').html(respon.pemudikall);
                            $('#statusnow').html(respon.statusnow);
                            var html = '<b>e-TIKET Telah Terbit</b><br/>';
                            html += 'Silakan di unduh, atau pada saat Mudik, tunjukkan melalui aplikasi ';
                            html += '<a href="/etiketcetak/' + thekoded + '"><button type="button" class="btn btn-warning">unduh e-TIKET</button></a>';

                            $.each(respon.dataqr, function(index, val) {
                                html += '<center><a href="/assets/etiket/' + val['etiket'] + '.png" target="_blank"><img src="' + '/assets/etiket/' + val['etiket'] + '.png" width="140px"></img></a><br/><br/><br/></center>';

                            });

                            html += '<B>TUJUAN : ' + respon.dataqr[0]['tujuan'] + '<br/>';
                            html += '<B>NOMOR BUS : ' + respon.dataqr[0]['nobus'] + '<br/>';
                            html += '<B>NAMA BUS : ' + respon.dataqr[0]['namabus'] + '<br/>';
                            html += '<B>NO POL BUS : ' + respon.dataqr[0]['nopol'] + '<br/>';
                            html += '<B>BERANGKAT : ' + respon.dataqr[0]['berangkat_tgl'] + '<br/>';
                            html += '<B>TEMPAT KUMPUL : ' + respon.dataqr[0]['tempatkumpul'] + '<br/>';

                            $('#qranda').html(html);
                            console.log(respon.dataqr);

                            $('#kodeds').val(thekoded);






                        } else if (respon.status == 9) {
                            $('#c1').removeClass().addClass("stepper-item completed");
                            $('#c2').removeClass().addClass("stepper-item completed");
                            cinfo = '<center><b>INFORMASI PENGISIAN</b></center><br/>';
                            cinfo += 'Mohon Maaf, anda tidak lolos Verifikasi dan Validasi<br/>';
                            cinfo += 'Terimakasih';
                            $('#istatus').html(cinfo);
                            $('#istatus').show(1000);


                        }



                    } else {
                        $('#c1').removeClass().addClass("stepper-item");
                        $('#c2').removeClass().addClass("stepper-item");
                        $('#c3').removeClass().addClass("stepper-item");
                        $('#c4').removeClass().addClass("stepper-item");
                        cinfo = '<center><b>INFORMASI PENGISIAN</b></center><br/>';
                        cinfo += 'Kombinasi NIK dan NOMOR WA tidak dikenal<br/>';
                        cinfo += 'Terimakasih';
                        $('#istatus').html(cinfo);
                        $('#istatus').show(1000);



                    }

                }

            });
        }

    });
</script>

<style>
    #status {
        margin-top: 50px !important
    }

    .lds-hourglass {
        /*display: inline-block;*/
        display: none;
        position: relative;
        width: 30px;
        height: 30px;
    }

    .lds-hourglass:after {
        content: " ";
        display: block;
        border-radius: 50%;
        width: 0;
        height: 0;
        margin: 2px;
        box-sizing: border-box;
        border: 16px solid #fff;
        border-color: #88f transparent #88f transparent;
        animation: lds-hourglass 1.2s infinite;
    }

    @keyframes lds-hourglass {
        0% {
            transform: rotate(0);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        }

        50% {
            transform: rotate(900deg);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }

        100% {
            transform: rotate(1800deg);
        }
    }
</style>