@extends('layouts.backend.app')

@section('content')

 <!-- Start right Content here -->
<div class="main-content">
	<div class="page-content">
		<div class="container-fluid">

		<div class="page-title-box">
			<div class="row align-items-center">

		<div class="col-md-8">
			<h6 class="page-title">Manage Permission</h6>
			<ol class="breadcrumb m-0">
				<li class="breadcrumb-item"><a href="{{ dashboardurl() }}">Dashboard</a></li>
				<li class="breadcrumb-item active" aria-current="page">Permission</li>
			</ol>
		</div>

		<div class="col-md-4 text-end">
			<div class="btn-container float-right">
				<a href="javascript:(0)" class="btn btn-primary addnew" data-bs-toggle="modal" data-bs-target="#addPerModal"><span class="pe-2"><i class="ti-plus"></i></span> Add New</a>
			</div>
		</div>


		</div>
	</div>
	<!-- end row -->

<div class="row">
	<div class="col-lg-12">
		<div class="card">
			<div class="card-body">
			<div class="table-responsive mt-2">

				<table class="table table-hover mb-0" id="rolesList">
					<thead>
						<tr>
							<th scope="col" width="80px"><div align="center">S.No</div></th>
							<th scope="col" >Permission Title</th>
							<th scope="col" width="140px" align="center"><div align="center">Action</div></th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>

			</div>
		</div>
			</div>
		</div>
	</div>
	<!-- end row -->
			
		</div>
	</div>
</div>
<!-- end main content-->



<!-- modal -->
<div class="modal fade" id="addPerModal" tabindex="-1" aria-labelledby="addPerModal" aria-hidden="true">
  <div class="modal-dialog">
	 <div class="modal-content">
		<div class="modal-header">
		   <h5 class="modal-title">Add Permission</h5>
		   <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">

		<form method="post" id="permissionsave" name="permissionsave" enctype="multipart/form-data">
		@csrf
		<input type="hidden" class="form-control" id="permissionid" name="permissionid" value="">

		<label for="permissionname" class="form-label">Permission Title<font color="red">*</font></label>
		<input type="text" class="form-control" id="permissionname" name="permissionname" value="" placeholder="Enter Permission Name"><br/>

		<label for="showname" class="form-label">Show Name<font color="red">*</font></label>
		<input type="text" class="form-control" id="showname" name="showname" value="" placeholder="Enter Show Name"><br/>

		<label for="addname" class="form-label">Add Name</label>
		<input type="text" class="form-control" id="addname" name="addname" value="" placeholder="Enter Add Name"><br/>

		<label for="editname" class="form-label">Edit Name</label>
		<input type="text" class="form-control" id="editname" name="editname" value="" placeholder="Enter Edit Name"><br/>

		<label for="viewname" class="form-label">View Name</label>
		<input type="text" class="form-control" id="viewname" name="viewname" value="" placeholder="Enter View Name"><br/>

		<label for="deletename" class="form-label">Delete Name</label>
		<input type="text" class="form-control" id="deletename" name="deletename" value="" placeholder="Enter Delete Name">
		<br/>

		</div>
		<div class="modal-footer" id="respns">
		   <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
		   <button type="button" class="btn btn-primary savebtn">Submit</button>
		</div>

		</form>
	 </div>
  </div>
</div>
<!-- End modal -->



 <!-- Delete Modal HTML -->
<div id="deleteModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Delete Records</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			</div>
			<div class="modal-body">
				<p>Are you sure you want to delete these Records?</p>
				<p class="text-warning"><small>This action cannot be undone.</small></p>
			</div>
			<input type="hidden" id="delete_id">
			<div class="modal-footer">
				<input type="button" class="btn btn-default closebtn" data-dismiss="modal" value="Cancel">
				<input type="button" class="btn btn-danger" onclick="deleterecord()" value="Delete">
			</div>
		</div>
	</div>
</div>


@endsection

@section('scripts')

<script>

