<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;
    }
    img{
        max-height: 30px;
        max-width: 50px;
        display: inline;
    }
</style>
<div class="panel"> 
    <div class="panel-body">

        <table id="mira-application-update" class="table table-bordred table-striped">
            <thead>
                <tr>
                    <th colspan="7"><h4 class="text-center"> <strong>MIRA Application Details</strong></h4></th>
            </tr>
            <tr>
                <th class="text-center">App ID</th>
                <th class="text-center">App Name</th>
                <th class="text-center">Create Date</th>
                <th class="text-center">Current Status</th>
                <th class="text-center">App Logo</th>
                <th class="text-center">Edit</th>
                <th class="text-center">Delete</th>


            </tr>
            </thead>
            <tbody>
                <?php for ($i = 0; $i < count($application); $i++) { ?>
                    <tr id="<?=$application[$i]['app_id']?>">
                        <td class="text-center"><?= "ZMQ" . $application[$i]['app_id'] ?></td>
                        <td class="text-center"><?= $application[$i]['app_name'] ?></td>
                        <td class="text-center"><?= date('d-m-Y', strtotime($application[$i]['app_create_date'])); ?></td>
                        <?php if ($application[$i]['app_mapping_status']) { ?>
                            <td class="text-center"><span class="label label-success">Mapped</span></td>
                        <?php } else { ?>
                            <td class="text-center"><span class="label label-info">Unmapped</span></td>
                        <?php } ?>
                            
                        
                        <td class="text-center">
                            <?php if($application[$i]['app_logo_path']!=NULL){?>
                                <img src="<?= $application[$i]['app_logo_path']?>" class="img-thumbnail" alt="image">
                           <?php }else{?>
                                <img src="<?= base_url('images/ZMQ_logo.jpg')?>" class="img-thumbnail" alt="image">
                          <?php  }?>
                            
                        </td>
                        
                        
                        
                        <td class="text-center"><p data-placement="top" data-toggle="tooltip" title="Edit"><button type="button" class="btn btn-primary btn-xs application-edit" value="<?= $application[$i]['app_id'] ?>" data-title="editApplication" data-toggle="modal" data-target="#editApplication" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
                        
                            
                            
                         <?php if ($application[$i]['app_mapping_status']) { ?>
                            <td class="text-center"><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" disabled data-title="applicationDelete" data-toggle="modal" data-target="#applicationDelete" ><span class="glyphicon glyphicon-trash"></span></button></p></td>
                        <?php } else { ?>
                            <td class="text-center"><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs application-delete" data-title="applicationDelete" data-toggle="modal" data-target="#applicationDelete" value="<?= $application[$i]['app_id'] ?>"><span class="glyphicon glyphicon-trash"></span></button></p></td>
                        <?php } ?>
                    </tr>
                <?php } ?>

            </tbody>
        </table>
    </div>
</div>


<div class="modal fade" id="editApplication" tabindex="-1" role="dialog" aria-labelledby="editApplication" 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 custom_align" id="Heading">Edit Application</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <input id="admin_id" type="hidden" name="admin_id" value="">
                    <div class="col-md-7 col-md-push-1">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-sign-in fa-fw" aria-hidden="true"></i></span>
                                <input id="login-id" name="login_id" required class="form-control" type="text" placeholder="Change login id">
                            </div>                    
                        </div> 
                    </div>
                    <div id="user-id-valid" class="col-md-5 col-md-push-1" style="display: none">
                        <span class="text-success">
                            <i class="fa fa-check fa-2x"></i>
                        </span>
                        <span class="text-success">
                            <strong>Available</strong>
                        </span>
                    </div>
                    <div id="user-id-invalid" class="col-md-5 col-md-push-1" style="display: none">
                        <span class="text-danger">
                            <i class="fa fa-remove fa-2x"></i>
                        </span>
                        <span class="text-danger">
                            <strong>OOPS! Already exist.</strong>
                        </span>

                    </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"><i class="fa fa-phone-square fa-fw" aria-hidden="true"></i></span>
                                <span class="input-group-addon">+91</span>
                                <input id="mobile" class="form-control" type="text" name="mobile" placeholder="Mobile Number" maxlength="10" min="10">
                            </div>                    
                        </div>
                    </div>
                </div>
              </div>
            <div class="modal-footer ">
                <button id="update" type="button" disabled class="btn btn-warning" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
            </div>
        </div>
        <!-- /.modal-content --> 
    </div>
    <!-- /.modal-dialog --> 
