@push('css')
<link href="{{asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css" />
@endpush
<div class="row">
	<div class="col-lg-12">
		<div class="mb-3">
			<label>Group Name</label>
			{!! Form::text('name',null,['class'=>'form-control','placeholder'=>'input name']) !!}
		</div>
	</div>
</div>
<div class="row">
	@if(!isset($group))
	<div class="col-md-6">
		<div class="mb-3">
			<label>Permission</label>
			{!! Form::text('permission_name[]',null,['class'=>'form-control','placeholder'=>'input permission name']) !!}
		</div>
	</div>
	<div class="col-md-5">
		<div class="mb-3">
			<label>Protect Method</label>
			{!! Form::text('protect_method[]',null,['class'=>'form-control','placeholder'=>'input method name']) !!}
		</div>
	</div>
	@endif
</div>
	@if(isset($group))
	@foreach($group->permissions as $permission)
		<div class="row">
		 	<div class="col-md-6">
				<div class="mb-3">
					<label>Permission</label>
					{!! Form::hidden('permission_id[]',$permission->id) !!}
					{!! Form::text('permission_name[]',$permission->name,['class'=>'form-control','placeholder'=>'input permission name']) !!}
				</div>
			</div>
			<div class="col-md-5">
				<div class="mb-3">
					<label>Protect Method</label>
					{!! Form::text('protect_method[]',$permission->protect_method,['class'=>'form-control','placeholder'=>'input permission name']) !!}
				</div>
			</div>
			<div class="col-md-1">
				<div class="mb-3">
					<label>Action</label>
					<a class="btn btn-danger btn-del-permission" id="{{$permission->id}}" url="{{route('permission.delete',$permission->id)}}"><i class="fa fa-times"></i></a>
				</div>
			</div>
		</div>
	@endforeach
	@endif
	<div class="append">
		
	</div>
	<div class="col-md-12">
		<a class="btn btn-warning add-item"><i class="fa fa-plus"></i>	Tambah Item</a>
	</div>
@push('js')
<script src="{{asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>
<script type="text/javascript">
	$('.add-item').click(function(){
		$('.append').append($('#permission-template').html());
	});

	$('body').on('click','.btn-remove',function(){
		$(this).closest('.row').remove();
	});
	$('.btn-del-permission').click(function(){
		var ini  = $(this);
		Swal.fire({
			title: 'Are you sure?',
			text: "Yakin Ingin menghapus permission ini?",
			icon:"question",
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Yes, delete it!'
		}).then((result) => {
			if (result.value) {
				$.ajax({
					url:ini.attr('url'),
					method:'DELETE',
					dataType:'JSON',
					data:{_token:'{{ csrf_token() }}'},
					success:function(res){
						ini.closest('.row').remove();
						Swal.fire(
							'success',
							'permission berhasil dihapus',
							'success'
						);
					},
				}).fail(function(res){
					Swal.fire(
							'error',
							'permission gagal dihapus',
							'error'
						);
				});
			}

		})
	});
</script>
<script type="text/template" id="permission-template">
	<div class="row">
		<div class="col-md-6">
			<div class="mb-3">
				<label>Permission</label>
				{!! Form::text('permission_name[]',null,['class'=>'form-control','placeholder'=>'input permission name']) !!}
			</div>
		</div>
		<div class="col-md-5">
			<div class="mb-3">
				<label>Protect Method</label>
				{!! Form::text('protect_method[]',null,['class'=>'form-control','placeholder'=>'input method name']) !!}
			</div>
		</div>
		<div class="col-md-1">
			<div class="mb-3">
				<label>Action</label>
				<a class="btn btn-danger btn-remove"><i class="fa fa-times"></i></a>
			</div>
		</div>
	</div>
</script>
@endpush