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

{% block main %}

	<script src="https://www.google.com/recaptcha/api.js"></script>
	<section class="bg-green" data-bg="bg-green">
		<div class="container">
			{{ include('partials/_back.twig') }}
			<h1 class="text-center">Zgłoś szkołę do Akcji Tron</h1>
			<div class="inner-small">
				<ul class="nav nav-tabs mb-5" id="schoolFormTab" role="tablist">
					<li class="nav-item" role="presentation">
						<div class="nav-link" id="schoolForm-tab1-tab" data-bs-toggle="tab" data-bs-target="#schoolForm-tab1" role="tab" aria-controls="schoolForm-tab1" aria-selected="true">Nauczyciel/pracownik szkoły</div>
					</li>
                  	<li class="nav-item" role="presentation">
						<div class="nav-link" id="schoolForm-tab2-tab" data-bs-toggle="tab" data-bs-target="#schoolForm-tab2" role="tab" aria-controls="schoolForm-tab2" aria-selected="false">Rodzic dziecka</div>
					</li>                  
               	</ul>
               	<div class="tab-content" id="schoolFormTabContent">
                    <div class="tab-pane" id="schoolForm-tab1" role="tabpanel" aria-labelledby="schoolForm-tab1-tab">
                        <div class="bg-white p-3 mt-3 mb-5">
                        	Jesteś pracownikiem szkoły, która chce dołączyć do Akcji Tron? Wypełnij poniższy formularz.
                        </div>

                        <form action="/szkoly/rejestracja" method="post" id="registrationForm">
							<div class="row justify-content-between">
								<div class="col-12">
									<h4 class="mb-2"><big>Informacje o szkole i klasach</big></h4>
									<p>Podaj dane szkoły, którą chcesz zgłosić do Akcji Tron.</p>
								</div>

								<div class="form-group col-12">
									<label for="form-name">Nazwa szkoły<span class="text-red">*</span></label>
									<input placeholder="Podaj pełną nazwę szkoły" 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 szkoły" 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ę szkoła</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">Podaj informacje o klasie, którą chcesz zgłosić do Akcji Tron</div>
									{% for i in 1..10 %}
										<div {% if i!=1 %}class="group d-none"{% endif %}>
											<div class="d-flex align-items-center justify-content-between">
												<label for="form-group_name{{i}}" class="me-2">Zgłaszam klasę  (np. 7b)  <span class="text-red">*</span></label>
												<div>
													<div class="form-group py-2" style="width: 120px;">
														<input class="form-control school-group-name" placeholder="" type="text" name="group_name[{{i}}]" id="form-group_name{{i}}" autocomplete="off"/>
													</div>
												</div>
											</div>
											<div class="d-flex align-items-center justify-content-between">
												<label for="form-children_no{{i}}" class="me-2">Liczba uczniów w klasie (np. 27)<span class="text-red">*</span></label>
												<div>
													<div class="form-group py-2" style="width: 120px;">
														<input class="form-control" placeholder="" type="text" name="children_no[{{i}}]" id="form-children_no{{i}}"  autocomplete="off"/>
													</div>
												</div>
											</div>
										</div>
									{% endfor %}
									<div class="mt-5" id="addGroupWrapper">
										Kliknij, jeśli chcesz zgłosić więcej niż jedną klasę
										<div class="d-flex justify-content-center m-3"><div class="btn transparent" id="addGroup">Dodaj klasę</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 nam swoje dane. Podaj email i numer telefonu, których używasz - będziemy wysyłać Ci na nie najważniejsze informacje o konkursie, a także przypomnienia o ważnych momentach Akcji Tron.</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ż przeszkole</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 zgłaszającego<span class="text-red">*</span></label>
									<div class="custom-select">
										<select name="position" id="form-position" required>
											<option value="">Podaj swoje stanowisko w szkole</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>
										</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="/szkoly/regulamin-szkoly" 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 do Akcji Tron</span></button>
								    </div>
								    <div id="schoolInfo" class="text-center mt-5 d-none text-red">Można zgłosić tylko 6,7,8 klasy</div>
								</div>
							</div>
						</form>
                    </div>
                    <div class="tab-pane fade" id="schoolForm-tab2" role="tabpanel" aria-labelledby="schoolForm-tab2-tab">
                        <div class="bg-white p-3 mt-3 mb-5">
                        	Jesteś rodzicem lub opiekunem prawnym dziecka, które chodzi do szkoły? Chcesz, żeby jego szkoła wzięło udział w Akcji Tron i miała szansę na remont łazienki? Zgłoś jego placówkę, a my wyślemy do niej wszystkie informacje o dołączeniu do naszej kampanii. Mamy też dla Ciebie prezent! Od razu po zgłoszeniu 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="szkoly" />
							<div class="row justify-content-between">
								<div class="col-12">
									<h4 class="mb-2"><big>Informacje o szkole</big></h4>
									<div class="mb-4">Podaj dane szkoły, a my wyślemy mu wszystkie informacje o tym, jak wziąć udział w Akcji Tron.</div>
								</div>

								<div class="form-group col-12">
									<label for="parent_form-name">Nazwa szkoły<span class="text-red">*</span></label>
									<input placeholder="Podaj pełną nazwę szkoły" 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 szkoły 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 nam swoje dane. Dostaniesz dostęp do materiałów informacyjnych. Wyślemy Ci też informacje na temat konkursu na wymarzoną łazienkę.</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="/szkoly/regulamin-szkoly" 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 szkoły</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('schoolForm-tab2-tab').click();
			else
				document.getElementById('schoolForm-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 addGroupBtn = document.getElementById('addGroup');
		const addGroupWrapper = document.getElementById('addGroupWrapper');
		const groups = document.querySelectorAll('.group');
		let currentGroup = 1;

		addGroupBtn.addEventListener('click', ()=>{
			if(groups[currentGroup]){
				groups[currentGroup].classList.remove('d-none');
				currentGroup++;
			}
			else
				addGroupWrapper.classList.add('d-none')
		});


		const emailInp = document.getElementById('form-email');
		const groupNameInps = document.querySelectorAll('.school-group-name');
		const sendBtn = document.getElementById('formSubmit');
		const checkEmailError =  document.getElementById('checkEmailError'); 

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

		// groupNameInps.forEach( (inp)=>{
		// 	inp.addEventListener('input', ()=>{
		// 		if(inp.value.length>1){
		// 			const inpVal = inp.value.trim();
		// 			if( inpVal !='' && !inpVal.includes('6') && !inpVal.includes('7') && !inpVal.includes('8')){
		// 				inp.classList.add('error');
		// 			}
		// 			else
		// 				inp.classList.remove('error');
		// 		}
		// 	})
		// })

		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', 'szkoly');
	            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 %}