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

{% block title %}{% endblock %}

{# {% block javascripts %}
    {% block importmap %}{{ parent() }}{{ importmap('rdv') }}{% endblock %}
{% endblock %} #}



{% block body %}
<section>
    {# {% if prestations %}
    <article class="article py-5 ">
        <h2 class="fs-1 p-4">{{ 'title.lastRdv'|trans }}</h2>
        <twig:CarouselComponent prestations="{{prestations}}" />
    </article>
    {% endif %}
     #}
    {% block nav %}
        {% if consent %}
            {{ parent() }}
            {% else %}
            <twig:CookieComponent Consent="{{consent}}" />
        {% endif %}
    {% endblock %}

    {% if prestations %}
    <div class=" ">
        <article class="col-10 mx-auto text-center">
            <h2 class="fs-1 text-start pt-4">{{ "title.history"|trans }}</h2>
            <p class="text-start">{{ "subtitle.history"|trans }}</p>
            <div class="d-flex">
                <button id="showIncomBtn" class="btn btn-sm btn-primary rounded-4 mx-2">{{ 'btn.incomming'|trans }}</button>
                <button id="showOldBtn" class="btn btn-sm btn-primary rounded-4 mx-2">{{ 'btn.old'|trans }}</button> 
            </div>
            <ul class="list-group">
                {% for prestation in prestations %}
                {% if prestation.stripeInvoiceId %}
                {# {{ dump(prestation.status.value) }} #}
                <li
                    class="list-group-item text-start my-2 border-2 rounded-4 shadow text-primary {{ (prestation.status.value == 'PAID') ? ((prestation.date > date()) ? 'border-primary new-rdv' : 'border-warning old-rdv d-none') : 'border-danger old-rdv d-none' }}">
                    <p>{{ prestation.date|format_datetime('full', 'short', locale: 'en' ) }} - {{
                        prestation.totalTime }} min</p>
                    <p>n°{{prestation.invoiceNumber}} | {{ (prestation.total / 100)|number_format(2, '.', ',') }}€ | {{
                        prestation.invoiceDate|format_datetime('medium', 'none', locale: 'en') }}
                    </p>

                    <div class="d-flex justify-content-around">
                        {% if prestation.date < date() %} <a class="btn btn-sm btn-primary rounded-4 col-4"
                            href="{{path('app_prestation_feedback', {id:prestation.id})}}">
                            {% if prestation.feedback %}
                            {% for row in 1..prestation.feedback.note %}
                            <span class="">{{ ux_icon('material-symbols:star-rounded', { width: 32,
                                height: 32, color: '#ffd500' }) }}</span>
                            {% endfor %}
                            {% else %}
                            {{'btn.feedback'|trans}} {{ ux_icon('material-symbols:star-rounded', { width: 64, height: 64
                            }) }}
                            {% endif %}
                            </a> {% endif %}

                            <a class="btn btn-sm btn-primary rounded-4 col-4"
                                href="{{path('app_prestation_edit', {id:prestation.id})}}">{{'btn.show'|trans}} {{
                                ux_icon('bx:detail', { width: 64, height: 64 }) }}</a>
                    </div>
                </li>
                {% endif %}
                {% endfor %}
            </ul>
        </article>
    </div>
    {% endif %}
</section>
{% endblock %}