{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}Services POS{% endblock %}

{% block content %}
<div class="space-y-4 sm:space-y-6">
    {# Header #}
    <div class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg shadow-lg p-4 sm:p-6 text-white">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4">
            <div>
                <h1 class="text-2xl sm:text-3xl font-bold"><i class="fas fa-concierge-bell mr-2 sm:mr-3"></i>Services</h1>
                <p class="mt-1 sm:mt-2 text-indigo-100 text-sm sm:text-base">Catalogue de services de {{ company.name }}</p>
            </div>
            <div class="flex flex-wrap gap-2">
                <div class="inline-flex rounded-md shadow-sm" role="group">
                    <a href="{{ path('manager_pos_services_index', filters|merge({view: 'table'})) }}"
                       class="px-3 py-2 text-sm font-medium {{ viewMode == 'table' ? 'bg-white text-indigo-700' : 'bg-white/20 text-white hover:bg-white/30' }} rounded-l-lg transition-colors">
                        <i class="fas fa-table"></i>
                    </a>
                    <a href="{{ path('manager_pos_services_index', filters|merge({view: 'grid'})) }}"
                       class="px-3 py-2 text-sm font-medium {{ viewMode == 'grid' ? 'bg-white text-indigo-700' : 'bg-white/20 text-white hover:bg-white/30' }} rounded-r-lg transition-colors">
                        <i class="fas fa-th-large"></i>
                    </a>
                </div>
                <a href="{{ path('manager_pos_services_create') }}"
                   class="inline-flex items-center px-3 py-2 bg-white text-indigo-700 rounded-lg font-medium text-sm hover:bg-indigo-50 transition-colors">
                    <i class="fas fa-plus mr-2"></i><span class="hidden sm:inline">Nouveau service</span><span class="sm:hidden">Nouveau</span>
                </a>
            </div>
        </div>
    </div>

    {# Stats #}
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-3 sm:p-4 text-center">
            <div class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">{{ statistics.total|default(0) }}</div>
            <div class="text-[10px] sm:text-xs text-gray-500 dark:text-gray-400">Total</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-3 sm:p-4 text-center">
            <div class="text-xl sm:text-2xl font-bold text-green-600">{{ statistics.active|default(0) }}</div>
            <div class="text-[10px] sm:text-xs text-gray-500 dark:text-gray-400">Actifs</div>
        </div>
        {% for typeName, typeCount in statistics.byType|default({}) %}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-3 sm:p-4 text-center">
            <div class="text-xl sm:text-2xl font-bold text-indigo-600">{{ typeCount }}</div>
            <div class="text-[10px] sm:text-xs text-gray-500 dark:text-gray-400">{{ typeName }}</div>
        </div>
        {% endfor %}
    </div>

    {# Filtres #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-3 sm:p-4">
        <form method="get" action="{{ path('manager_pos_services_index') }}" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-4">
            <input type="hidden" name="view" value="{{ viewMode }}">
            <div>
                <input type="text" name="search" value="{{ filters.search|default('') }}" placeholder="Rechercher (nom, SKU)..."
                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-indigo-500 focus:border-indigo-500">
            </div>
            <div>
                <select name="categoryId" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="">Toutes les categories</option>
                    {% for cat in categories %}
                        <option value="{{ cat.id }}" {{ filters.categoryId|default('') == cat.id ? 'selected' : '' }}>{{ cat.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <select name="serviceType" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="">Tous les types</option>
                    <option value="standard" {{ filters.serviceType|default('') == 'standard' ? 'selected' : '' }}>Standard</option>
                    <option value="consultation" {{ filters.serviceType|default('') == 'consultation' ? 'selected' : '' }}>Consultation</option>
                    <option value="maintenance" {{ filters.serviceType|default('') == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                    <option value="installation" {{ filters.serviceType|default('') == 'installation' ? 'selected' : '' }}>Installation</option>
                    <option value="reparation" {{ filters.serviceType|default('') == 'reparation' ? 'selected' : '' }}>Reparation</option>
                    <option value="sur_mesure" {{ filters.serviceType|default('') == 'sur_mesure' ? 'selected' : '' }}>Sur mesure</option>
                    <option value="livraison" {{ filters.serviceType|default('') == 'livraison' ? 'selected' : '' }}>Livraison</option>
                    <option value="couture" {{ filters.serviceType|default('') == 'couture' ? 'selected' : '' }}>Couture</option>
                </select>
            </div>
            <div>
                <select name="isActive" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="">Tous les statuts</option>
                    <option value="1" {{ filters.isActive|default('') == '1' ? 'selected' : '' }}>Actifs</option>
                    <option value="0" {{ filters.isActive|default('') == '0' ? 'selected' : '' }}>Inactifs</option>
                </select>
            </div>
            <div class="flex gap-2">
                <button type="submit" class="flex-1 sm:flex-none inline-flex items-center justify-center px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors">
                    <i class="fas fa-search mr-2"></i>Filtrer
                </button>
                <a href="{{ path('manager_pos_services_index') }}" class="inline-flex items-center justify-center px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-lg text-sm hover:bg-gray-300 transition-colors">
                    <i class="fas fa-times mr-1"></i>Reset
                </a>
            </div>
        </form>
    </div>

    {# Contenu #}
    {% if services|length > 0 %}
        {% if viewMode == 'grid' %}
            {# Vue Grille #}
            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4">
                {% for service in services %}
                    <a href="{{ path('manager_pos_services_show', {id: service.id}) }}" class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow overflow-hidden group">
                        <div class="p-3 sm:p-4">
                            <div class="flex items-start justify-between gap-2 mb-2">
                                <h3 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 truncate">{{ service.name }}</h3>
                                {% if service.isActive %}
                                    <span class="flex-shrink-0 w-2 h-2 rounded-full bg-green-500 mt-1.5"></span>
                                {% else %}
                                    <span class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-400 mt-1.5"></span>
                                {% endif %}
                            </div>
                            <div class="text-lg sm:text-xl font-bold text-indigo-600 dark:text-indigo-400 mb-2">{{ service.price|number_format(0, ',', ' ') }} FCFA</div>
                            <div class="flex flex-wrap gap-1 mb-2">
                                {% if service.category %}
                                    <span class="inline-block px-2 py-0.5 rounded text-[10px] sm:text-xs bg-{{ service.category.color|default('gray') }}-100 text-{{ service.category.color|default('gray') }}-800 dark:bg-{{ service.category.color|default('gray') }}-900/30 dark:text-{{ service.category.color|default('gray') }}-400">{{ service.category.name }}</span>
                                {% endif %}
                                {% if service.serviceType %}
                                    <span class="inline-block px-2 py-0.5 rounded text-[10px] sm:text-xs bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400">{{ service.serviceType }}</span>
                                {% endif %}
                            </div>
                            {% if service.estimatedDuration %}
                                <div class="text-[10px] sm:text-xs text-gray-500 dark:text-gray-400">
                                    <i class="fas fa-clock mr-1"></i>{{ service.estimatedDuration }} min
                                </div>
                            {% endif %}
                        </div>
                    </a>
                {% endfor %}
            </div>
        {% else %}
            {# Vue Table - masquee sur mobile, remplacee par cards #}
            <div class="hidden sm:block bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Service</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Categorie</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Type</th>
                                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Prix</th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Duree</th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Statut</th>
                                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                            {% for service in services %}
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                <td class="px-4 py-3">
                                    <a href="{{ path('manager_pos_services_show', {id: service.id}) }}" class="text-sm font-medium text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400">{{ service.name }}</a>
                                    {% if service.sku %}<div class="text-xs text-gray-500 font-mono">{{ service.sku }}</div>{% endif %}
                                </td>
                                <td class="px-4 py-3">
                                    {% if service.category %}
                                        <span class="inline-block px-2 py-0.5 rounded text-xs bg-{{ service.category.color|default('gray') }}-100 text-{{ service.category.color|default('gray') }}-800">{{ service.category.name }}</span>
                                    {% else %}
                                        <span class="text-xs text-gray-400">—</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3">
                                    {% if service.serviceType %}
                                        <span class="inline-block px-2 py-0.5 rounded text-xs bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400">{{ service.serviceType }}</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-right text-sm font-semibold text-gray-900 dark:text-white">{{ service.price|number_format(0, ',', ' ') }} FCFA</td>
                                <td class="px-4 py-3 text-center text-sm text-gray-600 dark:text-gray-400">
                                    {% if service.estimatedDuration %}<i class="fas fa-clock mr-1 text-xs"></i>{{ service.estimatedDuration }} min{% else %}—{% endif %}
                                </td>
                                <td class="px-4 py-3 text-center">
                                    {% if service.isActive %}
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">Actif</span>
                                    {% else %}
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-600 dark:text-gray-300">Inactif</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 py-3 text-right">
                                    <a href="{{ path('manager_pos_services_edit', {id: service.id}) }}" class="text-indigo-600 hover:text-indigo-800 text-sm mr-2"><i class="fas fa-edit"></i></a>
                                    <a href="{{ path('manager_pos_services_show', {id: service.id}) }}" class="text-gray-500 hover:text-gray-700 text-sm"><i class="fas fa-eye"></i></a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {# Vue mobile pour le mode table - cards compactes #}
            <div class="sm:hidden space-y-3">
                {% for service in services %}
                    <a href="{{ path('manager_pos_services_show', {id: service.id}) }}" class="block bg-white dark:bg-gray-800 rounded-lg shadow p-3">
                        <div class="flex items-start justify-between gap-2">
                            <div class="min-w-0">
                                <h3 class="text-sm font-semibold text-gray-900 dark:text-white truncate">{{ service.name }}</h3>
                                <div class="flex flex-wrap gap-1 mt-1">
                                    {% if service.category %}
                                        <span class="inline-block px-2 py-0.5 rounded text-[10px] bg-{{ service.category.color|default('gray') }}-100 text-{{ service.category.color|default('gray') }}-800">{{ service.category.name }}</span>
                                    {% endif %}
                                    {% if service.serviceType %}
                                        <span class="inline-block px-2 py-0.5 rounded text-[10px] bg-purple-100 text-purple-800">{{ service.serviceType }}</span>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="text-right flex-shrink-0">
                                <div class="text-sm font-bold text-indigo-600">{{ service.price|number_format(0, ',', ' ') }} FCFA</div>
                                {% if service.isActive %}
                                    <span class="w-2 h-2 rounded-full bg-green-500 inline-block"></span>
                                {% else %}
                                    <span class="w-2 h-2 rounded-full bg-gray-400 inline-block"></span>
                                {% endif %}
                            </div>
                        </div>
                    </a>
                {% endfor %}
            </div>
        {% endif %}

        <div class="flex justify-center">
            {{ knp_pagination_render(services) }}
        </div>
    {% else %}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow text-center py-12 sm:py-16 px-4">
            <i class="fas fa-concierge-bell text-4xl sm:text-5xl text-gray-300 dark:text-gray-600"></i>
            <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">Aucun service</h3>
            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Commencez par ajouter vos premiers services au catalogue.</p>
            <a href="{{ path('manager_pos_services_create') }}" class="mt-4 inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700">
                <i class="fas fa-plus mr-2"></i>Creer un service
            </a>
        </div>
    {% endif %}
</div>
{% endblock %}