@extends('layouts.home_layout')
@section('title','Permission')

@section('style')
	<link rel="stylesheet" href="{{ asset('app-assets/css/select2.min.css') }}" >
	<link rel="stylesheet" href="{{ asset('app-assets/css/jquery.dataTables.min.css') }}" >
@endsection

@section('content')

	<div class="app-content content">
		{{-- <div class="row"> --}}
		<div class="col-12">
			@include('common.alert_msg')
			{{-- @extends('common.alert_msg') --}}
			<div class="card">
				<div class="card-header ">
					<h4 class="card-title">
						<button type="button" class="btn btn-secondary btn-sm"  data-toggle="modal" data-target=".bd-example-modal-lg">Add New</button>
					</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="col-12">
						<div class="table-responsive">
							<table class="table table-bordered table-striped dataTable">
								<thead>
									<tr>
										<th>Id</th>
										<th>Permission Name </th>
										<th>Description </th>
										<th>Status </th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									@php
										$row_count=1;
										// $row_count=$datashow->firstItem();
									@endphp
									@foreach ($datashow as $ds)
										@php
											$route_name=$ds->route_name;
										@endphp
										<tr>
											<td scope="row">{{$row_count++}}</td>
											<td class="permission_name">{{$ds->permission_name}}</td>
											<td class="permit_des">{{$ds->description}}</td>
											<td>{{$ds->row_sts}}</td>
											<td style="width: 200px">
												<table>
													<tr>
														<td style="border:0px;padding:3px">
															<button type="submit" class="btn btn-primary btn-sm  permission_set" data-toggle="modal" data-target="#permit_set_modal" data-id="{{$ds->id}}">Permission set</button>
														</td>
														<td style="border:0px;padding:3px">
															<button type="submit" class="btn btn-secondary btn-sm view_details" data-toggle="modal" data-target="#permit_view_modal" data-id="{{$ds->id}}">View</button>
														</td>
														<td style="border:0px;padding:3px">
															<button type="submit" class="btn btn-secondary btn-sm edit_permit" data-toggle="modal" data-target=".bd-example-modal-lg" data-id="{{$ds->id}}">Edit</button>
														</td>
														<td style="border:0px;padding:3px">
															<form method="POST" class="mb-0" action="{{route("permitSet.destroy",$ds->id) }}">
																@method('DELETE')
																@csrf
																<button type="submit" class="btn btn-danger btn-sm ">Delete</button>
															</form>
														</td>
													</tr>
												</table>
											</td>
										</tr>
									@endforeach
								</tbody>
							</table>
						</div>
						{{-- <table width="100%" class="mb-1">
							<tr>
								<td>Displaying {{$datashow->firstItem()}} to {{sizeof($datashow)}} of {{$datashow->total()}}</td>
								<td class="pull-right">{{ $datashow->render() }}</td>
							</tr>
						</table> --}}
					</div>
				</div>
			</div>
		</div>
		{{-- </div> --}}



		{{-- Modal Start  --}}
		<div class="modal fade bd-example-modal-lg" id="permit_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg">
				<div class="modal-content" id="myModal">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">Creat Permission</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<form method="post" action="{{ url('permitSet') }}">
						@csrf
						<input type="hidden" name="row_id" id="row_id">
						<div class="modal-body">
							<div class="form-group">
								<label for="permission_name" class="col-form-label">Permission Name:</label>
								<input type="text" class="form-control" id="permission_name" name="permission_name" required value="{{old('permission_name', empty($errors->permission_name) ? '' : $errors->permission_name)}}">
								@if ($errors->has('permission_name'))
									<span class="text-danger">{{ $errors->first('permission_name') }}</span>
								@endif
							</div>
							<div class="form-group">
								<label for="description" class="col-form-label">Description:</label>
								<textarea class="form-control" id="description" name="description"></textarea>
							</div>
							
							<div class="form-group">
								<label for="row_status" class="col-form-label">Status:</label>
								<select name="row_status" id="row_status" class="form-control" required>
									<option value="1" {{old('row_status')==1 ? 'selected' : ''}}>Active</option>
									<option value="2" {{old('row_status')==2 ? 'selected' : ''}}>Inactive</option>
								</select>
							</div>
						</div>
						<div class="modal-footer">
							<button type="submit" class="btn btn-primary" id="btn_save">Save</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		{{-- Modal End  --}}

		{{-- permit set Modal Start  --}}
		<div class="modal fade bd-example-modal-lg" id="permit_set_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg">
				<div class="modal-content" id="myModal">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">Permission Set For <mark id="set_permission_name"></mark></h5>
						<button type="button" class="close" id="permission_set_close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<input type="hidden" id="pem_id">
					</div>
					<input type="hidden" name="row_id" id="row_id">

					<div class="modal-body repeater">
						<section id="form-repeater-wrapper">
						  	<div class="row">
						    	<div class="col-12">
							      	<div class="card" style="margin-bottom: 0px ">
							        	<div class="card-body repeater_parent" style="padding-bottom: 0px ">
							         
						                	<div class="row justify-content-between">
							                  	<div class="col-md-12 col-sm-12 form-group">
								                    <label for="controller_name">Select a Controller Name</label>
								                    <select style="width: 100%;" id="controller_name" class="controller_name form-control" name="controller_name">
													    <option value=""></option>
								                    	@foreach ($controllerShow as $cn)
								                    		<option value="{{$cn->route_controller}}">{{$cn->route_controller}}</option>
									                    @endforeach
													</select>
							                  	</div>
							                </div>
							                <div class="row justify-content-between">
							                  	<div class="col-md-12 col-sm-12">
													<div class="table-responsive-lg">
									                  	<table class="table table-bordered table-striped dataTable_route" >
															<thead>
																<tr>
																	<th>#</th>
																	<th>Route Name</th>
																	<th>Description</th>
																	<th>Save Status</th>
																	<th>Action</th>
																</tr>
															</thead>
															<tbody class="route_name">
																
															</tbody>
														</table>
													</div>
												</div>
							                </div>
						                	<hr>
						              	</div>
						            </div>
						    	</div>
						  	</div>
						</section>
					</div>
					<div class="modal-footer">
						<button type="button" id="permission_reset" class="btn btn-danger ">Reset</button>
					</div>
				</div>
			</div>
		</div>
		{{-- permit set Modal End  --}}


		{{-- Permit View Modal Start  --}}
		<div class="modal fade bd-example-modal-lg" id="permit_view_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg">
				<div class="modal-content" id="myModal">
					
					<div class="modal-body repeater">
						<section id="form-repeater-wrapper">
						  <div class="row">
						    <div class="col-12">
						      	<div class="card-body" style="padding: 0px ">

									<input type="hidden" id="role_id">
									<input type="hidden" name="row_id" id="row_id">
						      		<div class="text-center">
										<h2 class="modal-title text-capitalize" id="view_permit_name">
										</h2>
									</div>
						      		<div class="text-center">
										<p class="modal-title mb-1 " id="view_permit_des">
										</p>
									</div>
									<div class="table-responsive-lg">

					                  	<table class="table table-bordered table-striped " >
											<thead>
												<tr>
													<th>#</th>
													<th>Route Name</th>
													<th>Description</th>
													<th>Action</th>
												</tr>
											</thead>
											<tbody class="tr_load">
												
											</tbody>
										</table>
									</div>
						        </div>
						    </div>
						  </div>
						</section>
					</div>
				</div>
			</div>
		</div>
		{{-- Role View Modal End  --}}
	</div>
