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

{% block title %}Vos commandes{% endblock %}

{% block body %}

    <div class="container-xl">

        <div class="row my-5">

            {# <div class="col-1"></div> #}

            <h1 class="col-10 ms-5">Mon espace personnel</h1>

        </div>

        <div class="row">
    
        {# <div class="col-1" style="height: 300px"></div> #}

        <div class="col-xl-3 g-0" style="height: 300px">
        
            <div class="col-xl-9 ms-auto ps-5"  style="height: 100px">
            
                <h3 class="align-middle" style="padding-top: 2rem"><a href="{{ path('show_profile', {"id": app.user.id}) }}" class="text-reset text-decoration-none"> Détails</a></h3>

            </div>

            <div class="col-xl-9 ms-auto ps-5" style="height: 100px">
            
                <h3 class="align-middle" style="padding-top: 2rem"><a href="{{ path('show_profile_orders', {"id": app.user.id}) }}" class="text-reset text-decoration-none" >Commandes</a></h3>

            </div>
            
            <div class="col-xl-9 ms-auto ps-5" style="height: 100px;">
            
                <h3 class="align-middle" style="padding-top: 2rem"><a href="{{ path('show_favorite_products', {"id": app.user.id}) }}" class="text-reset text-decoration-none" >Vos favoris</a></h3>

            </div>

            <div class="col-xl-9 ms-auto ps-5" style="height: 100px">
            
                <h3 class="align-middle" style="padding-top: 2rem"><a href="{{ path('show_profile_adress', {"id": app.user.id}) }}" class="text-reset text-decoration-none" >Adresses</a></h3>

            </div>

            <div class="col-xl-9 ms-auto ps-5" style="height: 100px; background-color:white;">

				<h3 class="align-middle" style="padding-top: 2rem">
					<a href="{{ path('show_profile_orders_retour', {"id": app.user.id}) }}" class="text-reset text-decoration-none">Retour</a>
				</h3>

			</div>
        
        </div>

        <div class="col-xl-8 mb-5" style="min-height: 1000px; background-color:white;">

            <div class="col-12">
            
                <h2 style="padding-top: 3rem; padding-left: 4rem"> Demande de retour</h2>
            
            </div>

            <div class="row">
            
                <h5 class="col-xl-12 mt-4">Sélectionner la commande concernant votre demande<hr></h5>
                
                <div class="col-xl-12">

                    <div class="col-6 mb-4">
                        <form action="{{ path('show_profile_orders_retour', {"id": app.user.id})}}" id="yearChosen" method="GET">
                            <select class="form-select no-border-radius" name="year" onchange="document.getElementById('yearChosen').submit()">
                                <option disabled selected>Année</option>
                                <option value="2023">2023</option>
                                <option value="2022">2022</option>
                                <option value="2021">2021</option>
                            </select>
                        </form>

                    </div>

                    <table class="table">
                        <thead>
                            <tr class="text-center">
                                <th scope="col">Numéro de commande</th>
                                <th scope="col">Date de commande</th>
                                <th scope="col">Etat</th>
                                <th scope="col">Nb Articles</th>
                                <th scope="col">Total TTC</th>
                            </tr>
                        </thead>
                        <tbody>

                            {% for order in orders %}

                                <tr class="text-center">
                                    <th scope="row"><a href="{{ path('order_retour-detail', {'id': order.id }) }}" class="text-decoration-none">{{ order.id }}</a></th>
                                    <td>{{ order.createdAt|date("d / m / Y") }}</td>
                                    <td>
                                        {% if order.status == 'sent' %}
                                            Envoyé
                                        {% endif %}
                                    </td>
                                    <td>@mdo</td>
                                    <td>{{ order.total/100 }} €</td>
                                </tr>

                            {% endfor %}
                        </tbody>
                    </table>
   
                </div>
            
            
            </div>
        
            
        
        </div>


    </div>

    </div>

{% endblock %}