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

{% block main %}
	<section class="bg-pink" data-bg="bg-pink">
		<div class="container">
            {{ include('partials/_back.twig') }}
			<h1 class="mb-5 text-center">W Akcji Tron bierze udział {{ total }} {% if categoryName == 'przedszkola' %}przedszkoli{% else %}szkół{% endif %}</h1>

			<div class=" inner-small d-flex">
				<div class="form-group w-100">
					<label for="phrase" class="d-none">Nazwa</label>
					<input type="text" name="phrase" class="py-2" id="phrase" placeholder="Podaj nazwę, miasto lub województwo" autocomplete="off" />
				</div>
				<div><div class="btn py-2" id="searchBtn" style="font-size:16px; line-height:22px">Szukaj</div></div>
			</div>
				
			</form>
			<div class="editor text-center mb-5">{{ record.content|raw }}</div>
			
			<ul class="nav nav-tabs mb-5" id="galleryTab" role="tablist">
				<li class="nav-item" role="presentation">
					<div class="nav-link" id="gallery-tab1-tab" data-bs-toggle="tab" data-bs-target="#gallery-tab1" role="tab" aria-controls="gallery-tab1" aria-selected="true">Wszystkie zgłoszone {% if categoryName == 'przedszkola' %}przedszkola{% else %}szkoły{% endif %} ({{ total }})</div>
				</li> 
              	<li class="nav-item" role="presentation">
					<div class="nav-link" id="gallery-tab2-tab" data-bs-toggle="tab" data-bs-target="#gallery-tab2" role="tab" aria-controls="gallery-tab2" aria-selected="false">{% if categoryName == 'przedszkola' %}Przedszkola{% else %}Klasy{% endif %}, które biorą udział w konkursie ({{ competitionTotal }})</div>
				</li>
              	<li class="nav-item d-none" role="presentation">
					<div class="nav-link" id="gallery-tab3-tab" data-bs-toggle="tab" data-bs-target="#gallery-tab3" role="tab" aria-controls="gallery-tab3" aria-selected="false"></div>
				</li>                  
           	</ul>
           	<div class="tab-content" id="galleryTabContent">
                <div class="tab-pane" id="gallery-tab2" role="tabpanel" aria-labelledby="gallery-tab2-tab">
					<div class="row" id="workList2"></div>
					<div class="d-flex justify-content-center mt-5"><div class="btn" id="loadMoreBtn2">Załaduj więcej</div></div>
				</div>
                <div class="tab-pane" id="gallery-tab1" role="tabpanel" aria-labelledby="gallery-tab1-tab">
					<div class="row" id="workList"></div>
					<div class="d-flex justify-content-center mt-5"><div class="btn" id="loadMoreBtn">Załaduj więcej</div></div>
				</div>
                <div class="tab-pane" id="gallery-tab3" role="tabpanel" aria-labelledby="gallery-tab3-tab">
					<div class="row" id="workList3"></div>
					<div class="d-flex justify-content-center mt-5"><div class="btn" id="loadMoreBtn3">Załaduj więcej</div></div>
				</div>
			</div>
		</div>
	</section>
	<script>
        const workList = document.getElementById('workList');
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        const workList2 = document.getElementById('workList2');
        const loadMoreBtn2 = document.getElementById('loadMoreBtn2');
        const phrase = document.getElementById('phrase');
        const workList3 = document.getElementById('workList3');
        const loadMoreBtn3 = document.getElementById('loadMoreBtn3');
        const searchBtn = document.getElementById('searchBtn');
        const galleryTabSearch = document.getElementById('gallery-tab3-tab');
     	const searchCount = document.getElementById('searchCount');

        let currentIndex = 0;
        let currentIndex2 = 0;
        let currentIndexPhrase = 0;
        const itemsPerPage = 9;
        let allData = [];
        let allData2 = [];
        let phraseData = [];

        async function fetchData() {
            try {
            	{% if categoryName == 'przedszkola' %}
	                const response = await fetch('/post/preschool-list');
	            {% else %}
	            	const response = await fetch('/post/school-list');
	           	{% endif %}
                if (!response.ok) throw new Error('Błąd pobierania danych');
                allData = await response.json();

                if(allData){
                	allData.forEach((item)=>{
                		if(item.image1)
        					allData2.push(item);  
        				if(item.ytId)
        					allData2.push(item); 			
                	})
                }
                document.getElementById('gallery-tab1-tab').click();
                if(allData.length <= 9)
                	loadMoreBtn.classList.add('d-none');
               	if(allData2.length <= 9)
                	loadMoreBtn2.classList.add('d-none');

                if( location.hash ){
                	const itemId = location.hash.replace('#', '');
	                showLayer(itemId);
                }


                renderItems2();
                renderItems();
            } catch (error) {
            }
        }

        {% if categoryName == 'przedszkola' %}
	        function renderItems( phraseStr = null ) {
	        	let nextItems;
	        	if(phraseStr)
	        		nextItems = phraseData.slice(currentIndexPhrase, currentIndexPhrase + itemsPerPage);
	        	else
	           		nextItems = allData.slice(currentIndex, currentIndex + itemsPerPage);
	            nextItems.forEach(work => {
	                const workItem = document.createElement('div');
	                workItem.className = 'col-12 col-md-2 col-lg-4 mb-4';
	                workItem.dataset.name = work.name;
	                workItem.dataset.address = work.address;
	                workItem.dataset.image1 = work.image1 ? `/files/preschool/${work.image1}` : '';
	                workItem.dataset.image2 = work.image2 ? `/files/preschool/${work.image2}` : '';
	                workItem.dataset.image3 = work.image3 ? `/files/preschool/${work.image3}` : '';
	                workItem.dataset.image4 = work.image4 ? `/files/preschool/${work.image4}` : '';
	                workItem.dataset.image5 = work.image5 ? `/files/preschool/${work.image5}` : '';
	                workItem.dataset.image6 = work.image6 ? `/files/preschool/${work.image6}` : '';
	                workItem.dataset.desc = work.description;
	                workItem.dataset.fb = work.fbLink || '';
	                workItem.className = 'col-12 col-md-2 col-lg-4 mb-4';
	                if(work.image1){
	                	if(phraseStr)
		                	workItem.setAttribute('id', 'phrase-gal1-'+work.id);
	                	else
		                	workItem.setAttribute('id', 'gal1-'+work.id);
		                workItem.innerHTML = `
		                    <div class="img-box img-gal"><div class="gallery more"><img data-src="/files/preschool/${work.image1}" alt="${work.name}" class="lazyload w-100" ></div></div>
		                    <h5>${work.name}</h5>
		                    <p>${work.address}<br />
		                    ${work.zipcode} ${work.city}</p>
		                `;
		                workItem.addEventListener('click', ()=>{
		                	if(phraseStr)
		                		showLayer('phrase-gal1-'+work.id);
		                	else
		                		showLayer('gal1-'+work.id);
		                });
		            }
		            else{
		            	workItem.innerHTML = `
		                    <div class="img-box img-gal"><div class="gallery"><img data-src="/dist/img/logo.svg" alt="${work.name}" class="lazyload"></div></div>
		                    <h5>${work.name}</h5>
		                    <p>${work.address}<br />
		                    ${work.zipcode} ${work.city}</p>
		                `;
		            }
		            if(phraseStr)
	                	workList3.appendChild(workItem);
		            else
	                	workList.appendChild(workItem);
	                setTimeout(() => workItem.classList.add('visible'), 100);
	            });
	            if(phraseStr){
	            	currentIndexPhrase += itemsPerPage;
		            if (currentIndexPhrase >= phraseData.length) {
		                loadMoreBtn3.classList.add('d-none');
		            }
	            }
	            else{
		            currentIndex += itemsPerPage;
		            if (currentIndex >= allData.length) {
		                loadMoreBtn.classList.add('d-none');
		            }
		        }
	        }
	        function renderItems2() {
	            const nextItems = allData2.slice(currentIndex2, currentIndex2 + itemsPerPage);
	            nextItems.forEach(work => {
	                const workItem = document.createElement('div');
	                workItem.setAttribute('id', 'gal2-'+work.id);
	                workItem.className = 'col-12 col-md-2 col-lg-4 mb-4';
	                workItem.dataset.name = work.name;
	                workItem.dataset.address = work.address;
	                workItem.dataset.image1 = work.image1 ? `/files/preschool/${work.image1}` : '';
	                workItem.dataset.image2 = work.image2 ? `/files/preschool/${work.image2}` : '';
	                workItem.dataset.image3 = work.image3 ? `/files/preschool/${work.image3}` : '';
	                workItem.dataset.image4 = work.image4 ? `/files/preschool/${work.image4}` : '';
	                workItem.dataset.image5 = work.image5 ? `/files/preschool/${work.image5}` : '';
	                workItem.dataset.image6 = work.image6 ? `/files/preschool/${work.image6}` : '';
	                workItem.dataset.desc = work.description;
	                workItem.dataset.fb = work.fbLink || '';
	                workItem.innerHTML = `
	                    <div class="img-box img-gal"><div class="gallery more"><img data-src="/files/preschool/${work.image1}" alt="${work.name}" class="lazyload w-100" ></div></div>
	                    <h5>${work.name}</h5>
	                    <p>${work.address}<br />
	                    ${work.zipcode} ${work.city}</p>
	                `;
	                workItem.addEventListener('click', ()=>{
	                	showLayer('gal2-'+work.id);
	                });
	                workList2.appendChild(workItem);
	                setTimeout(() => workItem.classList.add('visible'), 100);
	            });
	            currentIndex2 += itemsPerPage;
	            if (currentIndex2 >= allData2.length) {
	                loadMoreBtn2.classList.add('d-none');
	            }
	        }
	    {% else %}
	   		function renderItems( phraseStr = null ) {
	            let nextItems;
	            if(phraseStr)
	        		nextItems = phraseData.slice(currentIndexPhrase, currentIndexPhrase + itemsPerPage);
	        	else
	           		nextItems = allData.slice(currentIndex, currentIndex + itemsPerPage);
	            nextItems.forEach(work => {
	                const workItem = document.createElement('div');
	                workItem.className = 'col-12 col-md-2 col-lg-4 mb-4';
	                workItem.dataset.name = work.name;
	                workItem.dataset.address = work.address;
	                workItem.dataset.yt = work.ytId || '';
	                workItem.dataset.fb = work.fbLink || '';
	                if(work.ytId){
	                	if(phraseStr)
		                	workItem.setAttribute('id', 'phrase-gal1-'+work.id);
	                	else
		                	workItem.setAttribute('id', 'gal1-'+work.id);

		       			workItem.innerHTML = `
		                    <div class="img-box img-gal"><div class="gallery more"><img data-src="https://img.youtube.com/vi/${work.ytId}/maxresdefault.jpg" alt="${work.name}" class="lazyload w-100 yt-thumb-check"></div></div>
		                    <h5>${work.name}</h5>
		                    <p>${work.address}<br />
		                    ${work.zipcode} ${work.city}</p>
		                `;
		                workItem.addEventListener('click', ()=>{
		                	if(phraseStr)
		                		showLayer('phrase-gal1-'+work.id);
		                	else
		                		showLayer('gal1-'+work.id);
		                });
		            }
		            else{
		            	workItem.innerHTML = `
		                    <div class="img-box img-gal"><div class="gallery"><img data-src="/dist/img/logo.svg" alt="${work.name}" class="lazyload"></div></div>
		                    <h5>${work.name}</h5>
		                    <p>${work.address}<br />
		                    ${work.zipcode} ${work.city}</p>
		                `;
		            }
		            if(phraseStr)
	                	workList3.appendChild(workItem);
                	else
	                	workList.appendChild(workItem);
	                setTimeout(() => workItem.classList.add('visible'), 100);
	            });

	            if(phraseStr){
	            	currentIndexPhrase += itemsPerPage;
		            if (currentIndexPhrase >= phraseData.length) {
		                loadMoreBtn3.classList.add('d-none');
		            }
	            }
	            else{
		            currentIndex += itemsPerPage;
		            if (currentIndex >= allData.length) {
		                loadMoreBtn.classList.add('d-none');
		            }
		        }
	        }
	        function renderItems2() {
	            const nextItems = allData2.slice(currentIndex2, currentIndex2 + itemsPerPage);
	            nextItems.forEach(work => {
	                const workItem = document.createElement('div');
	                workItem.setAttribute('id', 'gal2-'+work.id);
	                workItem.className = 'col-12 col-md-2 col-lg-4 mb-4';
	                workItem.dataset.name = work.name;
	                workItem.dataset.address = work.address;
	                workItem.dataset.yt = work.ytId || '';
	                workItem.dataset.fb = work.fbLink || '';
	                workItem.innerHTML = `
	                    <div class="img-box img-gal"><div class="gallery more"><img data-src="https://img.youtube.com/vi/${work.ytId}/maxresdefault.jpg" alt="${work.name}" class="lazyload w-100 yt-thumb-check" ></div></div>
	                    <h5>${work.name}</h5>
	                    <p>${work.address}<br />
	                    ${work.zipcode} ${work.city}</p>
	                `;
	                workItem.addEventListener('click', ()=>{
	                	showLayer('gal2-'+work.id);
	                });
	                workList2.appendChild(workItem);
	                setTimeout(() => workItem.classList.add('visible'), 100);
	            });
	            currentIndex2 += itemsPerPage;
	            if (currentIndex2 >= allData2.length) {
	                loadMoreBtn2.classList.add('d-none');
	            }
	        }

	        document.addEventListener('lazyloaded', function (e) {
				const img = e.target;
				if (img.classList.contains('yt-thumb-check')) {
					if (img.naturalWidth <= 120) {
					  img.src = '/dist/img/logo.svg';
					  img.classList.remove('w-100')
					}
				}
			});

	    {% endif %}

        function showLayer(itemId){
        	const layer = document.getElementById('layer');

        	// const workItem = document.getElementById( itemId );
        	itemId = itemId.replace('gal1-', '');
        	itemId = itemId.replace('gal2-', '');
        	itemId = itemId.replace('phrase-', '');
        	location.hash = '#' + itemId;

        	let workItem;
        	allData2.forEach((item) => {
        		if(item.id == itemId){
        			workItem = item;
        		}
        	});

        	if(workItem){

        		$('main').hide();
	        	$('footer').hide();
	        	$('header').hide();

        		layer.querySelector('.name').innerHTML = workItem.name;
	        	layer.querySelector('.address').innerHTML = workItem.address;
	        	if(workItem.description){
	        		layer.querySelector('.desc').innerHTML = workItem.description;
	        		layer.querySelector('.desc').classList.remove('d-none');
	        	}
	        	else
	        		layer.querySelector('.desc').classList.add('d-none');

	        	if(workItem.ytId){
	        		layer.querySelector('.yt-iframe').setAttribute('src', 'https://www.youtube.com/embed/'+workItem.ytId);
	        		layer.querySelector('.yt-iframe').classList.remove('d-none');
	        		layer.querySelector('.yt-container').classList.remove('d-none');
	        		layer.querySelector('.gallery-container').classList.add('d-none');
	        	}
	        	else{
	        		layer.querySelector('.yt-container').classList.add('d-none');
	        		layer.querySelector('.gallery-container').classList.remove('d-none');
	        	}

	        	if(workItem.image1){
	 		       	layer.querySelector('#mainImage').setAttribute('src', '/files/preschool/'+workItem.image1);
	 		       	layer.querySelector('.image').setAttribute('src', '/files/preschool/'+workItem.image1);
	 		    	layer.querySelector('.image').parentElement.classList.remove('d-none');
	        	}
	 		    else
	 		    	layer.querySelector('.image').parentElement.classList.add('d-none');
	        	if(workItem.image2){
	        		layer.querySelector('.image2').setAttribute('src', '/files/preschool/'+workItem.image2);
	        		layer.querySelector('.image2').parentElement.classList.remove('d-none');
	        	}
	 		    else
	 		    	layer.querySelector('.image2').parentElement.classList.add('d-none');
	        	if(workItem.image3){
		        	layer.querySelector('.image3').setAttribute('src', '/files/preschool/'+workItem.image3);
		        	layer.querySelector('.image3').parentElement.classList.remove('d-none');
	        	}
	 		    else
	 		    	layer.querySelector('.image3').parentElement.classList.add('d-none');
	        	if(workItem.image4){
		        	layer.querySelector('.image4').setAttribute('src', '/files/preschool/'+workItem.image4);
		        	layer.querySelector('.image4').parentElement.classList.remove('d-none');
	        	}
	 		    else
	 		    	layer.querySelector('.image4').parentElement.classList.add('d-none');
	        	if(workItem.image5){
		        	layer.querySelector('.image5').setAttribute('src', '/files/preschool/'+workItem.image5);
		        	layer.querySelector('.image5').parentElement.classList.remove('d-none');
	        	}
	 		    else
	 		    	layer.querySelector('.image5').parentElement.classList.add('d-none');
	        	if(workItem.image6){
		        	layer.querySelector('.image6').setAttribute('src', '/files/preschool/'+workItem.image6);
		        	layer.querySelector('.image6').parentElement.classList.remove('d-none');
	        	}
	 		    else
	 		    	layer.querySelector('.image6').parentElement.classList.add('d-none');

	 		    if(workItem.fbLink){
	 		       	layer.querySelector('.btn').setAttribute('href', workItem.fbLink);
	 		    	layer.querySelector('.btn').parentElement.classList.remove('d-none');
	        	}
	 		    else
	 		    	layer.querySelector('.btn').parentElement.classList.add('d-none');

		        layer.classList.remove('d-none');
        	}
        }

        function getPhraseData(){
        	phraseData = [];
        	currentIndexPhrase = 0;
        	phraseStr = (phrase.value).trim().toLowerCase();
        	workList3.innerHTML = '';
        	loadMoreBtn3.classList.remove('d-none');
        	if( phraseStr == '' ){
        		galleryTabSearch.closest('li').classList.add('d-none');
        	}
        	else{
	        	allData.forEach( item => {
	        		if( (item.name.toLowerCase()).includes(phraseStr) || (item.city.toLowerCase()).includes(phraseStr) || (item.region.toLowerCase()).includes(phraseStr) )
	        			phraseData.push(item);
	        	} )
	        	renderItems( phraseStr );
	        	galleryTabSearch.innerHTML = 'Wyniki wyszukiwania (' + phraseData.length + ')';
	        	galleryTabSearch.closest('li').classList.remove('d-none');
	        	galleryTabSearch.click();
	        }
        }
        

        loadMoreBtn.addEventListener('click', ()=>{ renderItems(); });
        loadMoreBtn2.addEventListener('click', renderItems2);
        loadMoreBtn3.addEventListener('click', ()=>{ renderItems(phrase.value); });
        searchBtn.addEventListener('click', getPhraseData);

        phrase.addEventListener('keydown', (event)=>{
			if (event.key === 'Enter') {
		    	getPhraseData()
		    }
		})

        // Wczytanie danych przy starcie
        fetchData();
    </script>

{% endblock main %}