@extends('master.admin')

@push('header.scripts')
<!-- BEGIN PAGE LEVEL PLUGINS -->
<link href="{{ asset('public/assets/global/plugins/datatables/datatables.min.css') }}" type="text/css" />
<link href="{{ asset('public/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css') }}" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL PLUGINS -->
@stop

@push('footer.scripts')
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="{{ asset('public/assets/global/scripts/datatable.js') }}" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.js"></script>
<script src="{{ asset('public/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>
    var dt_roles_obj;
    $(function() {
        dt_roles_obj = $('#roles_dt').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            ajax: '{!! url("admin/roles/ajax") !!}',
            columns: [
                { data: 'id', name: 'roles.id' },
                { data: 'name', name: 'name' },
                { data: 'display_name', name: 'display_name' },
                { data: 'description', name: 'description' },
                { data: 'date', name: 'roles.created_at' },
                { data: 'actions', name: 'actions', className:'text-right', "bSearchable": false },
            ]
        });
        
        // Add Item record
        $("#add_new_user_btn").click(function(e){   
            $('#addeditrole_error_div').hide();
            $('#addeditrole_success_div').hide();
            $('#addedit_role_form #id').val( '' );
            $('#addedit_role_form').find("input[type=text]").val("");
            $('#addedit_role_form #display_name').val('');
            $("#addedit_role_form").attr("action", '{!! url("admin/roles") !!}');
            //$("#addedit_role_form").attr("method", "POST");
        });
        
        // Edit Item record
        $('#roles_dt').on('click', 'a.role_edit_class', function () {
            endBlockUI('#addedit_role_form');
            $('#addeditrole_error_div').hide();
            $('#addeditrole_success_div').hide();
            $('#addedit_role_form #id').val( $(this).attr('data-id') );
            $('#addedit_role_form #name').val( $(this).attr('data-name') );
            $('#addedit_role_form #display_name').val( $(this).attr('data-display_name') );
            $('#addedit_role_form #description').val( $(this).attr('data-description') );
            var formAction = '{!! url("admin/roles/update") !!}';
            $("#addedit_role_form").attr("action", formAction);
            //$("#addedit_role_form").attr("method", "PATCH");
            $('#addNewRole').modal('show', {backdrop: 'static'});
        });
        
        // Delete Item record
        $('#roles_dt').on('click', 'a.roles_list_remove', function (e) {
            endBlockUI('#addedit_role_form');
            $('#deleterecord_error_div').hide();
            $('#deleterecord_success_div').hide();
            $('#delete_record_dt_id').val('roles_dt')
            $('#delete_item_id').val( $(this).attr('data-id') );
            $('#delete_action_url').val( '{!! url("admin/roles") !!}/'+$(this).attr('data-id') );
            $('#confirmRemoveRecord').modal('show', {backdrop: 'static'});
            e.preventDefault();
        });  
        
        /*
         * Submit form for add new Role information
         */
        $("#addedit_role_form").submit(function(e){
            startBlockUI('#addedit_role_form', 'animate');
            $('#addeditrole_error_div').hide();
            $('#addeditrole_success_div').hide();
            var token = $('#token_csrf').val();
            $.ajax({
                url : $(this).attr('action'),
                headers: {'X-CSRF-TOKEN': token},
                type: $(this).attr('method'),
                data : $(this).serialize(),
                dataType: 'json',
                success:function(response) {
                    if(response.status){
                        if( response.status == '0' ){
                            
                            $('#addeditrole_success_div').hide();
                            $('#addeditrole_error_div').show();
                            $('#addeditrole_error_msg').html(response.message);
                            endBlockUI('#addedit_role_form');
                            $("#addeditrole_error_div").fadeTo(0, 1);
                            fadeout_div('addeditrole_error_div');
                            return false;
                        }else{
                            $('#addeditrole_error_div').hide();
                            $('#addeditrole_success_div').show();
                            $('#addeditrole_success_msg').html(response.message);
                            window.setTimeout(function(){
                                dt_roles_obj.ajax.reload();
                                endBlockUI('#addedit_role_form');
                                $('#addNewRole').modal('toggle');
                            }, 3000);  
                        }
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    var errorMsg  = '';
                    console.log(jqXHR.responseJSON);
                    $.each(jqXHR.responseJSON, function(index, value) {
                        var unitMsg = '<p>' + value + '</p>';
                        errorMsg = errorMsg +  unitMsg;
                    }); 
                    if( errorMsg != '' ){
                        $('#addeditrole_success_div').hide();
                        $('#addeditrole_error_div').show();
                        $('#addeditrole_error_msg').html(errorMsg);
                        endBlockUI('#addedit_role_form');
                    }
                    return false;   
                }
            });
            e.preventDefault(); //STOP default action
        });
    });
