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

{% block title %}{{ 'home.title'|trans }}{% endblock %}

{% block body %}
    {# ============ DIAPORAMA ============ #}
    <section class="hero">
        {% if slides is not empty %}
            {% for slide in slides %}
                <div class="hero-slide {{ loop.first ? 'visible' }}"
                     data-slide="{{ loop.index0 }}"
                     style="background-image: url('{{ vich_uploader_asset(slide, 'imageFile') }}')"></div>
            {% endfor %}
        {% else %}
            <div class="hero-fallback"></div>
        {% endif %}

        <div class="hero-content">
            <p class="kicker">{{ 'home.kicker'|trans }}</p>
            <h1>{{ 'home.heading'|trans|raw }}</h1>
            <p>{{ 'home.hero_text'|trans }}</p>
            <div class="hero-actions">
                <a href="#declaration" class="btn btn-primary">{{ 'nav.report_case'|trans }}</a>
                <a href="{{ path('app_stories') }}" class="btn btn-outline">{{ 'nav.stories'|trans }}</a>
            </div>
        </div>

        {% if slides|length > 1 %}
            <div class="hero-dots">
                {% for slide in slides %}
                    <button type="button" data-dot="{{ loop.index0 }}" class="{{ loop.first ? 'active' }}" aria-label="Diapositive {{ loop.index }}"></button>
                {% endfor %}
            </div>
        {% endif %}
    </section>

    {# ============ GALERIE DES CAS ============ #}
    <section class="section memorial-section">
        <div class="container">
            <h2 class="section-title">{{ 'home.gallery_title'|trans|raw }}</h2>
            <div class="title-bar"></div>
            <p class="section-sub">{{ 'home.gallery_sub'|trans }}</p>

            {% if galleryCases is empty %}
                <p style="color: var(--grey);">{{ 'home.gallery_empty'|trans }}</p>
            {% else %}
                <div class="memorial-grid">
                    {% for case in galleryCases %}
                        <a href="{{ path('app_story_show', {id: case.id}) }}" class="memorial-item">
                            <div class="memorial-photo" {% if case.imageName %}style="background-image: url('{{ vich_uploader_asset(case, 'imageFile') }}')"{% endif %}>
                                {% if not case.imageName %}<span class="placeholder">🕯️</span>{% endif %}
                            </div>
                            <div class="memorial-name">{{ case.victimName }}</div>
                            <div class="memorial-date">{% if case.incidentDate %}{{ case.incidentDate|date('d/m/Y') }}{% endif %}</div>
                        </a>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </section>

    {# ============ FORMULAIRE DE DECLARATION ============ #}
    <section class="section" id="declaration">
        <div class="container">
            <h2 class="section-title">{{ 'home.declare_title'|trans|raw }}</h2>
            <div class="title-bar"></div>
            <p class="section-sub">{{ 'home.declare_sub'|trans }}</p>

            <div class="declaration-box">
                {{ form_start(form) }}
                    <div class="form-grid">
                        <div class="form-field">
                            {{ form_label(form.victimName) }}
                            {{ form_widget(form.victimName) }}
                            <ul class="form-errors">{{ form_errors(form.victimName) }}</ul>
                        </div>
                        <div class="form-field">
                            {{ form_label(form.victimAge) }}
                            {{ form_widget(form.victimAge) }}
                            <ul class="form-errors">{{ form_errors(form.victimAge) }}</ul>
                        </div>
                        <div class="form-field">
                            {{ form_label(form.incidentDate) }}
                            {{ form_widget(form.incidentDate) }}
                            <ul class="form-errors">{{ form_errors(form.incidentDate) }}</ul>
                        </div>
                        <div class="form-field">
                            {{ form_label(form.location) }}
                            {{ form_widget(form.location) }}
                            <ul class="form-errors">{{ form_errors(form.location) }}</ul>
                        </div>
                        <div class="form-field full">
                            {{ form_label(form.description) }}
                            {{ form_widget(form.description) }}
                            <ul class="form-errors">{{ form_errors(form.description) }}</ul>
                        </div>
                        <div class="form-field">
                            {{ form_label(form.reporterName) }}
                            {{ form_widget(form.reporterName) }}
                        </div>
                        <div class="form-field">
                            {{ form_label(form.reporterEmail) }}
                            {{ form_widget(form.reporterEmail) }}
                            <ul class="form-errors">{{ form_errors(form.reporterEmail) }}</ul>
                        </div>
                        <div class="form-field">
                            {{ form_label(form.reporterPhone) }}
                            {{ form_widget(form.reporterPhone) }}
                        </div>
                        <div class="form-field">
                            {{ form_label(form.imageFile) }}
                            {{ form_widget(form.imageFile) }}
                            <ul class="form-errors">{{ form_errors(form.imageFile) }}</ul>
                        </div>
                    </div>

                    {{ form_widget(form.latitude) }}
                    {{ form_widget(form.longitude) }}

                    <p class="form-note">{{ 'home.form_note'|trans }}</p>

                    <br>
                    <button type="submit" class="btn btn-primary">{{ 'home.submit'|trans }}</button>
                {{ form_end(form) }}
            </div>
        </div>
    </section>
{% endblock %}

{% block javascripts %}
    <script>
        (function () {
            const slides = document.querySelectorAll('.hero-slide');
            const dots = document.querySelectorAll('.hero-dots button');
            if (slides.length < 2) return;

            let current = 0;
            let timer = setInterval(next, 5500);

            function show(index) {
                slides[current].classList.remove('visible');
                dots[current] && dots[current].classList.remove('active');
                current = index;
                slides[current].classList.add('visible');
                dots[current] && dots[current].classList.add('active');
            }

            function next() {
                show((current + 1) % slides.length);
            }

            dots.forEach(function (dot) {
                dot.addEventListener('click', function () {
                    clearInterval(timer);
                    show(parseInt(dot.dataset.dot, 10));
                    timer = setInterval(next, 5500);
                });
            });
        })();
    </script>
{% endblock %}