<?php require_once('includes/check-login.php'); ?>
<?php require_once('includes/header.php'); ?>
    <?php require_once('includes/menu.php'); ?>

        <!-- Datatable CSS -->
        <link href='data_tables/datatables.min.css' rel='stylesheet' type='text/css' />        

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">                
                    <small><a href="javascript:void(0);" class="newRole"><i class="fa fa-plus"></i> Role</a></small>                    
                    <ol class="breadcrumb">
                        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>                    
                        <li class="active"><a href="roles.php">Roles</a></li>           
                    </ol>                
            </section>

            <!-- Main content -->
            <section class="content">                
                <!-- Default box -->
                <div class="box box-form">
                    <div class="box-header with-border">
                        <h3 class="box-title">Roles</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                                <i class="fa fa-minus"></i></button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                                <i class="fa fa-times"></i></button>
                        </div>
                    </div>
                    <div class="box-body">    
                        <!-- Table -->
                        <table id='Roles' class='display dataTable table table-bordered table-hover'>
                            <thead>
                            <tr>
                                <th>Category</th>                               
                                <th>Active</th>                                
                                <th>Created On</th>
                                <th>Edit</th>
                                <th>Delete</th>
                            </tr>
                            </thead>                
                        </table>

                    </div>
                    
                    <!-- /.box-footer-->                    
                </div>
                <!-- /.box -->

            </section>
            <!-- /.content -->                                        
        </div>
        <!-- /.content-wrapper -->        

        <div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="roleTitle"></h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12 message"></div>
                            <form role="form" id="roleForm">                                
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Role Name</label>
                                        <br>
                                        <input type="text" class="form-control" id="role_name" name="role_name" placeholder="Role Name" value="" />
                                    </div>                                                                       
                                    <div class="form-group">
                                        <label>Active</label>
                                        <br>
                                        <select id="active" name="active" class="form-control">
                                            <option value="-1">-- Active --</option>
                                            <option value="1" selected="selected">Active</option>
                                            <option value="0">Inactive</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-12 metaInfo">
                                </div>
                                <div class="col-xs-12">
                                    <button type="button" class="btn btn-primary" id="roleBtn">Save</button>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="editRoleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="eroleTitle"></h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12 message"></div>
                            <form role="form" id="editRoleForm">                                
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Role Name</label>
                                        <br>                                       
                                        <input type="text" class="form-control" id="e_role_name" name="role_name" placeholder="Role Name" value="" />
                                    </div>                                                                        

                                    <div class="form-group">
                                        <label>Active</label>
                                        <br>
                                        <select id="e_active" name="active" class="form-control">
                                            <option value="-1">-- Active --</option>
                                            <option value="1" selected="selected">Active</option>
                                            <option value="0">Inactive</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-12">
                                    <button type="button" class="btn btn-primary" id="roleUpdateBtn">Save</button>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<script src="js/common.js"></script>     
<script src="js/roles/script.js"></script>     
<?php require_once('includes/footer.php'); ?>