<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale = 1">
    <meta charset="utf-8">
  	
   	<script src="/assets/admin/plugins/jQuery/jQuery-3.5.1.min.js"></script>
  	<script src="/assets/admin/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/admin/plugins/jeasyui/jquery.easyui.min.js"></script>
    <script src="/assets/admin/plugins/jeasyui/jquery.easyui.mobile.js"></script>

  <link rel="stylesheet" href="/assets/admin/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="/assets/admin/plugins/Font-Awesome/css/all.min.css">
    <link rel="stylesheet" href="/assets/admin/plugins/jeasyui/themes/dishubbi/easyui.css">

    <link rel="stylesheet" href="/assets/admin/dist/css/skins/_all-skins.css">


</head>
<body>
    <div class="containers">
        <div class="boxdaftar" id="daftar">
            <form id="fmswa" method="post" enctype="multipart/form-data">
                <center>
                    <img src="/assets/images/<?php echo FLD_APP; ?>/swa_banhub_logo.png" width="100%">

                    <h3>Lengkapi Form Berikut secara Lengkap & Benar</h3><br />
                </center>

                <div class="fitem">
                    <div style="margin-bottom:5px">
                        <input class="easyui-combobox" style="border-radius:30px;" id='tujuan' name="tujuan" data-options="
                        url: '/tujuancombo',
                        method:'post',
                        queryParams: {'<?php echo csrf_token() ?>': '<?php echo csrf_hash() ?>'},
                        value:'10',
                        valueField:'wilayah_id',
                        textField:'nama',
                        multiple:false,
                        panelHeight:'auto',
                        editable:false,
                        required:true,
                        nowrap:false,
                        width:'100%',
                        prompt:'Pilih Tujuan Mudik',
                        labelPosition:'top',
                        label:'<b><i>TUJUAN MUDIK :</b></i>'
                ">
                    </div>
                    <span class="info" id="itujuan"></span>

                        echo '<input type="hidden" name="tujuan_balik" id="tujuan_balik" values="0">';

                    <br />
                    <span><b><i>KEPALA ROMBONGAN :</i></b></span><br />
                    <div class="boxinfod"></div>

                    <div class="fitem" style="margin-bottom:5px">
                        <input class="easyui-numberbox" id="nik" prompt="NIK (16 karakter)" name="nik" style="width:100%" data-options="required:true,validType:{length:[16,16]}" value="3309050203449001">
                        <span class="info" id="inik"></span>
                    </div>
                    <div class="dl">
                        <div class="fitem" style="margin-bottom:5px">
                            <input class="easyui-textbox" id="nama" name="nama" value="BUDI SANTOSA" prompt="Nama Lengkap" style="width:100%" data-options="required:true,validType:{length:[4,50]}">
                            <span class="info" id="inama"></span>
                        </div>
                        <div class="fitem" style="margin-bottom:5px">
                            <input class="easyui-numberbox" min="17" max="100" id="usia" value="34" name="usia" prompt="Usia" style="width:40%" required="true">
                            <span class="info" id="iusia"></span>
                        </div>

                        <div class="fitem" style="margin-bottom:5px">
                            <input class="easyui-textbox" id="lahir_tempat" prompt="Tempat Lahir" name="lahir_tempat" style="width:100%" value="KLATEN" required="true">
                            <span class="info" id="ilahir_tempat"></span>
                        </div>

                      <div class="fitem" style="margin-bottom:5px">
                            <input class="easyui-textbox" id="pekerjaan" prompt="Pekerjaan" name="pekerjaan" value="PENGEMUDI OJEK" style="width:100%" required="true">
                            <span class="info" id="ipekerjaan"></span>
                        </div>
                      
                        <div class="fitem" style="margin-bottom:5px">
                            <input class="easyui-textbox" id="nowa" name="nowa" style="width:100%" prompt="Nomor WA Aktif" value="085159677604" required="true">
                            <span class="info" id="inowa"></span>
                        </div>
                    </div>

                    <div class="dl">
                        <?php include("testpedadetil.php"); ?>
                    </div>

                    <center>
                        <div style="margin-top:30px"></div>
                        <a href="#" onclick="kirimkantestpeda()">
                            <button id="kirim" type="button" class="btn btn-primary" style="font-size:20px;width:180px;border-radius:5px;">Simpan</button></a>
                    </center>
                </div>
                <center>
                    <div style="margin-top:10px"></div>
                    <a href="/swa">
                        <button id="batal" type="button" class="btn btn-secondary" style="font-size:20px;width:180px;border-radius:5px;background-color:#ccc;">Batalkan</button></a>
                </center>

            </form>


        </div>
    </div>
    <div class="box overlay"></div>

    </div> <!--of containers-->

