{% extends 'layouts/app.html.twig' %}

{% block title %}Ventes - Rsaff{% endblock %}

{% block app_content %}

<div class="sales-page">

    {# Navigation date + filtres #}
    <div class="sales-filters mb-4">

        <div class="sales-date-selector">
            <button type="button" class="btn">
                <i class="bi bi-chevron-left"></i>
            </button>

            <button type="button"
                    class="btn sales-date-current">
                <i class="bi bi-calendar3 me-2"></i>

                <span>
                    <strong>Aujourd'hui</strong>
                    <small>24 septembre 2026</small>
                </span>
            </button>

            <button type="button" class="btn">
                <i class="bi bi-chevron-right"></i>
            </button>
        </div>


        {# Desktop filters #}
        <div class="d-none d-lg-flex gap-2 flex-grow-1">

            <select class="form-select">
                <option>Tous les stands</option>
                <option>Marché Centre</option>
            </select>

            <select class="form-select">
                <option>Tous les paiements</option>
                <option>Espèces</option>
                <option>Carte</option>
                <option>Chèque</option>
            </select>

            <div class="input-group">
                <span class="input-group-text bg-transparent">
                    <i class="bi bi-search"></i>
                </span>

                <input type="search"
                       class="form-control"
                       placeholder="Rechercher...">
            </div>

        </div>

    </div>


    {# Mobile payment filters #}
    <div class="sales-mobile-filters d-flex d-lg-none gap-2 mb-4">
        <button class="btn btn-success btn-sm">Tous</button>
        <button class="btn btn-outline-secondary btn-sm">Espèces</button>
        <button class="btn btn-outline-secondary btn-sm">Carte</button>
        <button class="btn btn-outline-secondary btn-sm">Chèque</button>
    </div>


    {# Résumé #}
    <div class="row g-3 mb-4">

        <div class="col-12 col-md-6 col-xl-3">
            <div class="card sales-stat h-100">
                <div class="card-body">
                    <small class="text-body-secondary">
                        Total des ventes
                    </small>

                    <div class="fs-3 fw-bold mt-1">
                        248,50 €
                    </div>
                </div>
            </div>
        </div>


        <div class="col-6 col-xl-3 d-none d-md-block">
            <div class="card sales-stat h-100">
                <div class="card-body">
                    <small class="text-body-secondary">
                        Nombre de ventes
                    </small>

                    <div class="fs-3 fw-bold mt-1">
                        14
                    </div>
                </div>
            </div>
        </div>


        <div class="col-6 col-xl-3 d-none d-xl-block">
            <div class="card sales-stat h-100">
                <div class="card-body">
                    <small class="text-body-secondary">
                        Panier moyen
                    </small>

                    <div class="fs-3 fw-bold mt-1">
                        17,75 €
                    </div>
                </div>
            </div>
        </div>


        <div class="col-6 col-xl-3 d-none d-xl-block">
            <div class="card sales-stat h-100">
                <div class="card-body">
                    <small class="text-body-secondary">
                        Dernière vente
                    </small>

                    <div class="fs-3 fw-bold mt-1">
                        14:32
                    </div>

                    <small class="text-body-secondary">
                        13,12 € · Espèces
                    </small>
                </div>
            </div>
        </div>

    </div>


    {# ========================= #}
    {# DESKTOP                   #}
    {# ========================= #}

    <div class="card d-none d-lg-block sales-table-card">

        <div class="table-responsive">

            <table id="salesTable" class="table align-middle mb-0">

                <thead>
                    <tr>
                        <th>Heure</th>
                        <th>Montant</th>
                        <th>Paiement</th>
                        <th>Stand</th>
                        <th>Note</th>
                        <th class="text-end"></th>
                    </tr>
                </thead>

                <tbody>
                    {% for sale in sales %}

                        <tr>

                            <td data-order="{{ sale.createdAt|date('Y-m-d H:i:s') }}">
                                {{ sale.createdAt|date('d/m/Y H:i') }}
                            </td>

                            <td class="fw-semibold">
                                {{ sale.amount }} €
                            </td>

                            <td>
                                <span class="payment-badge payment-{{ sale.paymentMethod }}">

                                    {% if sale.paymentMethod == 'cash' %}
                                        <i class="bi bi-cash"></i>
                                    {% elseif sale.paymentMethod == 'card' %}
                                        <i class="bi bi-credit-card"></i>
                                    {% else %}
                                        <i class="bi bi-receipt"></i>
                                    {% endif %}

                                    {{ sale.paymentMethod }}
                                </span>
                            </td>

                            <td>
                                {#{ sale.stand }#}Stande
                            </td>

                            <td class="text-body-secondary">
                                {{ sale.note ?: '—' }}
                            </td>

                            <td class="text-end">

                                <div class="dropdown">

                                    <button type="button"
                                            class="btn btn-sm btn-link text-body-secondary"
                                            data-bs-toggle="dropdown"
                                            aria-label="Actions">
                                        <i class="bi bi-three-dots-vertical"></i>
                                    </button>

                                    <ul class="dropdown-menu dropdown-menu-end">

                                        <li>
                                            <button class="dropdown-item">
                                                <i class="bi bi-pencil me-2"></i>
                                                Modifier
                                            </button>
                                        </li>

                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>

                                        <li>
                                            <button class="dropdown-item text-danger">
                                                <i class="bi bi-trash me-2"></i>
                                                Supprimer
                                            </button>
                                        </li>

                                    </ul>

                                </div>

                            </td>

                        </tr>

                    {% endfor %}

                </tbody>

            </table>

        </div>

    </div>


    {# ========================= #}
    {# MOBILE                    #}
    {# ========================= #}

    <div class="d-lg-none sales-mobile-list">

        {% for sale in sales %}

            <div class="sales-mobile-item">

                <div class="d-flex justify-content-between gap-3">

                    <div>

                        <div class="d-flex align-items-center gap-2 mb-1">

                            <span class="fs-5 fw-bold">
                                {{ sale.amount }} €
                            </span>

                            <span class="payment-badge payment-{{ sale.paymentMethod }}">
                                {{ sale.paymentMethod }}
                            </span>

                        </div>

                        <small class="text-body-secondary">
                            {#{ sale.stand }#}Stande

                            {% if sale.note %}
                                · {{ sale.note }}
                            {% endif %}
                        </small>

                    </div>


                    <div class="text-end">

                        <small class="text-body-secondary">
                            {{ sale.createdAt|date('d/m/Y H:i') }}
                        </small>

                        <div class="dropdown">

                            <button type="button"
                                    class="btn btn-sm btn-link text-body-secondary px-0"
                                    data-bs-toggle="dropdown"
                                    aria-label="Actions">
                                <i class="bi bi-three-dots"></i>
                            </button>

                            <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                    <button class="dropdown-item">
                                        Modifier
                                    </button>
                                </li>

                                <li>
                                    <button class="dropdown-item text-danger">
                                        Supprimer
                                    </button>
                                </li>
                            </ul>

                        </div>

                    </div>

                </div>

            </div>

        {% endfor %}

    </div>

</div>


{# Ta modal Nouvelle vente existante #}
{# {% include 'sales/_modal_new.html.twig' %} #}

{% endblock %}