@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">
                    <div class="col-md-7 col-10">
                        <div class="top-head">
                            <h1>Enquiries</h1>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="/home">Home</a></li>
                                    <li class="breadcrumb-item active" aria-current="page"> Enquiries</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <div class="col-md-5 col-2 text-right">
                        <div class="d-flex justify-content-end">

									<div class="top-search-bar d-sm-block d-none">
										<form class="search-form" role="search">
											<div class="form-group pull-right" id="searchnew">
												<input type="text" class="form-control" placeholder="Search by..." name="search" value="{{ @$search }}" onchange="this.form.submit()">
												<!-- <button type="submit"
													class="form-control form-control-submit">Submit</button> -->
												<span class="search-label"><img src="{{ asset('assets/img/search.svg') }}" alt="/"></span>
											</div>
										</form>
									</div>

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

						<div class="box-select bg-white">
							<form id="enquiry-filter-form">
								<div class="row">
									<div class="col-md-3 border-sm-right">
										<div class="select-innerpadding">
											<label class="select-label mb-0">DDE</label>
											<select class="form-control select2 dde-filter" name="ddeFilter" id="dde-select2">
												<option value="">Select</option>
												@foreach($ddeData as $dde)
                                                <option value="{{ $dde['name'] }}" {{request('ddeFilter') == $dde['name'] ? 'selected' : '' }}>{{ $dde['name'] }}</option>

												@endforeach
											</select>
										</div>
									</div>
									<div class="col-md-3 border-sm-right">
										<div class="select-innerpadding">
											<label class="select-label mb-0">Region</label>
											<select class="form-control select2 city-filter" name="cityFilter" id="city-select2">
												<option value="">Select</option>
												@foreach($cities as $city)
                                                <option value="{{ $city->name }}" {{request('cityFilter')==$city['name']? 'selected': ''}}>{{ $city->name }}</option>

												@endforeach
											</select>
										</div>
									</div>
									<div class="col-md-3 border-sm-right">
                                        <div class="select-innerpadding">
                                             <label class="select-label mb-0">Date</label>
                                            {{-- <option value="">Select</option> --}}
                                            <input type="text" class="form-control" value="{{$request->daterange}}" name="daterange" id="daterange" placeholder="Select">
                                        </div>
                                    </div>
									<div class="col-md-3">
										<div class="select-innerpadding">
											<label class="select-label mb-0">Status</label>
											<select class="form-control select2 status-filter" name="statusFilter" id="status-select2">
												<option value="">Select</option>
												<option value="all">All</option>
                                                @foreach ($statuses as $status)
                                                <option value="{{ $status}}" {{request('statusFilter')== $status ? 'selected': ''}}>{{ $status}}</option>
                                                @endforeach
											</select>
										</div>
									</div>
								</div>
							</form>
						</div>

						<div class="row mt-3 align-items-center">
							<div class="col-md-6 col-7">
								<h6 class="results-foundtext mb-0">{{$count}} Results found</h6>
							</div>
							<div class="col-md-6 col-5 text-right">
								<a class="clear-filter" id="clear-filter">Clear Filters</a>
							</div>
						</div>

						<div class="row mt-2 mt-sm-4">
							<div class="col-md-12">
								<div class="card p-2">
									<div class="table-responsive">
										<table class="table dairy-table mb-0">
											<thead>
												<tr>
													<th>@sortablelink('created_at', 'DATE')</th>
													<th>FARMER</th>
													<th>MOBILE</th>
													<th>ADDRESS</th>
													<th>DDE</th>
													<th>STATUS</th>
												</tr>
											</thead>
											<tbody>

												@foreach($enquiries 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 style="overflow: auto; max-width: 300px;">{{@$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>
						{!! $enquiries->withQueryString()->links('partials.pagination')->render() !!}


					</div>

				</div>
			</section>

		</div>
	</div>

	<!-- start -->

	<div class="modal fade mobile-header filter-popup join-popup modal-dialog-slideout" id="join-menu" tabindex="-1"
		role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content border-0">
				<div class="modal-header pb-0 mobile-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">
							<!-- &times; -->
							<img src="{{asset('assets/img/dash-cross.svg')}}" class="cross-dash" alt="">
						</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="row align-items-center">
						<div class="col-md-9 col-9">
							<div class="pop-head">
								<h2>Enquiry details</h2>
							</div>
						</div>
					</div>

					<div class="close-popcontentbox">
						<div class="row  pt-3">
							<div class="col-md-7 col-8">
								<h1 class="farmer-name"></h1>
								<p class="farmer-mobile"></p>
							</div>
							<div class="col-md-5 col-4 text-right">
								<span class="enquiry-status badge closed-badge "></span>
							</div>
						</div>

						<div class="row mt-2 align-items-center">
                            <div class="col-md-6">
								<p class="enquiry-date"></p>
                            </div>
                            <div class="col-md-6">
								<p class="close-date"></p>
                            </div>
                        </div>

						<div class="pop-mapbox mt-2 position-relative">
							<div id="map" style="height:300px;"></div>
							 <div class="pop-sendbox">
								<a id="navigation-map" href="" target="blank"><img src="{{asset('assets/img/send-red.svg')}}" alt=""></a>
							 </div>

							 <div class="pop-addressbox">
								 <div class="row">
									<div class="col-md-4 col-4">
										<img src="{{asset('assets/img/pop-cow.png')}}" alt="">
									</div>
									<div class="col-md-8 col-8">
										<h6>Address</h6>
										<h5 class="farmer-address"></h5>
									</div>
								 </div>
							 </div>
						</div>

						<h3>Farmer remarks</h3>
						<h4 class="farmer-remarks"></h4>
					</div>

					<div class="row justify-content-center mb-5">
						<div class="col-md-11 enquiry-feed">
							<!-- Dynamic content here -->
						</div>
					</div>

				</div>

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

	<!-- end -->
	<style>
		#clear-filter{
			cursor:pointer;
		}
		#map1{
			height: 100%;
		}
		.footer-row{
			margin-left: 118px!important;
		}
	</style>

@endsection

@section('scripts')
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZHiJY-h95-Cm_PmRPUbwkPaDhZPNLC3U&callback=initMap&libraries=places&v=weekly"defer></script> -->
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('app.google_maps_api_key') }}&callback=initMap&libraries=places&v=weekly"defer></script>
<script>

		$(document).ready(function(){

			function initMap() {}
			$('.select2').select2();

			// $(function() {
			// 	$('input[name="daterange"]').daterangepicker({
			// 		opens: 'left',
			// 		autoUpdateInput: true,
			// 	},
			// 	function(start, end, label) {
			// 		console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
			// 	});

			// });

            $(function() {
            $('input[name="daterange"]').daterangepicker({
                opens: 'left',
                autoUpdateInput: true,
            },
            function(start, end, label) {
                console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
            });
        });

        $('#daterange').on('apply.daterangepicker', function(ev, picker) {
			console.log(picker.startDate.format('YYYY-MM-DD'));
  			console.log(picker.endDate.format('YYYY-MM-DD'));
            //   $('#daterange').val('');
			document.getElementById("enquiry-filter-form").submit();

		});

			//DDE Selection
			$("#dde-select2").select2({
				ajax: {
					url: "{{url('enquiries/dde-data')}}",
					type: "post",
					dataType: 'json',
					delay: 250,
					data: function (params) {
						console.log(params.term);
						return {
							searchTerm: params.term // search term
						};
					},
					processResults: function (response) {
						console.log(response)
						return {
							results: response
						};
					},
					cache: true
				}
			});

			// city-select2
			$("#city-select2").select2({
				ajax: {
					url: "{{url('enquiries/city-data')}}",
					type: "post",
					dataType: 'json',
					delay: 250,
					data: function (params) {
						console.log(params.term);
						return {
							searchTerm: params.term // search term
						};
					},
					processResults: function (response) {
						console.log(response)
						return {
							results: response
						};
					},
					cache: true
				}
			});

		});

		// Filters  enquiry-filter-form
		$('.dde-filter').on('change', function(){
			console.log('filter:',$(this).val());
			$('#daterange').val('');
			document.getElementById("enquiry-filter-form").submit();
		});

		$('.city-filter').on('change', function(){
			console.log('filter:',$(this).val());
			$('#daterange').val('');
			document.getElementById("enquiry-filter-form").submit();
		});

		$('.status-filter').on('change', function(){
			console.log('filter:',$(this).val());
			$('#daterange').val('');
			document.getElementById("enquiry-filter-form").submit();
		});

		$('#daterange').on('apply.daterangepicker', function(ev, picker) {
			console.log(picker.startDate.format('YYYY-MM-DD'));
  			console.log(picker.endDate.format('YYYY-MM-DD'));

			document.getElementById("enquiry-filter-form").submit();

		});

		// Remove All Filters
		$(document).ready(function() {
			$('#clear-filter').on('click', function() {
				var currentURL = window.location.href.split('?')[0];
				window.location.href = currentURL;
			});
		});


		// Enquiry Details Section Script
		function getEnquiryLog(id){
			console.log(id);
			$.ajax({
				url  : "{{url('enquiries/enquiry-details')}}",
				type : "POST",
				data : {
							_token: "{{ csrf_token() }}",
							id : id
						},
				success	: function(data){
					console.log(data[0]);

					//appending response to respective fields
					$('.farmer-mobile').html('Mobile No: '+data[0]?.mobile+'<br/> Farmer ID: '+(data[0]?.supplier_code?.toUpperCase() ?? 'Not Available	'));
					$('.farmer-name').html(data[0]?.name);
					$('.enquiry-status').html(data[0]?.status);
                    var enquiryDate = moment(data[0]?.created_at);
                    $('.enquiry-date').html("Enquiry Date: "+enquiryDate.format("D MMM, YY"));
                    if ((data[0]?.status == "closed")) {
                        var closeDate = moment(data[0]?.closed_at);
                        $('.close-date').text("Closing Date: "+closeDate.format("D MMM, YY"));
                    } else {
                        // $('.close-label').hide();
                        $('.close-date').hide();
                    }

					// $('.enquiry-date').html(enquiryDate.format("D MMM, YY"));
					$('.farmer-address').html(data[0]?.address);
					$('.farmer-remarks').html(data[0]?.comment);
					$('#navigation-map').attr('href','http://maps.google.com?q='+ data[0]?.lat+','+data[0]?.lang);

					let enquiryLog = data[0]?.enquiry_log;

					var html = '';
					$('.enquiry-feed').html('');
					$.each(enquiryLog, (key, log) => {

						var logDate = moment(log?.created_at);
						if(log.commented_by == 'DDE'){
							if(log.attachment == null){
								html += '<div class="charles-contentbox mt-3"><h2>'+data[0]?.dde?.name+'('+log.commented_by+')</h2><p>'+log.comments+'</p><h6>'+logDate.format("D MMM, YY hh:mm A")+'</h6></div>';
							}else{
								html += '<div class="charles-contentbox mt-3"><h2>'+data[0]?.dde?.name+'('+log.commented_by+')</h2><p>'+log.comments+'</p><h6>'+logDate.format("D MMM, YY hh:mm A")+'</h6><img style="border-radius: 21%; padding-top:15px;" src="'+log.attachment+'" alt=""></div>';
							}
						}else{
							if(log.attachment == null){
								html += '<div class="charles-contentbox newcharles-contentbox mt-3"><h2>'+data[0]?.name+'('+log.commented_by+')</h2><p>'+log.comments+'</p><h6>'+logDate.format("D MMM, YY hh:mm A")+'</h6></div>';
							}else{
								html += '<div class="charles-contentbox newcharles-contentbox mt-3"><h2>'+data[0]?.name+'('+log.commented_by+')</h2><p>'+log.comments+'</p><h6>'+logDate.format("D MMM, YY hh:mm A")+'</h6><img style="border-radius: 21%; padding-top:15px;" src="'+log.attachment+'" alt=""></div>';
							}
						}
					});
					$('.enquiry-feed').html(html);
					var lat = data[0]?.lat;
					var lng = data[0]?.lang;

					initMap(lat,lng);
				}
			})
		}

		// Address map script
		let map;
		async function initMap(lat, lng) {
			var lat = lat ? parseFloat(lat) : -34.397;
			var lng = lng ? parseFloat(lng) : 150.644;
			const { Map } = await google.maps.importLibrary("maps");
			map = new Map(document.getElementById("map"), {
				center: { lat: lat, lng: lng },
				zoom: 8,
			});
			var marker = new google.maps.Marker({
               position:{ lat: lat, lng: lng },
               map: map,
			   draggable: false,
               animation:google.maps.Animation.BOUNCE
            });
		}
	</script>
@endsection