$(document).ready(function() {

	var reporttables =  $('#rolesList').DataTable({
		"order": [[ 0, "desc" ]],
        "serverSide": true,
		"stateSave": true,
        'processing': true,
        oLanguage: {sProcessing: '<div class="lds-css"><div style="width:100%;height:100%" class="lds-eclipse"><div></div><p>Please wait while we are processing your request.</p></div></div>' },
		"ajax": {
			'type': 'GET',
			'url': '{{ route("permission-data") }}',
			"data": function(d){
               d.searchdata = d.search.value
			}
		},
		searching: true,
		"iDisplayLength": 10,
		"columnDefs": [
		{
			"targets": 0,
			className: "text-center",
			"render": function ( data, type, row, meta ) {
				return row.index;
			}
		},
		{
			"targets": 1,
			"render": function ( data, type, row, meta ) {
				return '<b>'+row.name+'</b>';
			}
		},
		{
			"targets": 2,
			className: "text-center",
			"render": function ( data, type, row, meta ) {

				var tbl = '';
				tbl +='<div class="action bank d-flex justify-content-start">';
				tbl +='<a href="javascript:(0)" data-id="'+row.name+'" class="edit mx-2 text-info btn btn-sm btn-success text-white"><i class="fas fa-edit"></i></a>';

				if(row.id !='1' && row.id !='2' && row.id !='3'){
					tbl +='<a href="#deleteModal" data-toggle="modal" data-id="'+row.id+'" class="text-info btn btn-sm btn-danger text-white me-2 removrd"><i class="fas fa-trash"></i></a>';
				}
				tbl +='</div>';
				return tbl;
			}
		}
	  ]
	});
});



	//Remove Record
$(document).on("click", ".removrd", function () {
var rid = $(this).data("id");
$('#delete_id').val(rid);
});


	//Remove Record
function deleterecord() {

	var rid = $('#delete_id').val();
	var token = $('meta[name="csrf-token"]').attr("content");
	$.ajax({
		url: '{{ route("permission-remove") }}',
		type: "POST",
		data: {
			_token: token,user_id: rid
		}, success: function (data) {

			if(data.status == true) {
				custom_noty("success", data.msg);
				$(".closebtn").click();
				$('#rolesList').DataTable().ajax.reload();
			} else {
				custom_noty("error", data.msg);
			}
		}
	});

}



	//Add New
$(document).on("click", ".addnew", function () {
	$("#snmbs").remove();
	$(".savebtn").attr("disabled", false);
	$('#permissionsave')[0].reset();
	$("#permissionid").val('');
	$("#permissionname").val('');
	$("#showname").val('');
	$("#addname").val('');
	$("#editname").val('');
	$("#viewname").val('');
	$("#deletename").val('');
	$(".savebtn").html('Submit');
});




	// Edit View 
$(document).on("click", ".edit", function () {
	
	$("#snmbs").remove();
	$(".savebtn").attr("disabled", false);
	var user_id = $(this).data("id");
	var token = $('meta[name="csrf-token"]').attr("content");
	$.ajax({
		url: '{{ route("permission-view") }}',
		type: "POST",
		data: {
			_token: token,user_id: user_id
		}, success: function (data) {
			$("#addPerModal").modal("show");
			$("#permissionid").val(data[0].id);
			$("#permissionname").val(data[0].parent);
			$("#showname").val(data[0].name);
			$("#addname").val(data[1].name);
			$("#editname").val(data[2].name);
			$("#viewname").val(data[3].name);
			$("#deletename").val(data[4].name);
			$(".savebtn").html('Update');
		}
	});
});




	// save
