<style>
    #mmira-pregnant-list-view{
        border: 2px solid #dddddd;
    }
    #mira-pregnant-list-view > thead > tr > th,
    #mira-pregnant-list-view > tbody > tr > th,
    #mira-pregnant-list-view > tfoot > tr > th,
    #mira-pregnant-list-view > thead > tr > td,
    #mira-pregnant-list-view > tbody > tr > td,
    #mira-pregnant-list-view > tfoot > tr > td {
        border: 2px solid #dddddd;

    }
    #mira-pregnant-list-view{
        width: 100%;
        overflow-x: scroll;
    }
    

</style>
<?php

$level = $this->session->userdata('level');

?>

<div class="panel"> 
    <div class="row">
        <div class="col col-xs-6 text-left">
            <h3 class="text-info"><strong>Child&nbsp;Immunization</strong></h3>
        </div>
    </div>

    <div class="panel-body" style="margin-top: -16px">
        <table id="mira-pregnant-list-view" class="table table-bordred table-striped table-hover">
            <thead>
               <?php if($level==1){ ?>
                    <tr>
                        <th colspan="10">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i aria-hidden="true"></i><strong>Select ANM</strong></span>
                                            <select name="anm_region_code" id="anm_region_code" class="form-control">
                                                <option value="0" selected="true" disabled=""> Select ANM</option>
                                                <?php
                                                for ($i = 0; $i < count($anmList); $i++) {
                                                    if (isset($regionCode)) {
                                                        if ($anmselected == $anmList[$i]['region_code']) {
                                                            ?>
                                                            <option selected="true" value=<?= $anmList[$i]['region_code'] ?> ><strong><?= $anmList[$i]['user_name'] ?></strong></option>
                                                        <?php } else { ?>
                                                            <option value=<?= $anmList[$i]['region_code'] ?>><strong><?= $anmList[$i]['user_name'] ?></strong></option>
                                                            <?php
                                                        }
                                                    } else {
                                                        ?>
                                                        <option value=<?= $anmList[$i]['region_code'] ?>><strong><?= $anmList[$i]['user_name'] ?></strong></option>
                                                        <?php
                                                    }
                                                }
                                                ?>
                                            </select>
                                            <span class="input-group-addon"><i class="fa fa-level-down"aria-hidden="true"></i></span>
                                        </div>                    
                                    </div>   
                                </div>
                                
                                 <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i aria-hidden="true"></i><strong>Select Asha</strong></span>
                                            <select name="region_code" id="region_code" class="form-control">
                                                <option value=0 selected="true" disabled=""> Select Asha</option>
                                                <?php
                                                for ($i = 0; $i < count($miraList); $i++) {
                                                    if (isset($regionCode)) {
                                                        if ($ashaselected == $miraList[$i]['region_code']) {
                                                            ?>
                                                            <option selected="true" value=<?= $miraList[$i]['region_code'] ?> ><strong><?= $miraList[$i]['user_name'] ?></strong></option>
                                                        <?php } else { ?>
                                                            <option value=<?= $miraList[$i]['region_code'] ?>><strong><?= $miraList[$i]['user_name'] ?></strong></option>
                                                            <?php
                                                        }
                                                    } else {
                                                        ?>
                                                        <option value=<?= $miraList[$i]['region_code'] ?>><strong><?= $miraList[$i]['user_name'] ?></strong></option>
                                                        <?php
                                                    }
                                                }
                                                ?>
                                            </select>
                                            <span class="input-group-addon"><i class="fa fa-level-down"aria-hidden="true"></i></span>
                                        </div>                    
                                    </div> 
                                </div>
                            </div>
                            
                           
                        </th>
                    </tr>
                    <?php } ?>
                    
            <tr>
                <th class="text-center">#</th>
                <th class="text-center">Child Name</th>
                <th class="text-center">HepatitisB&nbsp;&nbsp;</th>
                <th class="text-center">OPV0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <th class="text-center">BCG&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <th class="text-center">OPV1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <th class="text-center">Pentavalent1&nbsp;&nbsp;&nbsp;</th>
                <th class="text-center">Rotavirus1</th>
                <th class="text-center">IPV1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <th class="text-center">PCV1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <th class="text-center">OPV2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <th class="text-center">Pentavalent2</th>
                <th class="text-center">Rotavirus2</th>
                <th class="text-center">OPV3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <th class="text-center">Pentavalent3</th>
                <th class="text-center">Rotavirus3</th>
                <th class="text-center">IPV2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <th class="text-center">PCV2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <th class="text-center">Measles&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <th class="text-center">VitaminA&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <th class="text-center">PCVBooster</th>
                <th class="text-center">DPTBooster</th>
                <th class="text-center">OPVBooster</th>
                <th class="text-center">MeaslesBooster</th>
                
                
                
            </tr>
            </thead>
            <tbody>
               
            </tbody>
        </table>

    </div>

