{% extends 'claimed.html.twig' %}

{% block stylesheets %}
	{{ parent() }}
	<link rel="stylesheet" href="/css/timepicker.min.css">
	<style>
		.hide {
			display: none;
		}

		.form-check.form-check-inline {
			display: flex; 
			align-items: center; 
			margin-left: .75rem;
		}

		.table thead th {
			border-bottom: none;
		}

		#opening-times table td {
			padding: 0;
			border-left: 1px solid #ced4da;
			border-right: 1px solid #ced4da;
		}

		#opening-times table td:last-child, #opening-times table td[role="rowheader"] {
			border: none;
			padding-left: 10px;
			border-bottom: 1px solid #ccc;
		}

		#opening-times table tr input.form-control {
			height: 40px !important;
			padding: .175rem .35rem;
		}

		td > .form-control.opening-times:first-of-type {
			border-right: 0;
		}

		#opening-times table th {
			border-top: 0;
		}

		.form-group {
			margin-bottom: 20px;
		}

		.form-group > label {
			font-size: 1.2em;
		}

		.action {
			border: 1px solid #ccc;
			font-weight: 400;
		}

		.action.add {
			background-color: var(--yellow);
			cursor: pointer;
		}

		.input-error {
			border-color: var(--red) !important;
		}

		.place-url {
			color: var(--red);
		}

		.place-url:hover {
			color: var(--yellow);
		}

		.delete-image {
			color: var(--red);
		}

		input[type=checkbox], input[type=radio] {
			height: inherit !important;
		}

		.ui-timepicker {
			padding: 0;
		}

		.ui-timepicker-container.ui-timepicker-standard {
			padding: 0;
		}

		.ui-timepicker.ui-widget.ui-widget-content.ui-menu.ui-corner-all {
			width: 100%;
		}

		.place-types {
			display: flex; 
			align-items: center; 
			flex-wrap: wrap; 
			margin-bottom: 10px;
		}

		.form-check[data-area=Mainland] > label, .form-check[data-area=Island] > label {
			font-size: 1.2em;
		}
	</style>
{% endblock %}

