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

<head>
    <title>
    <?php 
    echo ($balik == 0) ?  'KELOLA MUDIK':  "KELOLA ARUS BALIK";
    ?>
    </title>

</head>
<div class="row">
    <div class="col-md-5">
        <h3>
            <img src="<?php echo base_url(); ?>/assets/images/pemprovsmr/header_icon.png" width="35px">&nbsp;<b><?php echo $balik == 0 ?  esc('KELOLA PEMUDIK') :  esc("KELOLA ARUS BALIK") ?></b>
        </h3>
    </div>

    <div class="col-md-7" style="text-align:right;">
        <a href="javascript:void(0)" onclick="tiket()"><span class="fa fa-credit-card fa-3x"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="/impxls/<?php echo $balik; ?>"><span class="fa fa-file-excel fa-3x"></span>&nbsp;BANK JATENG</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        
        <!-- <a href="/impxls2025/<?php echo $balik; ?>"><span class="fa fa-file-excel fa-3x"></span>&nbsp;PAGUYUBAN</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->

        <a href="/warga_cetak/<?php echo $balik; ?>" target="_blank"><span class="fa fa-print fa-3x"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="/wargabus_cetak/<?php echo $balik; ?>" target="_blank"><span class="fa fa-print fa-3x" style="color:red"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="/warga_blasting/<?php echo $balik; ?>" target="_blank"><span class="fa fa-phone fa-3x"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    </div>
</div>


<div class="containers">

    <table id="dg" title="DAFTAR PEMUDIK" class="easyui-datagrid" style="width:100%;height:600px" url="/wargadata" toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true" data-options="
            pagination:true,
            scrollbarSize:0,
            nowrap:false,
            remoteFilter:true,
            fitColumns:true,
            pageSize:20,
            noWrap:false,
            queryParams: {'<?php echo csrf_token() ?>': '<?php echo csrf_hash() ?>','balik':'<?php echo $balik; ?>'},
            ">
        <thead>
            <tr>
                <th field="koded" width="35" sortable="true">KODE<BR />DAFTAR</th>
                <th field="nik" width="40" align="left">NIK</th>
                <!--
                <th field="nokk" width="40">NO KK</th>
