@extends('layouts.header')
@section('content')
<br>
@php
$todayDate=date('Y-m-d');
@endphp
<div class="statbox widget box box-shadow">

	<div class="form-group row">
		<div class="col-md-3">
			<label>Report Type</label>
			<select class="form-control customDropdown" id="ReportType" name="ReportType" onchange="displayfilter(this.value)">
				<option value="1">Based on Lead CreatedDate</option>
				<option value="2">Based on Call Date</option>
			</select>
		</div>
		<div class="col-md-3">
			<label>Created From Date</label>
			<input type="date" class="form-control" name="CreatedDate" id="CreatedDate" value="{{$todayDate}}">
		</div>
		<div class="col-md-3">
			<label>Created To Date</label>
			<input type="date" class="form-control" name="ToCreatedDate" id="ToCreatedDate" value="{{$todayDate}}">
		</div>
	</div>
	<br>
	<form id="ReportSearchForm" name="ReportSearchForm">
		<div id="ExtraFilters">
			<div class="form-group row" >
				<div class="col-md-3">
					<label>Marked as Inrested From Date</label>
					<input type="date" class="form-control" name="MarkedasInterestFromDate" id="MarkedasInterestFromDate" value="">
				</div>
				<div class="col-md-3">
					<label>Marked as Inrested To Date</label>
					<input type="date" class="form-control" name="MarkedasInterestToDate" id="MarkedasInterestToDate" value="">
				</div>
			<!--</div>-->
			<!--<div class="form-group row" >-->
				<div class="col-md-3">
					<label>Call From Date</label>
					<input type="date" class="form-control" name="CallFromDate" id="CallFromDate" value="">
				</div>
				<div class="col-md-3">
					<label>Call To Date</label>
					<input type="date" class="form-control" name="CallToDate" id="CallToDate" value="">
				</div>
			</div>
			<div class="form-group row" >
				<div class="col-md-3">
					<label>Users</label>
					<select name="Agent" id="Agent" class="form-control" multiple>
						@foreach($getActiveUsersList as $EachUsers=>$EachUsersDet)
						<option value="{{$EachUsers}}">{{$EachUsersDet['name']}}</option>
						@endforeach
					</select>
				</div>
				<div class="col-md-3">
					<label>Disposition</label>
					<select class="form-control" name="Disposition" id="Disposition" multiple>
						@foreach($Disposition as $EachDispositionId=>$EachDispositionName)
						<option value='{{$EachDispositionId}}'>{{$EachDispositionName}}</option>
						@endforeach
					</select>
				</div>
				<div class="col-md-3">
					<label>SubDisposition</label>
					<select class="form-control" name="SubDisposition" id="SubDisposition" multiple>
						@foreach($SubDisposition as $EachSubDispositionId=>$EachSubDispositionName)
						<option value='{{$EachSubDispositionId}}'>{{$EachSubDispositionName}}</option>
						@endforeach
					</select>
				</div>
				<div class="col-md-3">
					<label>Vendor</label>
					<select class="form-control" name="Vendor" id="Vendor" multiple>
						@foreach($VendorDropDown as $EachDropDownId=>$DropDownName)
						<option value='{{$EachDropDownId}}'>{{$DropDownName}}</option>
						@endforeach
					</select>
				</div>
			</div>
		</div>
	</form>
	<div class="form-group row">
		<div class="col-md-12" align="center">			
			<button type="button" class="btn btn-primary" style="margin-top: 35px" onclick="GetReport()">View</button>
		</div>
	</div>
	
	<br>
	<div class="form-group row" id="LeadsList"></div>

</div>
@endsection

<script>
	document.addEventListener('DOMContentLoaded',()=>{
		setTimeout(()=>{
			GetReport(1);
		},100)
	})
	function displayfilter(ddvalue)
	{
		if(ddvalue==1)
		{
			document.getElementById("ExtraFilters").style.display = "block";
		}
		else
		{
			document.getElementById("ExtraFilters").style.display = "none";
		}
	}
	GetReport=(pageNum)=>
	{
		if(!pageNum)
		{
			pageNum=1;
		}

		ReportType=$('#ReportType :selected').val();

		// if("{{$_SERVER['REMOTE_ADDR']}}" =="152.58.213.50" )
		// {
		// 	ReportType=2;
		// }

		url="{{('LeadReportsDataV2')}}";
		CreatedDate=$('#CreatedDate').val();
		ToCreatedDate=$('#ToCreatedDate').val();
		var ReportSearchForm=$('#ReportSearchForm').serializeArray();
		ExportToExcel=0;
		$.ajax({
			type:"post",
			url,
			data:{CreatedDate,ToCreatedDate,ReportType,pageNum,ExportToExcel,ReportSearchForm},
			beforeSend:()=>{
				$('#LeadsList').html(`<center><div class="spinner-border text-primary  align-self-center loader-lg">Loading...</div></center>`);
			},
			success:response=>{
				$('#LeadsList').html(response);
			}

		})
	}

	ExportExcel=()=>
	{
		url="{{('LeadReportsDataV2')}}";
		ReportType=$('#ReportType :selected').val();
		pageNum=1;
		ExportToExcel=1;
		// if("{{$_SERVER['REMOTE_ADDR']}}" =="152.58.213.50" )
		// {
		// 	ReportType=2;
		// }
		CreatedDate=$('#CreatedDate').val();
		ToCreatedDate=$('#ToCreatedDate').val();
		window.location=`${url}?CreatedDate=${CreatedDate}&ToCreatedDate=${ToCreatedDate}&ReportType=${ReportType}&pageNum=${pageNum}&ExportToExcel=${ExportToExcel}`;
	}


	ExportExcelV2=()=>
	{
		ReportType=$('#ReportType :selected').val();
		pageNum=1;
		ExportToExcel=1;
		CreatedDate=$('#CreatedDate').val();
		ToCreatedDate=$('#ToCreatedDate').val();
		var ReportSearchForm=$('#ReportSearchForm').serializeArray();

		$.ajax({
			type:"post",
			url:"{{'LeadReportsData-Export'}}",
			data:{ReportType,pageNum,ExportToExcel,CreatedDate,ToCreatedDate,ReportSearchForm},
			beforeSend:()=>{

				$('#ExcelBtnDiv').html(`<div class="spinner-border text-primary  align-self-center loader-lg">Loading...</div> <br> Please Wait...`)
			},
			success:response=>{
				console.log(response);
				res=JSON.parse(response);

				if(res.status=="success")
				{
					$('#ExcelBtnDiv').html(`<a href="${res.FilePath}"  class="text-primary">Click Here to Download</a>`)
				}
				else
				{
					$('#ExcelBtnDiv').html(`${res.msg}`)
				}


			}
		})
	}
	
	
</script>