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

{% block title %}Správa služeb - Přehled poskytovatele{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .service-card {
            position: relative;
        }

        .service-card input[type="checkbox"] {
            display: none;
        }

        .service-card label {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 25px 15px;
            background: white;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            min-height: 140px;
            position: relative;
            overflow: hidden;
        }

        .service-card label:hover {
            border-color: #667eea;
            background: #f7fafc;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
        }

        .service-card input[type="checkbox"]:checked + label {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-color: #667eea;
            color: white;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

        .service-card input[type="checkbox"]:checked + label::before {
            content: '✓';
            position: absolute;
            top: 10px;
            right: 10px;
            width: 24px;
            height: 24px;
            background: white;
            color: #667eea;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
        }

        .service-icon-display {
            font-size: 2.5rem;
            margin-bottom: 10px;
            filter: grayscale(50%);
            transition: filter 0.3s ease;
        }

        .service-card input[type="checkbox"]:checked + label .service-icon-display {
            filter: grayscale(0%) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }

        .service-name-display {
            font-size: 1rem;
            font-weight: 600;
            color: #2d3748;
            transition: color 0.3s ease;
        }

        .service-card input[type="checkbox"]:checked + label .service-name-display {
            color: white;
        }

        .section-description {
            color: #718096;
            font-size: 1rem;
            margin-bottom: 10px;
        }

        .services-count {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            margin-left: 10px;
        }

        .no-data {
            padding: 40px 20px;
            text-align: center;
            color: #a0aec0;
            background: #f7fafc;
            border-radius: 8px;
            border: 2px dashed #cbd5e0;
        }

        .services-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 15px;
        }

        .service-tag-large {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 25px;
            font-size: 1rem;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

        .service-icon-large {
            font-size: 1.3rem;
        }

        @media (max-width: 768px) {
            .services-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                gap: 12px;
            }

            .service-card label {
                padding: 20px 10px;
                min-height: 120px;
            }

            .service-icon-display {
                font-size: 2rem;
            }

            .service-name-display {
                font-size: 0.9rem;
            }
        }
    </style>
{% endblock %}

{% block body %}
    <section class="admin-header">
        <div class="container">
            <div class="admin-header-content">
                <div>
                    <h1>Spravovat služby</h1>
                    <p>Vyberte služby, které nabízíte zákazníkům</p>
                </div>
                <div class="admin-header-actions">
                    <a href="{{ path('app_provider_dashboard') }}" class="btn btn-secondary">Zpět na dashboard</a>
                </div>
            </div>
        </div>
    </section>

    <section class="admin-content">
        <div class="container">
            <div class="admin-grid">
                <aside class="admin-sidebar">
                    <nav class="admin-nav">
                        <a href="{{ path('app_provider_dashboard') }}" class="admin-nav-item">
                            <span class="nav-icon">📊</span>
                            Přehled
                        </a>
                        <a href="{{ path('app_provider_profile_edit') }}" class="admin-nav-item">
                            <span class="nav-icon">👤</span>
                            Upravit profil
                        </a>
                        <a href="{{ path('app_provider_services_manage') }}" class="admin-nav-item active">
                            <span class="nav-icon">🛠️</span>
                            Spravovat služby
                        </a>
                        <a href="{{ path('app_provider_bookings') }}" class="admin-nav-item">
                            <span class="nav-icon">📅</span>
                            Moje rezervace
                        </a>
                        <a href="{{ path('app_staff_detail', {id: serviceProvider.id}) }}" class="admin-nav-item">
                            <span class="nav-icon">🏠</span>
                            Zobrazit profil
                        </a>
                    </nav>
                </aside>

                <main class="admin-main">
                    <div class="admin-section">
                        <h2>Dostupné služby</h2>
                        <p class="section-description">Klikněte na služby, které jste kvalifikováni a ochotni poskytovat. Tyto služby se zobrazí na vašem veřejném profilu.</p>

                        {{ form_start(form, {'attr': {'class': 'admin-form services-form'}}) }}
                            <div class="services-grid">
                                {% for choice in form.services %}
                                    <div class="service-card">
                                        {{ form_widget(choice) }}
                                        {{ form_label(choice, null, {
                                            'label_html': true,
                                            'label_attr': {'class': 'service-label'}
                                        }) }}
                                    </div>
                                {% endfor %}
                            </div>
                            {{ form_errors(form.services) }}

                            <div class="form-actions">
                                <button type="submit" class="btn btn-primary btn-large">Aktualizovat služby</button>
                                <a href="{{ path('app_provider_dashboard') }}" class="btn btn-secondary btn-large">Zrušit</a>
                            </div>
                        {{ form_end(form) }}
                    </div>

                    <div class="admin-section">
                        <h3>
                            Aktuálně vybrané služby
                            <span class="services-count">{{ currentServices|length }}</span>
                        </h3>
                        {% if currentServices|length > 0 %}
                            <div class="services-tags">
                                {% for service in currentServices %}
                                    <span class="service-tag-large">
                                        <span class="service-icon-large">{{ service.icon }}</span>
                                        <span class="service-name">{{ service.name }}</span>
                                    </span>
                                {% endfor %}
                            </div>
                        {% else %}
                            <p class="no-data">Zatím nejsou vybrány žádné služby. Vyberte alespoň jednu službu výše, abyste mohli začít přijímat rezervace.</p>
                        {% endif %}
                    </div>
                </main>
            </div>
        </div>
    </section>

    {% block javascripts %}
        {{ parent() }}
        <script>
            // Split label text into icon and name for better styling
            document.addEventListener('DOMContentLoaded', function() {
                const labels = document.querySelectorAll('.service-label');
                labels.forEach(label => {
                    const text = label.textContent.trim();
                    // Split emoji icon and name (emoji is typically first character or two)
                    const iconMatch = text.match(/^(\p{Emoji}+)\s*(.+)$/u);
                    if (iconMatch) {
                        const icon = iconMatch[1];
                        const name = iconMatch[2];
                        label.innerHTML = `
                            <span class="service-icon-display">${icon}</span>
                            <span class="service-name-display">${name}</span>
                        `;
                    }
                });
            });
        </script>
    {% endblock %}
{% endblock %}