@extends('layouts.backend-app')
@push('styles')
<link rel="stylesheet" type="text/css" href="{{asset('backend-assets/plugins/iziToast/iziToast.min.css')}}">
<style>
    .modal-confirm {
      color: #636363;
      width: 400px;
    }

    .modal-confirm .modal-content {
      padding: 20px;
      border-radius: 5px;
      border: none;
      text-align: center;
      font-size: 14px;
    }

    .modal-confirm .modal-header {
      border-bottom: none;
      position: relative;
    }

    .modal-confirm h4 {
      text-align: center;
      font-size: 26px;
      margin: 30px 0 -10px;
    }

    .modal-confirm .close {
      position: absolute;
      top: -5px;
      right: -2px;
    }

    .modal-confirm .modal-body {
      color: #999;
    }

    .modal-confirm .modal-footer {
      border: none;
      text-align: center;
      border-radius: 5px;
      font-size: 13px;
      padding: 10px 15px 25px;
    }

    .modal-confirm .modal-footer a {
      color: #999;
    }

    .modal-confirm .icon-box {
      width: 80px;
      height: 80px;
      margin: 0 auto;
      border-radius: 50%;
      z-index: 9;
      text-align: center;
      border: 3px solid #f15e5e;
    }

    .modal-confirm .icon-box i {
      color: #f15e5e;
      font-size: 46px;
      display: inline-block;
      margin-top: 13px;
    }

    .modal-confirm .btn {
      border-radius: 4px;
      background: #60c7c1;
      text-decoration: none;
      transition: all 0.4s;
      line-height: normal;
      min-width: 120px;
      border: none;
      min-height: 40px;
      border-radius: 3px;
      margin: 0 5px;
    }

    .modal-confirm .btn-secondary {
      /* background: #c1c1c1; */
      background-color: #ECECEC;
    }

    .modal-confirm .btn-secondary:hover,
    .modal-confirm .btn-secondary:focus {
      /* background: #a8a8a8; */
      background-color: #ECECEC;
      color: #636363;
    }

    .modal-confirm .btn-danger {
      background: #f15e5e;
    }

    .modal-confirm .btn-danger:hover,
    .modal-confirm .btn-danger:focus {
      background: #ee3535;
    }

    .trigger-btn {
      display: inline-block;
      margin: 100px auto;
    }

    .btn-cancel {
      color: #636363;
    }

    .btn-del {
      color: white;
    }
	label.error{
		color: red;
	}
	input.error{
		border: 1px solid red;
	}

  </style>
