<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Upload Formular</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .upload-container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h2 {
            color: #333;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .upload-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #fafafa;
        }
        
        .upload-item label {
            font-weight: bold;
            margin-right: 15px;
            min-width: 80px;
            color: #555;
        }
        
        .file-input {
            flex: 1;
            margin-right: 15px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background: white;
        }
        
        .document-type {
            min-width: 180px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background: white;
        }
        
        .submit-container {
            text-align: center;
            margin-top: 30px;
        }
        
        .submit-btn {
            background-color: #007cba;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .submit-btn:hover {
            background-color: #005a87;
        }
        
        .add-remove-container {
            text-align: center;
            margin: 20px 0;
        }
        
        .add-btn, .remove-btn {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 8px 15px;
            margin: 0 5px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .remove-btn {
            background-color: #dc3545;
        }
        
        .add-btn:hover {
            background-color: #218838;
        }
        
        .remove-btn:hover {
            background-color: #c82333;
        }
        
        .info-text {
            text-align: center;
            color: #666;
            margin-bottom: 20px;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="upload-container">
        <h2>PDF Dokumente hochladen</h2>
        <p class="info-text">Laden Sie 1-10 PDF-Dateien hoch und wählen Sie für jede Datei die entsprechende Dokumentenart aus.</p>
        
        <form id="uploadForm" enctype="multipart/form-data">
            <div id="uploadItems">
                <div class="upload-item">
                    <label>Datei 1:</label>
                    <input type="file" name="pdf_file_1" class="file-input" accept=".pdf" required>
                    <select name="doc_type_1" class="document-type" required>
                        <option value="">-- Dokumentenart wählen --</option>
                        <option value="publikation">Publikation</option>
                        <option value="benotung">Benotung</option>
                        <option value="andere_nachweise">Andere Nachweise</option>
                    </select>
                </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>
            
            <div class="submit-container">
                <button type="submit" class="submit-btn">Dateien hochladen</button>
            </div>
        </form>
    </div>

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

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

            fileCount++;
            const uploadItems = document.getElementById('uploadItems');
            
            const newItem = document.createElement('div');
            newItem.className = 'upload-item';
            newItem.innerHTML = `
                <label>Datei ${fileCount}:</label>
                <input type="file" name="pdf_file_${fileCount}" class="file-input" accept=".pdf">
                <select name="doc_type_${fileCount}" class="document-type">
                    <option value="">-- Dokumentenart wählen --</option>
                    <option value="publikation">Publikation</option>
                    <option value="benotung">Benotung</option>
                    <option value="andere_nachweise">Andere Nachweise</option>
                </select>
            `;
            
            uploadItems.appendChild(newItem);
        }

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

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

        document.getElementById('uploadForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Validierung: Prüfen ob für jede ausgewählte Datei auch eine Dokumentenart gewählt wurde
            const fileInputs = document.querySelectorAll('input[type="file"]');
            const selectInputs = document.querySelectorAll('select');
            let isValid = true;
            let hasAtLeastOneFile = 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) {
                        alert(`Bitte wählen Sie eine Dokumentenart für Datei ${i + 1} aus.`);
                        isValid = false;
                        break;
                    }
                }
            }
            
            if (!hasAtLeastOneFile) {
                alert('Bitte wählen Sie mindestens eine Datei zum Hochladen aus.');
                isValid = false;
            }
            
            if (isValid) {
                // Hier würden Sie normalerweise die Daten an Ihren Server senden
                alert('Formular bereit zum Senden! (In der realen Anwendung würden die Dateien jetzt hochgeladen werden)');
                
                // Beispiel für FormData Erstellung:
                const formData = new FormData(this);
                console.log('FormData bereit für Upload:', formData);
                
                // Hier könnten Sie eine AJAX-Anfrage machen:
                // fetch('upload.php', { method: 'POST', body: formData })
            }
        });
    </script>
</body>
</html>
