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

{% block title %}Termintypen verwalten{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5>Termintypen verwalten</h5>
                    <a href="#" class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#typeModal">Neuer Typ</a>
                </div>
                <div class="card-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Farbe</th>
                                <th>Icon</th>
                                <th>Aktionen</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for type in types %}
                            <tr>
                                <td>{{ type.name }}</td>
                                <td>
                                    <span class="color-preview" style="background-color: {{ type.color }}; width: 20px; height: 20px; display: inline-block; border-radius: 3px;"></span>
                                    {{ type.color }}
                                </td>
                                <td><i class="fas {{ type.icon }}"></i></td>
                                <td>
                                    <a href="{{ path('admin_appointment_types_edit', {id: type.id}) }}" class="btn btn-sm btn-primary">Bearbeiten</a>
                                    <a href="{{ path('admin_appointment_types_delete', {id: type.id}) }}" class="btn btn-sm btn-danger" onclick="return confirm('Wirklich löschen?')">Löschen</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal für neue Termintypen -->
<div class="modal fade" id="typeModal" tabindex="-1" aria-labelledby="typeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="typeModalLabel">Neuer Termintyp</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
            </div>
            <div class="modal-body">
                {{ form_start(form) }}
                    <div class="mb-3">
                        {{ form_label(form.name) }}
                        {{ form_widget(form.name, {'attr': {'class': 'form-control'}}) }}
                        {{ form_errors(form.name) }}
                    </div>
                    <div class="mb-3">
                        {{ form_label(form.color) }}
                        {{ form_widget(form.color, {'attr': {'class': 'form-control form-control-color', 'style': 'width: 5rem; padding: 0;'}}) }}
                        {{ form_errors(form.color) }}
                    </div>
                    <div class="mb-3">
                        {{ form_label(form.icon) }}
                        <div class="input-group">
                            {{ form_widget(form.icon, {'attr': {'class': 'form-control', 'readonly': 'readonly'}}) }}
                            <button class="btn btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#iconPickerModal">
                                <i class="fas fa-icons"></i> Icon auswählen
                            </button>
                        </div>
                        <div id="iconPreview" class="mt-2">
                            <i class="fas fa-wrench" style="font-size: 2em;"></i>
                        </div>
                        {{ form_errors(form.icon) }}
                    </div>
                    <button class="btn btn-success">Speichern</button>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
</div>

<!-- Icon Picker Modal -->
<div class="modal fade" id="iconPickerModal" tabindex="-1" aria-labelledby="iconPickerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="iconPickerModalLabel">Icon auswählen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="iconSearch" placeholder="Icon suchen...">
                </div>
                <div class="icon-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; max-height: 400px; overflow-y: auto;">
                    <!-- Icons werden dynamisch eingefügt -->
                </div>
            </div>
        </div>
    </div>
