<?php echo $this->extend('/template'); ?>
<?php echo $this->section('content') ?>

<head>
    <title>ATUR ARMADA</title>
    <script>
        var baseUrl = "<?php echo base_url(); ?>";
        var siteUrl = "<?php echo site_url(); ?>";
    </script>
</head>

<?php
//header('Access-Control-Allow-Origin: *');
//header("Access-Control-Allow-Methods: GET, OPTIONS");
?>


<div class="rows">
    <div class="col-sm-7">
        <h3>tunjuk
            <img src="<?php echo base_url(); ?>/assets/images/pemprovsmr/header_icon.png" width="35px">&nbsp;<b>1. PENGATURAN ARMADA
            </b>
        </h3>
    </div>
    <div class="col-sm-5">
        <span id="potensitotal"></span>
    </div>
</div>

<div class="row">
    <div class="col-sm-7">
        <i><b>CATATAN:</b>Kolom Jumlah Pemudik adalah Jumlah Calon Pemudik yang telah melalui verifikasi dan berstatus: Verified.<br/>Tabel Armada adalah daftar Armada yang berstatus : Aktif</i>
        <table id="dg" title="TUJUAN MUDIK" class="easyui-datagrid" style="width:100%;height:600px" url="/tujuantdata" rownumbers="true" fitColumns="true" singleSelect="true" data-options=" pagination:false, scrollbarSize:0, pageSize:20, noWrap:false, queryParams: {'<?php echo csrf_token() ?>': '<?php echo csrf_hash() ?>'},">
            <thead>
                <tr>
                    <th field="nama" width="40" align="left">KOTA TUJUAN</th>
                    <th field="potensi" width="30" align="center" data-options="formatter:cellStyler">JUMLAH<BR />PEMUDIK</th>
                    <th field="kurangsisa" width="30" align="center" data-options="formatter:cellStyler3">KURANG/SISA<BR />SEAT</th>
                    <th field="armada" width="50" align="center" data-options="formatter:cellStyler2">ARMADA</th>
                    <!--
                    <th field="buatetiket" width="30" align="center">BUAT<br/>e-TIKET</th>
                    -->
                </tr>
            </thead>
        </table>


    </div>
    <div class="col-sm-5">
        <br/><br/>
        <table id="dgarmada" title="ARMADA" class="easyui-datagrid" style="width:100%;height:600px" url="/armadatdata" toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true" data-options=" pagination:true, scrollbarSize:0, nowrap:false, remoteFilter:true, pageSize:20, noWrap:false, queryParams: {'<?php echo csrf_token() ?>': '<?php echo csrf_hash() ?>'},">
            <thead>
                <tr>
                    <th field="perusahaan" width="50" align="left">PERUSAHAAN</th>
                    <th field="nama" width="50" align="left">NAMA ARMADA</th>
                    <th field="nopol" width="40">NO PLAT</th>
                    <th field="jenist" width="30">JENIS</th>
                    <th field="kapasitas" width="30" align="center">KAP</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<br /><br />
<h3>
    <img src="<?php echo base_url(); ?>/assets/images/pemprovsmr/header_icon.png" width="35px">&nbsp;<b>2. BUAT e-TIKET
    </b>
</h3>
<div class="row">
    <div class="col-sm-8">
        <b>Catatan : </b><br />
        <ol>
            <li>Menu ini akan melakukan pembuatan e-TIKET untuk seluruh Warga yang telah di alokasikan Kendaraannya pada langkah 1</li>
            <li>Jika ada perubahan/update Penempatan, maka menu ini harus di ulang lagi agar terjadi Update</li>
        </ol>
        <br/>
        <div id="infotiket"></div>
    </div>
    <div class="col-sm-4">
        <center><a href="javascript:void(0)" class="btn btn-primary" onclick="etiket()" style="width:150px;height:35px;">BUAT e-TIKET</a>
        </center>
    </div>
</div>
<hr />
<h3>
    <img src="<?php echo base_url(); ?>/assets/images/pemprovsmr/header_icon.png" width="35px">&nbsp;<b>FINALISASI
    </b>
</h3>