<script>
        $(document).ready(function() {
//            $('.overlay').css('display', 'none');
});


        function kirimkantestpeda() {
            $('#fmswa').form('submit', {
                url: '/kirimkantestpeda',
                onSubmit: function(param) {
                    param.csrftoken_erb2021 = '<?= csrf_hash() ?>';
                    return $(this).form('validate');
//                    $('.overlay').css('display', 'inline');
                },

                success: function(data) {
                    var respon = $.parseJSON(data);
                    //alert(respon.infon);
                    if (respon.valid == 0) {
                        cinfo = respon.info;
                        if (respon.info.filenyaktp !== undefined)
                            cinfo += '<br/>Data KTP : ' + respon.info[11].filenyaktp;
                        cinfo += ' ' + respon.error.message;
                        if (cinfo !== '') {
                            $('.boxinfod').html(cinfo);
                            $('.boxinfod').show(500);
                        }
                    } else {

                        window.location.replace("/testpeda");
                        //window.location.replace("/swadaftarsukses/" + respon.koded);
                    }
//                    $('.overlay').css('display', 'none');

                }

            });
        }


        function infosukses(k)
        //    function infosukses(k,nok,nik,nama,p)
        {
            console.log(k);
            html = "KODE DAFTAR : <span style='color:#EA3333;font-weight:bold;font-size:30px;'>" + k.koded + "</span>";
            $('#pendaftar').html(html);

        }

        function tutup() {
            location.reload();
        }

        function hitungkuota() {
            $.ajax({
                type: 'post',
                url: "<?php echo base_url(); ?>/hitungkuota",
                data: {
                    "<?= csrf_token() ?>": "<?= csrf_hash() ?>"
                },
                success: function(data) {
                    var respon = $.parseJSON(data);
                    html = '<table width="100%"><tr><th colspan="2" style="text-align:center">SISA KUOTA</th></tr>';
                    var respon = $.parseJSON(data);
                    if (respon.kuota[1] <= 0) html += '<tr><td>BUS</td><td><b>HABIS</b></td></tr>';
                    else html += '<tr style="border-bottom:1px solid white;padding:2px"><td>BUS</td><td><b>' + respon.kuota[1] + '</b></td></tr>';
                    $.each(respon.kuota.kuotak, function(index, val) {
                        html += '<tr style="border-bottom:1px solid white;padding:2px"><td>' + val.tujuan + '</td><td><b>' + (val.kuota - val.daftar) + '</b></td></tr>';
                    });
                    $('.boxinfo').html(html);
                }

            });

        }
    </script>
    <style>
        body {
            background-color: #B90049 !important;

        }
        .containers {
            color : #fff !important;
        }
        input {
            width: 100% !important;
            color:#000 !important;
            border-color: #FFA3D1 !important;
            border-width: 1px;
            height: 30px;
        }

        .numberbox {
            border-color: #FFA3D1 !important;

        }

        .textbox {
            border-color: #FFA3D1 !important;

        }

        .containers {
            position: relative;
            margin: 30px;
        }

        .boxinfod {
            display: none;
            position: absolut;
            margin-top: 15px;
            border-radius: 5px;
            border-style: dotted;
            background-color: #EFCF84;
            opacity: .9;
            border-width: 2px;
            border-color: #FFA3D1;
            padding: 10px;
            margin-bottom: 30px;
            margin-left: 20px;
            width: 95%;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

        }

        .box {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.9;
            background: #0057e3;
        }

        .overlay {
            display: none;
            z-index: 9;
            margin: 0px;
            background: #ccc;
        }

        .overlay:after {
            content: " ";
            display: block;
            border-radius: 50%;
            width: 30%;
            height: 30%;
            margin: auto;
            margin-top: 50%;
            box-sizing: border-box;
            border: 16px solid #fff;
            border-color: #FFA3D1 transparent #88f transparent;
            animation: overlay 1.2s infinite;
        }

        @keyframes overlay {
            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);
            }
        }

        input {
            margin-top: 5px !important;
        }
    </style>


</body>

</html>