@extends('layouts.home_layout')
@section('title','User Role Set')
@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 ">
					
					<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>Sl</th>
										<th>Name</th>
                                        <th>Email</th>
                                        <th>User Type</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									@php
										$row_count=$datashow->firstItem();
									@endphp
									@foreach ($datashow as $ds)
											@php
												$role_name=$ds->role_name;
												$data_des=$ds->description;
											@endphp
											
                                            <tr>
											<th scope="row" class="text-center">{{$row_count++}}</th>
                                            <td class="user_name">{{$ds->name}}</td>
                                            <td>{{$ds->email}}</td>
                                            <td class="text-center">{{$ds->user_type}}</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 data_view"  data-toggle="modal" data-target="#data_view_modal"data-id="{{$ds->id}}" >View</button>
														</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> --}}


		{{-- Role 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="user_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>Role Name</th>
													<th>Description</th>
													<th>Save Status</th>
													<th>Action</th>
													
												</tr>
											</thead>
											<tbody class="data_set">
												
											</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="data_reset" class="btn btn-danger ">Reset</button>
						
					</div>
				</div>
			</div>
		</div>
		{{-- Role set Modal End  --}}


		{{-- Role View Modal Start  --}}
		<div class="modal fade bd-example-modal-lg" id="data_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="user_id">
									<input type="hidden" name="row_id" id="row_id">
						      		<div class="text-center">
										<h2 class="modal-title text-capitalize" id="row_data_name">
										</h2>
									</div>
						      		{{-- <div class="text-center">
										<p class="modal-title mb-1 " id="row_data_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">
   
// ============================ 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.user_name').text();
		$('#user_id').val(row_id);
		$('#set_role_name').text(role_name);

		var this_ele = $(this);
		var repeater_parent = this_ele.parents('.repeater_parent');
		var role_name_set = repeater_parent.find('tbody.data_set');
		var tr_content = "";
		
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});
 		$.ajax({
            type    : "POST",
            url     : "{{ url('urRoleSet') }}",
            dataType: "json",
			data : {
				user_id : row_id
			},

            success : function(responce){
				var r_val=responce.rlNameList;
				$.each(responce.rlNameList, function( i, v ) {
				// console.log(responce.rlNameList.id);
					if(v.urs_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 usrRole_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 usrRole_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.role_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>';
				});
				$('.data_set').html(tr_content);
			},
			error: function(data){
			alert("Error")
			}
		});
	});


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


  	$(document).on('click', '.usrRole_save', function() {
        var this_ele    = $(this);
		var row_id  = this_ele.attr('data-rn-id');
        var user_id     = $('#user_id').val();
        var parents_ele = this_ele.parents('tr#per_row_id_'+row_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('/urRoleSave') }}",
            data    : {
                user_id  : user_id,
                role_id : row_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="'+row_id+'" class="btn btn-danger btn-sm table_row_btn usrRole_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', '.usrRole_remove', function() {
        var this_ele    = $(this);
		var row_id = this_ele.attr('data-rn-id');
        var parents_ele = this_ele.parents('tr#per_row_id_'+row_id);
        var user_id     = $('#user_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('/urRoleRemove') }}",
            data    : {
                role_id: row_id,
                user_id : user_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="'+row_id+'" class="btn btn-info btn-sm table_row_btn usrRole_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', '#data_reset', function() {
		if (confirm('Are you sure to Reset the Permission?')) {
			var this_ele= $(this);
			var user_id = $('#user_id').val();

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

			$.ajax({
				type: "POST",
				url: "{{ url('/urRoleReset') }}",
				data : {
					user_id : user_id
				},
				dataType: "json",
				success: function(responce){
					console.log(responce);
					if(responce.rows.return_type == 'Success') {
						$('.data_set').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) {
			// $('#user_id').val('');
	  //   	$('#set_role_name').text('');
	  //   	$('#repeater_group').html('');
	  //   	$('#repeater_create').trigger('click');
	    });
	});


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

	$(document).on('click', '.data_view', function(e) {
		var this_ele = $(this);
		var row_id = this_ele.attr('data-id');
		var repeater_parent = this_ele.parents('tr');
		var data_name = repeater_parent.find('td.user_name').text();
		$('#user_id').val(row_id);
		$('#row_data_name').text(data_name);

		var this_ele = $(this);
		var repeater_parent = this_ele.parents('.repeater_parent');
		var role_name_set = repeater_parent.find('tbody.data_set');


		var tr_content = "";

		
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});
 		$.ajax({
            type    : "POST",
            url     : "{{ url('urView') }}",
            dataType: "json",
			data : {
				user_id : row_id
			},
            success : function(responce){
				var r_val=responce.dataList;
				$.each(responce.dataList, function( i, v ) {
					
					var set_button = '<button data-id="'+v.id+'" class="btn btn-danger btn-sm table_row_btn rowView_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.role_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>';
				});
				$('.role_view_show').html(tr_content);
			},
			error: function(data){
			alert("Error")
			}
		});
	});



	// rowView_remove

	$(document).on('click', '.rowView_remove', function() {
		if (confirm('Are you sure to Remove the Permission?')) {
	        var this_ele    = $(this);
			var row_id = this_ele.attr('data-id');
	        var parents_ele = this_ele.parents('tr#per_row_id_'+row_id);
	        var user_id     = $('#user_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('/urViewRemove') }}",
	            data    : {
	                row_id : row_id,
	                user_id: user_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="'+row_id+'" class="btn btn-info btn-sm table_row_btn usrRole_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 () {
	    $("#data_view_modal").on("hidden.bs.modal", function (e) {
			// $('#user_id').val('');
	  //   	$('#set_role_name').text('');
	  //   	$('#repeater_group').html('');
	  //   	$('#repeater_create').trigger('click');
	    });
	});


</script>

@endsection