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

{% block body %}
{% block nav %}{{ parent() }}{% endblock nav %}


<div class="modal fade" id="refundModal" tabindex="-1" aria-labelledby="refundModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5  my-4" id="refundModalLabel">{{'btn.refund'|trans}}</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{'refundModal'|trans}}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'btn.close'|trans }}</button>
                <a href="{{path('app_user_refund', {id:prestation.id})}}"
                    class="btn btn-danger float-end">{{'btn.refund'|trans }}</a>
            </div>
        </div>
    </div>
</div>
<div class="">

    {# Photo avant passage #}
    <div class="card rounded-4 p-4 col-10 mx-auto text-center border-primary shadow">
        <h2 class="text-primary mb-5">{{ 'prestation.photos.before'|trans }}</h2>
        <div class="d-flex justify-content-around align-items-stretch">
            {% for key, pic in beforePicture %}
            <twig:PictureComponent userDocument="{{pic}}" path="{{pic.path}}" key="{{key}}" />
            {% endfor %}
        </div>
        {% if not beforePicture or beforePicture|length
        < 3 %} <twig:FileUploadComponent fileType="BEFORE" prestation="{{prestation}}" />
        {% endif %}
    </div>
    {% if prestation.date < date() %} {# Photo après passage #} <div
        class="card rounded-4 p-4 col-10 mx-auto text-center border-primary shadow">
        <h2 class="text-primary mb-5">{{ 'prestation.photos.after'|trans }}</h2>
        <div class="d-flex justify-content-around align-items-stretch">
            {% for key, pic in afterPicture %}
            <twig:PictureComponent userDocument="{{pic}}" path="{{pic.path}}" key="{{key}}" />
            {% endfor %}
        </div>
        {% if not afterPicture or afterPicture|length
        < 3 %} <twig:FileUploadComponent fileType="AFTER" prestation="{{prestation}}" />
        {% endif %}
</div>
{% endif %}

<div class="card rounded-4 p-4 col-10 mx-auto text-center border-primary shadow">
    <p class="text-center"><span class="badge text-light bg-fc rounded-circle fs-4">{{
            ux_icon('material-symbols:star',{width:64,height:64}) }}</span></p>
    <h1 class="text-primary">{{ prestation.date|format_datetime('full', 'short', locale: app.session.get('_locale'))
        }} </h1>
    {% if isDateValid and  prestation.date > date() %}
    <twig:DateSelectorComponent prestation="{{prestation}}" />
    {% else %}
    {% if prestation.status.value == "PAID" %}

    {% if prestation.date < date() %} <div class="d-grid">
        <a class="btn btn-sm btn-primary rounded-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>
</div>
{% else %}
<div class="alert alert-warning">
    <p>{{ 'prestation.alert.too_late_to_cancel'|trans }}</p>
</div>
{% endif %}
{% else %}
<div class="alert alert-danger">
    <p> {{ 'prestation.status.refunded'|trans }}</p>
</div>
{% endif %}
{% endif %}
<table class="table table-striped table-sm">
    <thead>
        <th>Nom</th>
        {# <th>Description</th> #}
        <th>Durée</th>
        <th>Prix</th>
    </thead>
    <tbody> 
        {% for product in prestation.products %}
        <tr>
            <td>{{ product.name|trans }}</td>
            {# <td>{{ product.description|trans }}</td> #}
            <td>{{ product.duree }} min</td>
            <td>{{ (product.price / 100)|number_format(2, '.', ',') }} €</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
<div>
    {% if prestation.coupon %}
        <p class="text-success">{{ ux_icon('mingcute:coin-line', { width: 32, height: 32}) }} {{ 'payment.token'|trans }}</p>
    {% endif %}
    <p class="fw-bold text-primary float-end">{{ prestation.totalTime }} min - {{ (prestation.total /
        100)|number_format(2, '.', ',') }} €</p>
</div>
<p>n°{{prestation.invoiceNumber}} | {{ prestation.invoiceDate|format_datetime('medium', 'none', locale:
    app.session.get('_locale')) }}</p>
{% if prestation.stripePaiementIntent and prestation.status.value == 'PAID' and isDateValid and  prestation.date > date() %}
<button type="button" class="btn btn-danger float-end" data-bs-toggle="modal" data-bs-target="#refundModal">
    {{'btn.refund'|trans }}
</button>
{% endif %}
</div>

</div>
{% endblock %}