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

{% block title %}
    {{ page_title }}
{% endblock %}

{% block body %}
    {% embed 'nav.html.twig' %}{% endembed %}

    <div class="container">
        <!-- User Info Section -->
        <div class="row mt-5 justify-content-center">
            <!-- User Information Card -->
            <div class="col-md-6 mb-4">
                <div class="card shadow-lg border-0 rounded-lg">
                    <div class="card-body text-center p-4">
                        <div class="user mb-3">
                            <img id="filePreview" class="img-fluid rounded-circle border" src="{{ absolute_url('/registered/uploads/profilesPictures/' ~ form.vars.value.picturePath) }}" alt="{{ form.vars.value.fname }} {{ form.vars.value.lname }}" style="width: 120px; height: 120px; object-fit: cover;">
                        </div>
                        <h3 class="font-weight-bold">
                            {{ form.vars.value.fname }} {{ form.vars.value.lname }}
                            <a href="#" data-bs-toggle="modal" data-bs-target="#staticBackdrop" title="Changer le mot de passe" class="text-decoration-none ml-3">
                                <i class="fas fa-key" style="font-size: 1.2rem; color: #6c757d;"></i> <!-- Icône de couleur gris doux -->
                            </a>
                        </h3>
                        <p class="text-muted mb-0">Utilisateur depuis {{ user.registrationDate|date('d/m/Y') }}</p>
                    </div>
                </div>
            </div>

            <!-- User Statistics Card -->
            <div class="col-md-6 mb-4">
                <div class="card shadow-lg border-0 rounded-lg">
                    <div class="card-body p-4">
                        <h4 class="font-weight-bold mb-3 text-center">Tes statistiques</h4>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <i class="fas fa-box-open" style="color: #74b9ff;"></i> <!-- Icône bleu clair -->
                                Offres
                                <span class="badge" style="background-color: #74b9ff;">{{ user.countOffers }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <i class="fas fa-receipt" style="color: #55efc4;"></i> <!-- Icône vert doux -->
                                Commandes
                                <span class="badge" style="background-color: #55efc4;">{{ user.countOrders }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <i class="fas fa-check-circle" style="color: #81ecec;"></i> <!-- Icône bleu pastel -->
                                Commandes payées
                                <span class="badge" style="background-color: #81ecec;">{{ user.getPaidOrdersCount(true) }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <i class="fas fa-times-circle" style="color: #fab1a0;"></i> <!-- Icône rouge doux -->
                                Commandes non payées
                                <span class="badge" style="background-color: #fab1a0;">{{ user.getPaidOrdersCount(false) }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- User Form Section -->
        <div class="row justify-content-center mt-5">
            <div class="col-md-8">
                <div class="card shadow-lg border-0 rounded-lg">
                    <div class="card-body p-4">
                        <h4 class="font-weight-bold mb-4">Modifier ton profil</h4>
                        {{ form(form) }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for password change -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        {{ form_start(changePwdForm) }}
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Changer ton mot de passe</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>{{ form_row(changePwdForm.plainPassword) }}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                </div>
            </div>
        </div>
        {{ form_end(changePwdForm) }}
    </div>

{% endblock %}

{% block bodyScript %}
    {{ encore_entry_script_tags('fileHandler') }}
{% endblock %}