$(document).on("click", ".savebtn", function () {

	var err = true;

	var input = $("#permissionname");
	var urlvl = $("#permissionname").val();
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#nmb").remove();
		$('<div id="nmb" class="text-danger">Permission Name is required</div>').insertAfter("#permissionname");
		$("#permissionname").focus();
		err = false;
	} else {

		var token = $('meta[name="csrf-token"]').attr("content");
		var fd = new FormData();
			fd.append('_token', token);
			fd.append('permissionname', $("#permissionname").val());
			fd.append('permissionid', $("#permissionid").val());

		$.ajax({
			url: '{{ route("permissionname-valid") }}',
			type: "POST",
			data: fd,
			contentType: false,
			processData: false,
			dataType: 'json',
			success: function (data) {
				if(data.status == true) {
					input.removeClass("invalid").addClass("valid");
					$("#nmb").remove();
				} else {
					$("#nmb").remove();
					$('<div id="nmb" class="text-danger">'+data.msg+'</div>').insertAfter("#permissionname");
					$("#permissionname").focus();
					err = false;
				}
			}
		});
	}

	var input = $("#showname");
	var urlvl = $("#showname").val();
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#snmb").remove();
		$('<div id="snmb" class="text-danger">Show Name is required</div>').insertAfter("#showname");
		$("#showname").focus();
		err = false;
	} else {
		var token = $('meta[name="csrf-token"]').attr("content");
		var fd = new FormData();
			fd.append('_token', token);
			fd.append('showname', $("#showname").val());
			fd.append('permissionid', $("#permissionid").val());

		$.ajax({
			url: '{{ route("pername-valid") }}',
			type: "POST",
			data: fd,
			contentType: false,
			processData: false,
			dataType: 'json',
			success: function (data) {
				if(data.status == true) {
					input.removeClass("invalid").addClass("valid");
					$("#snmb").remove();
				} else {
					$("#snmb").remove();
					$('<div id="snmb" class="text-danger">'+data.msg+'</div>').insertAfter("#showname");
					$("#showname").focus();
					err = false;
				}
			}
		});
	}

	if(err == true) {

		$(".savebtn").attr("disabled", true);
		var token = $('meta[name="csrf-token"]').attr("content");
		var fd = new FormData();
			fd.append('_token', token);
			fd.append('permissionid', $("#permissionid").val());
			fd.append('permissionname', $("#permissionname").val());
			fd.append('showname', $("#showname").val());
			fd.append('addname', $("#addname").val());
			fd.append('editname', $("#editname").val());
			fd.append('viewname', $("#viewname").val());
			fd.append('deletename', $("#deletename").val());

		$.ajax({
			url: '{{ route("permission-save") }}',
			type: "POST",
			data: fd,
			contentType: false,
			processData: false,
			dataType: 'json',
			success: function (data) {

				if(data.status == true) {
					$('#rolesList').DataTable().ajax.reload();
					$('<div id="snmbs" class="text-success">'+data.success+'</div>').insertAfter(".savebtn");
					$(".savebtn").attr("disabled", true);
				} else {
					$('#rolesList').DataTable().ajax.reload();
					$('<div id="snmbs" class="text-danger">'+data.error+'</div>').insertAfter(".savebtn");
					$(".savebtn").attr("disabled", false);
				}
			}
		});
	}
});


$("#permissionname").on("keyup", function(event) {
    
	var input = $("#permissionname");
	var urlvl = $("#permissionname").val();
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#nmb").remove();
		$('<div id="nmb" class="text-danger">Permission Name is required</div>').insertAfter("#permissionname");
		$("#permissionname").focus();
	} else {

		var token = $('meta[name="csrf-token"]').attr("content");
		var fd = new FormData();
			fd.append('_token', token);
			fd.append('permissionname', $("#permissionname").val());
			fd.append('permissionid', $("#permissionid").val());

		$.ajax({
			url: '{{ route("permissionname-valid") }}',
			type: "POST",
			data: fd,
			contentType: false,
			processData: false,
			dataType: 'json',
			success: function (data) {
				if(data.status == true) {
					input.removeClass("invalid").addClass("valid");
					$("#nmb").remove();
				} else {
					$("#nmb").remove();
					$('<div id="nmb" class="text-danger">'+data.msg+'</div>').insertAfter("#permissionname");
				}
			}
		});
	}
});


$("#showname").on("keyup", function(event) {
	var input = $("#showname");
	var urlvl = $("#showname").val();
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#snmb").remove();
		$('<div id="snmb" class="text-danger">Show Name is required</div>').insertAfter("#showname");
		$("#showname").focus();
	} else {

		var token = $('meta[name="csrf-token"]').attr("content");
		var fd = new FormData();
			fd.append('_token', token);
			fd.append('showname', $("#showname").val());
			fd.append('permissionid', $("#permissionid").val());

		$.ajax({
			url: '{{ route("pername-valid") }}',
			type: "POST",
			data: fd,
			contentType: false,
			processData: false,
			dataType: 'json',
			success: function (data) {
				if(data.status == true) {
					input.removeClass("invalid").addClass("valid");
					$("#snmb").remove();
				} else {
					$("#snmb").remove();
					$('<div id="snmb" class="text-danger">'+data.msg+'</div>').insertAfter("#showname");
				}
			}
		});
	}
});


function vldfn(){
	$('#rolesList').DataTable().ajax.reload();
}

</script>

<style>
#snmbs{
	margin-left: 56%;
	color: green!important;
	padding: 0px;
}
</style>

@endsection