<style>
    #mira-application-update {
        border: 2px solid #dddddd;
    }

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

    }

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

    .back-btn-style {
        float: right;
        margin-bottom: -10px;
    }
</style>
<?php
$ashaName = 'Testing';
$level = $this->session->userdata('level');
$asharegion = $this->session->userdata('asharegionId');
?>
<div class="panel">

    <div class="panel-body" style="margin-top: -16px">
        <div class="col text-left bg-info">
            <h3 class="text-info" style=" width: 300px; float:left;">
                <strong>Registered&nbsp;Mira&nbsp;Data&nbsp;</strong></h3>
            
        </div>
        <table id="mira-application-update" class="table table-bordred table-striped table-hover">
            <thead>

                        <tr>
                            <th colspan="10">
                                <div class="row" style="margin-left: 2px">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <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>
                                </div>

                              

<!--                                <div class="row">
                                    <div class="col-lg-4">

                                        <div class="form-group">
                                            <div class="input-group date" id="st_date" data-date-fromat="dd-mm-yyyy"
                                                style="color: white">
                                                <span class="input-group-addon"><strong>Start Date</strong></span>
                                                <input class="form-control" type="text" name="st_date" id="st_date_input"
                                                    required placeholder="dd-mm-yyyy">
                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-lg-4">

                                        <div class="form-group">
                                            <div class="input-group date" id="en_date" data-date-fromat="dd-mm-yyyy"
                                                style="color: white">
                                                <span class="input-group-addon"><strong>End Date</strong></span>
                                                <input class="form-control" type="text" name="en_date" id="en_date_input"
                                                    required placeholder="dd-mm-yyyy">
                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="col-lg-4">
                                        <input type="button" class="btn btn-primary" id="btnsearch" value="Submit">
                                    </div>

                                </div>-->
                            </th>
                        </tr>
                 
                    <tr>
                    <th class="text-center">#</th>
                    <th class="text-center">Mira Name</th>
                    <th class="text-center">Total Houses</th>
                    <th class="text-center">Total Women</th>
                    <th class="text-center">Total Children</th>
                    <th class="text-center">Running Pregnant</th>
                    <th class="text-center">Closed Pregnant</th>
                    <th class="text-center">Total Vaccination</th>
                    <th class="text-center">Immunized Children</th>
                    <th class="text-center">Not Immunized Children</th>
                    <th class="text-center">Total ANC</th>
                    <th class="text-center">Total HRP</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

    </div>
    <div class="panel-footer" style="margin-top: -36px">
        <h4 id="no-data" class="text-center text-danger" style="display: none;">
            <b>* Data not found . . !</b>
        </h4>
        <div class="row">
            <div class="col-lg-6">
                <ul id="pagination" class="pagination pagination-large">
                    
                </ul>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    
    $(document).ready(function () {
       

        

        $('#btnsearch').click(function () {
            let stdate = $('#st_date_input').val();
            let endate = $('#en_date_input').val();
            let rcode = parseInt($('#region_code').val());
            let searchby = parseInt($('#searchbydate').val());
            // alert('hi   .....==='+searchby);

            $('#house_list_update_spinner').css('display', 'block');
            $('#mira-application-update tbody tr').remove();
            $('#pagination li').remove();

            $.ajax({
                url: '<?= base_url('child_list_view_jqueryV2') ?>',
                data: {
                    region_code: rcode,
                    start_date: stdate,
                    end_date: endate,
                    search_by: searchby
                },
                type: "POST",
                success: function (data, textStatus, jqXHR) {
                    //console.log(data);
                    $('#house_list_update_spinner').css('display', 'none');
                    $("#frd").text('0');
                    var child_data = JSON.parse(data);
                    if (child_data['childList']) {
                        $("#frd").text(child_data['totalRecords']);
                        $('#frdspan').css('display', 'block');
                        for (var i = 0; i < child_data['childList'].length; i++) {
                            $("#mira-application-update tbody").append('<tr></tr>');
                            var date_string = getDateFormat(child_data['childList'][i]['dob']);
                            var ardate_string = getDateFormat(child_data['childList'][i]['actual_register_date']);
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + (parseInt(i) + 1) + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + "CH" + child_data['childList'][i]['child_id'] + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + child_data['childList'][i]['child_name'] + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + ardate_string + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + child_data['childList'][i]['house_number'] + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + child_data['childList'][i]['name'] + '</td>');

                            if (parseInt(child_data['childList'][i]['gender']) == 1) {
                                $('#mira-application-update tbody tr:last').append('<td class="text-center">Male</td>');
                            } else if (parseInt(child_data['childList'][i]['gender']) == 2) {
                                $('#mira-application-update tbody tr:last').append('<td class="text-center">Female</td>');
                            } else {
                                $('#mira-application-update tbody tr:last').append('<td class="text-center">Other</td>');
                            }

                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + date_string + '</td>');

                        }
                    }
                    // This block is working for pagination.
                    if (child_data['totalPage'] && parseInt(child_data['totalPage']) > 1) {
                        let totalPages = parseInt(child_data['totalPage']);
                        const pagination = document.getElementById('pagination');
                        // Create previous button
                        const prevLi = document.createElement('li');
                        prevLi.className = 'page-item';
                        const prevLink = document.createElement('a');
                        prevLink.className = 'page-link';
                        prevLink.href = '#';
                        prevLink.setAttribute('aria-label', 'Previous');
                        const prevSpan = document.createElement('span');
                        prevSpan.setAttribute('aria-hidden', 'true');
                        prevSpan.innerHTML = '&laquo;';
                        prevLink.appendChild(prevSpan);
                        prevLi.appendChild(prevLink);
                        pagination.appendChild(prevLi);

                        // Create numeric page buttons using a for loop
                        for (let i = 1; i <= totalPages; i++) {
                            const pageLi = document.createElement('li');
                            pageLi.className = 'page-item';
                            const pageLink = document.createElement('a');
                            pageLink.className = 'page-link';
                            pageLink.href = '#';
                            pageLink.onclick = function() {
                                getFilteredChildDataUsingPagination(i, rcode, stdate, endate, searchby);
                            };
                            pageLink.textContent = i;
                            pageLi.appendChild(pageLink);
                            pagination.appendChild(pageLi);
                        }
                        // Create next button
                        const nextLi = document.createElement('li');
                        nextLi.className = 'page-item';
                        const nextLink = document.createElement('a');
                        nextLink.className = 'page-link';
                        nextLink.href = '#';
                        nextLink.setAttribute('aria-label', 'Next');
                        const nextSpan = document.createElement('span');
                        nextSpan.setAttribute('aria-hidden', 'true');
                        nextSpan.innerHTML = '&raquo;';
                        nextLink.appendChild(nextSpan);
                        nextLi.appendChild(nextLink);
                        pagination.appendChild(nextLi);
                    }
                }
            });
        });

        

        $('#anm_region_code').change(function () {
            var region_code = parseInt($('#anm_region_code').val());
            $('#mira-application-update tbody tr').remove();


            $.ajax({
                url: '<?= base_url('getAshaHouseHoldDataByANMId') ?>',
                data: {
                    region_code: region_code
                },
                type: "POST",
                success: function (json) {
                    var states = $.parseJSON(json);
                    console.log(states)
                    for (var i = 0; i < states['miraList'].length; i++) {
                        $("#mira-application-update tbody").append('<tr></tr>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + (parseInt(i) + 1) + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + states['miraList'][i]['user_name'] + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + states['miraList'][i]['houses'] + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + states['miraList'][i]['womens'] + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + states['miraList'][i]['children'] + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + states['miraList'][i]['pregwomen'] + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + states['miraList'][i]['closepregwomen'] + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + states['miraList'][i]['immunization'] + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + states['miraList'][i]['immunizedchild'] + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + states['miraList'][i]['notimmunizedchild'] + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + states['miraList'][i]['total_anc'] + '</td>');
                            $('#mira-application-update tbody tr:last').append('<td class="text-center">' + states['miraList'][i]['total_hrp'] + '</td>');
                    }
                    $('#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');
                }
            });

        });


        $('#st_date').datepicker({ autoclose: true, format: 'dd-mm-yyyy' });
        $('#en_date').datepicker({ autoclose: true, format: 'dd-mm-yyyy' });
    });










    
    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>