<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>
<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>Mira&nbsp;wise&nbsp;Child&nbsp;Data&nbsp;Sheet</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="users" id="users" class="form-control">
                                                <option value="0" selected="true" disabled="true"> Select ANM</option>
                                                <?php
                                                for ($i = 0; $i < count($users); $i++) {
                                                    if (isset($regionCode)) {
                                                        if ($anmselected == $users[$i]['region_code']) {
                                                            ?>
                                                            <option selected="true" value=<?= $users[$i]['region_code'] ?>>
                                                            <strong><?= $users[$i]['user_name'] ?></strong></option>
                                                        <?php } else { ?>
                                                            <option value=<?= $users[$i]['region_code'] ?>><strong><?= $users[$i]['user_name'] ?></strong></option>
                                                            <?php
                                                        }
                                                    } else {
                                                        ?>
                                                        <option value=<?= $users[$i]['region_code'] ?>><strong><?= $users[$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-4">
                                    <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="asha" id="asha" class="form-control">
                                                <option value="0" selected="true" disabled=""> Select Asha</option>
                                            </select>
                                            <span class="input-group-addon"><i class="fa fa-level-down"aria-hidden="true"></i></span>
                                        </div>                    
                                    </div> 
                                </div>  
                                
                            </div>
                        </div>
                    </th>
                </tr>
                <tr>
                    <th >S.N</th>
                    <th class="text-center">House No</th>
                    <th class="text-center">House Head</th>
                    <th class="text-center">Child Name</th>
                    <th class="text-center">Mother Name</th>
                    <th class="text-center">Father Name</th>

                    <th class="text-center">Actual Register Date</th>
                    <th class="text-center">Action</th>
                </tr>
            </thead>
            <tbody id ="table_body">
            </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>

    $("#users").change(function () {
        var region_code = $(this).val(); //captures valyue from dropdown
        if (region_code) {
            $.ajax({
                url: 'datasheet/show_asha_list',
                method: 'POST',
                data: {region_code: region_code},
                dataType: 'json',
                success: function (response) {
                    $('#asha').empty().append('<option value="" selected disabled>Select Asha </option>');
                    $.each(response, function (key, value) {
                        $('#asha').append('<option value="' + value.region_code + '">' + value.user_name + '</option>');
                    });
                },
            });
        }
    });
    $("#asha").change(function () {

        var abcde = $(this).val();
        // console.log(abcde);
        if (abcde) {

            console.log("abcde", abcde);

            $.ajax({
                url: 'datasheet/show_table',
                method: 'POST',
                data: {region_code: abcde},
                dataType: 'json',
                success: function (response) {
                    console.log(response);
                    $('#table_body').empty();
                    $.each(response, function (key, value) {
                        $('#table_body').append(`
                        <tr id = "row-${value.child_id}">
                        <td>${key + 1}</td>        
                        <td class="text-center">${value.house_number}</td>
                        <td class="text-center">${value.house_head_name}</td>
                        <td class="text-center"> ${value.child_name}</td>
                        <td class="text-center">${value.name}</td>
                        <td class="text-center">${value.husband}</td>


                <td class="date-cell text-center" data-date="${value.actual_register_date}">
                    <span>${value.actual_register_date}</span>
                    <input type="date" name="date" id="date" placeholder="yyyy-mm-dd" value="${value.actual_register_date}" style="display:none;" />
                </td>
                
                <td >
                    <button type="button" class="btn btn-primary edit-btn" onclick="edit_date(${value.child_id})">Edit</button>
    <button type="button" class="btn btn-primary save-btn" style="display:none;" onclick="update_date(${value.child_id})">Update</button>
    <button type="button" class="btn btn-danger cancel-btn" style="display:none;" onclick="cancel(${value.child_id})">Cancel</button>
                </td>
                    </tr>`);

                    });
                    $('#my_table').show();
                },
                error: function () {
                    $('#my_table').hide();
                }
            });
        } else {
            $('#my_table').hide();
        }

    });
    function edit_date(child_id) {
        const row = $(`#row-${child_id}`);
        const dateCell = row.find('.date-cell');
        const input = dateCell.find('input');
        const span = dateCell.find('span');

        span.hide();
        input.show();

        row.find('.edit-btn').hide();
        row.find('.save-btn').show();
        row.find('.cancel-btn').show();
    }
    function cancel(child_id) {
        const row = $(`#row-${child_id}`);
        const dateCell = row.find('.date-cell');
        const input = dateCell.find('input');
        const span = dateCell.find('span');

        const prevalue = dateCell.attr('date-date');
        input.val(prevalue);



        span.show();
        input.hide();

        row.find('.edit-btn').show();
        row.find('.save-btn').hide();
        row.find('.cancel-btn').hide();
    }
    function update_date(child_id) {
        const row = $(`#row-${child_id}`);
        const dateCell = row.find('.date-cell');
        const input = dateCell.find('input');
        const newdate = input.val();
        console.log('New date:', newdate);
        $.ajax({
            type: 'POST',
            url: 'datasheet/update_date',
            data: {house_id: 0, women_id: 0, child_id: child_id, actual_register_date: newdate},
            success: function (data) {
                console.log('house id is:', 0);
                console.log('women id is:', 0);
                console.log('child id is:', child_id);

                console.log(data);

                dateCell.attr('date-date', newdate);
                dateCell.find('span').text(newdate);
                dateCell.find('input').val(newdate);



                cancel(child_id);
                input.hide();
                row.find('.edit-btn').show();
                row.find('.save-btn').hide();
                row.find('.cancel-btn').hide();
            }
        });

    }

</script>