ludikevent_crm/templates/revervation/search.twig

{% extends 'revervation/base.twig' %}

{% block title %}{{ 'search.seo.title'|trans }}{% endblock %}

{% block extra_header %}
    <meta name="robots" content="noindex, nofollow">
{% endblock %}

{% block description %}{{ 'search.seo.description'|trans }}{% endblock %}

{% block canonical %}
    <link rel="canonical" href="{{ url('reservation_search') }}">
{% endblock %}

{% block body %}
    <div class="bg-gray-50 min-h-screen py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">

            {# Header de recherche #}
            <div class="text-center mb-16">
                <h1 class="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl mb-4">
                    {{ 'search.header.title'|trans }}
                </h1>
                <p class="text-lg text-gray-600 mb-8">{{ 'search.header.subtitle'|trans }}</p>

                <form action="{{ url('reservation_search') }}" method="get" class="max-w-2xl mx-auto relative">
                    <input type="text" name="q" value="{{ app.request.query.get('q') }}"
                           class="w-full pl-5 pr-12 py-4 rounded-2xl border-none shadow-lg focus:ring-2 focus:ring-blue-500 transition-all text-gray-700"
                           placeholder="{{ 'search.form.placeholder'|trans }}">
                    <button type="submit" class="absolute right-3 top-3 bg-blue-600 text-white p-2 rounded-xl hover:bg-blue-700 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </button>
                </form>
            </div>

            {# Grille Bento #}
            {% if products is defined and products|length > 0 %}
                <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-6 gap-4 auto-rows-[200px]">
                    {% for product in products %}
                        <div class="group relative bg-white rounded-3xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100
                                md:col-span-2 md:row-span-2">

                            {# Image de fond #}
                            <div class="absolute inset-0 z-0">
                                <img src="{{ product.image }}" alt="{{ product.name }}" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
                            </div>

                            {# Contenu Textuel #}
                            <div class="absolute inset-0 z-10 p-6 flex flex-col justify-end">
                                <div class="flex justify-between items-end">
                                    <div>
                                        <h3 class="text-xl font-bold text-white mb-1">{{ product.name }}</h3>
                                        <div class="flex gap-2">
                                            <span class="bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded-lg">
                                                {{ product.price1day }}€ / {{ 'search.product.day'|trans }}
                                            </span>
                                            <span class="bg-white/20 backdrop-blur-md text-white text-xs px-2 py-1 rounded-lg">
                                                {{ 'search.product.caution'|trans }}: {{ product.caution }}€
                                            </span>
                                        </div>
                                    </div>
                                    <a href="{{ product.link }}" class="bg-white p-3 rounded-2xl hover:bg-blue-50 transition-colors shadow-lg">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                        </svg>
                                    </a>
                                </div>

                                {% if loop.index0 % 5 == 0 %}
                                    <div class="mt-4 text-gray-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                        {{ 'search.product.extra_day'|trans }}: +{{ product.priceSup }}€ <br>
                                        {{ 'search.product.total_from'|trans }} {{ product.price }}€
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                {# Empty State #}
                <div class="bg-white rounded-3xl p-12 text-center shadow-sm border border-gray-100">
                    <div class="text-6xl mb-4">🔎</div>
                    <h3 class="text-2xl font-bold text-gray-900">{{ 'search.empty.title'|trans }}</h3>
                    <p class="text-gray-500 mt-2">{{ 'search.empty.subtitle'|trans }}</p>
                    <a href="{{ url('reservation_catalogue') }}" class="mt-6 inline-block bg-blue-600 text-white px-8 py-3 rounded-xl font-bold hover:bg-blue-700 transition-all">
                        {{ 'search.empty.button'|trans }}
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}