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

<head>
    <title>KELOLA CALON PEMUDIK</title>
    <!-- <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> -->

</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 esc('KELOLA CALON PEMUDIK'); ?></b>
        </h3>
    </div>
    <div class="col-md-7">

    </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() ?>'},
            ">
        <thead>
            <tr>
                <th field="koded" width="20" align="center" 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="50">NAMA</th>
                <th field="lahir_tempat" width="40" align="left">TEMPAT LAHIR</th>
                <th field="nowa" width="40" align="left">NOMOR WA</th>
                <th field="wilayaht" width="40" align="left">TUJUAN MUDIK</th>
                <th field="datadukungt" width="40" align="center">DATA PENDUKUNG</th>
                <th field="statust" width="20" align="center">STATUS</th>
                <th field="aksi" width="30" align="center">AKSI</th>
            </tr>
        </thead>
    </table>

    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="warga_baru()">Menambah Warga</a>

    </div>

    <div id="dlg" class="easyui-dialog" modal="true" style="width:800px;height:600px;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="k1" id="k1">
                    <input type="hidden" name="k2" id="k2">
                    <input type="hidden" name="k3" id="k3">
                    <input type="hidden" name="k4" id="k4">
                    <input type="hidden" name="kd" id="kd">

                    <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() ?>'},
                        valueField:'wilayah_id',
                        textField:'nama',
                        multiple:false,
                        panelHeight:'auto',
                        editable:false,
                        width:'90%',
                        nowrap:false,
                        label: 'Tujuan Mudik:',
                        labelWidth:'100px',
                        labelPosition: 'left',
                ">
                    </div>

                    <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%">
                        </div>
                        <div class="fitem">
                            <label for="usia" style="width:100px">Usia:</label>
                            <input class="easyui-numberbox" min="17" max="100" id="usia" required="true" name="usia" prompt="harus diisi . . ." style="width:100px">
                        </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="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" required="true" id="filektp" name="filektp" style="border-width:0px;" />

                    <input class="easyui-filebox" label="Upload Kartu Vaksin" labelPosition="top" required="true" id="filevaksin" name="filevaksin" style="border-width:0px;" />
                    <div id="exdokumen"></div>
                </div>
            </div>
            <hr />
            <b><?php echo esc("ANGGOTA :"); ?></b>
            <table width="100%">
                <tr>
                    <th>NIK</th>
                    <th>NAMA</th>
                    <th>USIA</th>
                    <th>KARTU VAKSIN</th>
                </tr>
                <tr>
                    <td>
                        <input class="easyui-textbox" id="nik2" name="nik2">
                        <span class="info" id="inik2"></span>
                    </td>
                    <td>
                        <input class="easyui-textbox" id="nama2" name="nama2">
                        <span class="info" id="inama2"></span>
                    </td>
                    <td>
                        <input class="easyui-textbox" id="usia2" name="usia2">
                        <span class="info" id="usia2"></span>
                    </td>
                    <td>
                        <input class="easyui-filebox" id="filevaksin2" name="filevaksin2" style="border-width:0px;" />
                        <span class="info" id="ifilevaksin2"></span>
                    </td>
                </tr>

                <tr>
                    <td>
                        <input class="easyui-textbox" id="nik3" name="nik3">
                        <span class="info" id="inik3"></span>
                    </td>
                    <td>
                        <input class="easyui-textbox" id="nama3" name="nama3">
                        <span class="info" id="inama3"></span>
                    </td>
                    <td>
                        <input class="easyui-textbox" id="usia3" name="usia3">
                        <span class="info" id="iusia3"></span>
                    </td>
                    <td>
                        <input class="easyui-filebox" id="filevaksin3" name="filevaksin3" style="border-width:0px;" />
                        <span class="info" id="ifilevaksin3"></span>
                    </td>
                </tr>

                <tr>
                    <td>
                        <input class="easyui-textbox" id="nik4" name="nik4">
                        <span class="info" id="inik4"></span>
                    </td>
                    <td>
                        <input class="easyui-textbox" id="nama4" name="nama4">
                        <span class="info" id="inama4"></span>
                    </td>
                    <td>
                        <input class="easyui-textbox" id="usia4" name="usia4">
                        <span class="info" id="iusia4"></span>
                    </td>
                    <td>
                        <input class="easyui-filebox" id="filevaksin4" name="filevaksin4" style="border-width:0px;" />
                        <span class="info" id="ifilevaksin4"></span>
                    </td>
                </tr>
            </table>


        </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() {
    });

    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');
        url = '/warga_simpan/0';
    }

    function warga_edit(koded) {
        $('#k1').val('');
        $('#k2').val('');
        $('#k3').val('');
        $('#k4').val('');
        $('#kd').val('');
//        $('#filektp').filebox('re')
        $.ajax({
            type: 'post',
            url: "<?php echo base_url(); ?>/wargaeditdata",
            data: {
                koded: koded,
                "<?= csrf_token() ?>": "<?= csrf_hash() ?>"

            },
            success: function(data) {
                var respon = $.parseJSON(data);
                console.log(respon);
                $('#dlg').dialog('open').dialog('setTitle', 'Edit Lokasi');
                $('#fm').form('clear');
                //$('#fm').form('load', respon);
                i = 1;

                $('#filektp').filebox({'required': false});
                $('#filevaksin').filebox({'required': false});

                $.each(respon, function(index, val) {

                  if(val.ketua == 1)
                  {
                    $('#nik').textbox('readonly');
                    $('#nik').textbox('setValue',val.nik);
                    $('#nama').textbox('setValue',val.nama);
                    $('#usia').textbox('setValue',val.usia);
                    $('#lahir_tempat').textbox('setValue',val.lahir_tempat);
                    $('#nowa').textbox('setValue',val.nowa);
                    $('#k1').val(val.warga_id);
                    $('#kd').val(val.koded);
                    $('#tujuan').combobox('setValue',val.wilayah_id);

                  } else 
                  {
                    if(i == 1){
                    $('#nik2').textbox('readonly');
                    $('#nik2').textbox('setValue',val.nik);
                    $('#nama2').textbox('setValue',val.nama);
                    $('#usia2').textbox('setValue',val.usia);
                    $('#k2').val(val.warga_id);
                    $('#filevaksin2').filebox({'required': false});
                    i++;    
                    } else
                    if(i == 2){
                    $('#nik3').textbox('readonly');
                    $('#nik3').textbox('setValue',val.nik);
                    $('#nama3').textbox('setValue',val.nama);
                    $('#usia3').textbox('setValue',val.usia);
                    $('#k3').val(val.warga_id);
                    $('#filevaksin3').filebox({'required': false});
                    i++;
                    } else
                    if(i == 3) {    
                    $('#nik4').textbox('readonly');
                    $('#nik4').textbox('setValue',val.nik);
                    $('#nama4').textbox('setValue',val.nama);
                    $('#usia4').textbox('setValue',val.usia);
                    $('#filevaksin4').filebox({'required': false});
                    $('#k4').val(val.warga_id);
                    i++;
                    }    
                  } 


                });
                url = "/warga_simpan/1";
            }

        });

    }


    function warga_simpan() {

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

            success: function(data) {
                console.log(data);
                var respon = $.parseJSON(data);
                if (respon.infon == 0) {
                    $('#inama').html(respon.info[0]);
                    $('#inik').html(respon.info[1]);
                    $('#inokk').html(respon.info[2]);
                    $('#ilahir_tempat').html(respon.info[3]);
                    $('#inowa').html(respon.info[4]);
                    $('#iusia').html(respon.info[5]);
                    $('#ifilektp').html(respon.info[7]);
                    $('#ifilevaksin').html(respon.info[8]);
                    cinfo = respon.info;
                    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,
                    "<?= 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 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: 'datadukungt',
                type: 'label'
            }, {
                field: 'aksi',
                type: 'label'
            }, {
                field: 'nowa',
                type: 'textbox'
            }, {
                field: 'statust',
                type: 'combobox',
                trigger: 'none',
                options: {
                    panelHeight: 'auto',
                    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: false,
                    panelHeight: 'auto',
                    selectOnNavigation: false,
                    queryParams: {
                        '<?php echo csrf_token() ?>': '<?php echo csrf_hash() ?>'
                    },
                    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: ''
                });

            }

        }
    });



    $('#nik').textbox({
        onChange: function(e, f) {
            $('#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);
                        }
                    }

                });
            }

        }
    });
</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() ?>