<?php

	$sHTML = '';

		if(strtolower($sPageName) != 'uitloggen'){
			
			$sHTML .= '<footer>
				<div class="scroll-top"></div>
				
				<section class="footer">

					<div class="footer-container">';
						
						$sHTML .='<div class="footer-left-container">';					
							
							if(empty($oMijnOVIS->_bInvalidArticle) && empty($oMijnOVIS->_bInvalidPage)){
							
								if(!empty($bFrontPage)){			
									
									$sHTML .= '<div id="filters-container" class="filters-container">
										<div id="filters" class="filters"><i class="fa fa-sliders"></i><span class="filter-label">Filteren</span><span class="number-of-results" id="number-of-results"></span></div>
									</div>';
										
									$sHTML .= '<div id="step-back-container" class="step-back-container">
										<div id="step-back" class="step-back">Terug</div>
									</div>';
									
								} else {
									
									$sHTML .= '<div id="to-main-container" class="to-main-container">
										<div id="to-main" class="to-main"><i class="fa fa-chevron-left"></i>&nbsp;&nbsp;Terug</div>
									</div>';
									
								}
							}
							
						$sHTML .='</div>';
						
						if(empty($oMijnOVIS->_bInvalidArticle) && empty($oMijnOVIS->_bInvalidPage)){
							if(!empty($bFrontPage)){			
								$sHTML .= '<a href="/add" id="add-new" class="add-new">aanmaken</a>';
								$sHTML .= '<div id="parse-search" class="apply-filters">toepassen</div>';
							} else {
								$sHTML .= '<div id="confirm-item" class="confirm-item"><i class="fa fa-chevron-left"></i>&nbsp;&nbsp;Terug</div>';
								if($bIsAllowed) {
									$sHTML .= '<div id="save-item" class="save-item">opslaan</div>';
								}
							}			
						}			
						
						$sHTML .='<div class="footer-right-container">';					
						
							if(!empty($bFrontPage)){
								$sHTML .= '<div class="page-menu">';
									
									$sHTML .= '<div id="mobile-button" class="mobile-button">Menu&nbsp;&nbsp;<i class="fa fa-bars"></i></div>';
									
								$sHTML .= '</div>';
							} else {
								
								$sHTML .= '<div class="generate-description'.(!empty($oMijnOVIS->parsedDetails->id) ? ' edit-page' : false).'" id="generate-description"><span>Genereer omschrijving</span></div>';
								
								$sHTML .= '<div class="sort-images-status" id="sort-images-status"><span id="sort-images-status-message">Foto\'s sorteren?</span></div>';
							}
							
						$sHTML .='</div>';
						
					$sHTML .= '</div>
				
				</section>
			</footer>';
		}		

		$sHTML .= '<!-- plugins -->';
		$sHTML .= '<script src="/assets/js/jquery-3.5.1.min.js"></script>';
		$sHTML .= '<script src="/assets/js/jquery-ui.min.js"></script>';
		$sHTML .= '<script src="/assets/js/accounting.js"></script>';
		$sHTML .= '<script src="/assets/js/jquery.slick.min.js"></script>';
		$sHTML .= '<script src="/assets/js/jquery.select2.min.js"></script>';
		$sHTML .= '<script src="/assets/js/i18n/nl.js"></script>';
		$sHTML .= '<script src="/assets/js/jquery.lazy.min.js"></script>';
		$sHTML .= '<script src="/assets/js/jquery.mask.js"></script>';
		$sHTML .= '<script src="/assets/js/jquery.simpleLightbox.min.js"></script>';
		$sHTML .= '<script src="/assets/js/jquery.ui.touch-punch.min.js"></script>';
		$sHTML .= '<script src="/assets/js/jquery.richtext.min.js"></script>';
		//$sHTML .= '<script src="https://cdn.tiny.cloud/1/plso00fqcg3p58k0x0h0y1z78t97ohx00n9acd2ibdpyp6on/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>';
		
		$sHTML .= '<!-- scripts -->' . PHP_EOL;
		
		if(in_array($sPage, $aCatalogusPages)) {

			$sHTML .= '<script src="/assets/js/modules/marktplaats.js?v=' . ASSETS_VERSION . '"></script>' . PHP_EOL;
			$sHTML .= '<script src="/assets/js/modules/catalog.js?v=' . ASSETS_VERSION . '"></script>' . PHP_EOL;

		}
		
		if(in_array($sPage, $aSaldoPages)) {

			$sHTML .= '<script src="/assets/js/modules/saldo.js?v=' . ASSETS_VERSION . '"></script>' . PHP_EOL;

		}
		
		if(in_array($sPage, $aMarktplaatsPages)) {

			$sHTML .= '<script src="/assets/js/modules/marktplaats.js?v=' . ASSETS_VERSION . '"></script>' . PHP_EOL;

		}		
		
		if(in_array($sPage, $aAddEditPages)) {
			if($bIsAllowed) {
				$sHTML .= '<script type="module">
				
				//import Uppy, { debugLogger } from "@uppy/core";
				//import Dashboard from "@uppy/dashboard";
				//import Webcam from "@uppy/webcam";			
				//const Uppy = require("uppy/core");
				
				import { Uppy, Dashboard, Webcam, XHRUpload, ImageEditor  } from "https://releases.transloadit.com/uppy/v3.10.0/uppy.min.mjs"

				const uppy = new Uppy({
					restrictions: {
						maxFileSize: 20000000,
						maxNumberOfFiles: 24,
						allowedFileTypes: [\'.jpg\', \'.jpeg\', \'.png\']
					},
					locale: {
						strings: {
							exceedsSize: \'%{file} is groter dan de maximale grootte van %{size}\',
							youCanOnlyUploadFileTypes: \'Toegestane bestanden: %{types}\',
							youCanOnlyUploadX: {
								0: \'Maximaal %{smart_count} afbeelding toegestaan\',
								1: \'Maximaal %{smart_count} afbeeldingen toegestaan\',
							}
						}
					}				
				});
				uppy.use(Dashboard, { 
					proudlyDisplayPoweredByUppy: false,
					singleFileFullScreen: false,
					target: \'#drag-drop-area\',
					fileManagerSelectionType: \'files\',
					width: \'100%\',
					inline: false,
					closeModalOnClickOutside: true,
					//trigger: \'.add-new-image\',
					locale: {
						strings: {
							takePictureBtn: \'Maak een foto\',
							myDevice: \'Uit fotoalbum\',
							dropPasteImportFiles: \'Voeg een nieuwe foto toe\',
							addMore: \'Toevoegen\',
							cancel: \'Annuleren\',
							complete: \'Gereed\',
							back: \'Terug\',
							uploading: \'Verwerken\',
							addingMoreFiles: \'Voeg meer toe\',
							xFilesSelected: {
								0: \'%{smart_count} geselecteerd\',
								1: \'%{smart_count} geselecteerd\'
							},
							uploadingXFiles: {
								0: \'%{smart_count} bestand uploaden\',
								1: \'%{smart_count} bestanden uploaden\',
							},
						}
					}
				});
				uppy.use(Webcam, { 
					id: Webcam,
					target: Dashboard,
					title: \'Maak een foto\',
					mobileNativeCamera: true,
					modes: [\'picture\'],
					videoConstraints: {
						facingMode: \'environment\'
					},
					locale: {
						strings: {
							takePictureBtn: \'Maak een foto\',
							takePicture: \'Maak een foto\',
							pluginNameCamera: \'Maak een foto\'
						}
					}
				});			
				uppy.use(XHRUpload, { 
					endpoint: \'/upload\',
					allowedMetaFields: []
				});
				
				uppy.on(\'upload-success\', (file, response) => {	
				
					if(typeof response.uploadURL != \'undefined\' && response.uploadURL != \'\' ){

						jQuery(\'.image-container.no-sorting\').remove();
						
						var newImage = "<div class=\"image-container\" id=\"" + response.uploadURL + "\" data-imgurl=\"/afbeelding/" + response.uploadURL + "\" data-phototype=\"productimage\"><div class=\"image-content\" style=\"background-image:url(/afbeelding/" + response.uploadURL + ");\" onclick=\"jQuery.editImage(\'" + response.uploadURL + "\', \'productImage\');\"></div><span class=\"sort-image\"></span></div>";
						
						jQuery(\'#images\').append(newImage);
						
						var addNewImage = "<div class=\"image-container no-sorting ui-sortable-handle\" id=\"add-new\"><div class=\"image-content add-picture add-new-image\"></div></div>";
										
						jQuery(\'#images\').append(addNewImage);
					}
				});
				
				uppy.on(\'complete\', () => {
					setTimeout(function() { 

						var aImageArray = \'\';
						
						jQuery(\'.picture-block\').removeClass(\'add-picture\').removeClass(\'add-new-image\');
						
						var sortedImageID = 1;
						
						if(jQuery(\'.image-container\').length){						
							
							jQuery.each(jQuery(\'.image-container\'), $.proxy(function(index, item) {	
								
								if(typeof jQuery(item).data(\'imgurl\') != \'undefined\' && jQuery(item).data(\'imgurl\') != \'\'){
									
									if(aImageArray == \'\'){									
										aImageArray = [];
									}
									
									var sImageURL = jQuery(item).data(\'imgurl\');
									
									aImageArray.push(sImageURL);
									
									jQuery(\'#picture-\'+sortedImageID).css("background-image", "url(" + sImageURL + ")");
									
									sortedImageID++;
									
								}							
							}, this));
						} 
						
						jQuery(\'#picture-\' + sortedImageID).addClass(\'add-picture\').addClass(\'add-new-image\').addClass(\'test-add-picture-3\');
						
						if(aImageArray == \'\'){
							sessionStorage.removeItem(\'current_images\');
						} else {
							sessionStorage[\'current_images\'] = JSON.stringify(aImageArray);					
						}					
						
						uppy.cancelAll();
						uppy.getPlugin(\'Dashboard\').closeModal();

					}, 500);				
				})
				  
				uppy.on(\'dashboard:modal-open\', () => {				
					$(\'body\').addClass(\'new-picture-active\');
					
					
				});
				  
				uppy.on(\'dashboard:modal-closed\', () => {
					$(\'body\').removeClass(\'new-picture-active\');
				});
				
				jQuery(document).on("click",".add-picture",function(e) {
					
					var iCurrentNumberOfFiles = jQuery(\'.image-container\').not(\'.no-sorting\').length;				
					var iMaxNumberOfFiles = 24-iCurrentNumberOfFiles;
										
					uppy.setOptions({
						restrictions: {
							maxNumberOfFiles: iMaxNumberOfFiles
						}
					});
										
					uppy.getPlugin(\'Dashboard\').openModal();			
				});
				
				  
				</script>' . PHP_EOL;
			}
			
			$sHTML .= '<script src="/assets/js/modules/add-edit.js?v=' . ASSETS_VERSION . '"></script>' . PHP_EOL;

		}
		
		/*		
		if(in_array($sPage, $aDashboardPages)) {

			$sHTML .= '<script src="/assets/js/jquery-ui-sortable.min.js"></script>' . PHP_EOL;
			$sHTML .= '<script src="/assets/js/modules/article.js?v=' . ASSETS_VERSION . '"></script>' . PHP_EOL;

		}	

		if(in_array($sPage, $aCategoryPages)) {

			$sHTML .= 
			'<script src="/assets/js/modules/category.js?v=' . ASSETS_VERSION . '"></script>' . PHP_EOL;

		}
		*/

		$sHTML .= '<script src="/assets/js/functions.js?v=' . ASSETS_VERSION . '"></script>';
		
		if(strtolower($sPageName) == 'uitloggen'){
			
			$sHTML .= '<script>
			
			jQuery(function() {
				jQuery.proceedLogOut();
			});
			
			</script>';
			
		} 

	$sHTML .= 
	'</body>
	
</html>';

echo $sHTML;