</div>

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const iconInput = document.getElementById('{{ form.icon.vars.id }}');
            const iconPreview = document.getElementById('iconPreview');
            const iconSearch = document.getElementById('iconSearch');
            const iconGrid = document.querySelector('.icon-grid');
            
            // FontAwesome Icons Liste
            const icons = [
                'fa-calendar', 'fa-clock', 'fa-user', 'fa-users', 'fa-building', 'fa-home',
                'fa-car', 'fa-truck', 'fa-plane', 'fa-ship', 'fa-train', 'fa-bus',
                'fa-phone', 'fa-envelope', 'fa-comment', 'fa-comments', 'fa-file',
                'fa-folder', 'fa-image', 'fa-video', 'fa-music', 'fa-camera',
                'fa-wrench', 'fa-tools', 'fa-cog', 'fa-cogs', 'fa-hammer',
                'fa-screwdriver', 'fa-ruler', 'fa-pencil', 'fa-pen', 'fa-paint-brush',
                'fa-trash', 'fa-recycle', 'fa-broom', 'fa-broom', 'fa-broom',
                'fa-utensils', 'fa-coffee', 'fa-beer', 'fa-glass-martini',
                'fa-heart', 'fa-star', 'fa-gift', 'fa-bell', 'fa-flag',
                'fa-map-marker', 'fa-map', 'fa-compass', 'fa-location-arrow',
                'fa-shopping-cart', 'fa-credit-card', 'fa-money-bill', 'fa-coins',
                'fa-chart-line', 'fa-chart-bar', 'fa-chart-pie', 'fa-chart-area',
                'fa-tasks', 'fa-clipboard', 'fa-clipboard-list', 'fa-clipboard-check',
                'fa-check', 'fa-times', 'fa-plus', 'fa-minus', 'fa-equals',
                'fa-percentage', 'fa-infinity', 'fa-sync', 'fa-redo', 'fa-undo',
                'fa-arrow-right', 'fa-arrow-left', 'fa-arrow-up', 'fa-arrow-down',
                'fa-external-link', 'fa-external-link-alt', 'fa-external-link-square',
                'fa-external-link-square-alt', 'fa-link', 'fa-unlink', 'fa-chain',
                'fa-chain-broken', 'fa-lock', 'fa-unlock', 'fa-key', 'fa-fingerprint',
                'fa-shield-alt', 'fa-shield', 'fa-shield-virus', 'fa-virus',
                'fa-virus-slash', 'fa-biohazard', 'fa-radiation', 'fa-radiation-alt',
                'fa-fire', 'fa-fire-alt', 'fa-burn', 'fa-flame', 'fa-snowflake',
                'fa-sun', 'fa-moon', 'fa-cloud', 'fa-cloud-sun', 'fa-cloud-moon',
                'fa-cloud-rain', 'fa-cloud-showers-heavy', 'fa-poo-storm',
                'fa-bolt', 'fa-bolt-lightning', 'fa-wind', 'fa-tornado',
                'fa-rainbow', 'fa-umbrella', 'fa-umbrella-beach', 'fa-tshirt',
                'fa-socks', 'fa-shoe-prints', 'fa-hat-cowboy', 'fa-hat-wizard',
                'fa-glasses', 'fa-mask', 'fa-theater-masks', 'fa-user-tie',
                'fa-user-ninja', 'fa-user-astronaut', 'fa-user-secret',
                'fa-user-graduate', 'fa-user-md', 'fa-user-nurse', 'fa-user-injured',
                'fa-user-cog', 'fa-user-shield', 'fa-user-lock', 'fa-user-check',
                'fa-user-times', 'fa-user-slash', 'fa-user-plus', 'fa-user-minus',
                'fa-user-edit', 'fa-user-clock', 'fa-user-tag', 'fa-user-friends'
            ];

            // Icons in Grid einfügen
            icons.forEach(icon => {
                const iconDiv = document.createElement('div');
                iconDiv.className = 'icon-item text-center p-2 border rounded';
                iconDiv.style.cursor = 'pointer';
                iconDiv.innerHTML = `<i class="fas ${icon} fa-2x"></i><br><small>${icon}</small>`;
                
                iconDiv.addEventListener('click', function() {
                    iconInput.value = icon;
                    iconPreview.innerHTML = `<i class="fas ${icon} fa-2x"></i>`;
                    
                    // Icon Picker Modal schließen
                    const iconPickerModal = document.getElementById('iconPickerModal');
                    const bsIconPickerModal = bootstrap.Modal.getInstance(iconPickerModal);
                    if (bsIconPickerModal) {
                        bsIconPickerModal.hide();
                    }
                });
                
                iconDiv.addEventListener('mouseover', function() {
                    this.style.backgroundColor = '#f8f9fa';
                });
                
                iconDiv.addEventListener('mouseout', function() {
                    this.style.backgroundColor = '';
                });
                
                iconGrid.appendChild(iconDiv);
            });

            // Icon Suche
            iconSearch.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                const iconItems = iconGrid.getElementsByClassName('icon-item');
                
                Array.from(iconItems).forEach(item => {
                    const iconName = item.querySelector('small').textContent;
                    item.style.display = iconName.includes(searchTerm) ? '' : 'none';
                });
            });

            // Icon Preview aktualisieren wenn sich der Input ändert
            iconInput.addEventListener('input', function() {
                iconPreview.innerHTML = `<i class="fas ${this.value} fa-2x"></i>`;
            });

            // Initial Preview
            if (iconInput.value) {
                iconPreview.innerHTML = `<i class="fas ${iconInput.value} fa-2x"></i>`;
            }

            // Event Listener für das Icon Picker Modal
            const iconPickerModal = document.getElementById('iconPickerModal');
            if (iconPickerModal) {
                iconPickerModal.addEventListener('hidden.bs.modal', function () {
                    // Entferne den zusätzlichen Backdrop
                    const backdrops = document.querySelectorAll('.modal-backdrop');
                    if (backdrops.length > 1) {
                        backdrops[backdrops.length - 1].remove();
                    }
                    
                    // Stelle sicher, dass das Hauptmodal sichtbar ist
                    const typeModal = document.getElementById('typeModal');
                    if (typeModal) {
                        typeModal.style.display = 'block';
                        typeModal.classList.add('show');
                    }
                });
            }
        });
    </script>
{% endblock %}
{% endblock %}