{% block content %}
	<div class="content">
		<div class="row">
			<div class="col-sm-7">
				<div class="card">
					<div class="card-body">
						<form action="{{ path('profileUpdate', {'id': place.id}) }}" method="POST" enctype="multipart/form-data">
							<div class="form-group">
								<label for="company">Business Name</label>
								<input type="text" class="form-control" id="company" name="name" value="{{ place.name }}">
							</div>
							<div class="form-group">
								<label for="url">Place Page</label>
								<a href="https://cravvings.com/places/{{ place.slug }}" class="place-url" target="_blank">
									https://cravvings.com/places/{{ place.slug }}
								</a>
							</div>
							<div class="form-group">
								<label for="address">Address</label>
								<input type="text" class="form-control" id="address" name="address" value="{{ place.address }}">
								<input type="hidden" id="longitude" name="longitude" value="{{ place.location['coordinates'][0] }}">
								<input type="hidden" id="latitude" name="latitude" value="{{ place.location['coordinates'][1] }}">
							</div>
							<!-- <div class="inline-flex" style="display: flex;">
								<div class="form-group" style="flex: 1">
									<label for="opening">Opening</label>
									<input type="text" class="form-control opening-times" id="opening" name="opening" value="">
								</div>
								<div class="form-group" style="flex: 1">
									<label for="closing">Closing</label>
									<input type="text" class="form-control opening-times" id="closing" name="closing" value="">
								</div>
							</div> -->
							<div class="opening-closing"></div>
							<div id="opening-times">
								<label>Opening Times</label>
								<div class="form-check">
									<input type="checkbox" name="daily" id="daily" {{ place.daily ? 'checked' : '' }}>
									<label for="daily">Enter Daily</label>
								</div>
								<div class="form-group opening-collapse {{ place.daily ? 'hide' : '' }}">
									<div class="inline-input" style="display: flex;">
										<input type="text" class="form-control opening-times" name="opening" value="{{ place.opening }}" placeholder="opening time">
										<input type="text" class="form-control opening-times" name="closing" value="{{ place.closing }}" placeholder="closing time">
									</div>
									
								</div>
								{# <small><em>leave blank if place is closed on the day</em></small> #}
								<table class="table opening-daily {{ place.daily ? '' : 'hide' }}">
									<thead>
										<tr>
											<th></th>
											<th>Opening</th>
											<th>Closing</th>
											<th>Closed?</th>
										</tr>
									</thead>
									<tbody>
										{% for day, time in place.times %}
											<tr>
												<td role="rowheader">{{ day|capitalize }}</td>
												<td><input type="text" class="form-control opening-times" name="{{ day }}[]" value="{{ time[0]}}" placeholder="HH:MM"></td>
												<td><input type="text" class="form-control opening-times" name="{{ day }}[]" value="{{ time[1]}}" placeholder="HH:MM"></td>
												<td><input type="checkbox" class="closed" name="{{day}}closed"></td>
											</tr>
										{% endfor %}
									</tbody>
								</table>
							</div>
							<div class="form-group">
								<label for="telephone">Telephone(s)</label>
								{% if place.phones %}
									{% for number in place.phones %}
										<input type="text" class="form-control phone-input" name="telephone[]" value="{{ number }}">	
									{% endfor %}
								{% else %}
									<input type="text" class="form-control phone-input" name="telephone[]">
								{% endif %}

								{% if place.phones|length < 2 %}
									<button class="action add phone" type="button">Add more</button>
								{% endif %}
							</div>
							{% 
								set types = {
									'restaurant': 'Restaurant',
									'eatery': 'Eatery',
									'fastfood': 'Fast Food',
									'cafe': 'Cafe',
									'mamaput': 'Mama Put', 
									'hotel': 'Hotel',
									'bar': 'Bar',
									'streetfood': 'Street Food',
									'takeout': 'Takeout',
									'online': 'Delivery Only'
								}
							%}
							{%
								set tags = {
									'african': 'African',
									'continental': 'Continental', 
									'chinese': 'Chinese',
									'indian': 'Indian',
									'fast-food': 'FastFood',
									'breakfast': 'Breakfast',
									'seafood': 'Seafood',
									'finedining': 'FineDining',
									'healthy': 'Healthy',
									'grill': 'Grill',
									'parking': 'Parking',
									'seating': 'Seating',
									'outside': 'Outside Seating',
									'rooftop': 'Rooftop',
									'family': 'Family Friendly'
								}	
							%}

							{%
								set areas = ['Akoka','Alausa','Apapa','Ebute Metta','Festac Town','Gbagada','Ikeja','Ilupeju','Isolo','Magodo','Maryland','Okota','Opebi','Oregun','Oshodi','Satellite Town','Surulere','Yaba','Mainland','Agungi','Ajah','Chevron','Ikate','Ikoyi','Lagos Island','Lekki','VGC','Victoria Island','Island','Lagos']	
							%}
							<div class="form-group">
								<label>Type</label>
								<div class="place-types">
									{% for type, name in types %}
										<div class="form-check form-check-inline">
											<input id="{{ type }}" name="type" type="radio" value="{{ type }}" {{ type == place.type ? 'checked' : '' }} style="height: inherit;">
											<label style="padding-left: 10px; margin-bottom: 0;" for="{{ type }}">{{ name }}</label>
										</div>
									{% endfor %}
								</div>
							</div>
							<div class="form-group">
								<label>Features <small>Select all that apply</small></label>
								<div class="place-types">
									{% for tag, name in tags %}
										<div class="form-check form-check-inline">
											<input id="{{ tag }}" name="tags[]" type="checkbox" value="{{ tag }}" {{ tag in place.tags ? 'checked' : '' }} style="height: inherit;">
											<label style="padding-left: 10px; margin-bottom: 0;" for="{{ tag }}">{{ name }}</label>
										</div>
									{% endfor %}
								</div>
							</div>
							<div class="form-group">
								<label for="deliver">Delivery <small>Do you deliver?</small></label>
								<div class="form-check form-check-inline">
									<input type="radio" name="deliver" id="yes-deliver" value="yes" {{ place.deliver ? 'checked' : '' }}>
									<label style="padding-left: 10px; margin-bottom: 0;" for="yes-deliver">Yes</label>
								</div>
								<div class="form-check form-check-inline">
									<input type="radio" name="deliver" id="no-deliver" value="no" {{ place.deliver ? '' : 'checked' }}>
									<label style="padding-left: 10px; margin-bottom: 0;" for="no-deliver">No</label>
								</div>
							</div>

							<div class="form-group hide" id="delivery-areas">
								<label>Delivery Areas <small>Where do you deliver to?</small></label>
								<div class="place-types">
									{% for area in areas %}
										<div class="form-check form-check-inline" data-area="{{ area }}">
											<input id="{{ area }}" name="delivery[]" type="checkbox" value="{{ area }}" {{ area in place.delivery ? 'checked' : '' }} style="height: inherit;">
											<label style="padding-left: 10px; margin-bottom: 0;" for="{{ area }}">{{ area }}</label>
										</div>
									{% endfor %}
								</div>
							</div>
							<div class="form-group">
								<label for="image">Image(s)</label>
								<input type="file" class="form-control image-input" name="image[]">
								{% if place.image|length < 3 %}
									<button class="action add image" type="button">Add more</button>
								{% endif %}
								{% if place.image %}
									<div class="place-images" data-imagecount="{{ place.image|length }}" style="display: flex; flex-wrap: wrap; margin-top: 10px;">
										{% for pic in place.image %}
											<div class="current-image" style="padding: 0 2px 4px; display: flex; flex-direction: column; align-items: center;">
												<img src="{{ pic }}" alt="Company image" style="width: 150px;">
												<a href="#" class="delete-image">delete</a>
											</div>
										{% endfor %}
									</div>
								{% endif %}
							</div>
							<button class="btn btn-primary">Update</button>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAJsPhI-fGmDBIUh9yLu_MiUj4hZ2nlWU8"></script>
	
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  <script src="/js/timepicker.min.js"></script>
  <script>
		try {
			var ne = new google.maps.LatLng(parseFloat(6.944694), parseFloat(5.158188));
			var sw = new google.maps.LatLng(parseFloat(6.371805), parseFloat(2.712062));
			var bounds = new google.maps.LatLngBounds(sw, ne);
		} catch (err) {
			console.log(err.message)
		}

		/**
		 * Address autocomplete powered by google maps 
		 * @param {HTMLElement} input input element to apply autocomplete on
		 */
		function autocomplete(input) {
			try {
				const dropdown = new google.maps.places.Autocomplete(input, { bounds: bounds, 'strictBounds': true })
				
				dropdown.addListener('place_changed', () => {
					const place = dropdown.getPlace();
					console.log({compo: place.address_components[3]});
					if (place.geometry) {
						var longitude = place.geometry.location.lng()
						var latitude = place.geometry.location.lat()
						document.getElementById('longitude').value = longitude
						document.getElementById('latitude').value = latitude
					}else{
						reject("Error Occured")
					}
				})
			} catch (err) {
				console.log(err.message)
			}
		}

		autocomplete(document.getElementById('address'));

		const prevImageCount = document.querySelector('.place-images') ? document.querySelector('.place-images').dataset.imagecount : 0;

		document.querySelectorAll('.delete-image').forEach(imageDeleteButton => {
			imageDeleteButton.addEventListener('click', e => {
				e.preventDefault()
				const imageWrapper = e.target.closest('.current-image');
				const imageUrl = imageWrapper.querySelector('img').src
				fetch('/admin/place/image/delete', {
					method: 'POST', 
					body: JSON.stringify({url: imageUrl}), 
					headers: {'X-Requested-With': 'XMLHttpRequest'}
				}).then(response => response.json())
				.then(place => {
					imageWrapper.style.display = 'none';
				});
			});
		});

		document.querySelectorAll('.closed').forEach(closedCheckbox => {
			closedCheckbox.addEventListener('change', e => {
				const target = e.target;
				const dayRow = target.closest('tr');
				dayRow.querySelectorAll('input.form-control').forEach(input => {
					if (target.checked){
						input.setAttribute("disabled", "disabled");
					}else {
						input.removeAttribute("disabled");
					}
				});
			});
		});

		document.getElementById('daily').addEventListener('change', function(e){
			if(e.target.checked) {
				document.querySelector('.opening-daily').classList.remove('hide')
				document.querySelector('.opening-collapse').classList.add('hide')
			}else {
				document.querySelector('.opening-daily').classList.add('hide')
				document.querySelector('.opening-collapse').classList.remove('hide')
			}
		});

		document.getElementById('Mainland').addEventListener('change', function(e) {
			if (e.target.checked) {
				let tg = e.target.closest('.form-check');
				while (tg.previousElementSibling) {
					let prev = tg.previousElementSibling;
					prev.querySelector('input[type="checkbox"]').checked = true;
					tg = prev;
				}
			}
		})

		document.getElementById('Lagos').addEventListener('change', function(e) {
			if (e.target.checked) {
				let tg = e.target.closest('.form-check');
				while (tg.previousElementSibling) {
					let prev = tg.previousElementSibling;
					prev.querySelector('input[type="checkbox"]').checked = true;
					tg = prev;
				}
			}
		})

		document.getElementById('Island').addEventListener('change', function(e) {
			if (e.target.checked) {
				let tg = e.target.closest('.form-check');
				let area = tg.dataset.area;
				while (tg.previousElementSibling && tg.previousElementSibling.dataset.area !== 'Mainland') {
					let prev = tg.previousElementSibling;
					prev.querySelector('input[type="checkbox"]').checked = true;
					tg = prev;
					area = prev.dataset.area;
				}
			}
		})

		// $('#opening-times').on($.modal.BEFORE_CLOSE, function(e){
		// 	document.querySelector('.opening-closing').textContent = '';
		// 	const openclose = [document.getElementById('opening').value, document.getElementById('closing').value];
		// 	e.currentTarget.querySelectorAll('tbody tr').forEach((dayRow, index) => {
		// 		const closed = dayRow.querySelector('.closed').checked;
		// 		const inps = dayRow.querySelectorAll('input.form-control');
				
		// 		inps.forEach((inp, index) => {
		// 			const newInp = document.createElement('input');
		// 			newInp.setAttribute('type', 'hidden');
		// 			newInp.setAttribute('name', inp.getAttribute('name'));
		// 			if(closed){
		// 				newInp.value = "";
		// 			}else if((!closed && !inp.value) || inp.classList.contains('input-error')) {
		// 				newInp.value = openclose[index];
		// 			}else {
		// 				newInp.value = inp.value
		// 			}
					
		// 			document.querySelector('.opening-closing').appendChild(newInp);
		// 		});
		// 	});
		// });

		function addExtra(container, newNode) {
			const allInputs = container.querySelectorAll('input');
			const lastInput = allInputs[allInputs.length-1];
			container.insertBefore(newNode, lastInput.nextSibling)
		}

		const addPhone = document.querySelector('.add.phone');
		const addImage = document.querySelector('.add.image');

		addPhone && addPhone.addEventListener('click', e => {
			const phones = document.querySelectorAll('.phone-input');
			const newPhoneInput = document.createElement('input')
			newPhoneInput.setAttribute('name', 'telephone[]')
			newPhoneInput.classList.add('form-control', 'phone-input')
			if(phones.length < 2) {
				addExtra(e.target.closest('.form-group'), newPhoneInput)
			}else {
				addPhone.classList.add('hide');
			}
		});

		addImage.addEventListener('click', e => {
			const images = document.querySelectorAll('.image-input');
			const newImageInput = document.createElement('input')
			newImageInput.setAttribute('name', 'image[]')
			newImageInput.setAttribute('type', 'file')
			newImageInput.classList.add('form-control', 'image-input')
			if(images.length < (3-parseInt(prevImageCount))) {
				addExtra(e.target.closest('.form-group'), newImageInput)
			}else {
				addImage.classList.add('hide');
			}
		});

		if(document.getElementById('yes-deliver').checked) showDeliveryAreas()

		document.getElementById('yes-deliver').addEventListener('change', showDeliveryAreas)
		document.getElementById('no-deliver').addEventListener('change', function() {
			document.getElementById('delivery-areas').classList.add('hide');
		});

		document.getElementById('online').addEventListener('change', showDeliveryAreas)

		function showDeliveryAreas() {
			document.getElementById('yes-deliver').checked = true;
			document.getElementById('delivery-areas').classList.remove('hide');
		}

		document.querySelectorAll('.opening-times').forEach(timeInput => {
			timeInput.addEventListener('blur', function(e){
				console.log('blurred')
				const t = e.target;
				const inputVal = t.value;
				const timePattern = new RegExp('^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$');
				// let timePattern = /^(0?[1-9]|1[0-2]):([0-5]\d)\s?((?:A|P)\.?M\.?)$/i;
				if(inputVal && !timePattern.test(inputVal)){
					t.classList.add('input-error');
				}else {
					t.classList.remove('input-error');
				}
			});
		});

		$('.opening-times').timepicker({
			timeFormat: 'HH:mm',
			interval: 30,
			// defaultTime: '11',
			// startTime: '10:00',
			dynamic: false,
			dropdown: true,
			scrollbar: true
		});
	</script>
{% endblock javascripts %}