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

@php
echo "<pre>";
	//print_r($EmailsList);
echo "</pre>";
@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('EmailTickets')}}"  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>All EMail Tickets
					</a>
				</li>

				<li>
					<a href="{{url('EmailTicketsLogedUser')}}"  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>

				<li>
					<a href="javascript:void(0)"  title="Refresh this page">
						<svg onclick="ReloadCurrentPage()" 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-rotate-ccw"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>

					</a>
				</li>

			</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)" />
					<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',()=>{
		SearchAll(1,1);
	//	autoreload();
	SearchFilters();
})
	
	/*function autoreload()
	{
		$(window).focus(function() {
			setInterval(function() {
				ismodalopen=$('#exampleModal').is(':visible');
				if(ismodalopen==true)
				{
				}
				else
				{
					SearchAll(1,1);
				}
			}, 60000);
		});
	}*/
	
	EmailTicketsView=(PageNum,mode)=>
	{
		SearchAll(PageNum,mode);
	}
	
	function SearchAll(PageNum,mode)
	{

		$('#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 FieldNameNew = $('#FieldNameNew').val();
	var OrderByNew = $('#OrderByNew').val();
	if(FieldNameNew=='undefiend' || FieldNameNew=='')
	{
		var FieldNameNew="CreatedDate";
	}
	else
	{
		var FieldNameNew=FieldNameNew;
	}

	if(OrderByNew=='undefiend' || OrderByNew=='')
	{
		var OrderByNew="DESC";
	}
	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,
		sort_order: FieldNameNew,
		sort_order: sort_order,
		mode: mode
	};
	
	var ajax_url = "{{ url('EmailTickets-ViewLogedUserTest') }}";
	$.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("");
			}
		});
	}


	ReloadCurrentPage=()=>
	{
		PageNum=$('#PageNum').val();
		totalRecords=$('#TotalRecordsP').prop("title");
		mode=2;
		SearchAll(PageNum,mode,totalRecords);
	}

</script>
@endsection