<!-- Upload Section -->
<div class="upload">
<div class="text-container status-success">
    <div>Bitte erst alle Dateien zum Upload auswählen (Eingabe für weitere Uploads über "+"-Button auswählen) und dann final den Button "Dateien hochladen" klicken.
    <p>
    Bei Korrekturen bitte alle Dateien erneut hochladen. Bereits hochgeladene Dateien werden überschrieben.
    </p>
    </div>
</div>
	<form id="uploadForm" method="POST" enctype="multipart/form-data">
	    <input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
            <div class="mt-3" id="uploadItems">
                <div class="input-group col-12">
	   	   <div class="col-6 ps-2" >		
                       <input type="file" lang="de" name="pdf_file_1" class="form-control" accept=".pdf" required>
		   </div>	
		   <div class="col-2 ps-3 me-3">  
                    <select name="doc_type_1" class="form-select" required>
			<option value="">-- bitte wählen --</option>
                        <option value="publikation">Publikation</option>
			<option value="anhang">Anhang</option>
                        <option value="notennachweis">Notennachweis</option>
                        <option value="weiterernachweis">Weitere Nachweise</option>
		    </select>
		   </div>
		   <button class="btn button_fix" type="button" id="button-add-upload-1" onclick="addUploadItem()">  <i class="bi h3 bi-file-plus"></i></button>

                </div>
	
            </div>
            
<!--            <div class="add-remove-container">
<!--                <button type="button" class="add-btn" onclick="addUploadItem()">+ Weitere Datei hinzufügen</button> -->
<!--                <button type="button" class="remove-btn" onclick="removeUploadItem()">- Letzte Datei entfernen</button>
            </div>
