@extends('layouts.home_layout')
@section('title','Role')
@section('style')
{{-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> --}}
@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">
								<thead>
									<tr>
										<th>Id</th>
										<th>Role Name </th>
										<th>Description </th>
										<th>Status </th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									@php
										$row_count=$datashow->firstItem();
									@endphp
									@foreach ($datashow as $ds)
											@php
												$role_name=$ds->role_name;
												$role_des=$ds->description;
											@endphp
											
										<tr>
											<td scope="row">{{$row_count++}}</td>
											<td class="role_name">{{$ds->role_name}}</td>
											<td class="role_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  role_set" data-toggle="modal" data-target="#role_set_modal" data-id="{{$ds->id}}">Role set</button>
														</td>
														<td style="border:0px;padding:3px">
															<button type="submit" class="btn btn-secondary btn-sm role_view"  data-toggle="modal" data-target="#role_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_role"  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("makeRole.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="role_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 Role</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('makeRole') }}">
						@csrf
						<input type="hidden" name="row_id" id="row_id">
						<div class="modal-body">
							<div class="form-group">
								<label for="role_name" class="col-form-label">Role Name:</label>
								<input type="text" class="form-control" id="role_name" name="role_name" required value="{{old('role_name', empty($errors->role_name) ? '' : $errors->role_name)}}">
								@if ($errors->has('role_name'))
								<span class="text-danger">{{ $errors->first('role_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="role_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">Role Set For <mark id="set_role_name"></mark></h5>
						<button type="button" class="close" id="role_set_close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<input type="hidden" id="role_id">
					</div>
					<input type="hidden" name="row_id" id="row_id">

					<div class="modal-body repeater">

						<section id="form-repeater-wrapper">
						  <!-- form default repeater -->
						  <div class="row">
						    <div class="col-12">
						      	<div class="card-body" style="padding: 0px ">
									<div class="table-responsive-lg">

					                  	<table class="table table-bordered table-striped " >
											<thead>
												<tr>
													<th>#</th>
													<th>Permission Name</th>
													<th>Description</th>
													<th>Save Status</th>
													<th>Action</th>
													
												</tr>
											</thead>
											<tbody class="permission_name">
												
											</tbody>
										</table>
									</div>
						        </div>
						    </div>
						  </div>
						  <!--/ form default repeater -->
						</section>
						{{-- <div class="form-group">
							<label for="row_status" class="col-form-label">Status:</label>

							<select style="width: 100%" class="js-example-basic-multiple form-control" name="states" >
							  <option value=""></option>
							  <option value="AL">Alabama</option>
							  <option value="WY">Wyoming</option>
							</select>
						</div> --}}
					</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  --}}


		{{-- Role View Modal Start  --}}
		<div class="modal fade bd-example-modal-lg" id="role_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_role_name">
										</h2>
									</div>
						      		<div class="text-center">
										<p class="modal-title mb-1 " id="view_role_des">
										</p>
									</div>
									<div class="table-responsive-lg">

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


@section('script')


<script type="text/javascript">
    @if ($errors->any())
        $('#role_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(){
		$('#role_name').val('');
		$('#description').val('');
		$('#row_status').val(1);

	}

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

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

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

        e.preventDefault();
    });


// ============================ role set ============

	$(document).on('click', '.role_set', function(e) {
		var this_ele = $(this);
		var row_id = this_ele.attr('data-id');
		var repeater_parent = this_ele.parents('tr');
		var role_name = repeater_parent.find('td.role_name').text();
		// $('.permission_name').html('');
		$('#role_id').val(row_id);
		$('#set_role_name').text(role_name);


		var this_ele = $(this);
		// alert(role_id)
		var repeater_parent = this_ele.parents('.repeater_parent');
		var permission_name_set = repeater_parent.find('tbody.permission_name');

		var tr_content = "";

		
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});
 		$.ajax({
            type    : "POST",
            url     : "{{ url('pnByRole') }}",
            dataType: "json",
			data : {
				role_id : row_id
			},

            success : function(responce){
				var r_val=responce.pNameList;
				$.each(responce.pNameList, function( i, v ) {
					
				// console.log(responce.pNameList.id);
					
					if(v.rsd_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 role_permission_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 role_permission_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.permission_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>';
				});
				$('.permission_name').html(tr_content);
			},
			error: function(data){
			alert("Error")
			}
		});
	});


