@extends('adminlte::page')
@section('css')
	<style>
		.tabs-left,
		.tabs-right {
			border-bottom: none;
			padding-top: 2px;
		}

		.tabs-left {
			border-right: 1px solid #ddd;
		}

		.tabs-right {
			border-left: 1px solid #ddd;
		}

		.tabs-left>li,
		.tabs-right>li {
			float: none;
			margin-bottom: 2px;
		}

		.tabs-left>li {
			margin-right: -1px;
		}

		.tabs-right>li {
			margin-left: -1px;
		}
		ul li{
			margin-left: 30px
		}
		ul li.row-list{
			width: 335px !important;
			float: left
		}
		.tabs-left>li.active>a,
		.tabs-left>li.active>a:hover,
		.tabs-left>li.active>a:focus {
			border-bottom-color: #ddd;
			border-right-color: transparent;
		}

		.tabs-right>li.active>a,
		.tabs-right>li.active>a:hover,
		.tabs-right>li.active>a:focus {
			border-bottom: 1px solid #ddd;
			border-left-color: transparent;
		}

		.tabs-left>li>a {
			border-radius: 4px 0 0 4px;
			margin-right: 0;
			display: block;
		}

		.tabs-right>li>a {
			border-radius: 0 4px 4px 0;
			margin-right: 0;
		}
	</style>
@stop
@section('content')
    <?php Fun::lang() ?>
	<div class="title-add">
		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li> <a class="ng-binding" href="#"><i class="fa fa-dashboard"></i> Dashboard</a> </li>
				<li><a href="#">Manage User</a></li>
				<li><a href="#">Role</a></li>
				<li><a href="#">create Role</a></li>
			</ul>
		</div>
	</div>
	<div class="page">
		<div class="top-content">
			<div class="row">
				<div class="col-sm-12 col-xs-12">
					<div class="title-page">
						<div class="pull-left">
							<h3>Create Role</h3>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="form-wrapper">
					{!! Form::open(array('route' => 'roles.store','method'=>'POST','id'=>'form_validate')) !!}
					<div class="row">
						<div style="width: 100%;float: left;">
							<div class="form-group col-sm-4 col-xs-12">
								<label class="required">Title</label>
								{!! Form::text('name', null, array('placeholder' => 'Title','class' => 'form-control','required')) !!}
								<span class="focus-border"></span>
							</div>
						</div>
					</div>
					<div class="col-md-12">
						<div class="col-md-12">
							<h3>Select Permission</h3>
							<hr />
							<div class="col-xs-9">
								<div class="tab-content">
									@foreach($prefixes as $key => $prefix)
										<div class="tab-pane {{($key==0)?'active':''}}" id="{{$key}}-tab">
											<div class="col-sm-12 col-xs-12">
												@foreach($groups as $j => $group)
													@if($prefix->prefix_name==$group->prefix_name)
														<ul>
															<label style="width: 100%;color: #003eff;margin-bottom:20px" class="checkbox-list">
																<input type="checkbox" class="main-box" id="{{$j}}-box" value="checked" name="checkbox_1[]">
																Check All {{$group->group_name}}
																<span class="checkmark"></span>
															</label>
															@foreach($permission as $value => $perm)
																@if($perm->group_name == $group->group_name)
																	<li class="row-list">
																		<label style="width: 100%;font-size: 14px" class="checkbox-list">
																			<input type="checkbox" name="permission[]" id="" value="{{$perm->id}}" class="name {{$j}}-box">
																			{{ $perm->name }}<span class="checkmark"></span>
																		</label>
																	</li>
																@endif
															@endforeach
														</ul>
													@endif
												@endforeach
											</div>
										</div>
									@endforeach
								</div>
							</div>
							<div class="col-xs-3">
								<ul class="nav nav-tabs tabs-right sideways">
									@foreach($prefixes as $index => $prefix)
										<li class="{{($index==0)?'active':''}}"><a href="#{{$index}}-tab" data-toggle="tab">{{$prefix->prefix_name}}</a></li>
									@endforeach
								</ul>
							</div>
						</div>

						<div class="col-sm-12 col-xs-12">
							<div class="form-group">
								<button type="submit" class="button_sm button_primary pull-right"><span class="fa fa-save"></span> Save</button>
								<button type="button" onClick="javascript:history.go(-1)" class="button_sm button_warning pull-right">
									<span class=" fa fa-arrow-circle-left"></span> Back</button>
							</div>
						</div>
						{!! Form::close() !!}
					</div>
				</div>
			</div>
		</div>

		@endsection

		@section('js')
			<script type="text/javascript">
                $(document).on('change','.main-box',function(){
                    var id = $(this).attr('id');
                    if($(this).is(":checked")){
                        $("."+id).prop('checked', true);
                    }else{
                        $("."+id).prop('checked', false);
                    }
                });
			</script>
@endsection