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

    }
    #mira-application-update{
        width: 100%;
        overflow-x: scroll;
    } 
</style>
<div class="panel"> 
    <div class="panel-body">

        <table id="mira-application-update1" class="table table-bordred table-striped">
            <thead>
                <tr>
                    <th colspan="6"><h4 class="text-center"> <strong>Mapped Region User List For Activation</strong></h4></th>
            </tr>
            <tr>
                <th class="text-center">Region Name</th>
                <th class="text-center">User Name</th>
                <th class="text-center">Mapped Date</th>
                <th class="text-center">Current Status</th>
                <th class="text-center">Activate Date</th>

                <th class="text-center"><span><strong>Update</strong></span></th>
            </tr>
            </thead>
            <tbody>
                <?php
                if (isset($mapped_list) and $mapped_list) {
                    for ($i = 0; $i < count($mapped_list); $i++) {
                        ?>
        <?php if ($mapped_list[$i]['user_activation_status']) { ?>
                            <tr id="<?= 'tr' . $mapped_list[$i]['auto_id'] ?>" class="text-success">
                                <td class="text-center"><?= $mapped_list[$i]['region_name'] ?></td>

                                <td class="text-center"><?= $mapped_list[$i]['user_name'] ?></td>

                                <td class="text-center"><?= date('d-m-Y', strtotime($mapped_list[$i]['mapping_date'])); ?></td>

                                <td class="text-center"><span class="label label-success" id=<?= 'active' . $mapped_list[$i]['auto_id'] ?>>User Activated</span></td>
                                <td class="text-center"><span id=<?= 'activate_date' . $mapped_list[$i]['auto_id'] ?>><?= date('d-m-Y', strtotime($mapped_list[$i]['activate_date'])); ?></span></td>
                                <td class="text-center"><p data-placement="top" data-toggle="tooltip" title="Update for Deactivation"><button id="<?= 'button' . $mapped_list[$i]['auto_id'] ?>" class="btn btn-success btn-xs update-user-region" data-title="applicationUpdate" data-toggle="modal" data-target="#applicationUpdate" value=<?= $mapped_list[$i]['auto_id'] . ':' . $mapped_list[$i]['region_code'] . ':0' ?>><span id="<?= 'span' . $mapped_list[$i]['auto_id'] ?>" class="glyphicon glyphicon-refresh">&nbsp;Deactivation</span></button></p></td>
                            </tr>
        <?php } else { ?>
                            <tr id="<?= 'tr' . $mapped_list[$i]['auto_id'] ?>" class="text-info">

                                <td class="text-center"><?= $mapped_list[$i]['region_name'] ?></td>

                                <td class="text-center"><?= $mapped_list[$i]['user_name'] ?></td>

                                <td class="text-center"><span><?= date('d-m-Y', strtotime($mapped_list[$i]['mapping_date'])); ?></span></td>

                                <td class="text-center"><span class="label label-info" id=<?= 'active' . $mapped_list[$i]['auto_id'] ?>>Activation Pending.</span></td>

                                <td class="text-center" ><span id="<?= 'activate_date' . $mapped_list[$i]['auto_id'] ?>">-----------</span></td>

                                <td class="text-center"><p data-placement="top" data-toggle="tooltip" title="Update for Activation"><button id="<?= 'button' . $mapped_list[$i]['auto_id'] ?>" class="btn btn-danger btn-xs update-user-region" data-title="applicationUpdate" data-toggle="modal" data-target="#applicationUpdate" value=<?= $mapped_list[$i]['auto_id'] . ':' . $mapped_list[$i]['region_code'] . ':1' ?>><span id="<?= 'span' . $mapped_list[$i]['auto_id'] ?>" class="glyphicon glyphicon-refresh">&nbsp;Activation</span></button></p></td>
                            </tr>

                            <?php
                        }
                    }
                }
                ?>

            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('.update-user-region').click(function () {
            var auto_id_region_id_update = $(this).val().split(':');

            $.ajax({
                url: '<?= base_url('update_login') ?>',
                data: {
                    region_id: auto_id_region_id_update[1],
                    auto_id: auto_id_region_id_update[0],
                    status: auto_id_region_id_update[2]
                },
                type: "POST",
                success: function (json) {

                    var data = $.parseJSON(json);

                    if (data['status']) {
                        if (parseInt(auto_id_region_id_update[2]) == 1) {
                            $('#tr' + auto_id_region_id_update[0]).removeClass('text-info').addClass('text-success');
                            $('#button' + auto_id_region_id_update[0]).removeClass('btn-danger').addClass('btn-success');
                            $('#button' + auto_id_region_id_update[0]).val(auto_id_region_id_update[0]+':'+auto_id_region_id_update[1]+':0');
                            $('#span' + auto_id_region_id_update[0]).text(' Deactivation');
                            $('#active' + auto_id_region_id_update[0]).removeClass('label-info').addClass('label-success');
                            $('#active' + auto_id_region_id_update[0]).text('User Activated');
                            $('#activate_date' + auto_id_region_id_update[0]).text(data['date']);

                        } else {
                            $('#tr' + auto_id_region_id_update[0]).removeClass('text-success').addClass('text-info');
                            $('#button' + auto_id_region_id_update[0]).removeClass('btn-success').addClass('btn-danger');
                            $('#button' + auto_id_region_id_update[0]).val(auto_id_region_id_update[0]+':'+auto_id_region_id_update[1]+':1');
                            $('#span' + auto_id_region_id_update[0]).text(' Activation');
                            $('#active' + auto_id_region_id_update[0]).removeClass('label-success').addClass('label-info');
                            $('#active' + auto_id_region_id_update[0]).text('Activation Pending.');
                            $('#activate_date' + auto_id_region_id_update[0]).text('-----------');

                        }
                    }

                },
                error: function (xhr, status, errorThrown) {
                    
                },
                complete: function (xhr, status) {
                    
                }
            });
//        $( this ).removeClass("btn-danger").addClass("btn-success");
//        $("#"+$(this).val()).text('Deactivation');
//        $("#title"+$(this).val()).prop('title', 'Update for Deactivation');
        });
    });
</script>

