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

{% block title %}Questionnaire de satisfaction{% endblock %}

{% import 'macros/breadcrumbs.html.twig' as breadcrumbs %}
{% set crumbs = [
    { 'title': 'Accueil'|trans, 'url': path('home_index') },
    { 'title': 'Questionnaire de satisfaction'|trans, 'url': null },
    { 'title': reviewRequest.clientName, 'url': null }
] %}

{% block body %}
    <section class="container">
        {{ breadcrumbs.breadcrumb(crumbs) }}
        <div class="card mb-3">
            <div class="card-header">
                <h1 class="card-title">On attend vos impressions !</h1>
            </div>
            <div class="card-body">
                <div>
                    <p>Vous nous avez sollicités dernièrement pour notre système d'impression murale, qu'en
                        avez-vous pensé ? Donnez-nous votre avis :)</p>
                    <p>On veut tout savoir au travers de ces {{ questions|length }} petites questions, cela
                        ne
                        prendra que quelques minutes ! </p>
                    <p><a href="{{ path('@Realization_show', {'slug':reviewRequest.realization.slug}) }}"
                          class="btn-show_more" target="_blank">Voir notre réalisation <b>{{ reviewRequest.realization.name }}</b></a></p>
                </div>
            </div>
        </div>

        <form method="post" action="{{ path('@Review_front_review_client_submit', {'token': token}) }}">
            {% for question in questions %}
                <div class="card mb-3">
                    <div class="card-header">
                        <h2>{{ question.text }}
                            {% if question.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </h2>
                    </div>
                    <div class="card-body">
                        {% if question.type.name == 'TEXT' %}
                            {% if question.image is not empty %}
                                <div class="text-center mb-2">
                                    <img src="{{ vich_uploader_asset(question.image, 'imageFile') | mediaCache('watermark') }}"
                                         alt="{{ question.text }}" class="img-fluid">
                                </div>
                            {% endif %}
                            <textarea
                                    name="responses[{{ question.id }}]"
                                    placeholder="Votre réponse"
                                    class="form-control {% if errors[question.id] is defined %}is-invalid{% endif %}"
                                    rows="3"
                                    {% if question.required %}required{% endif %}
                                    >{{ existingResponses[question.id] ?? '' }}</textarea>

                        {% elseif question.type.name == 'RATING' %}
                            {% if question.image is not empty %}
                                <div class="text-center mb-2">
                                    <img src="{{ vich_uploader_asset(question.image, 'imageFile') | mediaCache('watermark') }}"
                                         alt="{{ question.text }}" class="img-fluid">
                                </div>
                            {% endif %}
                            <div class="rating-container">
                                <div class="d-flex justify-content-between align-items-center">
                                    {% set variant = rating_variants[question.ratingVariant] ?? null %}
                                    <b class="text-muted">{{ variant.min_label ?? '' }}</b>
                                    <div class="rating-buttons">
                                        {% for i in 0..10 %}
                                            <input
                                                    type="radio"
                                                    name="responses[{{ question.id }}]"
                                                    value="{{ i }}"
                                                    id="rating_{{ question.id }}_{{ i }}"
                                                    class="btn-check"
                                                    {% if existingResponses is not empty and existingResponses[question.id] == i %}checked{% endif %}
                                                    {% if question.required %}required{% endif %}
                                            >
                                            <label
                                                    for="rating_{{ question.id }}_{{ i }}"
                                                    class="btn btn-outline-primary btn-sm me-1"
                                            >{{ i }}</label>
                                        {% endfor %}
                                    </div>
                                    <b class="text-muted">{{ variant.max_label ?? '' }}</b>
                                </div>
                            </div>
                        {% endif %}

                        {% if errors[question.id] is defined %}
                            <div class="invalid-feedback d-block">
                                {{ errors[question.id] }}
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}

            <div class="card">
                <div class="card-body text-center">
                    <button type="submit" class="btn btn-primary btn-lg">
                        Envoyer mon avis
                    </button>
                </div>
            </div>
        </form>
    </section>
{% endblock %}