<form id="fm" method="post" novalidate>
    <div class="row">
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-6">
                    <div id="finalisasi" class="easyui-panel" title="KEBERANGKATAN BUS" style="width:100%;height:200px;padding:10px;">
                        <div style="margin-top:10px"></div>
                        <input name="tglberangkatb" class="easyui-datebox" label="Tanggal Keberangkatan" labelPosition="left" labelWidth="180px" required="true" data-options="width:'100%',formatter:myformatter,parser:myparser">
                        <div style="margin-top:10px"></div>
                        <input name="jamberangkatb" class="easyui-textbox" label="Jam Keberangkatan" labelPosition="left" labelWidth="180px" required="true" data-options="width:'100%'">
                        <div style="margin-top:10px"></div>
                        <input name="tptkumpulb" class="easyui-textbox" label="Tempat Berkumpul" labelPosition="left" labelWidth="180px" required="true" data-options="width:'100%'">

                    </div>
                </div>
                <div class="col-sm-6">
                    <div id="finalisasi" class="easyui-panel" title="KEBERANGKATAN KERETA" style="width:100%;height:200px;padding:10px;">
                        <div style="margin-top:10px"></div>
                        <input name="tglberangkatk" class="easyui-datebox" label="Tanggal Keberangkatan" labelPosition="left" labelWidth="180px" required="true" data-options="width:'100%',formatter:myformatter,parser:myparser">
                        <div style="margin-top:10px"></div>
                        <input name="jamberangkatk" class="easyui-textbox" label="Jam Keberangkatan" labelPosition="left" labelWidth="180px" required="true" data-options="width:'100%'">
                        <div style="margin-top:10px"></div>
                        <input name="tptkumpulk" class="easyui-textbox" label="Tempat Berkumpul" labelPosition="left" labelWidth="180px" required="true" data-options="width:'100%'">

                    </div>

                </div>
            </div>
        </div>
        <div class="col-sm-4">

            <center>
                <a href="javascript:void(0)" class="btn btn-primary" onclick="finalisasi()" style="width:150px;height:35px;">FINALISASI</a>
                </form>
                <br/><br/>
                <form id="fmu" method="post" novalidate>
                <a href="javascript:void(0)" class="btn btn-primary" onclick="unfinalisasi()" style="width:150px;height:35px;">BATALKAN FINALISASI</a>
                </form>

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






<script>
    $(document).ready(function() {

        potensitotal();
    });

    function etiket() {
        dg = $('#dg').datagrid('getData');
        //alert(dg.rows[0].nama);
        //console.log(dg);
        $.each(dg.rows, function(index, value) {
            console.log(value);
            //cari yang sudah terisi penuh 
            //ditandai dengan 
            //if (value.potensi !== '0' ) {
            if (value.kap !== '' ) {
                if (value.kurangsisa >= 0) {
                    //console.log(value.nama);
                    buatetiket(value.wilayah_id);
                }
            }

        });
        console.log("oke");
    }

    function buatetiket(wid) {
        //alert(wid);
        $.ajax({
            type: 'post',
            url: "<?php echo base_url(); ?>/buatetiket",
            data: {
                "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
                'wilayah_id': wid
            },
            success: function(data) {
                var respon = $.parseJSON(data);
                console.log(respon);
                html = $('#infotiket').html();
                html += '<br/>'+ 'PROSES e-TIKET : ' + respon.data.nama + ' <b>OK</b>';
                $('#infotiket').html(html);

            }

        });


    }

    function finalisasi() {
        $('#fm').form('submit', {
            url: "/finalisasi",
            onSubmit: function(param) {
                param.csrftoken_erb2021 = '<?= csrf_hash() ?>';
                return $(this).form('validate');
            },
            success: function(result) {
                    alert('sukses');
            }
        });
    }

    function unfinalisasi() {
        $('#fmu').form('submit', {
            url: "/unfinalisasi",
            onSubmit: function(param) {
                param.csrftoken_erb2021 = '<?= csrf_hash() ?>';
                return $(this).form('validate');
            },
            success: function(result) {
                    alert('sukses');
            }
        });
    }



    function mapmudik(wid) {
        var aTag = $("#sah");
        $('html,body').animate({
            scrollTop: aTag.offset().top
        }, 3000);
    }





    function potensitotal() {
        $.ajax({
            type: 'post',
            url: "<?php echo base_url(); ?>/rekap",
            data: {
                "<?= csrf_token() ?>": "<?= csrf_hash() ?>"
            },
            success: function(data) {
                var respon = $.parseJSON(data);
                console.log(respon);
                html = '<table class="rekapmudik">';
                html += '<tr><th>JML PEMUDIK</th><th>TOTAL ARMADA</th><th>TOTAL SEAT</th><th>ARMADA TERPAKAI</th><th>SISA ARMADA</th><th>ARMADA CADANGAN</th></tr>';
                html += '<tr><td>' + respon.pemudik + '</td><td>' + respon.totarmada + '</td><td>' + respon.totseat + '</td><td>' + respon.totarmada_terpakai + '</td><td>' + respon.totarmada_sisa + '</td><td>' + respon.totarmada_cadangan + '</tr></table>';
                $('#potensitotal').html(html);
                //$('#potensitotal').html('Jumlah potensi Pemudik : ' + respon.total);
            }

        });

    }



    function statusupdate(id, st) {
        $.ajax({
            type: 'post',
            url: "<?php echo base_url(); ?>/statusupdate",
            data: {
                id: id,
                st: st,
                "<?= csrf_token() ?>": "<?= csrf_hash() ?>"
            },
            success: function(data) {
                var respon = $.parseJSON(data);
                console.log(respon);
                $('#dg').datagrid('reload'); // reload the user data

            }

        });

    }



    function cellStyler(val, row) {
        if (val <= 0)
            return;
        else
            return '<span style="color:#000;font-size:20px;font-weight:bold">' + val + '</span>';
    }

    function cellStyler2(val, row) {
        if (row.armada)
            return '<span style="color:#000;font-size:16px;font-weight:bold">' + val + '</span>';
    }

    function cellStyler3(val, row) {
        if (row.kurangsisa < 0)
            return '<span style="color:#000;font-size:20px;font-weight:bold;border-style:solid;padding:10px 10px 10px 10px;border-color:red;background-color:red;color:#fff;">-' + val + '</span>';
        else if (row.kurangsisa > 0)
            return '<span style="color:#000;font-size:20px;font-weight:bold">' + val + '</span>';
        else return '';
    }
