@extends('layouts.backend-app')

<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>

@section('content')
<!-- BEGIN: Content-->
<div class="page-body">
	<div class="container-fluid">        
		<div class="page-title">
			<div class="row">
				<div class="col-6">
					<h3>User roles</h3>
				</div>
				<div class="col-6">
					<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="{{url('dashboard')}}"> <i data-feather="home"></i></a></li>
					<li class="breadcrumb-item">Masters</li>
					<li class="breadcrumb-item active">Test</li>
					</ol>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid">
		<div class="row">
			<!-- Zero Configuration  Starts-->
			<div class="col-sm-12">
				<div class="card">
					<div class="card-header">
						<div class="media">  
							<h5 class="mb-0">User roles</h5>
							<div class="media-body text-end">
								<button id="create_button" class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#add-testtype"  data-bs-original-title="" title=""><i data-feather="plus-square"></i> Add New</button>    
							</div>        
						</div>
					</div>
					<div class="card-body">
						<div class="table-responsive">
							<table class="display user_role-table" >
								<thead>
									<tr>
									<th style="width: 80px;">S.No</th>
									<th>Role name</th>                         
									<th style="width: 20px;">Action</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

<!-- END: Content-->

	<div class="modal fade" id="add-testtype" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          	<div class="modal-content">
            	<div class="modal-header">
              		<h5 class="modal-title" id="exampleModalLabel2">Add User Role</h5>
              		<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            	</div>
				<form id="TestForm" name="TestForm" class="form-horizontal">
					@csrf
					<input type="hidden" name="user_role_id" id="user_role_id">
					<div class="modal-body">
                		<div class="mb-3">
                  			<label class="col-form-label" for="user_role">User Role:</label>
                  			<input type="text" name="user_role" class="form-control" id="user_role">
                		</div>                            		
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary" id="savebtn" type="submit">Submit</button>
						<button class="btn btn-light" type="button" data-bs-dismiss="modal">Close</button>             
					</div>
				</form>
			</div>
		</div>
    </div>

	

	

@endsection
@push('javascript')

	<script src="{{asset('backend-assets/js/validation/jquery.validate.min.js')}}" type="text/javascript"></script>
	<script src="{{asset('backend-assets/js/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=$(".user_role-table");
	if(dTable!=''){
		table.DataTable().clear().destroy();
	}
	var dTable = table.DataTable({		
		processing: true,
		serverSide: true,
		stateSave: true,
		order:[[0,'desc']],
		ajax: {
			url: "{{ url('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},
		],
		"drawCallback": function( settings ) {
        	feather.replace();
    	}
	}).draw();
}
$(document).on('click','#create_button',function () {
	$('#savebtn').html("Submit");
	$('#exampleModalLabel2').html("Add User Role");
	$('#user_role_id').val('');
	$('#TestForm').trigger("reset");
	$('#add-testtype').modal('show');
});

$(document).on('click','#savebtn',function (e) {
	var formId = "#TestForm";
	//console.log(formId); return false;
	var thizSelector = $(this);
	
	$(formId).validate({
		
		rules: {
			user_role: {
				required: true,
                minlength: 5,
				remote: {
					url : "user-role-check",
					type: "post",
					data: {
                       user_role_id: function() {
                       return $("#user_role_id").val();
                      },
					  _token: '{{csrf_token()}}'
                   }
				} 
			}
		},
		messages: {
			user_role: { required :"Please enter test type", remote:"User role already exists!" }
		},
		submitHandler: function(form) {
		
			var formData = new FormData($(formId)[0]);
			console.log(formData);
			$.ajax({
				data: formData,
				url: "{{ url('admin/user-role') }}",
				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,
						});
					}
					//$('#TestForm').trigger("reset");
					$('#add-testtype').modal('hide');
					fetchTable();
				
				},
				error: function (data) {
					console.log('Error:', data);
					$('#savebtn').html('Save Changes');
				}
			});
		}

	});
});
$(document).on('click', '.editTest', function () {
	var test_id = $(this).data('id');
	$.get("{{ url('admin/user-role') }}" +'/' + test_id +'/edit', function (data) {
			$('#exampleModalLabel2').html("Edit User Role");
			$('#savebtn').html("Update");
			$('#add-testtype').modal('show');
			$('#user_role_id').val(data.id);
			$('#user_role').val(data.name);
			
	})
});

	

function deleteUserRole(test_id){
	let fun = function(){
		var url = "{{url('admin/user-role') }}/"+test_id;
		$.ajax({
			url: url,
			type: "DELETE",
			data: {_token: '{{csrf_token()}}'},
			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='light';
		cbBtn = '<button type="button" class="btn btn-primary" 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">'+
								'<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>'+
								'<h5 class="modal-title">'+title+'</h5>'+								
							'</div>'+
							'<div class="modal-body">'+content+'</div>'+
							'<div class="modal-footer justify-content-center">'+cbBtn+
								'<button type="button" class="btn btn-'+btnCls+'" data-bs-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