@endpush
@section('content')
<!-- BEGIN: Content-->
<div class="app-content content">
	<div class="content-wrapper">
		<div class="content-header row">
			<div class="content-header-left col-md-4 col-12 mb-2">
				<h3 class="content-header-title">Users Role</h3>
			</div>
			<div class="content-header-right col-md-8 col-12">
				<div class="breadcrumbs-top float-md-right">
					<div class="breadcrumb-wrapper mr-1">
						<ol class="breadcrumb">
							<li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}" class="breadcrumb-link">Home</a>
							</li>
							<li class="breadcrumb-divider">/</li>
							<li class="breadcrumb-item"><a href="{{url('admin/user-role-list')}}" class="breadcrumb-link">Users Role</a>
							</li>
						</ol>
					</div>
				</div>
			</div>
		</div>
		<div class="content-body">
			<div class="row">
				<div class="col-12">
					<div class="card">
						<div class="card-content collapse show">
							<div class="card-body">
								<div class="table-responsive">
									<div class="row">
										<div class="col-12">
											<div class="card">
												<div class="card-header">
													<h4 class="card-title">Users Role List</h4>
													<a class="btn btn-glow white align-right add-item-btn" href="javascript:void(0)" id="createNewRole">Add User Role</a>
												</div>
												<div class="card-content collapse show">
													<div class="table-responsive">
														<table class="service-table table table-hover mb-0">
															<thead>
																<tr class="table-header">
																	<th>S.no</th>
																	<th>Role</th>
																	<th class="last-text text-right">Action</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<th scope="row">1</th>
																	<td>Soil / Sediments</td>
																	<td class="text-right">
																		
																	</td>
																</tr>
																<tr>
																	<th scope="row">2</th>
																	<td>Waste Water ( Effluents / Sewage )</td>
																	<td class="text-right">
																		<div id="icon-group">
																			<div>
																				<button type="button" class="btn btn-icon alter-btn p-0 m-0" data-toggle="modal" data-target="#edit-modal" style="padding: 3px !important;">
																					<a href="#" data-toggle="tooltip" data-placement="bottom" title="Edit"> <i class="fa-solid fa-pen-to-square"></i></a>
																				</button>
																			</div>
																			<div>
																				<button type="button" class="btn btn-icon alter-btn p-0 m-0" data-toggle="modal" data-target="#delete-modal" style="padding: 3px !important;">
																					<i class="fa-solid fa-trash" data-toggle="tooltip" data-placement="bottom" title="Delete"></i>
																				</button>
																			</div>
																		</div>
																	</td>
																</tr>
																<tr>
																	<th scope="row">3</th>
																	<td>Solid Wastes</td>
																	<td class="text-right">
																		<div id="icon-group">
																			<div>
																				<button type="button" class="btn btn-icon alter-btn p-0 m-0" data-toggle="modal" data-target="#edit-modal" style="padding: 3px !important;">
																					<a href="#" data-toggle="tooltip" data-placement="bottom" title="Edit"> <i class="fa-solid fa-pen-to-square"></i></a>
																				</button>
																			</div>
																			<div>
																				<button type="button" class="btn btn-icon alter-btn p-0 m-0" data-toggle="modal" data-target="#delete-modal" style="padding: 3px !important;">
																					<i class="fa-solid fa-trash" data-toggle="tooltip" data-placement="bottom" title="Delete"></i>
																				</button>
																			</div>
																		</div>
																	</td>
																</tr>
																<tr>
																	<th scope="row">4</th>
																	<td>Construction Water</td>
																	<td class="text-right">
																		<div id="icon-group">
																			<div>
																				<button type="button" class="btn btn-icon alter-btn p-0 m-0" data-toggle="modal" data-target="#edit-modal" style="padding: 3px !important;">
																					<a href="#" data-toggle="tooltip" data-placement="bottom" title="Edit"> <i class="fa-solid fa-pen-to-square"></i></a>
																				</button>
																			</div>
																			<div>
																				<button type="button" class="btn btn-icon alter-btn p-0 m-0" data-toggle="modal" data-target="#delete-modal" style="padding: 3px !important;">
																					<i class="fa-solid fa-trash" data-toggle="tooltip" data-placement="bottom" title="Delete"></i>
																				</button>
																			</div>
																		</div>
																	</td>
																</tr>
																<tr>
																	<th scope="row">5</th>
																	<td>Drinking Water</td>
																	<td class="text-right">
																		<div id="icon-group">
																			<div>
																				<button type="button" class="btn btn-icon alter-btn p-0 m-0" data-toggle="modal" data-target="#edit-modal" style="padding: 3px !important;">
																					<a href="#" data-toggle="tooltip" data-placement="bottom" title="Edit"> <i class="fa-solid fa-pen-to-square"></i></a>
																				</button>
																			</div>
																			<div>
																				<button type="button" class="btn btn-icon alter-btn p-0 m-0" data-toggle="modal" data-target="#delete-modal" style="padding: 3px !important;">
																					<i class="fa-solid fa-trash" data-toggle="tooltip" data-placement="bottom" title="Delete"></i>
																				</button>
																			</div>
																		</div>
																	</td>
																</tr>
																<tr>
																	<th scope="row">6</th>
																	<td>Ground Water</td>
																	<td class="text-right">
																		<div id="icon-group">
																			<div>
																				<button type="button" class="btn btn-icon alter-btn p-0 m-0" data-toggle="modal" data-target="#edit-modal" style="padding: 3px !important;">
																					<a href="#" data-toggle="tooltip" data-placement="bottom" title="Edit"><i class="fa-solid fa-pen-to-square"></i></a>
																				</button>
																			</div>
																			<div>
																				<button type="button" class="btn btn-icon alter-btn p-0 m-0" data-toggle="modal" data-target="#delete-modal" style="padding: 3px !important;">
																					<i class="fa-solid fa-trash" data-toggle="tooltip" data-placement="bottom" title="Delete"></i>
																				</button>
																			</div>
																		</div>
																	</td>
																</tr>
																<tr>
																	<th scope="row">7</th>
																	<td>Reagent Grade Water</td>
																	<td class="text-right">
																		<div id="icon-group">
																			<div>
																				<button type="button" class="btn btn-icon alter-btn p-0 m-0" data-toggle="modal" data-target="#edit-modal" style="padding: 3px !important;">
																					<a href="#" data-toggle="tooltip" data-placement="bottom" title="Edit"> <i class="fa-solid fa-pen-to-square"></i></a>
																				</button>
																			</div>
																			<div>
																				<button type="button" class="btn btn-icon alter-btn p-0 m-0" data-toggle="modal" data-target="#delete-modal" style="padding: 3px !important;">
																					<a href="#" data-toggle="tooltip" data-placement="bottom" title="Delete"><i class="fa-solid fa-trash"></i></a>
																				</button>
																			</div>
																		</div>
																	</td>
																</tr>
																<tr>
																	<th scope="row">8</th>
																	<td>Swimming Pool</td>
																	<td class="text-right">
																		<div id="icon-group">
																			<div>
																				<button type="button" class="btn btn-icon alter-btn p-0 m-0" data-toggle="modal" data-target="#edit-modal" style="padding: 3px !important;">
																					<a href="#" data-toggle="tooltip" data-placement="bottom" title="Edit"><i class="fa-solid fa-pen-to-square"></i></a>
																				</button>
																			</div>
																			<div>
																				<button type="button" class="btn btn-icon alter-btn p-0 m-0" data-toggle="modal" data-target="#delete-modal" style="padding: 3px !important;">
																					<a href="#" data-toggle="tooltip" data-placement="bottom" title="Delete"><i class="fa-solid fa-trash"></i></a>
																				</button>
																			</div>
																		</div>
																	</td>
																</tr>
															</tbody>
														</table>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		
