{% extends 'partials/_master.twig' %}

{% block main %}

	<script src="https://www.google.com/recaptcha/api.js"></script>
	<section class="bg-orange" data-bg="bg-orange">
		<div class="container">
			{{ include('partials/_back.twig') }}
			<h1 class="text-center"><!--Zgłoś przedszkole do Akcji Tron-->Zgłoś przedszkole, które powinno wziąć udział w&nbsp;Konkursie na wymarzoną łazienkę</h1>
			<div class="inner-small">
				<ul class="nav nav-tabs mb-5" id="preschoolFormTab" role="tablist">
					<li class="nav-item" role="presentation">
						<div class="nav-link" id="preschoolForm-tab1-tab" data-bs-toggle="tab" data-bs-target="#preschoolForm-tab1" role="tab" aria-controls="preschoolForm-tab1" aria-selected="true">Pracownik przedszkola</div>
					</li>
                  	<li class="nav-item" role="presentation">
						<div class="nav-link" id="preschoolForm-tab2-tab" data-bs-toggle="tab" data-bs-target="#preschoolForm-tab2" role="tab" aria-controls="preschoolForm-tab2" aria-selected="false">Rodzic/opiekun dziecka</div>
					</li>                  
               	</ul>
               	<div class="tab-content" id="preschoolFormTabContent">
                    <div class="tab-pane" id="preschoolForm-tab1" role="tabpanel" aria-labelledby="preschoolForm-tab1-tab">
                        <div class="bg-white p-3 mt-3 mb-5">
                        	Pracujesz w przedszkolu, które chce dołączyć do Akcji Tron.
                        </div>

                        <form action="/przedszkola/rejestracja" method="post" id="registrationForm">
							<div class="row justify-content-between">
								<div class="col-12">
									<h4 class="mb-2"><big>Informacje o przedszkolu</big></h4>
								</div>

								<div class="form-group col-12">
									<label for="form-name">Nazwa przedszkola<span class="text-red">*</span></label>
									<input placeholder="Podaj pełną nazwę przedszkola" class="form-control" type="text" name="name" id="form-name" required autocomplete="off"/>
								</div>
								<div class="form-group col-12">
									<label for="form-address">Adres (Ulica, nr budynku i lokalu)<span class="text-red">*</span></label>
									<input placeholder="Podaj adres przedszkola" class="form-control" type="text" name="address" id="form-address" required autocomplete="off"/>
								</div>
								<div class="col-12 col-lg-4">
									<div class="form-group">
										<label for="form-zipcode">Kod pocztowy<span class="text-red">*</span></label>
										<input placeholder="Podaj kod" class="form-control" type="text" name="zipcode" id="form-zipcode" required autocomplete="postal-code"/>
									</div>
								</div>
								<div class="col-12 col-lg-8">
									<div class="form-group">
										<label for="form-city">Miasto<span class="text-red">*</span></label>
										<input placeholder="Podaj miasto" class="form-control" type="text" name="city" id="form-city" required autocomplete="off"/>
									</div>
								</div>
									
								<div class="form-group col-12">
									<label for="form-region">Województwo<span class="text-red">*</span></label>
									<div class="custom-select">
										<select name="region" id="form-region" required>
											<option value="">Podaj województwo, w którym znajduje się przedszkole</option>
											<option value="dolnośląskie">dolnośląskie</option>
											<option value="kujawsko-pomorskie">kujawsko-pomorskie</option>
											<option value="lubelskie">lubelskie</option>
											<option value="lubuskie">lubuskie</option>
											<option value="łódzkie">łódzkie</option>
											<option value="małopolskie">małopolskie</option>
											<option value="mazowieckie">mazowieckie</option>
											<option value="opolskie">opolskie</option>
											<option value="podkarpackie">podkarpackie</option>
											<option value="podlaskie">podlaskie</option>
											<option value="pomorskie">pomorskie</option>
											<option value="śląskie">śląskie</option>
											<option value="świętokrzyskie">świętokrzyskie</option>
											<option value="warmińsko-mazurskie">warmińsko-mazurskie</option>
											<option value="wielkopolskie">wielkopolskie</option>
											<option value="zachodniopomorskie">zachodniopomorskie</option>
										</select>
									</div>
								</div>
								<div class="col-12">
									<div class="my-4">Opowiedz więcej o swoim przedszkolu. Jeśli Twoje przedszkole będzie wśród pierwszych 300 zgłoszonych placówek, tych informacji będziemy potrzebować, żeby przesłać Ci odpowiednią liczbę wydrukowanych materiałów.</div>
								
									<div class="d-flex align-items-center justify-content-between">
										<label for="form-children34" class="me-2">Liczba dzieci w przedszkolu w wieku 3-4 lata<span class="text-red">*</span></label>
										<div>
											<div class="form-group py-2" style="width: 80px;">
												<input class="form-control" placeholder="" type="text" name="children34" id="form-children34" required autocomplete="off"/>
											</div>
										</div>
									</div>
									<div class="d-flex align-items-center justify-content-between">
										<label for="form-children56" class="me-2">Liczba dzieci w przedszkolu w wieku 5-6 lat<span class="text-red">*</span></label>
										<div>
											<div class="form-group py-2" style="width: 80px;">
												<input class="form-control" placeholder="" type="text" name="children56" id="form-children56" required autocomplete="off"/>
											</div>
										</div>
									</div>
									<div class="d-flex align-items-center justify-content-between">
										<label for="form-group_no" class="me-2">Liczba grup w przedszkolu<span class="text-red">*</span></label>
										<div>
											<div class="form-group py-2" style="width: 80px;">
												<input class="form-control" placeholder="" type="text" name="group_no" id="form-group_no" required autocomplete="off"/>
											</div>
										</div>
									</div>
									{# <div class="d-flex align-items-center justify-content-between">
										<label for="form-wc_no" class="me-2">Liczba łazienek dla dzieci w przedszkolu<span class="text-red">*</span></label>
										<div>
											<div class="form-group py-2" style="width: 80px;">
												<input class="form-control" placeholder="" type="text" name="wc_no" id="form-wc_no" required autocomplete="off"/>
											</div>
										</div>
									</div> #}
								</div>		
								<div class="col-12">
									<h4 class="mt-4 mb-2"><big>Informacje o Tobie</big></h4>
									<div class="mb-4">Podaj swoje dane, by organizatorzy Akcji Tron mogli wysyłać Ci materiały edukacyjne oraz informacje na temat Konkursu. Podaj adres e-mail, którego używasz.</div>
								</div>
								<div class="form-group col-12 col-md-6">
									<label for="form-firstname">Imię<span class="text-red">*</span></label>
									<input placeholder="Podaj imię" class="form-control" type="text" name="firstname" id="form-firstname" required autocomplete="given-name" {% if app.session.get('userFormData') and app.session.get('userFormData').firstname is defined %}value="{{ app.session.get('userFormData').firstname}}"{% endif %} />
								</div>
								<div class="form-group col-12 col-md-6">
									<label for="form-surname">Nazwisko<span class="text-red">*</span></label>
									<input placeholder="Podaj nazwisko" class="form-control" type="text" name="surname" id="form-surname" required autocomplete="family-name" {% if app.session.get('userFormData') and app.session.get('userFormData').surname is defined %}value="{{ app.session.get('userFormData').surname}}"{% endif %}/>
								</div>	
								<div class="form-group col-12 col-md-6">
									<label for="form-email">E-mail<span class="text-red">*</span></label>
									<input class="form-control" {% if app.session.get('userFormData') and app.session.get('userFormData').email  is defined %}value="{{ app.session.get('userFormData').email}}" {% else %}{% if app.user.email is defined and app.user.email %}value="{{ app.user.email }}" {% endif %}{% endif %} placeholder="Podaj e-mail" type="email" name="email" id="form-email" required autocomplete="email"/>
									<div id="checkEmailError" class="d-none text-red text-end" style="font-size:12px">Na ten e-mail zgłoszono już szkołę</div>
								</div>
								<div class="form-group col-12 col-md-6">
									<label for="form-phone">Telefon</label>
									<input class="form-control input-phone" placeholder="Podaj numer telefonu" type="text" name="phone" id="form-phone" autocomplete="tel" {% if app.session.get('userFormData') and app.session.get('userFormData').phone is defined %}value="{{ app.session.get('userFormData').phone}}"{% endif %} />
								</div>
								<div class="form-group col-12">
									<label for="form-position">Stanowisko<span class="text-red">*</span></label>
									<div class="custom-select">
										<select name="position" id="form-position" required>
											<option value="">Podaj swoje stanowisko w przedszkolu</option>
											<option value="nauczyciel" {% if app.session.get('userFormData') and app.session.get('userFormData').position == 'nauczyciel' %}selected{% endif %}>nauczyciel</option>
											<option value="dyrektor" {% if app.session.get('userFormData') and app.session.get('userFormData').position == 'dyrektor' %}selected{% endif %}>dyrektor</option>
											<option value="inny" {% if app.session.get('userFormData') and app.session.get('userFormData').position == 'inny' %}selected{% endif %}>inny pracownik</option>
										</select>
									</div>
								</div>
								<div class="col-12">				
									<h4 class="mt-4 mb-2"><big>Obowiązkowe zgody</big></h4>
									<p class="mb-5">Musisz zakceptować poniższe zgody, żeby wziąć udział w akcji</p>
								
									<div class="form-group custom-checkbox">
								        <label for="terms1">
								          Oświadczam, że znam i akceptuję postanowienia <a href="/przedszkola/regulamin" target="_blank" style="text-decoration:underline;">regulaminu</a> i <a href="/polityka-prywatnosci" target="_blank" style="text-decoration:underline;">polityki prywatności</a>.<span class="text-red">*</span> 
								          <input type="checkbox" name="terms1" id="terms1" class="form-control-checkbox-custom" required/>
								          <span class="c"></span>
								        </label>
								    </div>
								    <div class="form-group custom-checkbox">
								        <label for="terms2">
								         Wyrażam zgodę na otrzymywanie informacji handlowo-marketingowych dotyczących przyszłych kampanii realizowanych przez organizatora tj. spółkę WCTRON sp. z o.o. z siedzibą we Wrocławiu za pośrednictwem podanego adresu mailowego.
								          <input type="checkbox" name="terms2" id="terms2" class="form-control-checkbox-custom" />
								          <span class="c"></span>
								        </label>
								    </div>
								    <div class="form-group custom-checkbox">
								        <label for="terms3">
								         Wyrażam zgodę na otrzymywanie informacji handlowo-marketingowych dotyczących przyszłych kampanii realizowanych przez organizatora tj. spółkę WCTRON sp. z o.o. z siedzibą we Wrocławiu za pośrednictwem podanego numeru telefonu.
								          <input type="checkbox" name="terms3" id="terms3" class="form-control-checkbox-custom" />
								          <span class="c"></span>
								        </label>
								    </div>
								    <div class="position-relative" style="width:300px; margin:0 auto 20px">
									    <div class="g-recaptcha" data-sitekey="6LfPiggpAAAAAB2ofXhhZbkPprO1cujGoHq_td0Y" ></div>
									    <label for="form-hiderecaptcha" class="d-none">Captcha</label>
									    <input type="text" name="hiderecaptcha" id="form-hiderecaptcha" style="opacity:0;padding:0; line-height:0; border:0;font-size:0;height: 0;">
									</div>
								    <div class="d-flex justify-content-center">
								    	<button type="submit" id="formSubmit" aria-label="Dołącz bezpłatnie do Akcji Tron"><span>Dołącz bezpłatnie do Akcji Tron</span></button>
								    </div>
								</div>
							</div>
						</form>
                    </div>
                    <div class="tab-pane fade" id="preschoolForm-tab2" role="tabpanel" aria-labelledby="preschoolForm-tab2-tab">
                        <div class="bg-white p-3 mt-3 mb-5">
                        	Jesteś rodzicem lub opiekunem prawnym dziecka, które chodzi do przedszkola? Chcesz, żeby jego przedszkole wzięło udział w Akcji Tron i miało szansę na remont łazienki? Zgłoś jego placówkę, a zostaną do niej wysłane informacje o dołączeniu do kampanii. Dostaniesz dostęp do bezpłatnych materiałów edukacyjnych na temat higieny i praw dziecka.
                        </div>
                        <form action="/rejestracja-rodzic" method="post" id="registrationParentForm">
                        	<input type="hidden" name="category" value="przedszkola" />
							<div class="row justify-content-between">
								<div class="col-12">
									<h4 class="mb-2"><big>Informacje o przedszkolu</big></h4>
									<div class="mb-4">Podaj dane przedszkola, a organizatorzy Akcji Tron wyślą do placówki wszystkie informacje o tym, jak wziąć udział w w kampanii.</div>
								</div>

								<div class="form-group col-12">
									<label for="parent_form-name">Nazwa przedszkola<span class="text-red">*</span></label>
									<input placeholder="Podaj pełną nazwę przedszkola" class="form-control" type="text" name="name" id="parent_form-preschool-name" required autocomplete="off"/>
								</div>
								<div class="form-group col-12">
									<label for="parent_form-address">Adres email przedszkola lub nauczyciela, który uczy Twoje dziecko<span class="text-red">*</span></label>
									<input placeholder="Podaj adres email" class="form-control" type="text" name="email" id="parent_form-preschool-email" required autocomplete="off"/>
								</div>												
								<div class="col-12">
									<h4 class="mt-4 mb-2"><big>Informacje o Tobie</big></h4>
									<div class="mb-4">Podaj swoje dane. Dostaniesz dostęp do materiałów informacyjnych. Organizatorzy Akcji będą także wysyłać Ci informacje na temat Konkursu, w którym można wygrać remont przedszkolnej łazienki marzeń.</div>
								</div>
							
								<div class="form-group col-12 col-md-6">
									<label for="parent_form-firstname">Imię i nazwisko<span class="text-red">*</span></label>
									<input placeholder="Podaj imię i nazwisko" class="form-control" type="text" name="parent_name" id="parent_form-name" required autocomplete="name" {% if app.session.get('parentFormData') and app.session.get('parentFormData').name is defined %}value="{{ app.session.get('parentFormData').name}}"{% endif %}/>
								</div>
								<div class="form-group col-12 col-md-6">
									<label for="parent_form-email">E-mail<span class="text-red">*</span></label>
									<input class="form-control" placeholder="Podaj e-mail" type="email" name="parent_email" id="parent_form-email" required autocomplete="email"  {% if app.session.get('parentFormData') and app.session.get('parentFormData').parentEmail is defined %}value="{{ app.session.get('parentFormData').parentEmail}}"{% endif %}/>
								</div>
								<div class="col-12">				
									<h4 class="mt-4 mb-2"><big>Zgody obowiązkowe</big></h4>
									<p class="mb-5">Musisz zakceptować poniższe zgody, żeby wziąć udział w akcji</p>
								
									<div class="form-group custom-checkbox">
								        <label for="parent_terms1">
								          Oświadczam, że znam i akceptuję postanowienia <a href="/przedszkola/regulamin" target="_blank" style="text-decoration:underline;">regulaminu</a> i <a href="/polityka-prywatnosci" target="_blank" style="text-decoration:underline;">polityki prywatności</a>.<span class="text-red">*</span> 
								          <input type="checkbox" name="terms1" id="parent_terms1" class="form-control-checkbox-custom" required/>
								          <span class="c"></span>
								        </label>
								    </div>
								    <div class="form-group custom-checkbox">
								        <label for="parent_terms2">
								         Wyrażam zgodę na otrzymywanie informacji handlowo-marketingowych dotyczących przyszłych kampanii realizowanych przez organizatora tj. spółkę WCTRON sp. z o.o. z siedzibą we Wrocławiu za pośrednictwem podanego adresu mailowego.
								          <input type="checkbox" name="terms2" id="parent_terms2" class="form-control-checkbox-custom" />
								          <span class="c"></span>
								        </label>
								    </div>
								    <div class="form-group custom-checkbox">
								        <label for="parent_terms3">
								         Wyrażam zgodę na otrzymywanie informacji handlowo-marketingowych dotyczących przyszłych kampanii realizowanych przez organizatora tj. spółkę WCTRON sp. z o.o. z siedzibą we Wrocławiu za pośrednictwem podanego numeru telefonu.
								          <input type="checkbox" name="terms3" id="parent_terms3" class="form-control-checkbox-custom" />
								          <span class="c"></span>
								        </label>
								    </div>
								    <div class="position-relative" style="width:300px; margin:0 auto 20px">
									    <div class="g-recaptcha" data-sitekey="6LfPiggpAAAAAB2ofXhhZbkPprO1cujGoHq_td0Y" ></div>
									    <label for="parent_form-hiderecaptcha" class="d-none">Captcha</label>
									    <input type="text" name="parent_hiderecaptcha" id="parent_form-hiderecaptcha" style="opacity:0;padding:0; line-height:0; border:0;font-size:0;height: 0;">
									</div>
								    <div class="d-flex justify-content-center">
								    	<button type="submit" id="parentFormSubmit" aria-label="Wyślij informacje do przedszkola"><span>Wyślij informacje do przedszkola</span></button>
								    </div>
								</div>
							</div>
						</form>
                    </div>
               </div>
			</div>
		</div>
	</section>

	<script type="text/javascript">
		document.addEventListener('DOMContentLoaded', function() {
			if(location.hash=='#rodzic')
				document.getElementById('preschoolForm-tab2-tab').click();
			else
				document.getElementById('preschoolForm-tab1-tab').click();

			// sprawdzenie sesji czy email nie wysłał już zgłoszenia na drugą kategorie
			{% if app.session.get('userFormData') and app.session.get('userFormData').email  is defined %}
				checkEmail("{{ app.session.get('userFormData').email}}");
			{% else %}
				{% if app.user.email is defined and app.user.email %}
					checkEmail("{{ app.user.email }}");
				{% endif %}
			{% endif %}

			
		});

		const emailInp = document.getElementById('form-email');
		const sendBtn = document.getElementById('formSubmit');
		const checkEmailError =  document.getElementById('checkEmailError');

		emailInp.addEventListener('input', ()=>{
			if(emailInp.value.length>3)
				checkEmail(emailInp.value.trim());
		})

		function checkEmail(emailValue){
			const isValidEmail = (email) => {
		        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
		        return emailRegex.test(email);
		    };

		    if (isValidEmail(emailValue)) {
				const XHR = new XMLHttpRequest();
	            const formData = new FormData();
			    formData.append('email', emailInp.value);
			    formData.append('category', 'przedszkola');
	            XHR.open("POST", "/post/check-email");
	            XHR.responseType = 'text';
	            XHR.onreadystatechange = () => {
	              	if (XHR.readyState === XMLHttpRequest.DONE && XHR.status === 200) {
	               		let response = JSON.parse(XHR.response);
	                  	if(response['status']=='err'){
	                    	sendBtn.disabled = true;
	                    	checkEmailError.classList.remove('d-none');
	                    	emailInp.classList.add('error');
	                  	}
	                	else{
	                  		sendBtn.disabled = false;
	                    	checkEmailError.classList.add('d-none');
	                    	emailInp.classList.remove('error');
	                    }
	               	}
	            }

	            XHR.send(formData);
	        }
		}
	</script>

{% endblock main %}