implemented step 10 by Gemini

- added 4. step of wizard for style and images

public/js/wizard.js

@@ -12,7 +12,11 @@ const App = {
 		selection: {
 			category: null,
 			subcategory: null,
-			customDescription: ''
+			customDescription: '',
+			style: null,
+			palette: null,
+			logo: null,
+			gallery: []
 		}
 	},
 
@@ -187,6 +191,27 @@ const App = {
 
 		// Step 3 events
 		document.getElementById('btn-add-service').addEventListener('click', () => this.addServiceItem());
+
+		// Step 4 events
+		document.querySelectorAll('#style-grid .category-card').forEach(card => {
+			card.addEventListener('click', () => {
+				this.state.selection.style = card.getAttribute('data-style');
+				this.updateStyleSelection();
+			});
+		});
+
+		document.querySelectorAll('#palette-list .palette-card').forEach(card => {
+			card.addEventListener('click', () => {
+				this.state.selection.palette = card.getAttribute('data-palette');
+				this.updatePaletteSelection();
+			});
+		});
+
+		document.getElementById('logo-upload-box').addEventListener('click', () => document.getElementById('logo-input').click());
+		document.getElementById('logo-input').addEventListener('change', (e) => this.handleFileUpload(e, 'logo'));
+
+		document.getElementById('gallery-add-box').addEventListener('click', () => document.getElementById('gallery-input').click());
+		document.getElementById('gallery-input').addEventListener('change', (e) => this.handleFileUpload(e, 'gallery'));
 	},
 
 	renderCategories() {
@@ -341,6 +366,103 @@ const App = {
 		});
 	},
 
+	updateStyleSelection() {
+		document.querySelectorAll('#style-grid .category-card').forEach(card => {
+			card.classList.toggle('selected', card.getAttribute('data-style') === this.state.selection.style);
+		});
+		this.updateUI();
+	},
+
+	updatePaletteSelection() {
+		document.querySelectorAll('#palette-list .palette-card').forEach(card => {
+			card.classList.toggle('selected', card.getAttribute('data-palette') === this.state.selection.palette);
+		});
+		this.updateUI();
+	},
+
+	async handleFileUpload(event, target) {
+		const files = event.target.files;
+		if (!files.length) return;
+
+		for (const file of files) {
+			const formData = new FormData();
+			formData.append('action', 'uploadAsset');
+			formData.append('project_id', this.state.project.project_id);
+			formData.append('file', file);
+			formData.append('X-User-ID', this.state.userId);
+
+			try {
+				const response = await fetch('/ajax.php', {
+					method: 'POST',
+					body: formData
+				});
+				const result = await response.json();
+				if (result.success) {
+					if (target === 'logo') {
+						this.state.selection.logo = result.data.path;
+						this.renderLogoPreview();
+					} else {
+						if (this.state.selection.gallery.length < 5) {
+							this.state.selection.gallery.push(result.data.path);
+							this.renderGalleryPreviews();
+						} else {
+							alert('Maximálne 5 fotografií.');
+						}
+					}
+				} else {
+					alert('Upload zlyhal: ' + result.error.message);
+				}
+			} catch (error) {
+				console.error('Upload error:', error);
+				alert('Chyba pri nahrávaní.');
+			}
+		}
+		this.updateUI();
+	},
+
+	renderLogoPreview() {
+		const preview = document.getElementById('logo-preview');
+		preview.innerHTML = `<img src="/${this.state.selection.logo}" alt="Logo">
+			<button class="btn-remove-asset" id="btn-remove-logo">×</button>`;
+		preview.classList.remove('hidden');
+		document.querySelector('#logo-upload-box .upload-placeholder').classList.add('hidden');
+		
+		document.getElementById('btn-remove-logo').addEventListener('click', (e) => {
+			e.stopPropagation();
+			this.removeAsset('logo');
+		});
+	},
+
+	renderGalleryPreviews() {
+		const container = document.getElementById('gallery-previews');
+		container.innerHTML = '';
+		this.state.selection.gallery.forEach((path, index) => {
+			const item = document.createElement('div');
+			item.className = 'gallery-item';
+			item.innerHTML = `<img src="/${path}" alt="Gallery ${index+1}">
+				<button class="btn-remove-asset" data-index="${index}">×</button>`;
+			
+			item.querySelector('.btn-remove-asset').addEventListener('click', (e) => {
+				e.stopPropagation();
+				this.removeAsset('gallery', index);
+			});
+			
+			container.appendChild(item);
+		});
+	},
+
+	removeAsset(target, index = null) {
+		if (target === 'logo') {
+			this.state.selection.logo = null;
+			document.getElementById('logo-preview').classList.add('hidden');
+			document.querySelector('#logo-upload-box .upload-placeholder').classList.remove('hidden');
+		} else {
+			this.state.selection.gallery.splice(index, 1);
+			this.renderGalleryPreviews();
+		}
+		this.updateUI();
+	},
+
 	showStep(n) {
 		const steps = document.querySelectorAll('.step');
 		steps.forEach(step => step.classList.remove('active'));
@@ -463,6 +585,31 @@ const App = {
 				alert('Nepodarilo sa uložiť dáta: ' + error.message);
 				return;
 			}
+		} else if (this.state.currentStep === 4) {
+			if (!this.state.selection.style || !this.state.selection.palette) {
+				alert('Prosím, vyberte vizuálny štýl a farebnú paletu.');
+				return;
+			}
+
+			try {
+				await this.apiCall('saveStep', {
+					step: 4,
+					data: {
+						visuals: {
+							style: this.state.selection.style,
+							palette: this.state.selection.palette
+						},
+						assets: {
+							logo: this.state.selection.logo,
+							gallery: this.state.selection.gallery
+						}
+					}
+				});
+			} catch (error) {
+				console.error('Save step 4 failed:', error);
+				alert('Nepodarilo sa uložiť dáta: ' + error.message);
+				return;
+			}
 		}
 
 		if (this.state.currentStep < this.state.totalSteps) {
@@ -492,6 +639,8 @@ const App = {
 			const phone = document.getElementById('contact-phone').value;
 			const gdpr = document.getElementById('gdpr-consent').checked;
 			nextDisabled = !name || !gdpr || (!email && !phone);
+		} else if (this.state.currentStep === 4) {
+			nextDisabled = !this.state.selection.style || !this.state.selection.palette;
 		}
 
 		btnNext.disabled = nextDisabled;