</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 custom_align" id="Heading">Application Update Status</h4>
            </div>
            <div class="modal-body">
                <h4><strong id="alert-message"></strong></h4>

            </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>
        <!-- /.modal-content --> 
    </div>
    <!-- /.modal-dialog --> 
</div>


<div class="modal fade" id="applicationDelete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header alert alert-info">
                <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 MIRA Application</h4>
            </div>
            <div class="modal-body">
                <input id="app_id_delete" type="hidden" name="app_id_delete" value="">
                <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>

            </div>
            <div class="modal-footer ">
                <button id="yes" 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>
        <!-- /.modal-content --> 
    </div>
    <!-- /.modal-dialog --> 
</div>
<script type="text/javascript">
    $(document).ready(function () {
        // This script get district.
        $('#login-id').change(function () {
            $.ajax({
                url: '<?= base_url('checkId') ?>',
                data: {
                    user_id: $(this).val()
                },
                type: "POST",
                success: function (json) {
                    var states = $.parseJSON(json);
                    if (states['check']) {
                        $('#user-id-invalid').css('display', 'none');
                        $('#user-id-valid').css('display', 'block');
                        $('#update').prop('disabled', false);

                    } else {
                        $('#user-id-valid').css('display', 'none');
                        $('#user-id-invalid').css('display', 'block');
                        $('#update').prop('disabled', true);

                    }
                }
            });
        });
        $('#update').click(function () {
            $.ajax({
                url: '<?= base_url('update') ?>',
                data: {
                    admin_id: $('#admin_id').val(),
                    phone: $('#mobile').val(),
                    login_id: $('#login-id').val()
                },
                type: "POST",
                success: function (json) {
                    var admin_update_status = $.parseJSON(json);
                    if (admin_update_status['admin_update_status']) {
                        $('#login_id'+$('#admin_id').val()).html(admin_update_status['user']['admin_login_id']);
                        $('#phone'+$('#admin_id').val()).html(admin_update_status['user']['mobile']);
                        $('#editAdmin').modal('hide');
                        $('#alert-message').text(admin_update_status['message']);
                        $('#success_message').modal('show');
                    } else {
                        $('#editAdmin').modal('hide');
                        $('#alert-message').text(admin_update_status['message']);
                        $('#success_message').modal('show');
                    }

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

        });
        $('.user-edit').click(function () {
            $('#mobile').val('');
            $('#admin_id').val('');
            $('#login-id').val('');
            $('#user-id-valid').css('display', 'none');
            $('#user-id-invalid').css('display', 'none');
            $.ajax({
                url: '<?= base_url('getAdmin') ?>',
                data: {
                    admin_id: $(this).val()
                },
                type: "POST",
                success: function (json) {
                    var admin_user = $.parseJSON(json);
                    for (var i = 0; i < admin_user['user'].length; i++) {
                        $("#admin_id").val(admin_user['user'][i]['admin_id']);
                        $("#mobile").val(admin_user['user'][i]['mobile']);
                    }
                },
                error: function (xhr, status, errorThrown) {
                    
                },
                complete: function (xhr, status) {
                    
                }
            });

        });
        /**
         * 
         * 
         * 
         */
        $('.application-delete').click(function () {
            $('#app_id_delete').val($(this).val());
        });
        /**
         * 
         * 
         * 
         */
        $('#yes').click(function () {
           $.ajax({
                url: '<?= base_url('deleteApp') ?>',
                data: {
                    app_id_delete: $('#app_id_delete').val()
                },
                type: "POST",
                success: function (json) {
                    var app_update_status = $.parseJSON(json);
                    if (app_update_status['app_delete_status']) {
                        $('#'+$('#app_id_delete').val()).remove();                        
                        $('#applicationDelete').modal('hide');
                        $('#alert-message').text(app_update_status['message']);
                        $('#success_message').modal('show');
                    } else {
                        $('#deleteAdmin').modal('hide');
                        $('#alert-message').text(app_update_status['message']);
                        $('#success_message').modal('show');
                    }
                },
                error: function (xhr, status, errorThrown) {

                },
                complete: function (xhr, status) {

                }
            });

        });
    });
</script>

