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

			<section class="content">
				<div class="container-fluid">

					<div class="px-sm-4">

						<div class="row mt-2 mt-sm-3 align-items-center">
							<div class="col-md-7 col-8">
								<div class="top-head">
									<h1>Enquiries</h1>
								</div>
							</div>
						</div>

						<div class="row mt-4">
							<div class="col-md-12">
								<div class="card">
									<div class="card-body">

										<div class="row mb-3 mt-2 align-items-center">
											<div class="col-md-8 mb-sm-0 mb-3" >
												<div class="row">
													<div class="col-md-3 col-6">
														<h2 class="line-chartlabel">Pending <span class="chart-labelbox ml-sm-3 ml-2">{{$pendingEnquiries}}</span></h2>
													</div>
													<div class="col-md-3 col-6">
														<h2 class="line-chartlabel">Closed <span class="chart-labelbox chart-labelboxnew ml-2 ml-sm-3">{{$closedEnquiries}}</span></h2>
													</div>
												</div>
											</div>

												<div class="col-md-4">
												<form id="graph-filter-form">
													<select class="form-control landing-dropmainnew" name="filterData" id="graph-filter">
														<option value="currentYear">Select</option>
														<option value="currentYear">Current Year</option>
														<option value="currentWeek">Last 7 Days</option>
														<option value="last30Days">Last 30 Days</option>
														<option value="previousYear">Previous Year</option>
													</select>
											</form>

												</div>
										</div>

										<canvas id="conversionChart" width="100%" class="line-cahrt" ></canvas>

										



									</div>
								</div>

								<div class="card p-2">
									<div class="text-right pb-2">
										<a href="enquiries.html">
											<a href="{{route('enquiries.enquiryList')}}" type="button" class="btn save-btn">Show All</a>
										</a>
									</div>	
									<div class="table-responsive">
										<table class="table dairy-table mb-0">
											<thead>
												<tr>
													<th>DATE</th>
													<th>FARMER</th>
													<th>MOBILE</th>
													<th>ADDRESS</th>
													<th>DDE</th>
													<th>STATUS</th>
												</tr>
											</thead>
											<tbody>
												
												@foreach($enquiryList as $enquiry)
													@php
														$redFlag = false;
														if($enquiry->visit_date){
															$createdDate = Carbon\Carbon::parse($enquiry->visit_date)->addDays(3);
															if($enquiry->status == 'pending' && $createdDate < now()){
																$redFlag = true;
															}
														}
													@endphp
												<tr>
													<td>
														{{date('d M,  Y', strtotime($enquiry->created_at))}}
													</td>
													<td>{{@$enquiry->name}}</td>
													<td>+256 {{@$enquiry->mobile}}</td>
													<td>{{@$enquiry->address}}</td>
													<td>{{@$enquiry->dde->name}}</td>
													@if(@$enquiry->status == 'pending')
													<td class="missed-text cursor-pointer" data-id="{{$enquiry->id}}" data-toggle="modal" onclick="getEnquiryLog({{$enquiry->id}})" data-target="#join-menu" >{{@$enquiry->status}}
														@if($redFlag)
														<i class="fa fa-exclamation-triangle ml-2" aria-hidden="true"></i>
														@endif
													</td>
													@else
													<td class="enquiries-graytext cursor-pointer" data-id="{{$enquiry->id}}" data-toggle="modal" onclick="getEnquiryLog({{$enquiry->id}})" data-target="#join-menu" >{{@$enquiry->status}}<br>
													{{date('d M,  Y', strtotime($enquiry->closed_at))}}
													</td>
													@endif
												</tr>
												@endforeach
												
											</tbody>
										</table>
									</div>
								</div>

							</div>
						</div>

					</div>

				</div>
			</section>

		</div>
	</div>

	<style>
		.footer-row{
			margin-left: 118px!important;
		}
	</style>

@endsection
@section('scripts')

	<script>
		// Chart 4
		var months = null;
		var closedArray = null;
		var pendingArray = null;
		console.log(closedArray);
		var m = document.getElementById('conversionChart').getContext('2d');
		var conversionChart = new Chart(m, {
			type: 'line',
			data: {
				labels: months,
				datasets: [{
					label: 'Closed',
					data: closedArray,
					borderColor: '#4BC56F',
					backgroundColor: '#fff',
				}, {
					label: 'Pending',
					data: pendingArray,
					fill: false,
					borderColor: '#FC5E60',
					backgroundColor: '#fff',
				}]
			},

			options: {
				yAxes: [{
					angleLines: {
						display: false
					}
				}],
				plugins: {
                    legend: {
                        display: false
                    }
                }

			}

		});

		// graph-filter
		$('#graph-filter').on('change',function(){
			console.log($(this).val());
			document.getElementById('graph-filter-form').submit();

		});
	</script>

@endsection