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

@php
//echo "<pre>";
	//print_r($EmailsList);
//echo "</pre>";
$serhos = $_SERVER['HTTP_HOST'];
@endphp
<br>
<div class="page-header">
	<div class="breadcrumb-four">
		<ol class="breadcrumb">
			<ul class="breadcrumb">
				<li><a href="{{url('dashboard')}}" title="Go to Home Page!"><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-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></a></li>
				<li class="active">
					<a href="{{url('ListView/806867ab-96a5-11eb-948a-56b1773fd56f')}}" class="active" title="Ticket ListView">
						<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-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
						List Ticket
					</a>
				</li>
				<li>
					<a href="{{url('CreateView/806867ab-96a5-11eb-948a-56b1773fd56f')}}"  class="active" title="Create Task">
						<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-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
						Create Ticket
					</a>
				</li>
				<li>
					<a href="{{url('EmailTicketsLogedUser')}}"  title="Refresh">
						<svg style="" 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-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>Assigned Email Tickets
					</a>
				</li>

				<li>
					<a href="{{url('EmailTickets')}}"  title="Complete Refresh">
						<svg id="SyncMailLoader" onclick="SyncMails()" style="margin-left: 5px;cursor:pointer" 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-refresh-ccw"><polyline points="1 4 1 10 7 10"></polyline><polyline points="23 20 23 14 17 14"></polyline><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path></svg>
					</a>
				</li>
				@if($serhos == 'apsrtc.bpm360.net')
				<li>
					<a target="_blank" class="active" title="SYNC MANUALLY" href="{{url('GetInboundEmailsImap')}}">
						<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-log-in"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>
						CLICK TO SYNC EMAILS MANUALLY
					</a>
				</li>
				@endif
				
			</ul>
		</ol>
	</div>
</div>
</br>
<style>
	label
	{
		/*display: none !important;*/
	}
	
	label
	{
		display: block !important;
	}
	.table:not(.dataTable) tbody tr td svg
	{
		color:#fff;
	}

</style>
<input type="hidden" id="EmailModuleId" name="EmailModuleId" value="806867ab-96a5-11eb-948a-56b1773fd56f">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
	<div id="toggleAccordion" class="accordion">
		<div class="card">
			<div class="card-header" id="...">
				<section class="mb-0 mt-0">
					<div role="menu" class="collapsed" data-bs-toggle="collapse" data-bs-target="#defaultAccordionOne" aria-expanded="false" aria-controls="defaultAccordionOne">
						Search Filters  <div class="icons"><svg> ... </svg></div>
					</div>
				</section>
			</div>
			<div id="defaultAccordionOne" class="collapse" aria-labelledby="..." data-bs-parent="#toggleAccordion">
				<div class="card-body">
					<div id="ShowFields"></div>
					<input type="button" name="FindTicket" id="FindTicket" value="Search" class="btn btn-primary" onclick="SearchAll(1,2,0)" />
					<input type="button" name="Clear" id="Clear" value="Clear" class="btn btn-primary"  onclick="SearchFilters()" />
				</div>
			</div>
		</div>
	</div>
	<input type="hidden" id="PageNum" value="1">
	<div class="statbox widget box box-shadow">
		<div id="emailTickets"></div>
	</div>
</div>

