<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="7"><h4 class="text-center"> <strong>Mapped Region User List For Unmapped</strong></h4></th>
            </tr>
            <tr>
                <th class="text-center">#</th>
                <th class="text-center">Region Code</th>
                <th class="text-center">User ID</th>
                <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"><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++) {
                        ?>
                        <tr id="<?= 'tr' . $mapped_list[$i]['auto_id'] ?>" class="text-info">
                            <td class="text-center"><?= ($i+1) ?></td>
                            <td class="text-center"><?= 'R'.$mapped_list[$i]['region_code'] ?></td>
                            <td class="text-center"><?= 'U'.$mapped_list[$i]['auto_id'] ?></td>
                            <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"><p data-placement="top" data-toggle="tooltip" title="Update for Deactivation"><button id="<?= 'button' . $mapped_list[$i]['auto_id'] ?>" class="btn btn-info btn-xs unmapped-user-region" data-title="applicationUpdate" data-toggle="modal" data-target="#applicationUpdate" value=<?= $mapped_list[$i]['auto_id'] . ':' . $mapped_list[$i]['region_code'] ?>><span class="glyphicon glyphicon-refresh">&nbsp;Unmapped</span></button></p></td>
                        </tr>

                    <?php
                    }
                }
                ?>

            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('.unmapped-user-region').click(function () {
            var auto_id_region_id = $(this).val().split(':');
             $.ajax({
                url: '<?= base_url('unmapped_region_user') ?>',
                data: {
                    region_id: auto_id_region_id[1],
                    auto_id: auto_id_region_id[0]
                },
                type: "POST",
                success: function (json) {
                    var data = $.parseJSON(json);
                    if (data['status']) {
                       $('#tr'+auto_id_region_id[0]).remove();
                    }

                },
                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>

