@extends(getTemplate('admin'))
@section('content')
	@push('custom-css')

	@endpush
	<div class="gadmin-pagesidebar-width-1 gadmin-mhide">
		<div class="panel panel-default gadmin-pagesidebar-width-1-panel ">
			<!-- begin panel-heading -->
			<div class="panel-heading gadmin-pagesidebar-width-1-heading">
				<h4 class="panel-title">{{__('admin.members_management')}}</h4>
			</div>
			<!-- end panel-heading -->
			<div class="gadmin-pagesidebar-body">
				<div class="gadmin-pagesidebar-main">
					<ul class="nav gadmin-pagesidebar-ul">
						<li><a href="{{url('admin/users/roles')}}" class="">List roles</a></li>
						<li><a class=" active">Add role</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>

<div class="gadmin-pagesidebar-width-2">
	<!-- begin panel -->
	<div class="panel panel-default " data-sortable-id="ui-widget-6">
		<div class="panel-heading">
			<h4 class="panel-title">
				{{$title}}
			</h4>
		</div>
		<div id="info-alert" class="alert" style="display:none">
			<span class="close"  onclick="$('#info-alert').fadeOut()">×</span>
			<div class="alert-container"></div>
		</div>
        <div class="panel-body">
            <form class="form-horizontal form-bordered" enctype="multipart/form-data" action="{{url('admin/users/roles')}}" method="post" data-parsley-validate="true">
                <div class="form-group row">
                    <label class="col-md-3 col-form-label">Role Name</label>
                    <div class="col-md-8">
                        <input class="form-control" type="text" id="name" name="name" placeholder="role" data-parsley-required="true" value="{{$object?->name}}">
                    </div>
                </div>
                <div class="form-group row m-b-0 form-save-bg">
                    <label class="col-md-3 col-sm-4 col-form-label">&nbsp;</label>
                    <div class="col-md-8 col-sm-8">
                        <button type="submit" class="btn btn-success form-button-save">Add Role</button>
                    </div>
                </div>
            </form>
			<div class="container" id="error-box" style="text-align:center;" >
				<p id="error" style="color:red;"></p>
			</div>
        </div>
	</div>
	<!-- end panel -->
</div>
<script>
	$(document).ready(function (){
		$("#error-box").hide();
	});

	$("form").submit(function (event) {
			event.preventDefault();
			var data = getFormData($("form"));

			$.ajax(event.target.action, {
 				method: "POST",
 				beforeSend: function(xhr) {
  					xhr.setRequestHeader('Accept', 'application/json');
 				},
 				data: data,
				dataType: "json",
				error: function(data){
					$("#error-box").show();
					$("#error").text(data.responseJSON.message);
				},
				success: function(data){
					window.location = data.redirect;
				}
				});


		});
	function getFormData($form){
    	var unindexed_array = $form.serializeArray();
    	var indexed_array = {};

    	$.map(unindexed_array, function(n, i){
    	    indexed_array[n['name']] = n['value'];
    	});
		Object.keys(indexed_array).forEach((k) => indexed_array[k] == "" && delete indexed_array[k]);
		return indexed_array;
		}
</script>

	@push('custom-js')
	@endpush
@endsection