-->
                <th field="nama" width="45">NAMA</th>
                <th field="lahir_tempat" width="30" align="left">TEMPAT LAHIR/<br />PEKERJAAN</th>
                <th field="usia" width="15" align="center">USIA</th>
                <th field="nowa" width="30" align="left">NOMOR WA</th>
                <th field="wilayaht" width="35" align="left"><?php echo $balik == 0 ? "TUJUAN MUDIK" : "ASAL DARI"; ?></th>
                <th field="nobus" width="25" align="center">NO BUS</th>
                <th field="datadukungt" width="30" align="center">DATA<br />PENDUKUNG</th>
                <th field="statust" width="30" align="center">STATUS</th>
                <!--
                <th field="absen" width="15" align="center">STATUS<BR />ABSEN</th>
                -->
                <th field="aksi" width="35" align="left">AKSI</th>
                <th field="aksi2" width="10" align="center">e-<br />TIKET</th>
            </tr>
        </thead>
    </table>

    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="warga_baru()">Menambah Warga</a>
        <a href="/warga/<?php echo $balik; ?>" class="easyui-linkbutton"><span class="fa fa-circle" style="color:red"></span></a>


    </div>

    <div id="dlg" class="easyui-dialog" modal="true" style="width:800px;height:650px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
        <b><?php echo esc("KETUA ROMBONGAN :"); ?></b>
        <form id="fm" method="post" enctype="multipart/form-data">
            <div class="row">
                <div class="col-sm-6">
                    <input type="hidden" name="kd" id="kd">
                    <input type="hidden" id='k1' name='k1'>

                    <input type="hidden" name="getkd" id="getkd">

                    <div class="fitem">
                        <input class="easyui-combobox" style="border-radius:30px;" id='tujuan' name="tujuan" data-options="
                        url: '/tujuancombo',
                        method:'post',
                        required:'true',
                        queryParams: {'<?php echo csrf_token() ?>': '<?php echo csrf_hash() ?>','balik':'<?php echo $balik; ?>'},
                        valueField:'wilayah_id',
                        textField:'nama',
                        multiple:false,
                        panelHeight:'300px',
                        editable:false,
                        width:'90%',
                        nowrap:false,
                        label: 'Tujuan Mudik:',
                        labelWidth:'100px',
                        labelPosition: 'left',
                        onSelect: function(rec){
                var url = '/armadacombo/'+rec.wilayah_id;
                $('#armada_id').combobox('reload', url);
                }
                ">
                    </div>

                    <div class="fitem">
                        <input name="armada_id" id="armada_id" prompt="Daftar Armada" class="easyui-combobox" data-options="
                label:'',
                queryParams: {'<?php echo csrf_token() ?>': '<?php echo csrf_hash() ?>'},
                editable:false,
                value:'<?php //echo $armada_id; 
                        ?>',
                label: 'Armada:',
                        labelWidth:'100px',
                        labelPosition: 'left',
                width:'90%',
                panelHeight:'200px',
                url: '/armadacombo',
                valueField: 'armada_id',
                textField: 'nama'
                ">                
                <a href="#" onclick="cleararmada()">Clear</a>
                    </div>
                <input type="hidden" id="harmada_id" name="harmada_id">

                    <div class="fitem">
                        <label for="nik" onchange="ceknik();" style="width:100px">NIK:</label>
                        <input class="easyui-textbox" prompt="harus diisi . . ." id="nik" name="nik" required="true" style="width:60%">
                    </div>
                    <div class="boxinfod"></div>
                    <div class="dl">
                        <div class="fitem">
                            <label for="nama" style="width:100px">Nama:</label>
                            <input class="easyui-textbox" id="nama" prompt="harus diisi . . ." name="nama" required="true" style="width:60%;text-transform: uppercase;">
                        </div>
                        <div class="fitem">
                            <label for="usia" style="width:100px">Usia:</label>
                            <input class="easyui-numberbox" min="3" max="100" id="usia" required="true" name="usia" prompt="harus diisi . . ." style="width:100px">
                        </div>




                        <div class="fitem">
                        <input name="kelamin" id="kelamin" prompt="Jenis Kelamin" class="easyui-combobox" data-options="
                label:'',
                queryParams: {'<?php echo csrf_token() ?>': '<?php echo csrf_hash() ?>'},
                editable:false,
                label: 'Kelamin:',
                        labelWidth:'100px',
                        labelPosition: 'left',
                width:'90%',
                panelHeight:'200px',
                url: '/kelamincombo',
                valueField: 'value',
                textField: 'text'
                ">                
