SWE/swe-b1-a-dev/webseite/dashboard/components/modals/subject-modal.php

<div class="modal-overlay fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="modal fixed top-1/2 left-1/2 bg-white rounded-xl shadow-lg p-6 w-[800px] max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-6">
            <h3 class="text-xl font-semibold">Neues Fach erstellen</h3>
            <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <form id="subjectForm" onsubmit="handleSubjectSubmit(event)">
            <div class="space-y-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Name des Fachs</label>
                    <input type="text" 
                           name="displayName" 
                           required
                           class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg enabled:hover:border-gray-400"
                           placeholder="z.B. Mathematik">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Beschreibung</label>
                    <textarea name="description" 
                          required
                          class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg enabled:hover:border-gray-400"
                          rows="4"
                          placeholder="Kurze Beschreibung des Fachs"></textarea>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Farbe</label>
                    <input type="color" name="color" required
                        value="#3b82f6"
                        class="w-full h-14 px-1 py-1 rounded-lg">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Icon auswählen</label>
                    <div class="grid grid-cols-6 gap-4 p-4 border rounded-lg bg-gray-50">
                        <?php
                        $icons = [
                            ['fa-book', 'Buch'],
                            ['fa-square-root-alt', 'Mathematik'],
                            ['fa-flask', 'Naturwissenschaften'],
                            ['fa-language', 'Sprachen'],
                            ['fa-music', 'Musik'],
                            ['fa-palette', 'Kunst'],
                            ['fa-dumbbell', 'Sport'],
                            ['fa-globe', 'Erdkunde'],
                            ['fa-clock', 'Geschichte'],
                            ['fa-microscope', 'Biologie'],
                            ['fa-atom', 'Physik'],
                            ['fa-vial', 'Chemie'],
                            ['fa-computer', 'Informatik'],
                            ['fa-calculator', 'Rechnen'],
                            ['fa-pen', 'Schreiben'],
                            ['fa-theater-masks', 'Theater'],
                            ['fa-draw-polygon', 'Geometrie'],
                            ['fa-tablets', 'Medizin']
                        ];

                        foreach ($icons as $index => [$icon, $label]) {
                            echo "<div class='icon-option cursor-pointer p-4 rounded-lg hover:bg-white hover:shadow transition-all text-center' 
                                      onclick='selectIcon(this, \"$icon\")' data-icon='$icon'>
                                    <i class='fas $icon text-2xl mb-2'></i>
                                    <div class='text-xs text-gray-600'>$label</div>
                                  </div>";
                        }
                        ?>
                    </div>
                    <input type="hidden" name="icon" id="selectedIcon">
                </div>
            </div>

            <div class="mt-8 flex justify-end gap-3">
                <button type="button" onclick="closeModal()"
                    class="px-6 py-3 text-gray-600 hover:text-gray-800 text-lg">
                    Abbrechen
                </button>
                <button type="submit"
                    class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-lg">
                    Fach erstellen
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function closeModal() {
    const modalOverlay = document.querySelector('.modal-overlay');
    modalOverlay.classList.add('hidden');
}

window.selectIcon = function(element, iconName) {
    // Remove active class from all icons
    document.querySelectorAll('.icon-option').forEach(el => {
        el.classList.remove('bg-blue-50', 'ring-2', 'ring-blue-500');
    });
    
    // Add active class to selected icon
    element.classList.add('bg-blue-50', 'ring-2', 'ring-blue-500');
    
    // Set the hidden input value and log it
    const iconInput = document.getElementById('selectedIcon');
    iconInput.value = iconName;
    console.log('Icon selected:', iconInput.value);

    // Visual feedback
    element.classList.add('scale-105');
    setTimeout(() => {
        element.classList.remove('scale-105');
    }, 200);
}

function handleSubjectSubmit(event) {
    event.preventDefault();

    const form = event.target;
    const formData = new FormData(form);
    
    // Get values and validate only required fields
    const displayName = formData.get('displayName').trim();
    const description = formData.get('description').trim();
    
    // Validate only name and description
    if (!displayName) {
        alert('Bitte geben Sie einen Namen für das Fach ein');
        return;
    }
    
    if (!description) {
        alert('Bitte geben Sie eine Beschreibung ein');
        return;
    }

    // Always set a default icon if none is selected
    if (!formData.get('icon')) {
        formData.set('icon', 'fa-book'); // Default icon
    }

    // Send AJAX request
    fetch('../api/create-subject.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closeModal();
            window.location.reload();
        } else {
            alert('Fehler beim Erstellen des Fachs: ' + (data.message || 'Unbekannter Fehler'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Ein Fehler ist aufgetreten');
    });
}

// Initialize first icon selection on page load
/*
document.addEventListener('DOMContentLoaded', function() {
    const firstIcon = document.querySelector('.icon-option');
    if (firstIcon) {
        const iconName = firstIcon.getAttribute('data-icon');
        selectIcon(firstIcon, iconName);
    }
});
*/
</script>

<style>
    .icon-option {
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .icon-option:hover {
        transform: translateY(-2px);
        background-color: #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .icon-option.selected {
        background-color: #EBF5FF;
        border-color: #3B82F6;
    }

    .icon-option i {
        transition: all 0.2s ease;
    }

    .icon-option:hover i {
        transform: scale(1.1);
    }
</style>