@yield('title', lang('role.group_user'))

@extension('message')
@error()

@section('breadcrumb')
	<h2><a href="{{ route('index') }}">@lang('role.group_user')</a></h2>
	<span>@lang('master.add_bt')</span>
@endsection

@beginForm(route('create'))
	@modelBinding('GroupUserModel')

	<div class="row form-group">
		<div class="col-md-2">
			@labelFor('name') (*)
		</div>
		<div class="col-md-5">
			@inputFor('name', ['class' => 'form-control'])
		</div>
		<div class="col-md-5">
			@errorMessage('name')
		</div>
	</div>

	<div class="row form-group">
		<div class="col-md-2">
			@labelFor('cvdv')
		</div>
		<div class="col-md-5">
			@inputFor('cvdv')
		</div>
		<div class="col-md-5">
			@errorMessage('cvdv')
		</div>
	</div>

	<div class="row form-group">
		<div class="col-md-2">
			@labelFor('branchID') (*)
		</div>
		<div class="col-md-5">
			@inputFor('branchID', ['class' => 'form-control'])
		</div>
		<div class="col-md-5">
			@errorMessage('branchID')
		</div>
	</div>

	<div class="row form-group">
		<div class="col-md-12">
			<div class="clearfix titlebox">
				<div>
					<i class="fa fa-gavel"></i> @lang("model.role")
				</div>
			</div>
		</div>
		<div class="col-md-12">
			<div class="row">
				
				@foreach($this->roleList as $groupName => $roles)
					<div class="container">
						<div class="roles">
							<div class="title">
								<label>
									<input type="checkbox" /> &nbsp;
									{{$groupName}}
								</label>
							</div>
							<div class="row role-content">
								@foreach($roles as $roleKey => $roleName)
								<div class="col-md-4">
									<label>
										<input type="checkbox" name="roles[]" class="irole" value="{{$roleKey}}" /> &nbsp;
										{{$roleName}}
									</label>
								</div>
								@endforeach
							</div>
						</div>
					</div>
				@endforeach
				
			</div>
		</div>
	</div>

	<input type='submit' class='btn btn-primary' value="@lang('model.save')" />
	&nbsp;
	<a class='btn btn-default' href="{{isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : $this->backUrl}}">@lang('model.close')</a>

@endForm

<style>
	.titlebox {
		margin-top: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #eee;
		margin-bottom: 15px;
	}

	.titlebox div {
		border-bottom: 2px solid #999;
		float: left;
		padding-bottom: 10px;
		margin-bottom: -10px;
		padding-right: 5px;
		font-size: 15px;
	}
	.roles {
		border: 1px solid #ccc;
		margin-bottom: 10px;
	}
	.roles .title {
		margin: 0px 0px 5px 0px;
		padding: 10px 5px;
		background-color: #eee;
		padding-left: 12px;
	}

	.roles .role-content {
		margin-left: 0px;
		margin-right: 0px;
	}
</style>

@section('script')
	<script>
		$(document).ready(function () {
			$(".roles .title input[type='checkbox']").change(function () {
				$(this).parent().parent().parent().find(".irole").prop("checked", this.checked);
			});

			$(".roles .role-content input.irole").change(function () {
				if (this.checked) {
					$(this).parent().parent().parent().parent().find(".title input[type='checkbox']").prop("checked", true);
				} else {
					var parent = $(this).parent().parent().parent().parent();
					var flag = true;
					parent.find("input.irole").each(function () {
						if (this.checked) {
							flag = false;
						}
					});
					if (flag) {
						parent.find('.title input').prop("checked", false);
					}
				}
			});
		});
	</script>
@endsection