@extends('admin.layout.main')

@section('content')
	<div class = "right_col" role = "main" >
		<div class = "" >
			<div class = "page-title" >
				<div class = "title_left" >
					<h3 >Permissions</h3 >
				</div >
				<div class = "title_right" >
					<div class = "col-md-12 col-sm-12 col-xs-12" >
						<button type = "button" data-toggle = "modal" class = "btn btn-dark pull-right"
						        data-target = "#add-permission-modal" >Add Permission</button >
					</div >
				</div >
			</div >
			<div class = "clearfix" ></div >
			
			@component('components.panel')
				@slot('title')
					Assign Permissions
				@endslot
				@slot('body')
					
					<select id="role" data-placeholder="select role">
						<option></option>
						<option>admin</option>
						<option>student</option>
					</select>
					<hr/>
					<div class="row">
						<div class="col-md-3">
							<label>
								<input type="checkbox"> Check me out
							</label>
						</div>
						<div class="col-md-3">
							<label>
								<input type="checkbox"> Check me out
							</label>
						</div>
						<div class="col-md-3">
							<label>
								<input type="checkbox"> Check me out
							</label>
						</div>
					</div>
					<button type="submit" class="btn btn-success pull-right">Assign</button>
				@endslot
			@endcomponent
			
		</div>
	</div>
	
	@component('components.modal')
		@slot('id')
			add-permission-modal
		@endslot
		@slot('method')
			post
		@endslot
		@slot('url')
			admin/permission/add
		@endslot
		@slot('title')
			Add Permission
		@endslot
		@slot('formFields')
			@include('admin.permission.permission-form')
		@endslot
	@endcomponent
	
@endsection


@section('script')
	<script>
		$(document).ready(function(){
		    $('#role').select2({
			    'width': '100%'
		    });
		});
	</script>
@endsection