// ============================ role set ============


  	$(document).on('click', '.role_permission_save', function() {
        var this_ele    = $(this);
		var pem_id = this_ele.attr('data-rn-id');
        // var pem_id      = this_ele.attr('data-id'); 
        var role_id     = $('#role_id').val();
        var parents_ele = this_ele.parents('tr#per_row_id_'+pem_id);

        var save_status     = parents_ele.find('span.save_status');
        var change_button   = parents_ele.find('span.change_button');

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

        $.ajax({
            type    : "POST",
            url     : "{{ url('/pnSave') }}",
            data    : {
                pem_id  : pem_id,
                role_id : role_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="'+pem_id+'" class="btn btn-danger btn-sm table_row_btn role_permission_remove" type="button">Remove</button>');
                    // alert(data.message);
                } else if(responce.rows.message_type == 'Error') {
					alert(responce.rows.message);
				}
            },
            error: function(data){
                alert("Error")
            }
        });
    });

	$(document).on('click', '.role_permission_remove', function() {
        var this_ele    = $(this);
		var pem_id = this_ele.attr('data-rn-id');
        var parents_ele = this_ele.parents('tr#per_row_id_'+pem_id);
        var role_id     = $('#role_id').val();

        var save_status     = parents_ele.find('span.save_status');
        var change_button   = parents_ele.find('span.change_button');

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

        $.ajax({
            type    : "POST",
            url     : "{{ url('/pnRemove') }}",
            data    : {
                pem_id : pem_id,
                role_id: role_id
            },
            dataType: "json",
            success: function(responce){ 
                console.log(responce);
                if(responce.rows.return_type == 'Success') {
                	// alert(responce.rows.return_type)
                    save_status.html("<small>Not Save</small>");
                    change_button.html('<button data-rn-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")
            }
        });
    });



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

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

			$.ajax({
				type: "POST",
				url: "{{ url('/pnRoleReset') }}",
				data : {
					role_id : role_id
				},
				dataType: "json",
				success: function(responce){
					console.log(responce);
					if(responce.rows.return_type == 'Success') {
						$('.permission_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 () {
	    $("#role_set_modal").on("hidden.bs.modal", function (e) {
			// $('#role_id').val('');
	  //   	$('#set_role_name').text('');
	  //   	$('#repeater_group').html('');
	  //   	$('#repeater_create').trigger('click');
	    });
	});


// =================== Role View==========

	$(document).on('click', '.role_view', function(e) {
		var this_ele = $(this);
		var row_id = this_ele.attr('data-id');
		var repeater_parent = this_ele.parents('tr');
		var role_name = repeater_parent.find('td.role_name').text();
		var role_des = repeater_parent.find('td.role_des').text();
		$('#role_id').val(row_id);
		$('#view_role_name').text(role_name);
		$('#view_role_des').text(role_des);

		var tr_content = "";

		
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});
 		$.ajax({
            type    : "POST",
            url     : "{{ url('roleView') }}",
            dataType: "json",
			data : {
				role_id : row_id
			},
            success : function(responce){
				var r_val=responce.pNameList;
				$.each(responce.pNameList, function( i, v ) {
					
					var set_button = '<button data-id="'+v.id+'" class="btn btn-danger btn-sm table_row_btn pr_route_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="per_row_id_'+v.id+'">';
					tr_content += '<td class="text-center">' + (i+1) + '</td>';
					tr_content += '<td class="text-left">' + v.permission_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>';
				});
				$('.role_view_show').html(tr_content);
			},
			error: function(data){
			alert("Error")
			}
		});
	});



	// pr_route_view_remove

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

	        var save_status     = parents_ele.find('span.save_status');
	        var change_button   = parents_ele.find('span.change_button');

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

	        $.ajax({
	            type    : "POST",
	            url     : "{{ url('/pnRoleVwRemove') }}",
	            data    : {
	                pem_id : pem_id,
	                role_id: role_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")
	            }
	        });
	    }
    });





	$(function () {
	    $("#role_view_modal").on("hidden.bs.modal", function (e) {
			// $('#role_id').val('');
	  //   	$('#set_role_name').text('');
	  //   	$('#repeater_group').html('');
	  //   	$('#repeater_create').trigger('click');
	    });
	});

	


</script>

@endsection