{% extends 'admin_base.html.twig' %}

{% block title %}Zielgruppen verwalten{% endblock %}
{% block header_title %}Zielgruppen verwalten{% endblock %}

{% block stylesheets %}
<style>
    .target-group-card {
        transition: all 0.2s ease;
        border: 2px solid transparent;
    }
    
    .target-group-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .target-group-badge {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-weight: 600;
    }
    
    .target-group-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.2rem;
    }
    
    .standard-group {
        border-color: #28a745;
    }
    
    .custom-group {
        border-color: #6c757d;
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1><i class="fas fa-user-friends me-2"></i>Zielgruppen verwalten</h1>
            <div class="page-breadcrumb">
                <a href="{{ path('admin_dashboard') }}"><i class="fas fa-home"></i> Dashboard</a>
                <i class="fas fa-chevron-right"></i>
                <span>Zielgruppen</span>
            </div>
        </div>
        <button class="btn btn-primary" onclick="showCreateModal()">
            <i class="fas fa-plus me-2"></i>Neue Zielgruppe
        </button>
    </div>
</div>

<!-- Info Card -->
<div class="card mb-4">
    <div class="card-body">
        <div class="row">
            <div class="col-md-8">
                <h5 class="card-title">
                    <i class="fas fa-info-circle me-2 text-info"></i>Über Zielgruppen
                </h5>
                <p class="card-text text-muted">
                    Zielgruppen helfen dabei, Kurse zu kategorisieren und zu filtern. 
                    Standard-Zielgruppen können nicht bearbeitet oder gelöscht werden, 
                    eigene Zielgruppen können vollständig verwaltet werden.
                </p>
            </div>
            <div class="col-md-4 text-end">
                <div class="d-flex flex-column">
                    <span class="badge bg-success fs-6 mb-2">
                        <i class="fas fa-shield-alt me-1"></i>Standard-Zielgruppen
                    </span>
                    <span class="badge bg-secondary fs-6">
                        <i class="fas fa-edit me-1"></i>Eigene Zielgruppen
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Target Groups Grid -->
<div class="row" id="targetGroupsGrid">
    <div class="col-12 text-center py-5">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Lädt...</span>
        </div>
        <p class="mt-3 text-muted">Lade Zielgruppen...</p>
    </div>
</div>

<!-- Create Target Group Modal -->
<div class="modal fade" id="createTargetGroupModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus me-2"></i>Neue Zielgruppe erstellen
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="createTargetGroupForm">
                    <div class="mb-3">
                        <label for="targetGroupName" class="form-label">Name *</label>
                        <input type="text" class="form-control" id="targetGroupName" required 
                               placeholder="z.B. Senioren, Jugendliche, etc.">
                    </div>
                    <div class="mb-3">
                        <label for="targetGroupIcon" class="form-label">Icon</label>
                        <select class="form-select" id="targetGroupIcon">
                            <option value="fa-edit">✏️ Bearbeiten</option>
                            <option value="fa-user">👤 Benutzer</option>
                            <option value="fa-users">👥 Benutzer (Mehrzahl)</option>
                            <option value="fa-child">👶 Kind</option>
                            <option value="fa-baby">🍼 Baby</option>
                            <option value="fa-graduation-cap">🎓 Abschluss</option>
                            <option value="fa-heart">❤️ Herz</option>
                            <option value="fa-star">⭐ Stern</option>
                            <option value="fa-trophy">🏆 Trophäe</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="targetGroupColor" class="form-label">Farbe</label>
                        <input type="color" class="form-control form-control-color" id="targetGroupColor" 
                               value="#6c757d" title="Farbe wählen">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Abbrechen
                </button>
                <button type="button" class="btn btn-primary" onclick="createTargetGroup()">
                    <i class="fas fa-save me-2"></i>Erstellen
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
    let targetGroups = [];
    
    document.addEventListener('DOMContentLoaded', function() {
        loadTargetGroups();
    });
    
    async function loadTargetGroups() {
        try {
            const response = await fetch('{{ path('admin_target_groups_api_list') }}');
            const data = await response.json();
            
            if (data.success) {
                targetGroups = data.targetGroups;
                renderTargetGroups(targetGroups);
            } else {
                showError('Fehler beim Laden der Zielgruppen');
            }
        } catch (error) {
            console.error('Load error:', error);
            showError('Netzwerkfehler beim Laden der Zielgruppen');
        }
    }
    
    function renderTargetGroups(groups) {
        const grid = document.getElementById('targetGroupsGrid');
        
        if (groups.length === 0) {
            grid.innerHTML = `
                <div class="col-12 text-center py-5">
                    <i class="fas fa-user-friends text-muted" style="font-size: 3rem;"></i>
                    <p class="mt-3 text-muted mb-0">Keine Zielgruppen gefunden</p>
                </div>
            `;
            return;
        }
        
        grid.innerHTML = groups.map(group => `
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card target-group-card ${group.isCustom ? 'custom-group' : 'standard-group'}">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="target-group-icon me-3" style="background-color: ${group.color};">
                                <i class="fas ${group.icon}"></i>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="card-title mb-0">${group.name}</h6>
                                <small class="text-muted">
                                    ${group.isCustom ? 'Eigene Zielgruppe' : 'Standard-Zielgruppe'}
                                </small>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="target-group-badge" style="background-color: ${group.color}; color: white;">
                                <i class="fas ${group.icon} me-1"></i>${group.name}
                            </span>
                            
                            <div class="btn-group btn-group-sm">
                                ${group.isCustom ? `
                                    <button class="btn btn-outline-primary" onclick="editTargetGroup(${group.id})" title="Bearbeiten">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-outline-danger" onclick="deleteTargetGroup(${group.id})" title="Löschen">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                ` : `
                                    <span class="badge bg-success">
                                        <i class="fas fa-shield-alt me-1"></i>Standard
                                    </span>
                                `}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `).join('');
    }
    
    function showCreateModal() {
        const modal = new bootstrap.Modal(document.getElementById('createTargetGroupModal'));
        modal.show();
    }
    
    async function createTargetGroup() {
        const name = document.getElementById('targetGroupName').value.trim();
        const icon = document.getElementById('targetGroupIcon').value;
        const color = document.getElementById('targetGroupColor').value;
        
        if (!name) {
            alert('Bitte geben Sie einen Namen ein');
            return;
        }
        
        try {
            const response = await fetch('{{ path('admin_target_groups_api_create') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    name: name,
                    icon: icon,
                    color: color
                })
            });
            
            const result = await response.json();
            
            if (result.success) {
                // Schließe Modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('createTargetGroupModal'));
                modal.hide();
                
                // Formular zurücksetzen
                document.getElementById('createTargetGroupForm').reset();
                document.getElementById('targetGroupColor').value = '#6c757d';
                
                // Lade Zielgruppen neu
                loadTargetGroups();
                
                // Zeige Erfolgsmeldung
                showSuccess('Zielgruppe erfolgreich erstellt');
            } else {
                showError(result.error || 'Fehler beim Erstellen der Zielgruppe');
            }
        } catch (error) {
            console.error('Create error:', error);
            showError('Netzwerkfehler beim Erstellen der Zielgruppe');
        }
    }
    
    async function deleteTargetGroup(id) {
        const group = targetGroups.find(g => g.id === id);
        if (!group) return;
        
        if (confirm(`Möchten Sie die Zielgruppe "${group.name}" wirklich löschen?`)) {
            try {
                const response = await fetch('{{ path('admin_target_groups_api_delete', {'id': 'PLACEHOLDER'}) }}'.replace('PLACEHOLDER', id), {
                    method: 'DELETE'
                });
                
                const result = await response.json();
                
                if (result.success) {
                    loadTargetGroups();
                    showSuccess('Zielgruppe erfolgreich gelöscht');
                } else {
                    showError(result.error || 'Fehler beim Löschen der Zielgruppe');
                }
            } catch (error) {
                console.error('Delete error:', error);
                showError('Netzwerkfehler beim Löschen der Zielgruppe');
            }
        }
    }
    
    async function editTargetGroup(id) {
        const group = targetGroups.find(g => g.id === id);
        if (!group) return;

        // Erstelle Modal für Bearbeitung
        const modalHtml = `
            <div class="modal fade" id="editTargetGroupModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                <i class="fas fa-edit me-2"></i>Zielgruppe bearbeiten
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <form id="editTargetGroupForm">
                                <div class="mb-3">
                                    <label for="editTargetGroupName" class="form-label">Name *</label>
                                    <input type="text" class="form-control" id="editTargetGroupName" required 
                                           value="${group.name}" placeholder="z.B. Senioren, Jugendliche, etc.">
                                </div>
                                <div class="mb-3">
                                    <label for="editTargetGroupIcon" class="form-label">Icon</label>
                                    <select class="form-select" id="editTargetGroupIcon">
                                        <option value="fa-edit" ${group.icon === 'fa-edit' ? 'selected' : ''}>✏️ Bearbeiten</option>
                                        <option value="fa-user" ${group.icon === 'fa-user' ? 'selected' : ''}>👤 Benutzer</option>
                                        <option value="fa-users" ${group.icon === 'fa-users' ? 'selected' : ''}>👥 Benutzer (Mehrzahl)</option>
                                        <option value="fa-child" ${group.icon === 'fa-child' ? 'selected' : ''}>👶 Kind</option>
                                        <option value="fa-baby" ${group.icon === 'fa-baby' ? 'selected' : ''}>🍼 Baby</option>
                                        <option value="fa-graduation-cap" ${group.icon === 'fa-graduation-cap' ? 'selected' : ''}>🎓 Abschluss</option>
                                        <option value="fa-heart" ${group.icon === 'fa-heart' ? 'selected' : ''}>❤️ Herz</option>
                                        <option value="fa-star" ${group.icon === 'fa-star' ? 'selected' : ''}>⭐ Stern</option>
                                        <option value="fa-trophy" ${group.icon === 'fa-trophy' ? 'selected' : ''}>🏆 Trophäe</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="editTargetGroupColor" class="form-label">Farbe</label>
                                    <input type="color" class="form-control form-control-color" id="editTargetGroupColor" 
                                           value="${group.color || '#6c757d'}" title="Farbe wählen">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                <i class="fas fa-times me-2"></i>Abbrechen
                            </button>
                            <button type="button" class="btn btn-primary" onclick="updateTargetGroup(${id})">
                                <i class="fas fa-save me-2"></i>Speichern
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;

        // Entferne existierendes Modal falls vorhanden
        const existingModal = document.getElementById('editTargetGroupModal');
        if (existingModal) {
            existingModal.remove();
        }

        // Füge neues Modal hinzu
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        
        // Zeige Modal
        const modal = new bootstrap.Modal(document.getElementById('editTargetGroupModal'));
        modal.show();
    }
    
    async function updateTargetGroup(id) {
        const name = document.getElementById('editTargetGroupName').value.trim();
        const icon = document.getElementById('editTargetGroupIcon').value;
        const color = document.getElementById('editTargetGroupColor').value;
        
        if (!name) {
            alert('Bitte geben Sie einen Namen ein');
            return;
        }
        
        try {
            const response = await fetch('{{ path('admin_target_groups_api_update', {'id': 'PLACEHOLDER'}) }}'.replace('PLACEHOLDER', id), {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    name: name,
                    icon: icon,
                    color: color
                })
            });
            
            const result = await response.json();
            
            if (result.success) {
                // Schließe Modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('editTargetGroupModal'));
                modal.hide();
                
                // Lade Zielgruppen neu
                loadTargetGroups();
                
                // Zeige Erfolgsmeldung
                showSuccess('Zielgruppe erfolgreich aktualisiert');
            } else {
                showError(result.error || 'Fehler beim Aktualisieren der Zielgruppe');
            }
        } catch (error) {
            console.error('Update error:', error);
            showError('Netzwerkfehler beim Aktualisieren der Zielgruppe');
        }
    }
    
    function showError(message) {
        // Toast-Notification für Fehler
        const toastHtml = `
            <div class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="fas fa-exclamation-circle me-2"></i>${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                </div>
            </div>
        `;
        
        document.querySelectorAll('.toast').forEach(toast => toast.remove());
        document.body.insertAdjacentHTML('beforeend', toastHtml);
        
        const toastElement = document.querySelector('.toast');
        const toast = new bootstrap.Toast(toastElement);
        toast.show();
        
        setTimeout(() => {
            if (toastElement) {
                toastElement.remove();
            }
        }, 5000);
    }
    
    function showSuccess(message) {
        // Toast-Notification für Erfolg
        const toastHtml = `
            <div class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="fas fa-check-circle me-2"></i>${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                </div>
            </div>
        `;
        
        document.querySelectorAll('.toast').forEach(toast => toast.remove());
        document.body.insertAdjacentHTML('beforeend', toastHtml);
        
        const toastElement = document.querySelector('.toast');
        const toast = new bootstrap.Toast(toastElement);
        toast.show();
        
        setTimeout(() => {
            if (toastElement) {
                toastElement.remove();
            }
        }, 5000);
    }
</script>
{% endblock %}