<style>
    .form-group input[type="checkbox"] {
        display: none;
    }

    .form-group input[type="checkbox"] + .btn-group > label span {
        width: 20px;
    }

    .form-group input[type="checkbox"] + .btn-group > label span:first-child {
        display: none;
    }
    .form-group input[type="checkbox"] + .btn-group > label span:last-child {
        display: inline-block;   
    }

    .form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
        display: inline-block;
    }
    .form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
        display: none;   
    }
    #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;
    }



    #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;
    }
    #admin-user-right{
        border: 2px solid #dddddd;
    }
    #admin-user-right > thead > tr > th,
    #admin-user-right > tbody > tr > th,
    #admin-user-right > tfoot > tr > th,
    #admin-user-right > thead > tr > td,
    #admin-user-right > tbody > tr > td,
    #admin-user-right > tfoot > tr > td {
        border: 2px solid #dddddd;

    }
    #admin-user-right{
        width: 100%;
        overflow-x: scroll;
    }

</style>
<div class="panel"> 
    <div class="panel-body">
        <form role="form" class="form-horizontal" action="<?= base_url('update_app_right'); ?>" method="POST" enctype="multipart/form-data">
            <h2 class="text-center">Mira Application Right to Update and Add</h2>  
            <hr class="colorgraph">

            <div class="panel">
                <div class="panel-body">

                    <table id="mira-application-update" class="table table-bordred table-striped">
                        <thead>
                            <tr>
                                <th colspan="5">
                        <div class="row" style="margin-top: 15px">
                            <div class="col-md-6 col-md-push-3">
                                <div class="form-group">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i aria-hidden="true"></i><strong>Select Application</strong></span>
                                        <select id="app_id" name="app_id" required class="form-control">
                                            <option value="0" disabled="true" selected="true"> Select Application</option>
                                            <?php for ($i = 0; $i < count($activated_app_list); $i++) { ?>
                                                <option value=<?= $activated_app_list[$i]['app_id'] ?> > <?= $activated_app_list[$i]['app_name'] ?></option>
                                            <?php } ?>
                                        </select>
                                        <span class="input-group-addon"><i class="fa fa-level-down" aria-hidden="true"></i></span>
                                    </div>                    
                                </div> 
                            </div>
                        </div>
                        </th>
                        </tr>
                        <tr>
                            <th class="text-center">Application Name</th>
                            <th class="text-center">Create Date</th>
                            <th class="text-center">Activate Date</th>
                            <th class="text-center">Application Status</th>
                        </tr>
                        </thead>
                        <tbody>


                        </tbody>
                    </table>
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="row" style="margin-left: 30px">
                                <input type="hidden" value=<?= count($right) ?> name="count_number" id="count_number">                                
                                <?php for ($i = 0; $i < count($right); $i++) { ?>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <input type="checkbox" name=<?= "right" . $i ?> id=<?= "right" . $right[$i]['right_id'] ?> autocomplete="off" value=<?= $right[$i]['right_id'] ?>>
                                            <div class="btn-group">
                                                <label for="<?= "right" . $right[$i]['right_id'] ?>" class="btn btn-primary btn-sm">
                                                    <span class="glyphicon glyphicon-ok"></span>
                                                    <span> </span>
                                                </label>
                                                <label for="<?= "right" . $right[$i]['right_id'] ?>" class="btn btn-default btn-sm active">
                                                    <strong><?= $right[$i]['right_name'] ?></strong>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                <?php } ?>
                            </div>        
                        </div>
                    </div>

                </div>
            </div>
            <hr class="colorgraph">
            <div class="row">
                <div class="col-xs-10 col-md-6 col-md-offset-3 col-xs-offset-1"><input type="submit" value="Update/Add Application Rights" class="btn btn-primary btn-lg btn-block"></div>            
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#app_id').change(function () {
            for (var i = 1; i <= parseInt($('#count_number').val()); i++) {
                $('#right' + i).prop("checked", false);
            }

            $.ajax({
                url: '<?= base_url('get_app_right_update') ?>',
                data: {
                    app_id: $(this).val()
                },
                type: "POST",
                success: function (json) {
                    $("#mira-application-update tbody tr").remove();
                    var app_right = $.parseJSON(json);
                    if (app_right['status']) {
                        if (app_right['app_right']) {
                            for (var i = 0; i < app_right['app_right'].length; i++) {
                                $('#right' + app_right['app_right'][i]['right_id']).prop("checked", true);
                            }
                        }
                        if (app_right['application']) {
                            for (var i = 0; i < app_right['application'].length; i++) {
                                $("#mira-application-update tbody").append('<tr></tr>');

                                if (parseInt(app_right['application'][i]['activate_status']) == 1) {
                                    $("#mira-application-update tbody tr:last").append("<td class='text-center text-success'>" + app_right['application'][i]['app_name'] + "</td>");
                                    $("#mira-application-update tbody tr:last").append("<td class='text-center text-success'>" + app_right['application'][i]['app_create_date'] + "</td>");

                                    $("#mira-application-update tbody tr:last").append("<td class='text-center text-success'>" + app_right['application'][i]['activate_date'] + "</td>");
                                    $("#mira-application-update tbody tr:last").append("<td class='text-center'><span class='label label-success'>Application Running...</span></td>");
                                } else {
                                    $("#mira-application-update tbody tr:last").append("<td class='text-center text-info'>" + app_right['application'][i]['app_name'] + "</td>");
                                    $("#mira-application-update tbody tr:last").append("<td class='text-center text-info'>" + app_right['application'][i]['app_create_date'] + "</td>");

                                    $("#mira-application-update tbody tr:last").append("<td class='text-center text-info'>" + '------------' + "</td>");
                                    $("#mira-application-update tbody tr:last").append("<td class='text-center'><span class='label label-danger'>Activation Pending...</span></td>");
                                }

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

                },
                complete: function (xhr, status) {

                }
            });





        });
    });
</script>