</div>









                        <div class="fitem">
                            <label for="lahir_tempat" required="true" style="width:100px">Tempat Lahir:</label>
                            <input class="easyui-textbox" id="lahir_tempat" prompt="harus diisi . . ." name="lahir_tempat" style="width:60%">
                        </div>
                        <div class="fitem">
                            <label for="pekerjaan" required="true" style="width:100px">Pekerjaan:</label>
                            <input class="easyui-textbox" id="pekerjaan" prompt="harus diisi . . ." name="pekerjaan" style="width:60%">
                        </div>
                        <div class="fitem">
                            <label for="pekerjaan" required="true" style="width:100px">Domisili:</label>
                            <input class="easyui-textbox" multiline="true" id="domisili" prompt="harus diisi . . ." name="domisili" style="width:60%;height:60px">
                        </div>
                        <div class="fitem">
                            <label for="alamat" required="true"  style="width:100px">Alamat:</label>
                            <input class="easyui-textbox" multiline="true" id="alamat" prompt="harus diisi . . ." name="alamat" style="width:60%;height:60px;">
                        </div>
                        <div class="fitem">
                            <label for="nowa" required="true" style="width:100px">Nomor WA:</label>
                            <input class="easyui-textbox" id="nowa" name="nowa" style="width:60%">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <input class="easyui-filebox" label="Upload KTP" labelPosition="top" id="filektp" name="filektp" style="border-width:0px;" />

                    <div id="exdokumen"></div>
                    <div id="anggota"></div>
                </div>
            </div>

        </form>
    </div>


    <div id="dlg-buttons">
        <a href="javascript:void(0)" id="simpanwarga" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="warga_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() {
        $('#simpanwarga').show();
        $('#nik').textbox('readonly', false);

    });

    // $('#armada_id').combobox({
    //         onChange: function(newValue, oldValue) {
    //             $('#harmada_id').val(oldValue);
    //         }
    //     });


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


            }
        });

    }

    function onLoadSuccess(data) {
        var merges = [{
            index: 2,
            rowspan: 2
        }, {
            index: 5,
            rowspan: 2
        }, {
            index: 7,
            rowspan: 2
        }];

        for (var i = 0; i < merges.length; i++) {
            $(this).datagrid('mergeCells', {
                index: merges[i].index,
                field: 'koded',
                rowspan: merges[i].rowspan
            });
        }
    }

    function warga_baru() {
        $('#dlg').dialog('open').dialog('setTitle', 'Calon Pemudik Baru');
        $('#fm').form('clear');
        $('#getkd').val('<?php echo $getkd; ?>');
        url = '/warga_simpan';
    }

    function warga_edit(id) {
        $.ajax({
            type: 'post',
            url: "<?php echo base_url(); ?>/wargaeditdata",
            data: {
                id: id,
                "<?= csrf_token() ?>": "<?= csrf_hash() ?>"
            },
            success: function(data) {
                var respon = $.parseJSON(data);
                console.log(respon);
                $('#dlg').dialog('open').dialog('setTitle', '');
                $('#fm').form('clear');
                i = 1;
                $('#filektp').filebox({
                    'required': false
                });

                $('#nik').textbox('setValue', respon.nik);
                $('#nama').textbox('setValue', respon.nama);
                $('#usia').textbox('setValue', respon.usia);
                $('#domisili').textbox('setValue', respon.domisili);
                $('#alamat').textbox('setValue', respon.alamat);
                $('#kelamin').combobox('setValue', respon.kelamin);
                $('#lahir_tempat').textbox('setValue', respon.lahir_tempat);
                $('#pekerjaan').textbox('setValue', respon.pekerjaan);
                $('#nowa').textbox('setValue', respon.nowa);
                $('#k1').val(respon.warga_id);
                $('#kd').val(respon.koded);
                $('#tujuan').combobox('setValue', parseInt(respon.wilayah_id));
                if(respon.armada_id > 0)
                $('#armada_id').combobox('setValue', parseInt(respon.armada_id));
                $('#harmada_id').val(parseInt(respon.armada_id));

                $('#anggota').html(respon.anggota);
                url = "/warga_update";
            }

        });

    }

    function cleararmada()
    {
        $('#armada_id').combobox('setValue',null);
    }

    function warga_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(data) {
                console.log(data);
                var respon = $.parseJSON(data);

                if (respon.valid == 0 || respon.error.code > 0) {

                    $('#inama').html(respon.info[0]);
                    $('#inik').html(respon.info[1]);
                    $('#ilahir_tempat').html(respon.info[3]);
                    $('#inowa').html(respon.info[4]);
                    $('#iusia').html(respon.info[5]);
                    $('#ifilektp').html(respon.info[7]);
                    cinfo = respon.info;
                    cinfo += ' ' + respon.error.message;
                    if (cinfo !== '') {
                        alert(cinfo);
                    }
                } else {
                    $('#dlg').dialog('close'); // close the dialog
                    $('#dg').datagrid('reload'); // reload the user data
                    //hitungkuota();
                }


            }

        });
    }


    function warga_destroy(id) {
        $.messager.confirm('Confirm', 'Yakin akan menghapus Data ini. Jika ya maka Data ini akan dihapus secara permanen?', function(r) {
            if (r) {
                $.post("/warga_destroy", {
                    id: id,
                  	balik: '<?php echo $balik; ?>',
                    "<?= csrf_token() ?>": "<?= csrf_hash() ?>"
                }, function(result) {
                    console.log(result);
                    if (result.success) {
                        $('#dg').datagrid('reload'); // reload the user data
                        alert('Penghapusan Data Berhasil'); // close the dialog
                    } else {
                        $.messager.show({ // show error message
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    }
                }, 'json');
            }
        });
    }


    function hitungkuota() {
        $.ajax({
            type: 'post',
            url: "<?php echo base_url(); ?>/hitungkuota",
            data: {
                "<?= csrf_token() ?>": "<?= csrf_hash() ?>"
            },
            success: function(data) {
                var respon = $.parseJSON(data);
                if (respon.kuota <= 0) {
                    $('#dlg').dialog('close');
                }
            }
        });

    };


    function file_destroy(id) {
        $.messager.confirm('Confirm', 'Yakin akan menghapus Dokumen ini. Jika ya maka Dokumen  akan dihapus secara permanen?', function(r) {
            if (r) {
                $.post("<?php echo base_url(); ?>main/file_destroy", {
                    id: id,
                }, function(result) {
                    if (result.success) {
                        $('#exdokumen').html("Belum Ada");
                    } else {
                        $.messager.show({ // show error message
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    }
                }, 'json');
            }
        });
    }
</script>

<script type="text/javascript">
    $(function() {
        var dg = $('#dg').datagrid();
        dg.datagrid('enableFilter', [{
                field: 'nik',
                type: 'textbox'
            }, {
                field: 'nokk',
                type: 'textbox'
            }, {
                field: 'nama',
                type: 'textbox'
            }, {
                field: 'koded',
                type: 'textbox'
            }, {
                field: 'lahir_tempat',
                type: 'label'
            }, {
                field: 'usia',
                type: 'label'
            }, {
                field: 'nobus',
                type: 'combobox',
                trigger: 'none',
                options: {
                    editable: true,
                    panelHeight: '500px',
                    panelWidth:'300px',
                    selectOnNavigation: false,
                    queryParams: {
                        '<?php echo csrf_token() ?>': '<?php echo csrf_hash() ?>',
                        'balik': '<?php echo $balik; ?>'
                    },
                    url: '/nobus_combo',
                    onChange: function(value) {
                        if (value == '') {
                            dg.datagrid('removeFilterRule', 'armada_id');
                        } else {
                            dg.datagrid('addFilterRule', {
                                field: 'armada_id',
                                op: 'equal',
                                value: value
                            });
                        }
                        dg.datagrid('doFilter');
                    }
                }
            }, {
                field: 'datadukungt',
                type: 'label'
            }, {
                field: 'aksi',
                type: 'label'
            }, {
                field: 'nowa',
                type: 'textbox'
            }, {
                field: 'statust',
                type: 'combobox',
                trigger: 'none',
                options: {
                    panelHeight: '300px',
                    selectOnNavigation: false,
                    queryParams: {
                        '<?php echo csrf_token() ?>': '<?php echo csrf_hash() ?>'
                    },
                    url: '/status_combo',
                    onChange: function(value) {
                        if (value == '') {
                            dg.datagrid('removeFilterRule', 'status');
                        } else {
                            dg.datagrid('addFilterRule', {
                                field: 'status',
                                value: value
                            });
                        }

                        dg.datagrid('doFilter');
                    }

                }
            }, {
                field: 'wilayaht',
                type: 'combobox',
                trigger: 'none',
                options: {
                    editable: true,
                    panelHeight: '300px',
                    selectOnNavigation: false,
                    queryParams: {
                        '<?php echo csrf_token() ?>': '<?php echo csrf_hash() ?>',
                        'balik': '<?php echo $balik; ?>'
                    },
                    url: '/wilayah_combo',
                    onChange: function(value) {
                        if (value == '') {
                            dg.datagrid('removeFilterRule', 'wilayah_id');
                        } else {
                            dg.datagrid('addFilterRule', {
                                field: 'wilayah_id',
                                op: 'equal',
                                value: value
                            });
                        }
                        dg.datagrid('doFilter');
                    }
                }
            },




        ]);
    });

    function ver_unver(i, s) {
        $.ajax({
            type: 'post',
            url: "<?php echo base_url(); ?>/ver_unver",
            data: {
                i: i,
                s: s,
                "<?= csrf_token() ?>": "<?= csrf_hash() ?>"

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

        });

    }

    $('#nik2').textbox({
        onChange: function(e, f) {
            var l = e.length;
            if (l > 0) {
                $('#nama2').textbox({
                    required: true,
                    prompt: 'harus diisi'
                });
                $('#usia2').textbox({
                    required: true,
                    prompt: 'harus diisi'
                });
                $('#filevaksin2').filebox({
                    required: true,
                    prompt: 'harus diisi'
                });
            } else {
                $('#nama2').textbox({
                    required: false,
                    prompt: ''
                });
                $('#usia2').textbox({
                    required: false,
                    prompt: ''
                });
                $('#filevaksin2').filebox({
                    required: false,
                    prompt: ''
                });

            }

        }
    });

    $('#nik3').textbox({
        onChange: function(e, f) {
            var l = e.length;
            if (l > 0) {
                $('#nama3').textbox({
                    required: true,
                    prompt: 'harus diisi'
                });
                $('#usia3').textbox({
                    required: true,
                    prompt: 'harus diisi'
                });
                $('#filevaksin3').filebox({
                    required: true,
                    prompt: 'harus diisi'
                });
            } else {
                $('#nama3').textbox({
                    required: false,
                    prompt: ''
                });
                $('#usia3').textbox({
                    required: false,
                    prompt: ''
                });
                $('#filevaksin3').filebox({
                    required: false,
                    prompt: ''
                });

            }

        }
    });

    $('#nik4').textbox({
        onChange: function(e, f) {
            var l = e.length;
            if (l > 0) {
                $('#nama4').textbox({
                    required: true,
                    prompt: 'harus diisi'
                });
                $('#usia4').textbox({
                    required: true,
                    prompt: 'harus diisi'
                });
                $('#filevaksin4').filebox({
                    required: true,
                    prompt: 'harus diisi'
                });
            } else {
                $('#nama4').textbox({
                    required: false,
                    prompt: ''
                });
                $('#usia4').textbox({
                    required: false,
                    prompt: ''
                });
                $('#filevaksin4').filebox({
                    required: false,
                    prompt: ''
                });

            }

        }
    });



    $('#dnik').textbox({
        onChange: function(e, f) {
            //            alert($('#nik').textbox('getText'));
            $('#nama').val('');
            $('#nokk').val('');
            $('#lahir_tempat').val('');
            $('#nowa').val('');

            var nikl = $('#nik').val().length;
            if (nikl == 16) {
                //check status pendaftar
                thenik = $('#nik').val();
                $.ajax({
                    type: 'post',
                    url: "<?php echo base_url(); ?>/ceknik",
                    data: {
                        thenik: thenik,
                        "<?= csrf_token() ?>": "<?= csrf_hash() ?>"
                    },
                    success: function(data) {
                        var respon = $.parseJSON(data);
                        console.log(respon);
                        if (respon.adadata == 1) {
                            $('#c1').removeClass().addClass("stepper-item completed");

                            cinfo = '<center><b>INFORMASI</b></center><br/>';
                            cinfo += 'NIK ini Telah Terdaftar, tidak dapat ';
                            cinfo += 'dipergunakan lagi<br/>';
                            $('.boxinfod').html(cinfo);
                            $('.boxinfod').show(200);
                            $('.dl').hide(200);
                            $('#simpanwarga').hide();
                        } else {
                            $('.boxinfod').hide(200);
                            $('.dl').show(500);
                            $('#simpanwarga').show();

                        }

                        if (respon.ada == 1) {
                            var exdd = $.parseJSON(respon.foto);
                            exddtext = '';
                            $.each(exdd, function(index, val) {
                                cekf = "<input type='checkbox' value='" + index + "' name='checkf[]' checked />&nbsp;&nbsp;";
                                exddtext += cekf + '<a href="/tampilkan/' + val[1] + '"  target="blank">' + val[0] + '</a><br/>';
                            });

                            $('#exdokumen').html(exddtext);
                        }
                    }

                });
            }

        }
    });


    function tiket() {
        $.ajax({
            type: 'post',
            url: "/tiket",
            data: {
                "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
                'balik':'<?php echo $balik; ?>'
            },
            success: function(data) {
                var respon = $.parseJSON(data);
                $('#dg').datagrid('reload');
                html = 'PROSES e-TIKET OK';
                alert(html);

            }

        });


    }
</script>



<style>
    .easyui-dialog {
        background-color: #f7d9d9;
    }

    .pulkanan {
        display: inline-block;
        text-align: right;
        float: inline-end;
        font-weight: bold;
    }
</style>

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