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

{% block main %}

	{% set leadsMapped = [] %}
	{% set leadsImgMapped = [] %}
	{% set existH1 = true %}
	{% set boxColors = [ 'violet', 'light-blue', 'light-green',  'light-pink'] %}


	{% if categoryName == 'przedszkola' %}
		{% set counterText = "przedszkoli" %}
		{% set header = "Prace zgłoszone przez przedszkola" %}
		{% set counterBg = "violet" %}
	{% else %}
		{% set counterText = "szkół" %}
		{% set header = "Relacje z gry terenowej" %}
		{% set counterBg = "orange" %}
	{% endif %}


	{# <section class="map first-section">
		<div id="map" style="width:100%; height:800px;"></div>
	</section> #}

	<section class="bg-dark-blue-top first-section" style="padding-top:160px;">
		<div class="inner bg-dark-blue py-0 pt-5">
			<div class="container py-5">


				<div id="counter-section" class="btn {{ counterBg }} mb-5">
					<div class="">
						<div class="text-center w-100">
							{% if categoryName == 'przedszkola' %}
								<div class="mb-4"><big>W Akcji Tron bierze udział  <strong>{{ leads|length }}</strong> {{ counterText }}</big></div>
								<div class="mb-3">Do konkursu zgłosiło się <strong>{{ leadsImgNo }}</strong> przedszkoli </div>
							{% else %}
								<div class="mb-4"><big>W Akcji Tron bierze udział  {{ leads|length }} {{ counterText }}</big></div>
								<div class="mb-3">Do gry terenowej zgłosiło się <strong>{{ leadsImgNo }}</strong> szkół </div>
							{% endif %}
						</div>
					</div>
				</div>
				<form id="filter-map">
					<div class="row pb-5">
						<div class="col-12 col-md-4">
							<div class="form-group">
								<label for="region-input" class="d-none">Województwo*</label>
								<div class="custom-select">
									<select name="region" id="region-input">
										<option value="">województwo</option>
										<option value="all">województwo</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>
						<div class="col-12 col-md-4">
							<div class="form-group">
								<label for="city-input" class="d-none">Miasto*</label>
								<div class="custom-select">
									<select name="city" id="city-input">
										<option value="">miasto</option>
										<option value="all">miasto</option>
										{% if uniqueCities is defined and uniqueCities is not empty %}
											{% for item in uniqueCities %}
												<option value="{{ item.city }}">{{ item.city }}</option>
											{% endfor %}
										{% endif %}
									</select>
								</div>
							</div>
						</div>
						<div class="col-12 col-md-4">
							<div class="form-group">
								<label for="name-input" class="d-none">Nazwa</label>
								<input placeholder="Nazwa" class="form-control" type="text" name="name" id="name-input" autocomplete="off"/>
							</div>
						</div>

						<div class="d-flex mt-5 justify-content-center">
							<div class="btn" onclick="filterList();"><span>Pokaż</span></div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</section>

	<section class="bg-green-top">	
		<div class="inner bg-green pt-5">
			<div class="container py-5">
				{% if leadsImgNo!=0 %}<h2>{{ header }}</h2>{% endif %}
				<div class="mt-5 row pb-5 row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xxl-5" id="leads-list">

					{% if categoryName == 'przedszkola' %}
						{% if leads is not empty %}
							{% set lastEnabled = false %}
							{% set showedHeader = false %}
							{% for key,lead in leads %}
								{% set randomIndex = random(0, boxColors|length - 1) %}
								{% set randomColor = boxColors[randomIndex] %}

								{% if lastEnabled == true and lead.enabled !=true or leadsImgNo==0 and showedHeader!= true %}
									<div class="col w-100"><h2>Przedszkola biorące udział w akcji</h2></div>
									{% set showedHeader = true %}
								{% endif %}

								<div class="col mb-5" data-region="{{ lead.region }}" data-city="{{ lead.city }}" data-name="{{ lead.name }}">
									<div class="bg-modal-blue h-100 p-3 my-3 with-bg">
										<div class="">
											<p class="mb-4">
												<strong>{{ lead.name }}</strong>
											</p>
											
											{{ lead.address }}<br />
											{{ lead.zipcode }}, {{ lead.city }}
											{%  if lead.enabled == true %}
												<div class="image-col mx-auto my-3 d-block" style="width:170px; height:130px;"><img src="{{ asset('files/preschool/'~lead.image1) }}" class="preview" /></div>

												<button class="btn mt-5" data-bs-toggle="modal" data-bs-target="#preschoolModal" data-preschoolid={{ lead.id }} data-preschool={{ key }}><span>Zobacz pracę</span></button>
												{% if lead.fbLink is not empty %}
													<a href="{{ lead.fbLink }}" target="_blank" class="btn red mt-4"><span>Głosuj</span></a>
												{% endif %}

												{% set lastEnabled = true %}
											{% else %}
												{% set lastEnabled = false %}
											{% endif %}
										</div>
									</div>
								</div>

								
								{% set tmp = {
							        'name': lead.name,
							        'address': lead.address ~', '~lead.city,
							        'desc': lead.description,
							        'fb': lead.fbLink,
							        'img1': lead.image1,
							        'img2': lead.image2,
							        'img3': lead.image3,
							        'img4': lead.image4,
							        'img5': lead.image5,
							        'img6': lead.image6
							    } %}	
							    {% set leadsMapped = leadsMapped|merge([tmp]) %}

							{% endfor %}
						{% endif %}
						

						{# {% for key,lead in leads %}
							{% set tmp = {
						        'name': lead.name,
						        'address': lead.address ~', '~lead.city
						    } %}	
						    {% set leadsMapped = leadsMapped|merge([tmp]) %}
						{% endfor %} #}
					{% else %}
						{% if leads is not empty %}
							{% set lastEnabled = false %}
							{% set showedHeader = false %}
							{% for key,lead in leads %}

								{% set randomIndex = random(0, boxColors|length - 1) %}
								{% set randomColor = boxColors[randomIndex] %}

								{% if lastEnabled == true and lead.enabled !=true or leadsImgNo==0 and showedHeader!= true %}
									<div class="col w-100"><h2>Szkoły biorące udział w akcji</h2></div>
									{% set showedHeader = true %}
								{% endif %}
								
								<div class="col mb-5" data-region="{{ lead.region }}" data-city="{{ lead.city }}" data-name="{{ lead.name }}">
									<div class="bg-modal-blue h-100 p-3 my-3 with-bg">
										<div class="">
											<p class="mb-4">
												<strong>{{ lead.name }}</strong>
												<br />Klasa: {{ lead.group_name }}
											</p>
			
											{{ lead.address }}<br />
											{{ lead.zipcode }}, {{ lead.city }}

											{%  if lead.enabled == true %}
												<div class="image-col mx-auto my-3 d-block" style="width:170px; height:130px;"><img src="{{ asset('files/school/'~lead.image1) }}" class="preview" /></div>

												<button class="btn mt-5" data-bs-toggle="modal" data-bs-target="#schoolModal" data-school={{ key }}><span>Zobacz relację</span></button>
												{# {% if lead.fbLink is not empty %}
													<a href="{{ lead.fbLink }}" target="_blank" class="btn red mt-4"><span>Głosuj</span></a>
												{% endif %} #}

												{% set lastEnabled = true %}
											{% else %}
												{% set lastEnabled = false %}
											{% endif %}
										</div>
									</div>
								</div>

								{% set tmp = {
							        'name': lead.name,
							        'address': lead.address ~', '~lead.city,
							        'fb': lead.fbLink,
							        'img1': lead.image1,
							        'img2': lead.image2,
							        'img3': lead.image3,
							        'img4': lead.image4,
							        'img5': lead.image5,
							        'img6': lead.image6
							    } %}
							    {% set leadsMapped = leadsMapped|merge([tmp]) %}
							{% endfor %}
						{% endif %}
					{% endif %}
				</div>
			</div>
		</div>
	</section>



	<div class="modal fade" id="preschoolModal" tabindex="-1" aria-labelledby="preschoolModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content py-4">
				<div class="modal-header pb-0">
					<h5 class="modal-title"></h5>
					<div class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij">X</div>
				</div>
				<div class="modal-body pt-0 position-static">
					<p class="address"></p>
					<div class="images"></div>
					<div class="desc"></div>
					<a href="#" target="_blank" class="btn red my-4 btn-vote"><span>Głosuj</span></a>
				</div>
				<div class="max-img d-none"><div class="back d-flex align-items-center"><img alt="powrót" src="/dist/img/arrow-back.png" class="me-2">powrót</div><div class="img"></div></div>	
			</div>
		</div>
	</div>

	<div class="modal fade" id="schoolModal" tabindex="-1" aria-labelledby="schoolModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content py-4">
				<div class="modal-header pb-0">
					<h5 class="modal-title"></h5>
					<div class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij">X</div>
				</div>
				<div class="modal-body pt-0 position-static">
					<p class="address"></p>
					<div class="images"></div>
					{# <div class="desc"></div> #}
					<a href="#" target="_blank" class="btn red my-4 btn-vote"><span>Głosuj</span></a>
				</div>
				<div class="max-img d-none"><div class="back d-flex align-items-center"><img alt="powrót" src="/dist/img/arrow-back.png" class="me-2">powrót</div><div class="img"></div></div>
			</div>
		</div>
	</div>



	{% if record.sectionPatrons or record.sectionExecutors or record.sectionOrganizers %}
		{{ include('sections/_partners.twig', {'patrons':patrons, 'executor':executor, 'organizer':organizer, 'existH1':existH1}) }}
	{% endif %}

	{# <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDojruKQ7zGvn5-1RLs5FVH1bWZIesqhSI&libraries=places"></script> #}
	<script type="text/javascript">
		
		let map;
		var infowindow;
		let data = [];
        var markers = [];
        const placesJSON = {{ leadsMapped|json_encode|raw }};
        // const placesJSON = {{ leadsImgMapped|json_encode|raw }};
		const listContainer = document.getElementById('leads-list');
		const listItems = listContainer.querySelectorAll('.col');
		const nameInput = document.getElementById('name-input');
		const cityInput = document.getElementById('city-input');
		const regionInput = document.getElementById('region-input');


	async function initMap() {
	  const { Map } = await google.maps.importLibrary("maps");

	  map = new Map(document.getElementById("map"), {
	    center: { lat: 52.90331150617752, lng: 18.565771471774365 },
        zoom: 6,
	  });
	  var service = new google.maps.places.PlacesService(map);
	  
	   infowindow = new google.maps.InfoWindow({maxWidth: 300, minWidth: 300});
        google.maps.event.addListener(map, 'click', function () {
            infowindow.close();
        });

	   placesJSON.forEach(place => {
	   	// console.log(place.address + ', ' + place.city)
	   		const request = {
                query: place.address + ', ' + place.city,
                fields: ["name", "geometry"],
            };
            let lat,lng;

			service.findPlaceFromQuery(request, function (results, status) {
                if (status === google.maps.places.PlacesServiceStatus.OK) {
                    for (let i = 0; i < results.length; i++) {
				        createMarker(results[i], place.name, place.address);
				      }
				}
                
            });

        })
	}

	function createMarker(place, name, address) {
	  if (!place.geometry || !place.geometry.location) return;

	  const marker = new google.maps.Marker({
	    map,
	    position: place.geometry.location,
	  });

		marker.addListener("click", () => {
		infowindow.setContent('<div class="p-2"><p><strong>' + name + '</strong></p>' + address  + '</div>');
				infowindow.open(map, marker);
		});

	  // google.maps.event.addListener(marker, "click", () => {
	  //   infowindow.setContent(place.name || "");
	  //   infowindow.open(map);
	  // });
	}

	// initMap();

	function filterList(){

		listItems.forEach(item=>{
			if(regionInput.value!='')
			{
				if(item.dataset.region == regionInput.value)
					item.classList.remove('region-hidden');
				else
					item.classList.add('region-hidden');
			}
			else
				item.classList.remove('region-hidden');

			if(cityInput.value!='')
			{
				if(item.dataset.city == cityInput.value)
					item.classList.remove('city-hidden');
				else
					item.classList.add('city-hidden');
			}
			else
				item.classList.remove('city-hidden');

			if(nameInput.value!='')
			{
				if(item.dataset.name.includes(nameInput.value))
					item.classList.remove('name-hidden');
				else
					item.classList.add('name-hidden');
			}
			else
				item.classList.remove('name-hidden');
		})
	}
 
 {% if categoryName == 'przedszkola' %}
	var preschoolModal = document.getElementById('preschoolModal')
	preschoolModal.addEventListener('show.bs.modal', function (event) {
	  var button = event.relatedTarget

	  var preschoolKey = button.getAttribute('data-preschool')
	  var modalTitle = preschoolModal.querySelector('.modal-title')
	  var modalAddress = preschoolModal.querySelector('.address')
	  var modalDesc = preschoolModal.querySelector('.desc')
	  var modalFb = preschoolModal.querySelector('.btn-vote')
	  var modalImages = preschoolModal.querySelector('.images')

	  modalTitle.textContent = placesJSON[preschoolKey].name;
	  modalAddress.textContent = placesJSON[preschoolKey].address;
	  modalDesc.innerHTML = placesJSON[preschoolKey].desc;
	  
	  if(placesJSON[preschoolKey].fb!=null){
	  	modalFb.href = placesJSON[preschoolKey].fb;
	  	modalFb.classList.remove('d-none');
	  }
	  else{
	  	modalFb.href = '#';
	  	modalFb.classList.add('d-none');
	  }
	  modalImagesTxt = '<div class="swiper swiper-preschool"><div class="swiper-wrapper">';
		
	  if(placesJSON[preschoolKey].img1)
	  	modalImagesTxt += '<div class="swiper-slide"><div class="image-col mx-auto d-block" style="width:170px; height:130px"><img src="/files/preschool/'+placesJSON[preschoolKey].img1+'" class="preview cursor-pointer" onclick="imagePreview(\'/files/preschool/'+placesJSON[preschoolKey].img1+'\')"/></div></div>';
	  if(placesJSON[preschoolKey].img2)
	  	modalImagesTxt += '<div class="swiper-slide"><div class="image-col mx-auto d-block" style="width:170px; height:130px"><img src="/files/preschool/'+placesJSON[preschoolKey].img2+'" class="preview cursor-pointer" onclick="imagePreview(\'/files/preschool/'+placesJSON[preschoolKey].img2+'\')"/></div></div>';
	  if(placesJSON[preschoolKey].img3)
	  	modalImagesTxt += '<div class="swiper-slide"><div class="image-col mx-auto d-block" style="width:170px; height:130px"><img src="/files/preschool/'+placesJSON[preschoolKey].img3+'" class="preview cursor-pointer" onclick="imagePreview(\'/files/preschool/'+placesJSON[preschoolKey].img3+'\')"/></div></div>';
	  if(placesJSON[preschoolKey].img4)
	  	modalImagesTxt += '<div class="swiper-slide"><div class="image-col mx-auto d-block" style="width:170px; height:130px"><img src="/files/preschool/'+placesJSON[preschoolKey].img4+'" class="preview cursor-pointer" onclick="imagePreview(\'/files/preschool/'+placesJSON[preschoolKey].img4+'\')"/></div></div>';
	  if(placesJSON[preschoolKey].img5)
	  	modalImagesTxt += '<div class="swiper-slide"><div class="image-col mx-auto d-block" style="width:170px; height:130px"><img src="/files/preschool/'+placesJSON[preschoolKey].img5+'" class="preview cursor-pointer" onclick="imagePreview(\'/files/preschool/'+placesJSON[preschoolKey].img5+'\')"/></div></div>';
	  if(placesJSON[preschoolKey].img6)
	  	modalImagesTxt += '<div class="swiper-slide"><div class="image-col mx-auto d-block" style="width:170px; height:130px;"><img src="/files/preschool/'+placesJSON[preschoolKey].img6+'" class="preview cursor-pointer" onclick="imagePreview(\'/files/preschool/'+placesJSON[preschoolKey].img6+'\')"/></div></div>';
	  modalImagesTxt += '</div><div class="swiper-button-prev" style="font-size:40px;left:-20px;top:30%"><</div><div class="swiper-button-next" style="font-size:40px;right:-20px;top:30%"><</div></div>';

	modalImages.innerHTML =modalImagesTxt;

	})

	preschoolModal.addEventListener('shown.bs.modal', function (event) {
		const swiperPreshool = new Swiper('.swiper-preschool', {
			slidesPerView: 1,
			autoplay: {
				delay: 5000,
			},
			breakpoints: {
				560: {
				slidesPerView: 1,
				},
				768: {
				slidesPerView: 2,
				},
			},
			navigation: {
			    nextEl: '.swiper-button-next',
			    prevEl: '.swiper-button-prev',
			  },
		});
	})


	preschoolModal.querySelector('.back').addEventListener('click', function(){
		preschoolModal.querySelector('.max-img').classList.toggle('d-none');
		preschoolModal.querySelector('.modal-body').classList.toggle('d-none');
		preschoolModal.querySelector('.max-img .img').innerHTML = '';
		preschoolModal.querySelector('.modal-content').classList.remove('bg-none');
	})
	

	function imagePreview(imageSrc){
		preschoolModal.querySelector('.modal-content').classList.add('bg-none');
		preschoolModal.querySelector('.modal-body').classList.toggle('d-none');
		modalMaxImg = preschoolModal.querySelector('.max-img');
		modalMaxImg.classList.toggle('d-none');
		modalMaxImg.querySelector('.img').innerHTML = '<img alt="" src="'+imageSrc+'" />';
	}


	document.addEventListener("DOMContentLoaded", function() {
		if(window.location.hash.substring(1)!=''){
			const btnPreview = document.querySelector('.btn[data-preschoolid="'+window.location.hash.substring(1)+'"]')
			console.log(btnPreview.classList)
			if(btnPreview)
				btnPreview.click();
		}
	})


{% else %}
	var schoolModal = document.getElementById('schoolModal')
	schoolModal.addEventListener('show.bs.modal', function (event) {
	  var button = event.relatedTarget

	  var schoolKey = button.getAttribute('data-school')
	  var modalTitle = schoolModal.querySelector('.modal-title')
	  var modalAddress = schoolModal.querySelector('.address')
	  // var modalDesc = preschoolModal.querySelector('.desc')
	  var modalFb = schoolModal.querySelector('.btn-vote')
	  var modalImages = schoolModal.querySelector('.images')

	  modalTitle.textContent = placesJSON[schoolKey].name;
	  modalAddress.textContent = placesJSON[schoolKey].address;
	  // modalDesc.textContent = placesJSON[schoolKey].desc;
	  
	  if(placesJSON[schoolKey].fb!=null){
	  	modalFb.href = placesJSON[schoolKey].fb;
	  	modalFb.classList.remove('d-none');
	  }
	  else{
	  	modalFb.href = '#';
	  	modalFb.classList.add('d-none');
	  }
	  modalImagesTxt = '<div class="swiper swiper-school"><div class="swiper-wrapper">';
		
	  if(placesJSON[schoolKey].img1)
	  	modalImagesTxt += '<div class="swiper-slide"><div class="image-col mx-auto d-block" style="width:170px; height:130px"><img src="/files/school/'+placesJSON[schoolKey].img1+'" class="preview cursor-pointer" onclick="imagePreview(\'/files/school/'+placesJSON[schoolKey].img1+'\')"/></div></div>';
	  if(placesJSON[schoolKey].img2)
	  	modalImagesTxt += '<div class="swiper-slide"><div class="image-col mx-auto d-block" style="width:170px; height:130px"><img src="/files/school/'+placesJSON[schoolKey].img2+'" class="preview cursor-pointer" onclick="imagePreview(\'/files/school/'+placesJSON[schoolKey].img2+'\')"/></div></div>';
	  if(placesJSON[schoolKey].img3)
	  	modalImagesTxt += '<div class="swiper-slide"><div class="image-col mx-auto d-block" style="width:170px; height:130px"><img src="/files/school/'+placesJSON[schoolKey].img3+'" class="preview cursor-pointer" onclick="imagePreview(\'/files/school/'+placesJSON[schoolKey].img3+'\')"/></div></div>';
	  if(placesJSON[schoolKey].img4)
	  	modalImagesTxt += '<div class="swiper-slide"><div class="image-col mx-auto d-block" style="width:170px; height:130px"><img src="/files/school/'+placesJSON[schoolKey].img4+'" class="preview cursor-pointer" onclick="imagePreview(\'/files/school/'+placesJSON[schoolKey].img4+'\')"/></div></div>';
	  if(placesJSON[schoolKey].img5)
	  	modalImagesTxt += '<div class="swiper-slide"><div class="image-col mx-auto d-block" style="width:170px; height:130px"><img src="/files/school/'+placesJSON[schoolKey].img5+'" class="preview cursor-pointer" onclick="imagePreview(\'/files/school/'+placesJSON[schoolKey].img5+'\')"/></div></div>';
	  if(placesJSON[schoolKey].img6)
	  	modalImagesTxt += '<div class="swiper-slide"><div class="image-col mx-auto d-block" style="width:170px; height:130px;"><img src="/files/school/'+placesJSON[schoolKey].img6+'" class="preview cursor-pointer" onclick="imagePreview(\'/files/school/'+placesJSON[schoolKey].img6+'\')"/></div></div>';
	  	modalImagesTxt += '</div><div class="swiper-button-prev" style="font-size:40px;left:-20px;top:30%"><</div><div class="swiper-button-next" style="font-size:40px;right:-20px;top:30%"><</div></div>';

		modalImages.innerHTML =modalImagesTxt;

	})

	schoolModal.addEventListener('shown.bs.modal', function (event) {
		const swiperPreshool = new Swiper('.swiper-school', {
			slidesPerView: 1,
			autoplay: {
				delay: 5000,
			},
			breakpoints: {
				560: {
				slidesPerView: 1,
				},
				768: {
				slidesPerView: 2,
				},
			},
			navigation: {
			    nextEl: '.swiper-button-next',
			    prevEl: '.swiper-button-prev',
			  },
		});
	})

	schoolModal.querySelector('.back').addEventListener('click', function(){
		schoolModal.querySelector('.max-img').classList.toggle('d-none');
		schoolModal.querySelector('.modal-body').classList.toggle('d-none');
		schoolModal.querySelector('.max-img .img').innerHTML = '';
		schoolModal.querySelector('.modal-content').classList.remove('bg-none');
	})
	

	function imagePreview(imageSrc){
		schoolModal.querySelector('.modal-content').classList.add('bg-none');
		schoolModal.querySelector('.modal-body').classList.toggle('d-none');
		modalMaxImg = schoolModal.querySelector('.max-img');
		modalMaxImg.classList.toggle('d-none');
		modalMaxImg.querySelector('.img').innerHTML = '<img alt="" src="'+imageSrc+'" />';
	}


{% endif %}

		
	</script>
{% endblock main %}