<!-- END: Content-->
	<!-- The Modal -->
	<div class="modal fade" id="ajaxModel">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="modelHeading">Add User Role</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body">
					<form id="userRoleForm" name="userRoleForm" class="form-horizontal">
						@csrf
						<input type="hidden" name="role_id" id="role_id">
							<div class="form-group">
								<label for="type-submit">Role</label>
								<input type="text" name="role_name" class="form-control" id="role_name">
							</div>
						</div>
						<div class="modal-footer">
							<button class="btn btn-sm cancel-btn" data-dismiss="modal">Cancel</button>
							<button type="submit" id="savebtn" class="btn btn-danger">Submit</button>
						</div>
					</form>
			</div>
		</div>
	</div>
	<!-- End Modal -->

<!-- The Delete Model -->
		<div id="delete-modal" class="modal fade">
			<div class="modal-dialog modal-confirm modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header flex-column">
							<h4 class="modal-title w-100">Are you sure?</h4>
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					</div>
					<div class="modal-body">
						<p>Do you really want to delete?</p>
					</div>
					<div class="modal-footer justify-content-center">
						<button type="button" class="btn btn-secondary btn-cancel" data-dismiss="modal">Cancel</button>
						<button type="button" class="btn btn-danger btn-del">Delete</button>
					</div>
				</div>
			</div>
		</div>
<!-- The Model -->

@endsection
@push('javascript')
<!-- BEGIN : Validation Scripts -->
	<script src="{{asset('backend-assets/js/scripts/validation/jquery.validate.min.js')}}" type="text/javascript"></script>
	<script src="{{asset('backend-assets/js/scripts/validation/additional-methods.min.js')}}" type="text/javascript"></script>
	<script src="{{asset('backend-assets/plugins/iziToast/iziToast.min.js')}}" type="text/javascript"></script>
<!-- END:Validation Scripts -->
<script>
	 let dTable = '';
