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

</style>
<div class="panel"> 
    <div class="panel-body">
        <hr class="colorgraph">

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

                <tr>
                    <th colspan="11"><h4 class="text-center"> <strong>User List Detail</strong></h4></th>
            </tr>
            <tr>

                <th class="text-center">User Name</th>
                <th class="text-center">Gender</th>
                <th class="text-center">Mobile</th>
                <th class="text-center">Level</th>
                <th class="text-center">Email</th>
                <th class="text-center">DOB</th>
                <th class="text-center">Password</th>
                <th class="text-center">Login Id</th>
                <th class="text-center">Status</th>
                <th class="text-center">Delete</th>
                <th class="text-center">Edit</th>
            </tr>
            </thead>
            <tbody>
                <?php
                if (isset($user_details) and $user_details) {
                    foreach ($user_details as $key => $value) {
                        ?>
                        <tr id=<?= "row".$value['auto_id']?>>
                            <td class="text-center" id=<?= "name" . $value['auto_id'] ?>><?= $value['user_name'] ?></td>
                            <?php if ($value['gender'] == 1) { ?>
                                <td class="text-center">Male</td>
                            <?php } elseif ($value['gender'] == 2) { ?>
                                <td class="text-center">Female</td>
                            <?php } else { ?>
                                <td class="text-center">Other</td>
                            <?php }
                            ?>

                            <td class="text-center"><?= $value['mobile'] ?></td>
                            <td class="text-center"><?= $value['user_level'] ?></td>
                            <td class="text-center" id=<?= "email" . $value['auto_id'] ?>><?= $value['email'] ?></td>
                            <td class="text-center"><?= date('d-m-Y', strtotime($value['date_of_birth'])) ?></td>


                            <td class="text-center"><?= $value['user_login_id'] ?></td>
                            <td class="text-center"><?= $value['user_password'] ?></td>

                            <?php if ($value['user_mapping_status']) { ?>
                                <td class="text-center"><span class='label label-success'>Mapped</span></td>
                                <td class="text-center"><p data-placement="top" data-toggle="tooltip" title="Delete"><button type="button" class="btn btn-danger btn-xs user-delete" disabled value="" data-title="deleteUser" data-toggle="modal" data-target="#deleteUser" ><span class="glyphicon glyphicon-trash"></span></button></p></td>
        <?php } else { ?>
                                <td class="text-center"><span class='label label-info'>Unmapped</span></td>
                                <td class="text-center"><p data-placement="top" data-toggle="tooltip" title="Delete"><button type="button" class="btn btn-danger btn-xs user-delete" value="<?= $value['auto_id'] ?>" data-title="deleteUser" data-toggle="modal" data-target="#deleteUser" ><span class="glyphicon glyphicon-trash"></span></button></p></td>
        <?php }
        ?>
                            <td class="text-center"><p data-placement="top" data-toggle="tooltip" title="Edit"><button type="button" class="btn btn-info btn-xs user-edit_detail" value="<?= $value['auto_id'] ?>" data-title="editUser" data-toggle="modal" data-target="#deleteUser" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>

                        </tr>
        <?php
    }
}
?>



            </tbody>
        </table>
        <hr class="colorgraph">
    </div>
</div>


<div class="modal fade" id="editUser" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                <h4 class="modal-title" id="Heading">Edit User</h4>
            </div>
            <div class="modal-body">
                <input id="auto_user_id" type="hidden" name="auto_user_id" value="">
                <div class="row">

                    <div class="col-md-10 col-md-push-1">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">Please Enter Name</span>
                                <input id="user_name" name="user_name" class="form-control" type="text" placeholder="Edit User Name">
                            </div>                    
                        </div> 
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-10 col-md-push-1">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">Please Enter Email</span>
                                <input id="email" name="email"class="form-control" type="text" placeholder="Edit Email">
                            </div>                    
                        </div> 
                    </div>
                </div>
            </div>
            <div class="modal-footer ">
                <div class="row">
                    <div class="col-md-6 col-md-push-3">
                        <button id="update-user" type="button" class="btn btn-warning" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
                    </div>
                    <div class="col-md-1 col-md-push-3 spinner" id="user_update_spinner" style="display: none;margin-top: 5px">
                        <i class="fa fa-spinner fa-spin"></i>
                    </div>
                </div>
            </div>
        </div>
         
    </div>
   
</div>



<div class="modal fade" id="success_message" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                <h4 class="modal-title text-info" id="Heading">User Update/Delete Status</h4>
            </div>
            <div class="modal-body success_message_body">
                <h5 class="text-center text-success"><strong id="alert-message"></strong></h5>

            </div>
            <div class="modal-footer ">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
            </div>
        </div>
 
    </div>
  
</div>

<div class="modal fade" id="userDelete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close btn-danger" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                <h4 class="modal-title custom_align text-center" id="Heading">Delete User</h4>
            </div>
            <div class="modal-body">
                <input id="auto_user_id_delete" type="hidden" name="auto_user_id_delete" value="">
                <h4 class="text-center text-danger"><strong>Are you sure you want to delete this Record?</strong></h4>


            </div>
            <div class="modal-footer ">
                <button id="yes_user" type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
                <button id="no" type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
            </div>
        </div>
    
    </div>
 
</div>

<script type="text/javascript">
    $(document).ready(function () {
        /********************************/
        /*This script get district.*/
        $('.user-edit_detail').click(function () {
            $('#auto_user_id').val($(this).val());
            $('#user_name').val($('#name' + $(this).val()).text());
            $('#email').val($('#email' + $(this).val()).text());
            $('#editUser').modal('show');
        });
        $('.user-delete').click(function () {
            $('#auto_user_id_delete').val($(this).val());
            $('#userDelete').modal('show');
        });




        /*******************************/
        $('#yes_user').click(function () {
            $.ajax({
                url: '<?= base_url('delete_user') ?>',
                data: {
                    auto_id: $('#auto_user_id_delete').val()
                },
                type: "POST",
                success: function (json) {

                    var region_update_status = $.parseJSON(json);
                    if (region_update_status['delete_status']) {
                        $('#userDelete').modal('hide');
                        $('#alert-message').text(region_update_status['message']);
                        $('#success_message').modal('show');
                        $('#row'+$('#auto_user_id_delete').val()).remove();
                    } else {
                        $('#userDelete').modal('hide');
                        $('#alert-message').text(region_update_status['message']);
                        $('#success_message').modal('show');
                    }

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


                },
                complete: function (xhr, status) {


                }
            });


            $('#userDelete').modal('hide');
            $('#success_message').modal('show');
        });


        /******************************/
        $('#update-user').click(function () {
            $('#user_update_spinner').css('display', 'block');
            $.ajax({
                url: '<?= base_url('update_user') ?>',
                data: {
                    auto_id: $('#auto_user_id').val(),
                    user_name: $('#user_name').val(),
                    email: $('#email').val()

                },
                type: "POST",
                success: function (json) {
                    var region_update_status = $.parseJSON(json);
                    if (region_update_status['update_status']) {
                        $('#editUser').modal('hide');
                        $('#name'+$('#auto_user_id').val()).text($('#user_name').val());
                        $('#email'+$('#auto_user_id').val()).text($('#email').val());
                        $('#alert-message').text(region_update_status['message']);
                        $('#success_message').modal('show');
                    } else {
                        $('#editUser').modal('hide');
                        $('#alert-message').text(region_update_status['message']);
                        $('#success_message').modal('show');
                    }

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

                    $('#user_update_spinner').css('display', 'none');
                },
                complete: function (xhr, status) {

                    $('#user_update_spinner').css('display', 'none');
                }
            });

        });



    });

</script>