<script>
	document.addEventListener('DOMContentLoaded',()=>{
		SearchFilters();
		SearchAll(1,1);
		// autoreload();
	})
	
	function autoreload()
	{
		$(window).focus(function() {
			setInterval(function() {
				ismodalopen=$('#exampleModal').is(':visible');
				if(ismodalopen==true)
				{
				}
				else
				{
					SearchAll(1,1);
				}
			}, 60000);
		});
	}
	
	EmailTicketsView=(PageNum,mode)=>
	{

		console.log(`EmailTicketsView  function called `);
		SearchAll(PageNum,mode);
		/*MoudleId=$('#EmailModuleId').val();
		$.ajax({
			type:"post",
			url:`{{url('EmailTickets-View')}}/${PageNum}`,
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			data:{MoudleId},
			beforeSend:()=>{

				$('#emailTickets').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div><center>`);
			},
			success:response=>{
				$('#emailTickets').html(response);
			}
		});*/
	}
	
	function SearchAll(PageNum,mode,totalRecords)
	{
		$('#PageNum').val(PageNum);	
		var ModuleId ='806867ab-96a5-11eb-948a-56b1773fd56f';
		var page_num=1;
		//var total_records = $('#total_records').val();
		var limit=10;
		var field_name="CreatedDate";
		var sort_order="DESC";
		var field_name="";
		var sort_order="";
		var FieldNameNew = $('#FieldNameNew').val();
		var OrderByNew = $('#OrderByNew').val();
		if(FieldNameNew=='undefined' || FieldNameNew=='')
		{
			var FieldNameNew="";
		}
		else
		{
			var FieldNameNew=FieldNameNew;
		}
		
		if(OrderByNew=='undefined' || OrderByNew=='')
		{
			var OrderByNew="";
		}
		else
		{
			var OrderByNew=OrderByNew;
		}
		var searchForm = JSON.stringify( $('#SearchForm').serializeArray() );

		var formData = {
			data: searchForm,
			source: ModuleId,
			ModuleId: ModuleId,
			page_num: PageNum,
			limit: limit,
			field_name: field_name,
			sort_order: sort_order,
			FieldNameNew: FieldNameNew,
			totalRecords:totalRecords,
			mode: mode
		};
		var ajax_url = "{{ url('EmailTickets-View') }}";
		console.log(`Search All function called  ${ajax_url}`);


		$.ajax({
			url: ajax_url,
			type: 'POST',
			data: formData,
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			beforeSend:function() {
				$('#emailTickets').html(`<center><div class="spinner-border text-primary  align-self-center loader-lg">Loading...</div></center>`);
			},
			success: function(result) {
				console.log("Success...");
				$('#loading').html('');
				$('#emailTickets').html(result);
			},
			error: function (data) {
				$('#emailTickets').html("");
			}
		});
	}

	function SearchFilters(){
		var ModuleId ='806867ab-96a5-11eb-948a-56b1773fd56f';
		console.log("Getting Filters...");
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
			}
		});

		var formData = {
			ModuleId: ModuleId,
			source: ModuleId, //"Search",
		};
		var type = "POST";
		var urls = "{{ url('SearchGetFields') }}";	// GetDemographyFields calls Controller
		$.ajax({
			type: type,
			url: urls,
			data: formData,
			beforeSend:function() {
				$('#ShowFields').html(`<center><div class="spinner-border text-primary  align-self-center loader-lg">Loading...</div></center>`);
			},
			success: function (results) {
				console.log("Recieved Filter!");
				//alert("results"+results);
				$('#ShowFields').html(results);
			},
			error: function (data) {
				console.log("Error: "+data);
				$('#ShowFields').html("");
			}
		});
	}
	
	function SearchFilterswithFilterId(FilterId){
			var ModuleId = $('#SearchModuleId').val();
			console.log("Getting Filters...");
			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
				}
			});

			var formData = {
				ModuleId: ModuleId,
				FilterId: FilterId,
				source: ModuleId, //"Search",
			};
			var type = "POST";
			var urls = "{{ url('SearchGetFields') }}";	// GetDemographyFields calls Controller
			$.ajax({
				type: type,
				url: urls,
				data: formData,
				beforeSend:function() {
					$('#ShowFields').html(`<center><div class="spinner-border text-primary  align-self-center loader-lg">Loading...</div></center>`);
				},
				success: function (results) {
					console.log("Recieved Filter!");
					//alert("results"+results);
					$('#ShowFields').html(results);
				},
				complete: function () {
					SearchAll(1,2,0);
				},
				error: function (data) {
					console.log("Error: "+data);
					$('#ShowFields').html("");
					
				}
			});
		}
	ReloadCurrentPage=()=>
	{
		PageNum=$('#PageNum').val();
		totalRecords=$('#TotalRecordsP').prop("title");
		mode=2;
		SearchAll(PageNum,mode,totalRecords);
	}
</script>



@endsection