@extends('layout.backend')

@section('title', 'Permissões do papel')

@section('content')

<x-form.header.button-bar>
	<x-form.header.button-back :route="route('roles.index')" tooltip="Voltar à lista de papéis" />
</x-form.header.button-bar>

@include('components.widget.alerts')

<div class="card shadow mb-4">
	<div class="card-header py-3 d-flex flex-column flex-md-row align-items-md-center justify-content-md-between">
		<div class="mb-2 mb-md-0">
			<h6 class="m-0 font-weight-bold text-primary">
				<i class="fas fa-user-shield mr-2 text-gray-500"></i>Editar permissões do papel
			</h6>
			<p class="mb-0 small text-muted mt-2">Marque as permissões que este papel deve possuir.</p>
		</div>
		<span class="badge badge-primary badge-pill px-3 py-2 align-self-start align-self-md-center">{{ $role->role }}</span>
	</div>

	<div class="card-body">
		{!! Form::open(['id' => 'form-edit-role-permissions', 'url' => route('roles.storepermissions'), 'autocomplete' => 'off']) !!}
		{!! Form::hidden('id', $role->id) !!}

		<div class="form-group row mb-4">
			<label for="role-display" class="col-sm-12 col-md-3 col-form-label font-weight-bold text-md-right">Papel</label>
			<div class="col-sm-12 col-md-6 col-lg-5">
				{!! Form::text('role', $role->role, ['id' => 'role-display', 'class' => 'form-control bg-light', 'readonly' => true]) !!}
				<small class="form-text text-muted">O nome do papel não pode ser alterado nesta tela.</small>
			</div>
		</div>

		<hr class="mb-4">

		<p class="font-weight-bold text-secondary mb-3">
			<i class="fas fa-list-ul mr-1"></i> Lista de permissões
		</p>

		@php
			$permissionGroups = $permissions->groupBy(function ($p) {
				return substr((string) $p->order, 0, 1);
			});
		@endphp

		@foreach ($permissionGroups->chunk(4) as $row)
			<div class="row">
				@foreach ($row as $prefix => $items)
					<div class="col-xl-3 col-lg-4 col-md-6 mb-4">
						{{-- sem overflow-hidden: o .form-check-input usa margin-left negativa e seria cortado --}}
						<div class="border rounded shadow-sm h-100 bg-white">
							<div class="px-3 py-2 border-bottom bg-light">
								<span class="small font-weight-bold text-uppercase text-primary">Grupo {{ $prefix }}</span>
							</div>
							<div class="px-2 pt-2 pb-1">
								@foreach ($items as $index => $permission)
									@php
										$stripeBg = $index % 2 === 0 ? '#f8f9fc' : '#ffffff';
									@endphp
									{{-- não usar px-* no .form-check: o BS4 precisa do padding-left padrão (~1.25rem) para o checkbox --}}
									<div class="form-check mb-1 py-2 pr-2 rounded" style="background-color: {{ $stripeBg }};">
										{!! Form::checkbox(
											'permissions[]',
											$permission->id,
											in_array($permission->id, $role_permissions),
											['id' => $permission->slug, 'class' => 'form-check-input']
										) !!}
										<label class="form-check-label small" for="{{ $permission->slug }}">
											{!! $permission->permission !!}
										</label>
									</div>
								@endforeach
							</div>
						</div>
					</div>
				@endforeach
			</div>
		@endforeach

		<div class="row mt-2">
			<div class="col-12">
				<hr class="mb-4">
				{!! Form::submit('Salvar permissões', ['class' => 'btn btn-primary px-4']) !!}
				<a href="{{ route('roles.index') }}" class="btn btn-outline-secondary ml-2">Cancelar</a>
			</div>
		</div>

		{!! Form::close() !!}
	</div>
</div>

@endsection