<style>
    #mira-region-update{
        border: 2px solid #dddddd;
    }
    #mira-region-update > thead > tr > th,
    #mira-region-update > tbody > tr > th,
    #mira-region-update > tfoot > tr > th,
    #mira-region-update > thead > tr > td,
    #mira-region-update > tbody > tr > td,
    #mira-region-update > tfoot > tr > td {
        border: 2px solid #dddddd;

    }
    #mira-region-update{
        width: 100%;
        overflow-x: scroll;
    }
    

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
   padding: 2px;
   
}
.table>tbody>tr{
    height: 38px;
}
.table>thead>tr{
    height: 42px;
    background-color: #f5f3f3;
}
  


</style>
<div class="panel">
    <div class="panel-heading" style="margin: 0;padding: 0;"><h4 class="text-center"> <strong>Child Immunization List</strong></h4><hr></div>
    <div class="panel-body" style="margin-top: -38px">
        

        <table id="mira-region-update" class="table table-bordred table-striped">
            <thead>
               
                <tr>

                <th class="text-center">H.No.</th>
                <th class="text-center">Mother&nbsp;Name</th>
                <th class="text-center">Child&nbsp;Name</th>
                <th class="text-center">Gender</th>
                <th class="text-center">DOB</th>
                <th class="text-center">Vaccine&nbsp;Code</th>

                <th class="text-center" colspan="3">Vaccine&nbsp;Submission</th>
            </tr>
            </thead>
            <tbody>
                <?php
                if (isset($child_list) and $child_list) {
                    for ($i = 0; $i < count($child_list); $i++) {
                        if (isset($child_list[$i]['due_vaccine']) and $child_list[$i]['due_vaccine']) {
                            for ($j = 0; $j < count($child_list[$i]['due_vaccine']); $j++) {
                                ?>
                                    <tr id="<?= 'child' . $child_list[$i]['child_id'] . $child_list[$i]['due_vaccine'][$j]['vaccine_id'] ?>">
                                    <td class="text-center"><?= $child_list[$i]['house_number'] ?></td>
                                    <td class="text-center"><?= $child_list[$i]['name'] ?></td>
                                    <td class="text-center"><?= $child_list[$i]['child_name'] ?></td>
                                    <?php if ($child_list[$i]['gender'] == 1) { ?>
                                        <td class="text-center">Male</td>
                                    <?php } elseif ($child_list[$i]['gender'] == 2) { ?>
                                        <td class="text-center">Female</td>
                                    <?php } else { ?>
                                        <td class="text-center">Other</td>
                                    <?php } ?>


                                    <td class="text-center"><?= date('d-m-Y', strtotime($child_list[$i]['dob'])) ?></td>
                                    <?php if (isset($child_list[$i]['due_vaccine'][$j]['vaccine_name']) and $child_list[$i]['due_vaccine'][$j]['vaccine_name']) { ?>
                                        <td class="text-center"><?= $child_list[$i]['due_vaccine'][$j]['vaccine_code'] ?></td>
                                    <?php } else { ?>
                                        <td class="text-center"></td>
                                    <?php } ?>

                                        <td class="text-center" style="width: 22%">

                                  
                                            <div class="input-group date" data-date-fromat="dd-mm-yyyy">
                                                <span class="input-group-addon input-group-sm"><i class="fa fa-calendar "></i></span>
                                                <input class="form-control datepicker-vaccine-update input-sm" type="text" value="" name=<?= 'vaccine_date' . $child_list[$i]['due_vaccine'][$j]['vaccine_id'] ?> id=<?= 'vaccine_date' . $child_list[$i]['due_vaccine'][$j]['vaccine_id'] ?> required placeholder="dd-mm-yyyy">
                                                <span class="input-group-btn">
                                                    <button type="button" class="btn btn-info update-child-vaccine btn-sm" value="<?= $child_list[$i]['child_id'] . ':' . $child_list[$i]['due_vaccine'][$j]['vaccine_id'] ?>" data-title="editUser" data-toggle="modal" data-target="#deleteUser" >Submit</button></span>
                                            </div>
                                    



                                    </td>

                                </tr>
                                <?php
                            }
                        } else {
                            ?>
                            <tr>
                                <td class="text-center"><?= $child_list[$i]['house_number'] ?></td>
                                <td class="text-center"><?= $child_list[$i]['name'] ?></td>
                                <td class="text-center"><?= $child_list[$i]['child_name'] ?></td>
                                <?php if ($child_list[$i]['gender'] == 1) { ?>
                                    <td class="text-center">Male</td>
                                <?php } elseif ($child_list[$i]['gender'] == 2) { ?>
                                    <td class="text-center">Female</td>
                                <?php } else { ?>
                                    <td class="text-center">Other</td>
                                <?php } ?>
                                <td class="text-center"><?= date('d-m-Y', strtotime($child_list[$i]['dob'])) ?></td>
                                <?php if (isset($child_list[$i]['due_vaccine'][0]['vaccine_name']) and $child_list[$i]['due_vaccine'][0]['vaccine_name']) { ?>
                                    <td class="text-center"><?= $child_list[$i]['due_vaccine'][0]['vaccine_name'] ?></td>
                                <?php } else { ?>
                                    <td class="text-center"></td>
                                <?php } ?>

                                <td class="text-center text-success" colspan="3">No Vaccine Pending </td>

                            </tr>  
                            <?php
                        }
                    }
                }
                ?>


            </tbody>
        </table>
  
    </div>
    <div class="panel-footer panel-info" style="margin-top: -40px">
        <div class="row">

            <div class="col-lg-6">
                <ul class="pagination pagination-large">
                    <?php
                    if (isset($totalPage) and $totalPage and $totalPage > 1) {
                        for ($i = 0; $i < $totalPage; $i++) {
                            if($i==0){
                                if($activePage==1){?>
                                    <li class="disabled"><span>«</span></li>
                               <?php }  else {?>
                                    <li class="page" value="<?= ($activePage-1)?>"><a href="<?= base_url('immunization_child/'.($activePage-1))?>"><span>«</span></a></li>
                              <?php  }
                            }
                            
                            
                            if (($i+1) == $activePage) {
                                ?>
                                
                                <li class="active page"><span><?= ($i + 1) ?></span></li>  
                            <?php } else { ?>
                                <li class="page"><a href="<?= base_url('immunization_child/'.($i+1))?>"><span><?= ($i + 1) ?></span></a></li>
                                <?php
                            }
                            
                            
                            if(($i+1)==$totalPage){
                                if($totalPage==$activePage){?>
                                    <li class="disabled page"><a><span>Next</span></a></li>
                                <?php }  else {?>
                                    <li class="page"><a href="<?= base_url('immunization_child/'.($activePage+1))?>"><span>Next</span></a></li>
                             <?php   }
                            }
                        }
                       }
                    ?>
                </ul>

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



<script type="text/javascript">
    $(document).ready(function () {
        $('.datepicker-vaccine-update').datepicker({autoclose: true, format: 'dd-mm-yyyy'});
        /********************************/
        /*This script get district.*/
        $('.update-child-vaccine').click(function () {

            var child_id_vaccine_id = $(this).val().split(':');
            var date = $('#vaccine_date' + child_id_vaccine_id[1]).val();
            $(this).prop("disabled", true);
            $.ajax({
                url: '<?= base_url('update_vaccine') ?>',
                data: {
                    child_id: child_id_vaccine_id[0],
                    vaccine_id: child_id_vaccine_id[1],
                    vaccine_date: date
                },
                type: "POST",
                success: function (json) {
                    var data = $.parseJSON(json);
                    if (data['status']) {
                        $('#child' + child_id_vaccine_id[0] + child_id_vaccine_id[1]).remove();
                    } else {
                        $("#button" + child_id_vaccine_id[0] + child_id_vaccine_id[1]).prop("disabled", false);
                    }

                },
                error: function (xhr, status, errorThrown) {

                    $("#button" + child_id_vaccine_id[0]).prop("disabled", false);
                },
                complete: function (xhr, status) {


                }
            });
        });
    });

</script>

