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

{% block title %}{% endblock %}

{% block body %}
    <!-- breadcrumb area start -->
    <div class="breadcrumb-area">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap text-center">
                        <h2 class="breadcrumb-title">SPRINT & SPORTS | {% trans %}Mon compte{% endtrans %} </h2>
                        <nav aria-label="breadcrumb">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ path("index") }}">{% trans %}Accueil{% endtrans %}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{% trans %}Mon compte{% endtrans %}</li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end -->

    <!-- my account wrapper start -->
    <div class="my-account-wrapper pt-98 pb-98 pt-sm-60 pb-sm-60">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!-- My Account Page Start -->
                    <div class="myaccount-page-wrapper">
                        <!-- My Account Tab Menu Start -->
                        <div class="row">
                            <div class="col-lg-3 col-md-4">
                                <div class="myaccount-tab-menu nav" role="tablist">
{#                                    <a href="#dashboad" class="active" data-bs-toggle="tab"><i class="fa fa-dashboard"></i>#}
{#                                        Dashboard</a>#}

                                    <a href="#orders" {% if errorsform is not defined %} class="active" {% endif %} data-bs-toggle="tab"><i class="fa fa-cart-arrow-down"></i>{% trans %}Mes commandes{% endtrans %}</a>
    
{#                                    <a href="#download" data-bs-toggle="tab"><i class="fa fa-cloud-download"></i> Download</a>#}
{#    #}
{#                                    <a href="#payment-method" data-bs-toggle="tab"><i class="fa fa-credit-card"></i> Payment#}
{#                                        Method</a>#}
    
                                    <a href="#address-edit" data-bs-toggle="tab"><i class="fa fa-map-marker"></i> {% trans %}Informations de livraison{% endtrans %}</a>
    
                                    <a href="#account-info"  {% if errorsform is defined %} class="active" {% endif %} data-bs-toggle="tab"><i class="fa fa-user"></i> {% trans %}Profil{% endtrans %}</a>
    
                                    <a href="{{ path('app_logout') }}"><i class="fa fa-sign-out"></i> {% trans %}Déconnexion{% endtrans %}</a>
                                </div>
                            </div>
                            <!-- My Account Tab Menu End -->
                            <!-- My Account Tab Content Start -->
                            <div class="col-lg-9 col-md-8">
                                {% if errorsform is defined and errorsform is not empty %}
                                    <div>
                                        {% for error in errorsform %}
                                            <div class="alert alert-danger align-content-center">{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                <div class="tab-content" id="myaccountContent">
                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade {% if errorsform is not defined or errorsform == null %} show active {% endif %}" id="orders" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3>{% trans %}Commandes{% endtrans %}</h3>
    
                                            <div class="myaccount-table table-responsive text-center">
                                                <table class="table table-bordered">
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th>{% trans %}Commande{% endtrans %}</th>
                                                            <th>{% trans %}Date{% endtrans %}</th>
                                                            <th>{% trans %}Statut{% endtrans %}</th>
                                                            <th>{% trans %}Total{% endtrans %}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    {% for order in orders %}
                                                        <tr>
                                                            <td>{{ order.id }}</td>
                                                            <td>{{ order.commandeDate|date('d / m / Y') }}</td>
                                                            <td>{{ order.statut.statut|trans }}</td>
                                                            <td>{{ order.price|number_format(0,' ',' ') }} <span class="currency">{% trans %}DZD{% endtrans %}</span></td>
                                                        </tr>
                                                    {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Single Tab Content End -->
    
                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade" id="address-edit" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3>{% trans %}Dernière adresse de livraison{% endtrans %}</h3>
    
                                            <address>
                                                <p><strong>{{ user.prenom }} {{ user.nom }}</strong></p>
                                                <p>{{ user.adresse }}<br>{{ user.city }}</p>
                                                <p>{{ user.tel }}</p>
                                            </address>
    
{#                                            <a href="#" class="check-btn sqr-btn "><i class="fa fa-edit"></i> Modifier l'adresse</a>#}
                                        </div>
                                    </div>
                                    <!-- Single Tab Content End -->
    
                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade {% if errorsform is defined and errorsform != null %} show active {% endif %}" id="account-info" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3>{% trans %}Détails du compte{% endtrans %}</h3>
    
                                            <div class="account-details-form">
                                                <form action="{{ path('edit_info') }}" method="post">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="single-input-item">
                                                                <label for="f_name" class="required">{% trans %}Prénom{% endtrans %}</label>
                                                                <input type="text" name="f_name" id="f_name" value="{{ user != null ? user.prenom : '' }}" required/>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6">
                                                            <div class="single-input-item">
                                                                <label for="l_name" class="required">{% trans %}Nom{% endtrans %}</label>
                                                                <input type="text" name="l_name" id="l_name"  value="{{ user != null ? user.nom : '' }}" required/>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="single-input-item">
                                                        <label for="email" class="required">{% trans %}Email{% endtrans %}</label>
                                                        <input type="email" name="email" id="email" value="{{ user != null ? user.email : '' }}" required/>
                                                    </div>

    
                                                    <fieldset>
                                                        <legend>{% trans %}Changer le mot de passe{% endtrans %}</legend>
                                                        <div class="single-input-item">
                                                            <label for="current-pwd" class="required">{% trans %}Mot de passe actuel{% endtrans %}</label>
                                                            <input type="password" name="password" id="current-pwd" />
                                                        </div>
    
                                                        <div class="row">
                                                            <div class="col-lg-6">
                                                                <div class="single-input-item">
                                                                    <label for="new-pwd" class="required">{% trans %}Nouveau mot de passe{% endtrans %}</label>
                                                                    <input type="password" name="newpassword" id="new-pwd"  />
                                                                </div>
                                                            </div>
    
                                                            <div class="col-lg-6">
                                                                <div class="single-input-item">
                                                                    <label for="confirm-pwd" class="required">{% trans %}Confirmer le mot de passe{% endtrans %}</label>
                                                                    <input type="password" name="confirmpassword" id="confirm-pwd" />
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <input type="hidden" name="iduser" value="{{ user != null ? user.id : '' }}" />
                                                    </fieldset>
    
                                                    <div class="single-input-item">
                                                        <button type="submit" class="check-btn sqr-btn ">{% trans %}Enregistrer{% endtrans %}</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div> <!-- Single Tab Content End -->
                                </div>
                            </div> <!-- My Account Tab Content End -->
                        </div>
                    </div> <!-- My Account Page End -->
                </div>
            </div>
        </div>
    </div>
    <!-- my account wrapper end -->
{% endblock %}