{% extends 'layouts/base.html.twig' %}

{% block title 'Contact' %}

{% block body %}
	<div class="row">
		<div class="col-6 mx-auto">
			<h1 class="display-4 my-5">Are you facing any
				<span class="text-danger">issues</span>
				😔?</h1>

			{{ form_start(form) }}
			{% if form.vars.errors is not empty %}
				<div class="mb-3 text-center">
					{{ form_errors(form) }}
				</div>
			{% endif %}

			{{ form_row(form.country) }}
			{{ form_row(form.city) }}
			{{ form_row(form.message) }}

			<button type="submit" class="btn btn-primary w-100" formnovalidate>Send</button>
			{{ form_end(form) }}
		</div>
	</div>
{% endblock %}

{% block javascripts %}
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			const countrySelectEl = document.getElementById('ticket_form_country');
			countrySelectEl.addEventListener('change', function (e) {
				const formEl = countrySelectEl.closest('form');

				fetch(formEl.action, {
					method: formEl.method,
					body: new FormData(formEl)
				}).then(response => response.text()).then(html => {
					const parser = new DOMParser();
					const doc = parser.parseFromString(html, 'text/html');
					const newCityFormFieldEl = doc.getElementById('ticket_form_city');

					newCityFormFieldEl.addEventListener('change', function (e) {
						e.target.classList.remove('is-invalid');
					});
					document.getElementById('ticket_form_city').replaceWith(newCityFormFieldEl);
					console.log(newCityFormFieldEl);
				}).catch(function (err) {
					console.warn('Something went wrong.', err);
				});
			});
		});
	</script>
{% endblock %}