{% block content %}
<div class="container mt-4">
    <h1>Termintyp</h1>
    {{ 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>
        <a href="{{ path('admin_appointment_types_index') }}" class="btn btn-secondary ms-2">Zurück</a>
    {{ form_end(form) }}
</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>`;
                    bootstrap.Modal.getInstance(document.getElementById('iconPickerModal')).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>`;
            }
        });
    </script>
{% endblock %}
{% endblock %}