<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VET Repository - Publikationsvertrag</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .hrbibb {
            border-top: 2px solid #007bff;
            margin: 20px 0;
        }
        .validation-message {
            color: #dc3545;
            font-size: 0.875em;
            margin-top: 10px;
            display: none;
        }
        .submit-section {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 5px;
            margin-top: 30px;
        }
        .invalid-field {
            border-color: #dc3545 !important;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h2>VET Repository - Publikationsvertrag</h2>
        
        <form id="mainForm" novalidate>
            
            <!-- Erstveröffentlichung Open Access -->
            <div id="divErstveroeffentlichungOpenAccess" class="ms-3"> 
                <div class="pt-3"></div>
                <hr class="hrbibb">
                <h5>Erstveröffentlichung Open Access</h5>
                
                <div class="container-fluid">
                    <div class="col-12">
                        <div class="row pt-3">
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input required-field" 
                                           type="checkbox" 
                                           id="checkBoxBestaetigungCCBY" 
                                           name="checkBoxBestaetigungCCBY"
                                           aria-labelledby="checkBoxBestaetigungCCBYLabel">
                                    <label class="form-check-label fw-bold" 
                                           id="checkBoxBestaetigungCCBYLabel" 
                                           for="checkBoxBestaetigungCCBY">
                                    </label>
                                    Ich bestätige, dass ich die <a href="https://www.bibb.de/dokumente/pdf/Publikationsvertrag_CC_BY-SA.pdf" target='_blank' rel='noopener noreferrer'><span class="fw-bold">Vertragsbedingungen </span></a>verstanden habe und diesen zustimme.
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input required-field" 
                                           type="checkbox" 
                                           id="checkCCBYSA" 
                                           name="checkCCBYSA"
                                           aria-labelledby="ccbysaLabel">
                                    <label class="form-check-label fw-bold" 
                                           id="ccbysaLabel" 
                                           for="checkCCBYSA">
                                        CC BY-SA-Lizenz:
                                    </label>
                                    Ich möchte die Publikation unter der CC BY-SA-Lizenz veröffentlichen.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Zweitveröffentlichung Open Access -->
            <div id="divZweitveroeffentlichungOpenAccess" class="ms-3"> 
                <div class="pt-3"></div>
                <hr class="hrbibb">
                <h5>Zweitveröffentlichung Open Access</h5>
                
                <div class="container-fluid">
                    <div class="col-12">
                        <div class="row pt-3">
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input required-field" 
                                           type="checkbox" 
                                           id="checkBoxBestaetigungCCBYV3" 
                                           name="checkBoxBestaetigungCCBYV3"
                                           aria-labelledby="checkBoxBestaetigungCCBYV3Label">
                                    <label class="form-check-label fw-bold" 
                                           id="checkBoxBestaetigungCCBYV3Label" 
                                           for="checkBoxBestaetigungCCBYV3">
                                    </label>
                                    Ich bestätige, dass ich die Publikation im VET Repository zweitveröffentlichen möchte.
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-12">
                                <p class="fw-bold">Wählen Sie die bereits verwendete CC-Lizenz:</p>
                                <div class="license-group">
                                    <div class="form-check">
                                        <input class="form-check-input" 
                                               type="radio" 
                                               name="OAlicenseType"  
                                               id="OpenAccessCCBY" 
                                               value="CC BY">
                                        <label class="form-check-label" for="OpenAccessCCBY">
                                            <a href="http://creativecommons.org/licenses/by/4.0" target='_blank'>CC BY 4.0 (Namensnennung)</a>
                                        </label>
                                    </div>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" 
                                               type="radio" 
                                               name="OAlicenseType"  
                                               id="OpenAccessCCBYSA" 
                                               value="CC BY-SA">
                                        <label class="form-check-label" for="OpenAccessCCBYSA">
                                            <a href="http://creativecommons.org/licenses/by-sa/4.0" target='_blank'>CC BY-SA 4.0 (Namensnennung, Weitergabe unter gleichen Bedingungen)</a>
                                        </label>
                                    </div>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" 
                                               type="radio" 
                                               name="OAlicenseType"  
                                               id="OpenAccessCCBYND" 
                                               value="CC BY-ND">
                                        <label class="form-check-label" for="OpenAccessCCBYND">
                                            <a href="http://creativecommons.org/licenses/by-nd/4.0" target='_blank'>CC BY-ND 4.0 (Namensnennung, keine Bearbeitung)</a>
                                        </label>
                                    </div>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" 
                                               type="radio" 
                                               name="OAlicenseType"  
                                               id="OpenAccessCCBYNC" 
                                               value="CC BY-NC">
                                        <label class="form-check-label" for="OpenAccessCCBYNC">
                                            <a href="http://creativecommons.org/licenses/by-nc/4.0" target='_blank'>CC BY-NC 4.0 (Namensnennung, keine kommerzielle Nutzung)</a>
                                        </label>
                                    </div>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" 
                                               type="radio" 
                                               name="OAlicenseType"  
                                               id="OpenAccessCCBYNCND" 
                                               value="CC BY-NC-ND">
                                        <label class="form-check-label" for="OpenAccessCCBYNCND">
                                            <a href="http://creativecommons.org/licenses/by-nc-nd/4.0" target='_blank'>CC BY-NC-ND 4.0 (Namensnennung, keine kommerzielle Nutzung, keine Bearbeitung)</a>
                                        </label>
                                    </div>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" 
                                               type="radio" 
                                               name="OAlicenseType"  
                                               id="OpenAccessCCBYNCSA" 
                                               value="CC BY-NC-SA">
                                        <label class="form-check-label" for="OpenAccessCCBYNCSA">
                                            <a href="http://creativecommons.org/licenses/by-nc-sa/4.0" target='_blank'>CC BY-NC-SA 4.0 (Namensnennung, keine kommerzielle Nutzung, Weitergabe unter gleichen Bedingungen)</a>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Allgemeine Bedingungen -->
            <div id="divCommon" class="ms-3">
                <div class="pt-3"></div>
                <hr class="hrbibb">
                <h5>Allgemeine Bedingungen</h5>
                
                <div class="container-fluid">
                    <div class="col-12">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input required-field" 
                                           type="checkbox" 
                                           id="checkBoxBerechtigung" 
                                           name="checkBoxBerechtigung">
                                    <label class="form-check-label fw-bold" for="checkBoxBerechtigung">
                                        Berechtigung:
                                    </label>
                                    Ich erkläre, dass ich selbst Autor/-in der Publikation bin bzw. als Mitglied eines Autorenteams auch im Namen meiner Mitautoren die Publikation zur Veröffentlichung einreichen darf.
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input required-field" 
                                           type="checkbox" 
                                           id="checkBoxBildrechte" 
                                           name="checkBoxBildrechte">
                                    <label class="form-check-label fw-bold" for="checkBoxBildrechte">
                                        Bildrechte:
                                    </label>
                                    Ich bestätige, dass die Rechte für eventuell enthaltene Bilder und Tabellen auch für die Zurverfügungstellung gelten.
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input required-field" 
                                           type="checkbox" 
                                           id="checkBoxHaftung" 
                                           name="checkBoxHaftung">
                                    <label class="form-check-label fw-bold" for="checkBoxHaftung">
                                        Haftung/Mitteilungspflicht:
                                    </label>
                                    Ich versichere, dass ich zur Veröffentlichung berechtigt bin und keine Rechte Dritter verletzt werden.
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input required-field" 
                                           type="checkbox" 
                                           id="checkBoxDatenschutz" 
                                           name="checkBoxDatenschutz">
                                    <label class="form-check-label fw-bold" for="checkBoxDatenschutz">
                                        Datenschutz:
                                    </label>
                                    Ich willige ein, dass meine Daten für die Veröffentlichung verarbeitet werden dürfen.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Zusätzliche Felder -->
            <div id="erstVeroeffentlichtSection" class="ms-3">
                <div class="pt-3"></div>
                <hr class="hrbibb">
                <div class="row">
                    <div class="col-3">
                        <h5>Erstveröffentlicht</h5>
                    </div>
                    <div class="col-8">
                        <textarea rows="2" 
                                  id="erstVeroeffentlichtInput"  
                                  class="form-control" 
                                  placeholder="Bitte geben Sie den Link zum Erstveröffentlichungsort an."
                                  aria-label="erstVeroeffentlicht"></textarea>
                    </div>
                </div>
            </div>

            <div id="mitteilungSection" class="ms-3">
                <div class="row">
                    <div class="col-3">
                        <h5>Mitteilung</h5>
                    </div>
                    <div class="col-8">
                        <textarea rows="2" 
                                  id="mitteilungInput"  
                                  class="form-control" 
                                  placeholder="Möchten Sie uns noch etwas mitteilen?"
                                  aria-label="mitteilung"></textarea>
                    </div>
                </div>
            </div>

            <!-- Submit Section -->
            <div class="submit-section">
                <div class="validation-message" id="validationMessage">
                    <strong>Bitte füllen Sie alle erforderlichen Felder aus:</strong>
                    <ul id="missingFields"></ul>
                </div>
                
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <small class="text-muted">* Alle markierten Felder sind Pflichtfelder</small>
                    </div>
                    <div>
                        <button type="button" id="validateButton" class="btn btn-secondary me-2">Formular prüfen</button>
                        <button type="submit" id="submitButton" class="btn btn-primary" disabled>Absenden</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('mainForm');
            const submitButton = document.getElementById('submitButton');
            const validateButton = document.getElementById('validateButton');
            const validationMessage = document.getElementById('validationMessage');
            const missingFieldsList = document.getElementById('missingFields');

            // Definiere erforderliche Felder
            const requiredCheckboxes = [
                'checkBoxBestaetigungCCBY',
                'checkCCBYSA', 
                'checkBoxBestaetigungCCBYV3',
                'checkBoxBerechtigung',
                'checkBoxBildrechte', 
                'checkBoxHaftung',
                'checkBoxDatenschutz'
            ];

            const requiredRadioGroups = [
                'OAlicenseType'
            ];

            // Validierungsfunktion
            function validateForm() {
                let isValid = true;
                let missingFields = [];

                // Entferne vorherige Hervorhebungen
                document.querySelectorAll('.invalid-field').forEach(field => {
                    field.classList.remove('invalid-field');
                });

                // Prüfe erforderliche Checkboxen
                requiredCheckboxes.forEach(checkboxId => {
                    const checkbox = document.getElementById(checkboxId);
                    if (checkbox && !checkbox.checked) {
                        isValid = false;
                        checkbox.classList.add('invalid-field');
                        const label = document.querySelector(`label[for="${checkboxId}"]`);
                        const fieldName = label ? label.textContent.trim() : checkboxId;
                        missingFields.push(fieldName);
                    }
                });

                // Prüfe erforderliche Radio-Button-Gruppen
                requiredRadioGroups.forEach(groupName => {
                    const radios = document.querySelectorAll(`input[name="${groupName}"]`);
                    const isGroupSelected = Array.from(radios).some(radio => radio.checked);
                    
                    if (!isGroupSelected) {
                        isValid = false;
                        radios.forEach(radio => radio.classList.add('invalid-field'));
                        missingFields.push('CC-Lizenz Auswahl');
                    }
                });

                // Aktualisiere UI basierend auf Validierungsergebnis
                if (isValid) {
                    validationMessage.style.display = 'none';
                    submitButton.disabled = false;
                    submitButton.textContent = 'Absenden';
                } else {
                    // Zeige Fehlermeldung
                    missingFieldsList.innerHTML = '';
                    missingFields.forEach(field => {
                        const li = document.createElement('li');
                        li.textContent = field;
                        missingFieldsList.appendChild(li);
                    });
                    validationMessage.style.display = 'block';
                    submitButton.disabled = true;
                }

                return isValid;
            }

            // Event Listeners für Live-Validierung
            document.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(input => {
                input.addEventListener('change', validateForm);
            });

            // Validate Button Event
            validateButton.addEventListener('click', function() {
                const isValid = validateForm();
                if (isValid) {
                    alert('✅ Alle erforderlichen Felder sind ausgefüllt. Sie können das Formular jetzt absenden.');
                } else {
                    // Scroll zu der ersten fehlenden Validierungsmeldung
                    validationMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            });

            // Form Submit Event
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                if (validateForm()) {
                    // Hier würdest du normalerweise die Daten an den Server senden
                    alert('✅ Formular erfolgreich abgesendet!');
                    console.log('Formulardaten:', new FormData(form));
                } else {
                    alert('❌ Bitte füllen Sie alle erforderlichen Felder aus.');
                }
            });

            // Verhindere das Verlassen der Seite bei unvollständigem Formular
            window.addEventListener('beforeunload', function(e) {
                if (!validateForm()) {
                    e.preventDefault();
                    e.returnValue = 'Sie haben noch nicht alle erforderlichen Felder ausgefüllt. Möchten Sie die Seite wirklich verlassen?';
                    return e.returnValue;
                }
            });

            // Initiale Validierung
            validateForm();
        });
    </script>
</body>
</html>