@endsection


@section('script')
	<script src="{{ asset('app-assets/js/jquery.dataTables.min.js') }}"></script>
	<script type="text/javascript">
	    $(document).ready(function() {
	    	$('.dataTable').DataTable();
	    	// $('.dataTable_route').DataTable();
	    });
	</script>
    <script src="{{asset('app-assets/js/select2.min.js')}}"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#controller_name").select2({ 
			    placeholder 	: "Select One",
			    allowClear 		: true,
				dropdownParent  : "#permit_set_modal" // Use for Bootstrap Modal other wise no need
			});
		});

	    @if ($errors->any())
	        $('#permit_modal').modal('show');
	    @endif 

		$(function () {
		    $(".modal").on("hidden.bs.modal", function (e) {
				$("#exampleModalLabel").html("Creat Permission");
				$('#btn_save').text("Save");
				reset_form_data();
		    });
		});

		function reset_form_data(){
			$('#permission_name').val('');
			$('#description').val('');
			$('#row_status').val(1);
		}

	    $(document).on('click', '.edit_permit', function(e) {
			var  permit_id= $(this).data('id');
			$('#exampleModalLabel').html("Edit Permission");
			$('#btn_save').text("Update");
			$('#permit_modal').modal('show');

	        $.ajaxSetup({
	            headers: {
	               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	            }
	        });

	        $.ajax({
	            type    : "get",
	            url     : "{{ url('permitSet') }}/"+permit_id+'/edit',
	            dataType: "json",
	            success : function(data){
	            	var r_val=data.row_data;
	        		$('#row_id').val(r_val.id);
					$('#permission_name').val(r_val.permission_name);
					$('#description').val(r_val.description);
					$('#row_status').val(r_val.row_status);
	            },
	            error   : function(data){
	                alert("Error")
	            }
	        });

	        e.preventDefault();
	    });

		$(document).on('click', '.permission_set', function() {
			var this_ele = $(this);
			var row_id = this_ele.attr('data-id');
			var repeater_parent = this_ele.parents('tr');
			var permission_name = repeater_parent.find('td.permission_name').text();
			$('.route_name').html('');
			$('#pem_id').val(row_id);
			$('#set_permission_name').text(permission_name);
		});

		$(document).on('change', '.controller_name', function() {
			var this_ele 		= $(this);
			var controller_name = this_ele.val();
			var pem_id 			= $('#pem_id').val();
			var repeater_parent = this_ele.parents('.repeater_parent');
			var route_name_set 	= repeater_parent.find('tbody.route_name');

			var tr_content = "";

			
			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				}
			});

			$.ajax({
				type : "POST",
				url : "{{ url('/rnByCon') }}",
				data : {
					route_controller: controller_name,
					pem_id : pem_id
				},
				dataType: "json",
				success : function(responce){
				// console.log(responce);
					$.each(responce.rows, function( i, v ) {
						if(v.route_name_id != null) {
							var save_status_text = 'Saved';
							var set_button = '<button data-rn-id="'+v.id+'" class="btn btn-danger btn-sm table_row_btn permission_route_remove" type="button">Remove</button>';
						}else {
							var save_status_text = '<small>Not Save</small>';
							var set_button = '<button data-rn-id="'+v.id+'" class="btn btn-info btn-sm table_row_btn permission_route_save" type="button">Save</button>';
						}
						if(v.description != null) {
							var description_text =  v.description;
							
						}else {
							var description_text = '';
							
						}
						tr_content += '<tr class="permission_row" id="per_row_id_'+v.id+'">';
						tr_content += '<td class="text-center">' + (i+1) + '</td>';
						tr_content += '<td class="text-left">' + v.route_name +'</td>';
						tr_content += '<td class="text-left">' +description_text+'</td>';
						tr_content += '<td class="text-center"><span class="save_status">'+ save_status_text +'</span></td>';
						tr_content += '<td class="text-center">';
						tr_content += '<span class="change_button">'+ set_button +'</span>';
						tr_content += '</td>';
						tr_content += '</tr>';
					});
					route_name_set.html(tr_content);
				},
				error: function(data){
				alert("Error")
				}
			});
		});

		$(document).on('click', '.permission_route_save', function() {
			var this_ele = $(this);
			var rn_id = this_ele.attr('data-rn-id');
			var parents_ele = this_ele.parents('table');
			var pem_id = $('#pem_id').val();
			var table_body = parents_ele.find('tbody.route_name');
			var table_row = table_body.find('#per_row_id_'+rn_id);
			var save_status = table_row.find('span.save_status');
			var change_button = table_row.find('span.change_button');

			if(pem_id == '') {
				alert("Please Select a Permission.");
				return false;
			}

			$.ajaxSetup({
				headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				}
			});

			$.ajax({
				type : "POST",
				url : "{{ url('/rnSave') }}",
				data : {
					pem_id : pem_id,
					rn_id : rn_id
				},
				dataType: "json",
				success: function(responce){
					// console.log(responce);
					if(responce.rows.return_type == 'Success') {
						save_status.text("Saved");
						change_button.html('<button data-rn-id="'+rn_id+'" class="btn btn-danger btn-sm table_row_btn permission_route_remove" type="button">Remove</button>');
						// alert(responce.rows.message);
					} else if(responce.rows.message_type == 'Error') {
						alert(responce.rows.message);
					}
				},
				error: function(data){
					alert("Error")
				}
			});
		});


		$(document).on('click', '.permission_route_remove', function() {
			var this_ele = $(this);
			var rn_id = this_ele.attr('data-rn-id');
			var parents_ele = this_ele.parents('table');
			var pem_id = $('#pem_id').val();

			var table_body = parents_ele.find('tbody.route_name');
			var table_row = table_body.find('#per_row_id_'+rn_id);
			var save_status = table_row.find('span.save_status');
			var change_button = table_row.find('span.change_button');

			if(pem_id == '') {
				alert("Please Select a Permission.");
				return false;
			}

			$.ajaxSetup({
				headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				}
			});

			$.ajax({
				type : "POST",
				url : "{{ url('/rnRemove') }}",
				data : {
					pem_id : pem_id,
					rn_id : rn_id
				},
				dataType: "json",
				success: function(responce){
					console.log(responce);
					if(responce.rows.return_type == 'Success') {
						save_status.html("<small>Not Save</small>");
						change_button.html('<button data-rn-id="'+rn_id+'" class="btn btn-info btn-sm table_row_btn permission_route_save" type="button">Save</button>');
						// alert(data.message);
					} else if(responce.rows.return_type == 'Error') {
						alert(responce.rows.message);
					}
				},
				error: function(data){
					alert("Error")
				}
			});
		});


		$(document).on('click', '#permission_reset', function() {
			if (confirm('Are you sure to Reset the Permission?')) {
				var this_ele= $(this);
				var pem_id = $('#pem_id').val();

				$.ajaxSetup({
					headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					}
				});

				$.ajax({
					type: "POST",
					url: "{{ url('/prReset') }}",
					data : {
						pem_id : pem_id
					},
					dataType: "json",
					success: function(responce){
						console.log(responce);
						if(responce.rows.return_type == 'Success') {
							$('.route_name').html('');
							alert(responce.rows.message);
						} else if(responce.rows.return_type == 'Error') {
							alert(responce.rows.message);
						} else if(responce.rows.return_type == 'No_data') {
							this_tr.remove();
							alert(responce.rows.message);
						}
					},
					error: function(data){
						alert("Error")
					}
				});
			}
		});


		$(function () {
		    $("#permit_set_modal").on("hidden.bs.modal", function (e) {
				$('#pem_id').val('');
		    	$('#set_permission_name').text('');
		    	$('#repeater_group').html('');
		    	$('#repeater_create').trigger('click');
		    });
		});

		// =================== permission View==========

		$(document).on('click', '.view_details', function(e) {
			var this_ele = $(this);
			var row_id = this_ele.attr('data-id');
			var repeater_parent = this_ele.parents('tr');
			var permit_name = repeater_parent.find('td.permission_name').text();
			var permit_des = repeater_parent.find('td.permit_des').text();
			$('#pem_id').val(row_id);
			$('#view_permit_name').text(permit_name);
			$('#view_permit_des').text(permit_des);

			var tr_content = "";

			
			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				}
			});
	 		$.ajax({
	            type    : "POST",
	            url     : "{{ url('prView') }}",
	            dataType: "json",
				data : {
					pem_id : row_id
				},
	            success : function(responce){
					var r_val=responce.rtNameList;
					$.each(responce.rtNameList, function( i, v ) {
						
						var set_button = '<button data-id="'+v.id+'" class="btn btn-danger btn-sm table_row_btn view_remove" type="button">Remove</button>';
					
						if(v.description != null) {
							var description_text =  v.description;
							
						}else {
							var description_text = '';
							
						}
						tr_content += '<tr class="permission_row" id="viewRow_id_'+v.id+'">';
						tr_content += '<td class="text-center">' + (i+1) + '</td>';
						tr_content += '<td class="text-left">' + v.route_name +'</td>';
						tr_content += '<td class="text-left">' +description_text+'</td>';
						tr_content += '<td class="text-center">';
						tr_content += '<span class="change_button">'+ set_button +'</span>';
						tr_content += '</td>';
						tr_content += '</tr>';
					});
					$('.tr_load').html(tr_content);
				},
				error: function(data){
				alert("Error")
				}
			});
		});

		$(document).on('click', '.view_remove', function() {
			if (confirm('Are you sure to Reset the Permission?')) {
		        var this_ele    = $(this);
				var row_id = this_ele.attr('data-id');
				// alert(row_id)
		        var parents_ele = this_ele.parents('tr#viewRow_id_'+row_id);
		        // var row_id     = $('#role_id').val();

		        $.ajaxSetup({
		            headers: {
		                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		            }
		        });

		        $.ajax({
		            type    : "POST",
		            url     : "{{ url('/prViewRemove') }}",
		            data    : {
		                role_id: row_id
		            },
		            dataType: "json",
		            success: function(responce){ 
		                console.log(responce);
		                if(responce.rows.return_type == 'Success') {
		                	parents_ele.remove();
		                }
		                //     save_status.html("<small>Not Save</small>");
		                //     change_button.html('<button data-id="'+pem_id+'" class="btn btn-info btn-sm table_row_btn role_permission_save" type="button">Save</button>');
		                //     // alert(data.message);
		                // } else if(responce.rows.return_type == 'Error') {
		                //     alert(responce.rows.message);
		                // }
		            },
		            error: function(data){
		                alert("Error")
		            }
		        });
		    }
	    });
	</script>
@endsection