-->            
           <!-- Progress Bar -->
            <div class="progress-container" id="progressContainer">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <div class="progress-text" id="progressText">0%</div>
            </div>
            
            <!-- Status Messages -->
            <div class="status-message" id="statusMessage"></div>
            
    </div>

            <div class="submit-container d-grid pe-5 d-md-flex justify-content-md-end">
		<button id="submitBtn" type="submit" class="btn btn-success">Dateien hochladen</button>
            </div>
        </form>
        
        <!-- Upload Results -->
        <div id="uploadResults" style="display: none;">
            <h4>Ergebnisse des Dateiuploads:</h4>
            <div class="file-list" id="fileList"></div>
        </div>

        </form>
    </div>

    <script>
        let fileCount = 1;
        const maxFiles = 10;

        function addUploadItem() {
            if (fileCount >= maxFiles) {
                alert('Maximal 10 Dateien können hochgeladen werden.');
                return;
            }

	    // +-Buttons der vorherigen Felder ausblenden 
	    var c = fileCount; 
	    var a = "button-add-upload-" + c; 
	    
	    // sonst geht das Plus-Zeichen auf dem ersten Feld verloren!
	    if (c > 1) {
	   	 document.getElementById(a).style.display = 'none';
	    }

            fileCount++;
            const uploadItems = document.getElementById('uploadItems');
            const newItem = document.createElement('div');
            newItem.className = 'input-group col-12';
            newItem.innerHTML = `
 		<div class="col-6 pt-2 ps-2">
                    <input type="file" lang="de" name="pdf_file_${fileCount}" class="form-control" accept=".pdf">
		</div>
		<div class="col-2 pt-2 ps-3 me-3">
		    <select name="doc_type_${fileCount}" class="form-select">
		        <option value="">-- bitte wählen --</option> 
			<option value="publikation">Publikation</option>
                        <option value="anhang">Anhang</option>
                        <option value="notennachweis">Notennachweis</option>
                        <option value="weiterernachweis">Weitere Nachweise</option>
                    </select>
		</div>
		<button class="pt-2 btn button_fix" type="button" id="button-add-upload-${fileCount}" onclick="addUploadItem()">  <i class="bi h3 bi-file-plus"></i></button>`; 
	    if (fileCount > 1)  {
		    newItem.innerHTML += `
		<button class="pt-2 btn button_fix" type="button" id="button-delete-upload-${fileCount}" onclick="removeUploadItem()"> <i class="bi h3 bi-file-minus"> </button>`;
	     }
	     newItem.innerHTML += `
	     </div> 
            `;
            
            uploadItems.appendChild(newItem);
        }

        function removeUploadItem() {
            if (fileCount <= 1) {
                alert('Mindestens eine Datei muss vorhanden sein.');
                return;
            }

	    var c = fileCount - 1; 
            var a = "button-add-upload-" + c; 
            document.getElementById(a).style.display = 'block';

            const uploadItems = document.getElementById('uploadItems');
            uploadItems.removeChild(uploadItems.lastElementChild);
            fileCount--;
        }

        document.getElementById('uploadForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
	if (validateForm()) {
                uploadFilesAjax();
            }
	});

	function validateForm() {
            // Validierung: Prüfen ob für jede ausgewählte Datei auch eine Dokumentenart gewählt wurde
	    const currentDiv = document.getElementById('uploadForm'); // oder deine andere Methode
	    const fileInputs = currentDiv.querySelectorAll('input[type="file"]');
	    const selectInputs = currentDiv.querySelectorAll('select');
	    console.log(selectInputs); 
            let isValid = true;
            let hasAtLeastOneFile = false;
	    let hasAtLeastOnePublicationFile = false;
	     
	    // Vorherige Fehlermeldungen löschen
            hideStatusMessage();

	    // Check if type of at least one of the uploaded files has value "publication"
	    for (let i = 0; i < fileInputs.length; i++) {
                const selectInput = selectInputs[i];
                
                if (selectInput.value == 'publikation') {
			hasAtLeastOnePublicationFile = true; 
                        break;
                }
	    }
            if (hasAtLeastOnePublicationFile === false)  {
	        hideStatusMessage(); 
	        showStatusMessage(`Mindestens eine hochgeladene Datei muss vom Typ "Publikation" sein.`, `error`); 
	        return false; 
	    }
            
            for (let i = 0; i < fileInputs.length; i++) {
                const fileInput = fileInputs[i];
                const selectInput = selectInputs[i];
                
                if (fileInput.files.length > 0) {
                   hasAtLeastOneFile = true;
                    if (!selectInput.value) {
		        hideStatusMessage();
		        showStatusMessage(`Bitte wählen Sie eine Dokumentenart für Datei ${i + 1} aus.`, `error`);
                    //    alert(`Bitte wählen Sie eine Dokumentenart für Datei ${i + 1} aus.`);
                        isValid = false;
                        break;
                    }
                }
            
           	if (!hasAtLeastOneFile) {
		    hideStatusMessage();
                    showStatusMessage(`Bitte wählen Sie mindestens eine Datei zum Hochladen aus.`, `error`);
                    //alert('Bitte wählen Sie mindestens eine Datei zum Hochladen aus.');
                    isValid = false;
		    break;
            	}
            
	    	// Prüfe Dateigröße (10MB)
            	const maxSize = 10 * 1024 * 1024;
            	if (fileInput.files[0].size > maxSize) {
            		showStatusMessage(`Datei ${i + 1} ist zu groß (max. 10MB).`, 'error');
                	isValid = false;
                	break;
            	}

            	// Prüfe Dateityp
            	if (fileInput.files[0].type !== 'application/pdf') {
                	showStatusMessage(`Datei ${i + 1} ist kein gültiges PDF.`, 'error');
                	isValid = false;
                	break;
	    	}

	    	return isValid; 	
	    }
	}

	function uploadFilesAjax() {
            const form = document.getElementById('uploadForm');
            const formData = new FormData(form);
            const submitBtn = document.getElementById('submitBtn');
            const progressContainer = document.getElementById('progressContainer');
            const progressFill = document.getElementById('progressFill');
            const progressText = document.getElementById('progressText');

            // UI für Upload-Start vorbereiten
            submitBtn.disabled = true;
            submitBtn.textContent = 'Upload läuft...';
            progressContainer.style.display = 'block';
            hideStatusMessage();
            document.getElementById('uploadResults').style.display = 'none';

            // XMLHttpRequest für Progress-Tracking
            const xhr = new XMLHttpRequest();

            // Progress Event
            xhr.upload.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    const percentComplete = Math.round((e.loaded / e.total) * 100);
                    progressFill.style.width = percentComplete + '%';
                    progressText.textContent = percentComplete + '% - ' + formatFileSize(e.loaded) + ' von ' + formatFileSize(e.total);
                }
            });

            // Load Event (Upload abgeschlossen)
            xhr.addEventListener('load', function() {
                if (xhr.status === 200) {
                    try {
                        const response = JSON.parse(xhr.responseText);
                        handleUploadResponse(response);
                    } catch (e) {
                        showStatusMessage('Fehler beim Verarbeiten der Server-Antwort.', 'error');
                        console.error('JSON Parse Error:', e);
                    }
                } else {
                    showStatusMessage(`Server-Fehler: ${xhr.status} ${xhr.statusText}`, 'error');
                }
                resetUploadUI();
            });

            // Error Event
            xhr.addEventListener('error', function() {
                showStatusMessage('Upload fehlgeschlagen. Bitte prüfen Sie Ihre Internetverbindung.', 'error');
                resetUploadUI();
            });

            // Timeout Event
            xhr.addEventListener('timeout', function() {
                showStatusMessage('Upload-Timeout. Bitte versuchen Sie es erneut.', 'error');
                resetUploadUI();
            });

            // Upload starten
            xhr.open('POST', 'templates/upload.php');
            xhr.timeout = 300000; // 5 Minuten Timeout
            xhr.send(formData);
        }

        function handleUploadResponse(response) {
            if (response.success) {
                showStatusMessage(response.message, 'success');
                displayUploadResults(response.files);

                // Formular zurücksetzen nach erfolgreichen Upload
                setTimeout(() => {
                    document.getElementById('uploadForm').reset();
                    // Alle bis auf das erste Upload-Feld entfernen
                    const uploadItems = document.getElementById('uploadItems');
                    while (uploadItems.children.length > 1) {
                        uploadItems.removeChild(uploadItems.lastElementChild);
                        fileCount--;
                    }
                }, 2000);

            } else {
                let errorMessage = response.message;
                if (response.errors && response.errors.length > 0) {
                    errorMessage += '\n\nFehler:\n' + response.errors.join('\n');
                }
                showStatusMessage(errorMessage, 'error');

                // Zeige auch erfolgreich hochgeladene Dateien an
                if (response.uploaded_files && response.uploaded_files.length > 0) {
                    displayUploadResults(response.uploaded_files);
                }
            }
        }

        function displayUploadResults(files) {
            const resultsDiv = document.getElementById('uploadResults');
            const fileList = document.getElementById('fileList');

            fileList.innerHTML = '';
	    var c = 0;

            files.forEach(function(file, index) {
		
		const documentTypeName = file.document_type;
    		console.log('Datei:', file.original_name, 'Typ:', documentTypeName); // Debug-Ausgabe
		
		const fileItem = document.createElement('div');
                fileItem.className = 'file-item';

		let hiddenFields = '';

		// Hidden fields nur bei Publikationen hinzufügen
    		if (file.document_type === 'publikation') {
        		hiddenFields = `
            			<input type="hidden"
                   		 name="publicatedDocument"
                   		 id="publicatedDocument"
                   		 value="${file.original_name}"
                   		 required>

            			<input type="hidden"
                   		 name="publicatedDocumentType"
                   		 id="publicatedDocumentType"
                   		 value="${file.document_type}"
                   		 required>
        			`;
			//  console.log("Hidden Fields in Upload: " +hiddenFields); 
    		}

                fileItem.innerHTML = `
		    <div id="uploadItem${c}" style="font-weight:bold;">${file.original_name}<br></div>
                    Typ: ${getDocumentTypeName(file.document_type)}<br>
                    Größe: ${formatFileSize(file.size)}<br>
		    ${hiddenFields}
		    <div id="uploadHiddenType${c}" style="display:none;">${getDocumentTypeName(file.document_type)}</div>
                    <div id="uploadHiddenItem${c}" style="display:none;">${file.saved_name}</div>
                `;
                fileList.appendChild(fileItem);
		c++; 
            });

            resultsDiv.style.display = 'block';
        }

        function getDocumentTypeName(type) {
            const types = {
                'publikation': 'Publikation',
		'anhang': 'Anhang',
                'notennachweis': 'Notennachweis',
                'weiterernachweis': 'Weitere Nachweise'
            };
            return types[type] || type;
        }


        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        function showStatusMessage(message, type) {
            const statusDiv = document.getElementById('statusMessage');
            statusDiv.textContent = message;
            statusDiv.className = 'status-message status-' + type;
            statusDiv.style.display = 'block';
        }

        function hideStatusMessage() {
            const statusDiv = document.getElementById('statusMessage');
            statusDiv.style.display = 'none';
        }

        function resetUploadUI() {
            const submitBtn = document.getElementById('submitBtn');
            const progressContainer = document.getElementById('progressContainer');
            const progressFill = document.getElementById('progressFill');
            const progressText = document.getElementById('progressText');

            submitBtn.disabled = false;
            submitBtn.textContent = 'Dateien hochladen';

            // Progress bar nach kurzer Verzögerung ausblenden
            setTimeout(() => {
                progressContainer.style.display = 'none';
                progressFill.style.width = '0%';
                progressText.textContent = '0%';
            }, 1000);
        }

        // Alternative: Upload mit fetch() (moderne Browser)
/*        function uploadFilesWithFetch() {
            const form = document.getElementById('uploadForm');
            const formData = new FormData(form);

            fetch('upload.php', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                handleUploadResponse(data);
            })
            .catch(error => {
                console.error('Upload error:', error);
                showStatusMessage('Upload fehlgeschlagen: ' + error.message, 'error');
            })
            .finally(() => {
                resetUploadUI();
            });
        }
 */

  </script>