</script>
@stop

@section('content')
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="page-content">
        <!-- BEGIN PAGE HEADER-->
        <!-- BEGIN PAGE BAR -->
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <a href="#">Administration</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li>
                    <span>Roles</span>
                </li>
            </ul>
        </div>
        <!-- END PAGE BAR -->
        <!-- BEGIN PAGE TITLE-->
        <h3 class="page-title"> </h3>
        <!-- END PAGE TITLE-->
        <div class="row">
            <div class="col-md-12">
                <!-- Begin: life time statistics -->
                <div class="portlet light portlet-fit portlet-datatable bordered">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-phone"></i>
                            <span class="caption-subject font-dark sbold uppercase">Roles List</span>
                        </div>
                        <div class="actions">
                            <div class="btn-group pull-left" style="margin-right: 5px;">
                                <a href="#" id="add_new_user_btn" data-toggle="modal" data-target="#addNewRole"  class="btn btn-fit-height blue" style="margin-right: 5px;"><i class="fa fa-plus-circle"></i> Add New Role</a>
                            </div>
                        </div>
                    </div>
                    <div class="portlet-body" style="height:auto !important;">
                        <div class="table-scrollable" id="calls-outer-div">    
                            <table id="roles_dt" class="table table-striped table-bordered table-hover " cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>Display Name</th>
                                        <th>description</th>
                                        <th>Date created</th>
                                        <th class="text-right"> Actions </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
    <!-- END CONTENT BODY -->
</div>
<!-- END CONTENT WRAPPER -->    

<!-- BEGIN INCLUDE MODAL  "CREATE NEW USER" -->
<div class="modal fade" id="addNewRole" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <input type="hidden" id="prefix_id_hidden" value="" />
        <form class="modal-content horizontal-form" action="{!! url('admin/roles') !!}" id="addedit_role_form" method="post">
            <input type="hidden" name="token_csrf" id="token_csrf" value="{{ csrf_token() }}" />
            <input type="hidden" name="id" id="id" value="" />
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">Add / Edit Role(s)</h4>
            </div>
            <div class="form-horizontal modal-body" role="form">
                <div class="form-body">
                    <div id="addeditrole_success_div" class="error-block form-group" style="display:none; ">
                        <div id="addeditrole_success_msg" class="alert alert-success col-md-12"></div>
                    </div>
                    <div id="addeditrole_error_div" class="error-block form-group" style="display:none; ">
                        <div id="addeditrole_error_msg" class="alert alert-danger col-md-12"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">

                            <div class="form-group">
                                <label class="control-label col-md-4">Name <span class="required">*</span></label>
                                <div class=" col-md-8">
                                    <input type="text" class="form-control form-inline" id="name" name="name" required="" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label  col-md-4">Display Name <span class="required">*</span></label>
                                <div class=" col-md-8">
                                    <input type="text" class="form-control form-inline" id="display_name" name="display_name"  required="" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label  col-md-4">Description</label>
                                <div class=" col-md-8">
                                    <textarea class="form-control form-inline" id="description" name="description" ></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn blue"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
            </div>
        </form>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- END INCLUDE MODAL -->
@stop