</script>

<script>
    $('#dgarmada').datagrid({
        onDblClickRow: function(index, field, value) {
            var rowdg = $('#dg').datagrid('getSelected');
            if (!rowdg) {
                alert("Sila klik Kota Tujuan terlebih dulu");
                return;
            }
            wilayah_id = rowdg.wilayah_id;
            $.ajax({
                type: 'post',
                url: baseUrl+'/tunjukar',
                headers: {'X-Requested-With': 'XMLHttpRequest'},
                data: {
                    "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
                    'data': field,
                    'wilayah_id': wilayah_id
                },
                
                success: function(data) {
                    //var respon = $.parseJSON(data);
                    $('#dgarmada').datagrid('reload');
                    $('#dg').datagrid('reload');
                    potensitotal();
                }

            });

        }
    });
</script>

<script type="text/javascript">
    $('#dg').datagrid({
        view: detailview,
        detailFormatter: function(index, row) {
            var html = '<div class="ddv" style="padding:5px 0"></div>';
            return html;
        },
        onExpandRow: function(index, row) {
            var ddv = $(this).datagrid('getRowDetail', index).find('div.ddv');
            ddv.panel({
                height: 'auto',
                border: false,
                cache: false,
                href: '/aturdetil/' + row.wilayah_id,
                onLoad: function() {
                    $('#dg').datagrid('fixDetailRowHeight', index);
                }
            });
            $('#dg').datagrid('fixDetailRowHeight', index);
        }
    });

    function hapusdet(a, w) {
        $.ajax({
            type: 'post',
            url: "<?php echo base_url(); ?>/hapusdet",
            data: {
                "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
                'a': a,
                'w': w
            },
            success: function(data) {
                //var respon = $.parseJSON(data);
                $('#dgarmada').datagrid('reload');
                $('#dg').datagrid('reload');
            }

        });



    }

    function myformatter(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        return (d < 10 ? ('0' + d) : d) + '-' + (m < 10 ? ('0' + m) : m)+ '-' + y ;
    }

    function myparser(s) {
        if (!s) return new Date();
        var ss = (s.split('-'));
        var y = parseInt(ss[2], 10);
        var m = parseInt(ss[1], 10);
        var d = parseInt(ss[0], 10);
        if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
            return new Date(y, m - 1, d);
        } else {
            return new Date();
        }
    }


</script>


<style>
    #potensitotal {
        font-size: 13px;
        font-weight: bold;
        color: #ad7a0d;
        float: right;
        padding-right: 10px;
    }

    table.rekapmudik {
        border-style: solid;
        padding: 5px;
        border-width: 1px;
        margin-bottom: 10px;
        margin-right: 0px;
    }

    .rekapmudik th,
    td {
        border-style: solid;
        border-width: 1px;
        padding: 5px;
        text-align: center;
    }

    .rekapmudik td {
        font-size: 18px;
        font-weight: bold;
        background-color: #f4edde;
    }

    .rekapmudik th {
        background-color: #888;
        color: #fff;
    }

    #sah {
        min-height: 700px;
    }

    <?php echo $this->endSection() ?>