@yield('title', lang('master.update'))

@extension('message')
@error()

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

@beginForm(route('update', ['id' => $this->id]))
@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" id="{{$roleKey}}" 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>

<input type="hidden" value="{{$this->id}}" name="id" />
@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>
		var roles = '{{ $this->roles }}';
		$(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);
					}
				}
			});

			roles = roles.split(',');
			for(var key in roles) {
				var key = roles[key].replace(/\//gi, "_");
				if(!key)
					continue;
				$("#" + key).prop("checked", true).trigger("change");
			}
		});
	</script>
@endsection