@extends('layouts.header')
@section('content')

</br>
<div class="statbox widget box box-shadow">

	<h4>Email Conditions Configuration</h4>

	<form name="EmailConditionsForm" id="EmailConditionsForm" class="form-group row">
		<div class="col-md-4">
			<label>Condition On <font color="red">*</font></label>
			<select class="form-control customDropdown" id="ConditionOn" name="ConditionOn" required>
				<option value="">--Select--</option>
				<option value="1">Subject</option>
				<option value="2">Domain</option>
				<option value="3">Email Address</option>
			</select>
			<div class="invalid-feedback">
				Please fill the Condition On
			</div>
		</div>

		<div class="col-md-4">
			<label>Condition Type <font color="red">*</font></label>
			<select class="form-control customDropdown" id="ConditionType" name="ConditionType" required>
				<option value="">--Select--</option>
				<option value="1">Equals</option>
				<option value="2">Like</option>
			</select>
			<div class="invalid-feedback">
				Please fill the Condition Type
			</div>
		</div>

		<div class="col-md-4">
			<label>Condition Value <font color="red">*</font></label>
			<textarea name="ConditionValue" id="ConditionValue" class="form-control" required></textarea>
			<div class="invalid-feedback">
				Please fill the Condition Value
			</div>
		</div>

		<div class="col-md-12 text-center">
			<button class="btn btn-primary" type="button" onclick="SaveConditions()">Add</button>
		</div>

	</form>

	<div class="col-md-12">

		<p class="text-primary">Note: <br> If E-mail matches the below conditions, tickets will not be created.</p>
	</div>

</div>

</br>

<div id="toggleAccordion" class="accordion">
	<div class="card">
		<div class="card-header" id="...">
			<section class="mb-0 mt-0">
				<div role="menu" class="" data-bs-toggle="collapse" data-bs-target="#defaultAccordionOne" aria-expanded="true" aria-controls="defaultAccordionOne">
					Conditions List <div class="icons"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></div>
				</div>
			</section>
		</div>

		<div id="defaultAccordionOne" class="collapse show" aria-labelledby="..." data-bs-parent="#toggleAccordion">
			<div class="card-body" id="ConditionsList">



			</div>
		</div>
	</div>


</div>


<script>

	document.addEventListener('DOMContentLoaded',()=>{

		ViewConditionsList();	
	})

	SaveConditions=()=>{
		var form = document.getElementById('EmailConditionsForm');
		var invalid = $('#EmailConditionsForm .invalid-feedback');


		formData=new FormData(form);

		if (form.checkValidity() === false) {
			event.preventDefault();
			event.stopPropagation();
			invalid.css('display', 'block');
		} else {
			invalid.css('display', 'none');
			form.classList.add('was-validated');

			$.ajax({
				type:"post",
				url:"{{url('EmailTickets-SaveConditions')}}",
				data:formData,
				mimeType: "multipart/form-data",
				contentType: false,
				cache: false,
				processData: false,
				beforeSend:()=>{},
				success:response=>{
					$('#ConditionOn').val('').change();
					$('#ConditionType').val('').change();
					$('#ConditionValue').val('');
					console.clear();
					console.log(response);
					res=JSON.parse(response);

					if(res.status=='success')
					{		
						Snackbar.show({
							text: res.msg, 
							pos: 'top-right',
						});

						ViewConditionsList();
					}
					else
					{
						Snackbar.show({
							text: res.msg, 
							pos: 'top-right',
							actionTextColor: '#fff',
							backgroundColor: '#e7515a'
						});
					}
				}
			});
		}
	}


	ViewConditionsList=()=>{
		$.ajax({
			type:'post',
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			url:"{{url('EmailTickets-ViewConditionsList')}}",
			beforeSend:()=>{
				$('#ConditionsList').html(`<center><div class="spinner-border text-primary  align-self-center loader-lg">Loading...</div></center>`)
			},
			success:response=>{
			// console.log(response);
			$('#ConditionsList').html(response);
		}
	});
	}

	UpdateEmailTicketCondition=(inputField,EmailTicketConditionsId)=>{

		if($(inputField).is(' :checked'))
		{
			ActiveStatus=1;
		}
		else
		{
			ActiveStatus=0;
		}

		$.ajax({
			type:'post',
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			url:"{{url('EmailTickets-UpdateEmailTicketCondition')}}",
			data:{EmailTicketConditionsId,ActiveStatus},
			beforeSend:()=>{},
			success:response=>{
				res=JSON.parse(response);

				if(res.status=='success')
				{		
					Snackbar.show({
						text: res.msg, 
						pos: 'top-right',
					});

				}
				else
				{
					Snackbar.show({
						text: res.msg, 
						pos: 'top-right',
						actionTextColor: '#fff',
						backgroundColor: '#e7515a'
					});
				}
			}
		});
	}	


</script>
@endsection