<!DOCTYPE html>
<html>

<head>

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-9C6BXEM9F9"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'G-9C6BXEM9F9');
    </script>

    <meta charset="utf-8">
    <title>PEDAMATENG</title>
    <meta name="viewport" content="width=device-width, initial-scale = 1">
    <link rel="stylesheet" href="<?php echo base_url(); ?>/assets/admin/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="<?php echo base_url(); ?>/assets/admin/plugins/Font-Awesome/css/all.min.css">

    <link rel="stylesheet" href="<?php echo base_url(); ?>/assets/admin/dist/css/style.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
  folder instead of downloading all of them to reduce the load. -->

    <link rel="stylesheet" href="<?php echo base_url(); ?>/assets/admin/dist/css/skins/_all-skins.css">


    <link rel="stylesheet" href="<?php echo base_url(); ?>/assets/admin/plugins/jeasyui/themes/icon.css">

    <link rel="stylesheet" href="<?php echo base_url(); ?>/assets/admin/plugins/Font-Awesome/css/all.min.css">

    <script src="<?php echo base_url(); ?>/assets/admin/plugins/jQuery/jQuery-3.5.1.min.js"></script>
    <script src="<?php echo base_url(); ?>/assets/admin/plugins/jeasyui/jquery.easyui.min.js"></script>
    <script src="<?php echo base_url(); ?>/assets/admin/bootstrap/js/bootstrap.min.js"></script>

</head>

<body style="padding:10px">
    <center>

        <br />
        <img src="/assets/images/<?php echo FLD_APP; ?>/swa_banhub_logo.png" width="100%">
        <div style="margin-top:10px;"></div>

        <?php
        if ($jns == '0') {
            echo '<h3>KLAIM KUOTA<br/>BERHASIL</h3></b>';
            echo 'TUJUAN : ' . $data[0]['tujuan'];
        ?>

    </center>
    <div style="margin-top:10px"></div>
    <center>
        <table class="table">
            <tr>
                <th>NO</th>
                <th>NIK</th>
                <th>NAMA</th>
            </tr>
            <?php
            $i = 1;
            $rombongan = 0;
            foreach ($data as $k => $v) {
                echo '<tr><td style="text-align:center">' . $i . '</td><td>' . $v['nik'] . '</td><td>' . $v['nama'] . '</td></tr>';
                $i++;
                if ($v['usia'] > 3) $rombongan++;
            }
            ?>
        </table>
    </center>

<?php
            echo '<center><span class="catatan">Silahkan upload KTP/KIA/KK dan dokumen bukti pekerjaan yang disyaratkan pada menu <b>CEK STATUS</b><br/>
Anda diberikan waktu 1x24 jam untuk mengupload, apabila melewati batas maka pendaftaran otomatis dibatalkan<br/>Pastikan Dokumen yang terupload dapat terlihat dengan jelas';
        } else {
            echo "<h3>STATUS : </h3><h4>Status masih menunggu di Verifikasi, silakan cek secara Berkala)</h4><br>";
            if ($balik == 0)
                echo ' TUJUAN : ' . $data[0]['tujuan'] . '<br><br>';
            else
                echo ' ASAL : ' . $data[0]['tujuan'] . '<br><br>';

            echo '<form id="fmswa" method="post" enctype="multipart/form-data">';
            echo   ' <table class="table">';
            echo    '<tr>
                <th width="5%">NO</th>
                <th width="40%">NIK/NAMA</th>
                <th width="55%">UPLOAD</th>
            </tr>';

            $i = 1;
            foreach ($data as $k => $v) {
                echo '<tr><td style="text-align:center">' . $i . '</td><td>' . $v['nik'] . '<br>' . $v['nama'] . '</td><td>' . $v['dd'] . $v['ddb'] . '</td></tr>';
                $i++;
            }
            echo '</table></form>';

            echo '<center>';
            echo '<div style="margin-top:30px"></div>
            <a href="#" onclick="uploaddd()">
                <button id="kirim" type="button" class="btn btn-primary" style="font-size:17px;width:190px;border-radius:20px;">Upload Dokumen</button></a>
            </center>';

            //echo '<br><center><span class="catatan">Silakan Upload Kelengkapan Dokumen berupa<br><b>KTP dan SERTIFIKAT VAKSIN</b><br>(<i>per Orang 1 File Dokumen berisi KTP dan Sertifikat Vaksin</i>)<br>';
            //echo 'Untuk upload Kelengkapan Dokumen ini, anda memiliki waktu 3 hari terhitung sejak terdaftar tanggal : ' . tgl_indoo(date($data[0]['status_tgl'])) . '<br>';
            //echo '<b>Jika dalam waktu 3 hari tidak mengUpload Dokumen Kelengkapan, maka Pendaftaran otomatis dinyatakan BATAL</b><br></span>';
            //echo '<b>Gunakan menu "CEK STATUS", untuk melakukan proses upload Kelengkapan Dokumen</b></center>';

            echo '<br/>Pastikan foto/dokumen yang Anda upload <b>dapat terlihat dengan jelas (maksimal ukuran 5MB)</b><br/>';
            echo 'Anda diberikan batas waktu melakukan upload persyaratan selama <b>1x24 jam</b>.<br/>';
            echo 'Apabila melewati batas waktu, maka pendaftaran <b>otomatis dibatalkan</b>';
        }