</div>


<script type="text/javascript">
    
    $(document).ready(function () {
        $('#datetimepicker2').datepicker({
            format: 'dd-mm-yyyy'
            
        });
       

        $('#region_code').change(function () {

            var region_code = parseInt($('#region_code').val());
            $('#pregnant_list_update_spinner').css('display', 'block');
            $('#mira-pregnant-list-view tbody tr').remove();
            $('#pagination li').remove();
            $.ajax({
                url: '<?= base_url('get_child_vaccination') ?>',
                data: {
                    region_code: region_code
                },
                type: "POST",
                success: function (data, textStatus, jqXHR) {
                    $('#pregnant_list_update_spinner').css('display', 'none');
                    var vaccine_data = JSON.parse(data);     
                    console.log(vaccine_data['vaccineData']);
                   if (vaccine_data['vaccineData']) {
            // Iterate through the data array
            for (var i = 0; i < vaccine_data['vaccineData'].length; i++) {
                            var child = vaccine_data['vaccineData'][i];
                           $("#mira-pregnant-list-view tbody").append('<tr></tr>');
                           console.log(child['HepatitisB'])
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + (i + 1) + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['child_name'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['HepatitisB'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['OPV0'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['BCG'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['OPV1'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['Pentavalent1'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['Rotavirus1'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['IPV1'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['PCV1'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['OPV2'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['Pentavalent2'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['Rotavirus2'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['OPV3'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['Pentavalent3'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['Rotavirus3'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['IPV2'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['PCV2'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['Measles'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['VitaminA'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['PCVBooster'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['DPTBooster'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['OPVBooster'] + '</td>');
                            $('#mira-pregnant-list-view tbody tr:last').append('<td class="text-center">' + child['MeaslesBooster'] + '</td>');
                            


                        }
                    }
                   
                }
            });
        });
        
        
        $('#anm_region_code').change(function () {
            var region_code = parseInt($('#anm_region_code').val());
            $('#region_code').children('option:not(:first)').remove();
            $('#region_code').css('display', 'block');

            $('#st_date_input').val('');
            $('#en_date_input').val('');
            $("#trd").text(0);
            $("#frd").text('0');

            $.ajax({
                url: '<?= base_url('getAshalistByANMId') ?>',
                data: {
                   region_code: region_code
                },
                type: "POST",
                success: function (json) {
                    var states = $.parseJSON(json);
                    for (var i = 0; i < states['miraList'].length; i++) {
                        $("#region_code").append($("<option></option>").val(states['miraList'][i]['region_code']).html(states['miraList'][i]['user_name']));
                    }
                    $('#asha_list_update_spinner').css('display', 'none');
                },
                error: function (xhr, status, errorThrown) {
                    $('#asha_list_update_spinner').css('display', 'none');
                },
                complete: function (xhr, status) {
                    $('#asha_list_update_spinner').css('display', 'none');
                }
            });

        });
        
        
    });

    

    function getDateFormat(date) {
        var split_date_array1 = date.split('-');
        var split_date_array2 = split_date_array1[2].split(' ');
        return (split_date_array2[0] + '-' + split_date_array1[1] + '-' + split_date_array1[0]);
    }
    
</script>
