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

<head>
    <title>
        <?php echo $balik == 0 ? "TUJUAN MUDIK" : "ASAL WILAYAH"; ?>
    </title>

</head>
<div class="rows">
    <div class="col-sm-7">
        <h3>
            <img src="<?php echo base_url(); ?>/assets/images/pemprovsmr/header_icon.png" width="35px">&nbsp;<b>
            <?php echo $balik == 0 ? "TUJUAN MUDIK" : "ASAL WILAYAH"; ?>
            </b>
        </h3>
    </div>
    <div class="col-sm-5">
        <div id="rekap" style="text-align:right">REKAPITULASI</div>
    </div>
</div>


<table id="dg" title="<?php echo $balik == 0 ? "TUJUAN MUDIK" : "ASAL WILAYAH"; ?>
" class="easyui-datagrid" style="width:100%;height:auto" url="/wilayah_data" toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true" 
data-options="
                queryParams: {'<?php echo csrf_token() ?>': '<?php echo csrf_hash() ?>','balik':'<?php echo $balik; ?>'},

                ">
    <thead>
        <tr>
            <th field="kode" width="10">KODE WILAYAH</th>
            <th field="nama" width="40">NAMA WILAYAH</th>
            <th field="kapasitas" width="10" align="center">KAPASITAS</th>
            <th field="reserve" width="10" align="center">DICADANGKAN</th>
            <th field="counter" width="10" align="center">TERPAKAI</th>
            <th field="sisa" width="10" align="center">SISA KUOTA</th>
            <th field="statust" width="10" align="center">STATUS</th>
            <th field="aksi" width="10" align="center">AKSI</th>
        </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="wilayah_baru()"><?php echo $balik == 0 ? "Tujuan Baru" : "Asal Wilayah baru";  ?></a>
    <!--
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="wilayah_edit()">Edit Tujuan</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="wilayah_destroy()">Hapus Tujuan</a>
        -->
</div>

<div id="dlg" class="easyui-dialog" modal="true" style="width:500px;height:400px;padding:10px 20px" closed="true" buttons="#dlg-buttons">

    <form id="fm" method="post" enctype="multipart/form-data">
        <div class="fitem">
            <input name="kode" id="kode" labelPosition="left" label="Kode Wilayah" class="easyui-textbox" labelWidth="110px" style="width:100%">
        </div>
        <div class="fitem">
            <input name="nama" id="nama" style="width:100%;height:70px" multiline="true" label="Deskripsi Wilayah" labelWidth="110px" labelPosition="left" class="easyui-textbox">
        </div>
        <div class="fitem">
            <input name="kapasitas" id="kapasitas" labelPosition="left" label="Kapasitas" class="easyui-numberbox" labelWidth="110px" style="width:40%">
        </div>
        <div class="fitem">
            <input name="reserve" id="reserve" labelPosition="left" label="Dicadangkan" class="easyui-numberbox" labelWidth="110px" style="width:40%">
        </div>

        <div class="fitem">
            <input name="counter" id="counter" labelPosition="left" label="Sudah Terpakai" class="easyui-numberbox" labelWidth="110px" style="width:40%" readonly>
        </div>



</div>
</form>
</div>


<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="wilayah_simpan()" style="width:90px">Simpan</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>

</div>



<script>
    $(document).ready(function() {
        $('#dg').datagrid({
            onLoadSuccess: function(index, field, value) {
                dt = $('#dg').datagrid('getData');
                console.log(dt.rows[0].wilayah_id);
                kuota = 0;
                counter = 0;
                cadangan = 0;
                $.each(dt.rows, function(key, value) {
                    kuota += parseInt(value.kapasitas);
                    counter += parseInt(value.counter);
                    cadangan += parseInt(value.reserve);

                });
                html = '<table class="kuota" width="100%"><tr><th style="text-align:center">KAPASITAS</th><th style="text-align:center">DICADANGKAN</th><th style="text-align:center">TERPAKAI</th><th style="text-align:center">SISA KUOTA</th></tr>';
                html += '<tr><td>'+kuota+'</td><td>'+cadangan+'</td><td>'+counter+'</td><td>'+ (parseInt(kuota)-parseInt(cadangan)-parseInt(counter))+'</td></tr></table><br>';
                $('#rekap').html(html);
            }
        });

    });


    function rekap() {
        dt = $('#dg');
        console.log(dt);
    }

    function wilayah_baru() {
        $('#dlg').dialog('open').dialog('setTitle', 'Menambah Wilayah Baru');
        $('#fm').form('clear');
        url = '/wilayah_simpan';
    }

    function wilayah_edit(id) {
        $.ajax({
            type: 'post',
            url: "/wilayaheditdata",
            data: {
                id: id,
                "<?= csrf_token() ?>": "<?= csrf_hash() ?>"

            },
            success: function(data) {
                var respon = $.parseJSON(data);
                $('#dlg').dialog('open').dialog('setTitle', 'Edit Wilayah');
                $('#fm').form('clear');
                $('#fm').form('load', respon);
                //id exdokumen diganti jika ada filenya 
                url = "/wilayah_update/" + id;
            }

        });

    }

    function wilayah_simpan() {
        $('#fm').form('submit', {
            url: url,
            onSubmit: function(param) {
                param.csrftoken_erb2021 = '<?= csrf_hash() ?>';
                param.balik = '<?php echo $balik; ?>'
                return $(this).form('validate');
            },

            success: function(result) {
                var respon = $.parseJSON(result);

                if (respon.success !== true) {
                    alert(respon.pesan);
                } else {
                    $('#dg').datagrid('reload'); // reload the user data
                    $('#dlg').dialog('close'); // close the dialog
                    alert('Penyimpanan Berhasil');
                    $('#dlg').dialog('close'); // close the dialog
                }
            }
        });

    }

    function wilayah_destroy(id) {
        $.messager.confirm('Confirm', 'Yakin akan menghapus Data ini. Jika ya maka Data ini akan dihapus secara permanen?', function(r) {
            if (r) {
                $.ajax({
                    type: 'post',
                    url: "<?php echo base_url(); ?>/wilayah_destroy",
                    data: {
                        id: id,
                        "<?= csrf_token() ?>": "<?= csrf_hash() ?>"
                    },
                    success: function(data) {
                        var respon = $.parseJSON(data);
                        console.log(respon);
                        if (respon.code == 1)
                            $('#dg').datagrid('reload');
                    },
                    error: function() {
                        alert('Tidak Dapat Dihapus karena Wilayah sudah di Ada yang memesan');
                    }

                });
            }
        });
    }


    function wilayah_status(id, st) {
        $.ajax({
            type: 'post',
            url: "/wilayah_status",
            data: {
                id: id,
                st: st,
                "<?= csrf_token() ?>": "<?= csrf_hash() ?>"

            },
            success: function(data) {
                $('#dg').datagrid('reload');
            }

        });

    }
</script>

<script>
      $(function() {
        var dg = $('#dg').datagrid();
        dg.datagrid('enableFilter', [{
                field: 'nik',
                type: 'textbox'
            },{
                field:'kode', type:'label'
            },{
                field:'kapasitas', type:'label'
            },{
                field:'counter', type:'label'
            },{
                field:'reserve', type:'label'
            },{
                field:'sisa', type:'label'
            },{
                field:'aksi', type:'label'
            } 

            ]);
    });

</script>




<style> 
table.kuota tr,th,td {
    padding:5px;
    border-style:solid;
    border-color:#ccc;
    border-width: 1px;
    font-size:16px;
    font-weight: bold;
}
table.kuota th {
    background-color:burlywood;
    color:#fff;
}


</style>






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