$(function () {
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
	fetchTable();
});
function fetchTable(){
	var table=$(".service-table");
	if(dTable!=''){
		table.DataTable().clear().destroy();
	}
	var dTable = table.DataTable({
		processing: true,
		serverSide: true,
		stateSave: true,
		order:[[0,'desc']],
		ajax: {
			url: "{{ route('admin.user-role-list') }}",
			type: 'GET',
			data:{_token: '{{csrf_token()}}'},
		},
		columns: [
				{data: 'DT_RowIndex', name: 'DT_RowIndex'},
				{data: 'name', name: 'name'},
				{data: 'action', name: 'action',searchable:true,orderable:false},
		]
	}).draw();
}
$(document).on('click','#createNewRole',function () {
	$('#savebtn').html("Create Role");
	$('#role_id').val('');
	$('#userRoleForm').trigger("reset");
	$('#modelHeading').html("Create New Role");
	$('#ajaxModel').modal('show');
});
$(document).on('click','#savebtn',function (e) {
	var formId = "#userRoleForm";
	var thizSelector = $(this);
	// $(this).html('Sending..');
	$("form"+formId).validate({
		errorElement: "label",
		rules: {
			role_name:{required:true},
		},
		messages: {
			role_name:{required:"Please enter role name"},
		},
		focusInvalid: true,
		invalidHandler: function() {
			$(this).find(":input.error:first").focus();
		},
		errorPlacement: function(error,element) {
			if(element.is(":radio"))
			{
				error.insertAfter(element.parents('checkboxsequence'));
			}
			else if(element.is(":checkbox")){
				// element.parents('.checkboxsequence').css({"color": "red", "border": "2px solid red"});
				error.appendTo(element.parents('.checkboxsequence'));
			}
			else{
				error.insertAfter(element);
			}
		},
		submitHandler:function(e)
		{
			var formData = new FormData($(formId)[0]);
			$.ajax({
				data: formData,
				url: "{{ route('admin.user-role-list.create') }}",
				type: "POST",
				processData: false,
				contentType: false,
				dataType: 'json',
				success: function (response) {
					if(response.success){
						iziToast.success({
							title: 'success',
							message: response.message,
						});
					}else{
						iziToast.error({
							title: 'Warning',
							message: response.message,
						});
					}
					$('#userRoleForm').trigger("reset");
					$('#ajaxModel').modal('hide');
					fetchTable();
				
				},
				error: function (data) {
					console.log('Error:', data);
					$('#savebtn').html('Save Changes');
				}
			});
		}

	});
});
$(document).on('click', '.editTest', function () {
	var role_id = $(this).data('id');
	$.get("{{ route('admin.user-role-list') }}" +'/' + role_id +'/edit', function (data) {
			$('#modelHeading').html("Edit User Role");
			$('#savebtn').html("Update");
			$('#ajaxModel').modal('show');
			$('#role_id').val(data.id);
            $("#role_name").val(data.name);
			
			
	})
});

	

function deleteTestService(role_id){
	let fun = function(){
		var url = "{{route('admin.user-role-list.destroy',':id') }}";
		url = url.replace(":id",role_id);
		$.ajax({
			url: url,
			type: "post",
			success: function (response) {
				if(response.success)
				{
					iziToast.success({
						title: 'success',
						message: response.message,
					});
				}else{
					iziToast.error({
							title: 'Warning',
							message: response.message,
						});
				}
					fetchTable();
			},
			error: function (response) {
					console.log('Error:', response);
			}
		});
	};
	showDynamicModal('confirm','confirmation','Confirmation','Do you really want to delete?',fun);
}
function showDynamicModal(id,type,title,content,cbFn)
{
	let cbBtn = '',okTxt = 'Ok',btnCls='secondary';
	if(type=='confirmation'){
		okTxt = 'No';
		btnCls='danger';
		cbBtn = '<button type="button" class="btn btn-success" id="confirm-ok">Yes</button>';
	}
	var modal = '<div class="modal fade" id="'+id+'" tabindex="-1" role="dialog"  aria-hidden="true">'+
					'<div class="modal-dialog modal-confirm modal-dialog-centered" role="document">'+
						'<div class="modal-content">'+
							'<div class="modal-header modal-header flex-column">'+
								'<h5 class="modal-title">'+title+'</h5>'+
								'<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+
									'<span aria-hidden="true">&times;</span>'+
								'</button>'+
							'</div>'+
							'<div class="modal-body">'+content+'</div>'+
							'<div class="modal-footer justify-content-center">'+cbBtn+
								'<button type="button" class="btn btn-'+btnCls+'" data-dismiss="modal">'+okTxt+'</button>'+
							'</div>'+
						'</div>'+
						
					'</div>'+
				'</div>';
	$('html>body').append(modal);
	$('#'+id).modal('show');
	$('#'+id).on('hidden.bs.modal', function(e) { $('#'+id).remove(); })
	$('#'+id+' #confirm-ok').click(function(e)
	{
		e.preventDefault();
		$('#'+id).modal('hide');
		return cbFn();
	});
}
</script>
@endpush