{% 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; background-color:white;">
            
                <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">

				<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"> Détails de vos commandes</h2>
            
            </div>

            <div class="row">
            
                <h5 class="col-xl-12 mt-4">Gérer vos commandes ici<hr></h5>
                
                <div class="col-xl-12">

                    <div class="col-6 mb-4">
                        <form action="{{ path('show_profile_orders', {"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>

                    {% for order in orders %}
                
                        <div class="card mb-3">

                            <div class="card-header">

                                <div class="row">

                                    <h5 class="col-8 align-middle mb-0">Commande numéro : {{ order.id }}</h5>

                                    <div class="col-4 align-middle text-end"><a href="{{ path('order_detail', {'id': order.id }) }}">Voir détails</a></div>

                                </div>

                            </div>

                            <div class="card-body">

                                <div class="row">
                                
                                    <div class="col-4 fw-bolder text-center">Date de commande</div>
                                    <div class="col-2 fw-bolder text-center">Total</div>
                                    <div class="col-2 fw-bolder text-center">Status</div>
                                    <div class="col-4 fw-bolder text-center">Envoyé le</div>
                                
                                </div>

                                <div class="row pb-4">
                                
                                    <div class="col-4 text-center">{{ order.createdAt|date("d / m / Y") }}</div>
                                    <div class="col-2 text-center">{{ order.total/100 }} €</div>
                                    <div class="col-2 text-center">
                                        {% if order.status == 'sent' %}
                                            Envoyé
                                        {% endif %}
                                    </div>
                                    
                                    {% if order.sentAt is not null %}
                                    
                                        <div class="col-4 text-center">{{ order.sentAt|date("d / m / Y") }}</div>

                                    {% endif %}
                                
                                </div>

                                <div class="row">

                                    {% for product in order.orderProducts | slice(0,3) %}                             
                                
                                        <div class="card g-0 mt-2 border-0 rounded-0" style="width: 15rem;">

                                            <a href="{{ path('view_products', {'id': product.products.id}) }}" class="text-decoration-none text-black">

                                                <img src="{{ asset('images/7a218379c474df6f3f0961d5fcdbcb91e0e86fbd.jpg') }}" style="height: 200px; object-fit: contain;" class="card-img-top" alt="" loading="lazy">
                                                <div class="card-body">

                                                    <ul class="list-group list-group-flush">
                                                        <li class="list-group-item fw-bold">{{ product.price/100 }}
                                                            €</li>
                                                    </ul>

                                                </div>

                                            </a>

                                        </div>

                                    {% endfor %}
                                
                                </div>

                            </div>
                        </div>

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


    </div>

    </div>

{% endblock %}