?>

<center>
    <div style="margin-top:30px"></div>
    <a href="#" onclick="batalpesan('<?php echo $koded; ?>','<?php echo $rombongan; ?>','<?php echo $data[0]['wilayah_id']; ?>')">
        <button id="batalpesan" type="button" class="btn btn-danger" style="font-size:20px;width:200px;border-radius:20px;">Batalkan Pesanan</button></a>
</center>
<center>
    <div style="margin-top:10px"></div>
    <a href="#" onclick="batalkan()">
        <button id="bataldetil" type="button" class="btn btn-secondary" style="font-size:20px;width:200px;border-radius:20px;background-color:#ccc;">Tutup</button></a>
</center>

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


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



    function uploaddd() {
        $('.overlay').css('display', 'inline');

        $('#fmswa').form('submit', {
            url: '<?php echo base_url(); ?>/Swa/uploaddd',
            onSubmit: function(param) {
                param.csrftoken_erb2021 = '<?= csrf_hash() ?>';
                param.koded = '<?php echo $koded; ?>';
                return $(this).form('validate');
            },

            success: function(data) {
                $('.overlay').css('display', 'none');
                var respon = $.parseJSON(data);
                console.log(respon);

                window.location.replace("/swadaftarsukses/" + respon.koded + "/1");

            }

        });
    }



    function cekdata(k, n) {
        $.ajax({
            type: 'post',
            url: "<?php echo base_url(); ?>/cekkoded",
            data: {
                "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
                thenik: n,
                thenowa: k,
            },
            success: function(data) {
                var respon = $.parseJSON(data);
                console.log(respon);

                $('.boxinfod').html(respon.pemudikall);

            }

        });

    }

    function batalkan() {
        window.location.replace('<?php echo base_url(); ?>' + "/swa");

    }

    function batalpesan(k, j, t) {
        $.messager.confirm('', '<b>Kalau anda yakin ingin membatalkan pesanan, silakan klik tombol "OK"?', function(r) {
            if (r) {
                $.post('/batalpesan', {
                    k: k,
                    j: j,
                    t: t,
                    "<?= csrf_token() ?>": "<?= csrf_hash() ?>"
                }, function(result) {
                    if (result.success) {
                        batalkan();

                    } else {
                        $.messager.show({ // show error message
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    }
                }, 'json');
            }
        });
    }
</script>




<style>
    body {
        background-color: #B90049 !important;
        color: #fff !important;

    }

    .nodaf {
        font-size: 20px;
        color: #666;
        text-align: center;
        font-weight: bold;
    }

    table.pdftr {
        border-style: solid;
        border-width: 2px;
        border-color: #ccc;
        background-color: #DAC787;
        padding: 10px;
    }

    table.pdftr td {
        border-style: solid;
        border-width: 2px;
        border-color: #ccc;
        padding: 10px;
    }

    .table {
        background-color: #DB3D78;

    }

    .checkbox {
        display: inline-flex;
        cursor: pointer;
        position: relative;
    }

    .checkbox>span {
        color: #34495E;
        padding: 0.5rem 0.25rem;
    }



    .checkbox>input {
        height: 25px;
        width: 25px;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        border: 1px solid #34495E;
        border-radius: 4px;
        outline: none;
        transition-duration: 0.3s;
        background-color: #41B883;
        cursor: pointer;
    }

    .checkbox>input:checked {
        border: 1px solid #41B883;
        background-color: #34495E;
    }

    .checkbox>input:checked+span::before {
        content: '\2713';
        display: block;
        text-align: center;
        color: #41B883;
        position: absolute;
        left: 0.7rem;
        top: 0.2rem;
    }

    .checkbox>input:active {
        border: 2px solid #34495E;
    }

    .nodaf {
        font-size: 40px;
        color: #666;
        text-align: center;
        font-weight: bold;
    }

    .statusheader {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        margin-top: 25px;
        margin-bottom: 20px;
        background-color: rgba(242, 224, 184, 0.8);
        width: 100%;
        float: left;
    }

    .dialog-button {
        text-align: center;
        font-size: 20px;
    }

    .l-btn-text {
        margin-left: 20px;
    }

    .catatan {
        font-size: 15px;
        color: #eee;
    }


    .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: #88f 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 {
    width: 70px;
    overflow:hidden;
    }*/


    input[type=file] {
        width: 150px;
        /*        color: transparent;*/
    }
</style>