{% extends '@CpCreationVitiCore/admin/base.html.twig' %}

{% block title %}Statistiques commandes{% endblock %}

{% block stylesheets %}
    <style>
        .order-stats-card {
            min-height: 158px;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
        }

        .order-stats-card.-accent {
            background: linear-gradient(135deg, #102a43 0%, #1f4e79 100%);
            border-color: transparent;
            color: #fff;
        }

        .order-stats-card.-accent .order-stats-label,
        .order-stats-card.-accent .order-stats-subtle {
            color: rgba(255, 255, 255, 0.78);
        }

        .order-stats-label {
            color: #6b7280;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .order-stats-value {
            font-size: 30px;
            font-weight: 700;
            line-height: 1.1;
            margin-top: 10px;
            white-space: nowrap;
        }

        .order-stats-subtle {
            color: #6b7280;
            font-size: 12px;
            line-height: 1.5;
        }

        .order-stats-kicker {
            display: inline-block;
            margin-top: 14px;
            padding: 6px 10px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #1f2937;
            font-size: 12px;
            font-weight: 600;
        }

        .order-stats-card.-accent .order-stats-kicker {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
        }

        .order-stats-panel {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
            overflow: hidden;
        }

        .order-stats-panel .panel-heading {
            padding: 16px 20px;
            font-size: 15px;
            font-weight: 700;
            background: #fff;
            border-bottom: 1px solid #eef2f7;
        }

        .order-stats-panel .panel-body {
            padding: 20px;
        }

        .order-stats-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 14px;
        }

        .order-stats-meta-chip {
            padding: 7px 10px;
            border-radius: 999px;
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            font-size: 12px;
            color: #334155;
        }

        .order-stats-breakdown {
            margin-bottom: 0;
        }

        .order-stats-breakdown td,
        .order-stats-breakdown th {
            padding-top: 14px;
            padding-bottom: 14px;
            vertical-align: middle;
        }

        .order-stats-breakdown tr.-negative td:last-child {
            color: #b91c1c;
            font-weight: 700;
        }

        .order-stats-breakdown tr.-positive td:last-child {
            color: #166534;
            font-weight: 700;
        }

        .order-stats-breakdown tr.-total {
            background: #f8fafc;
        }

        .order-stats-breakdown tr.-total td:last-child {
            font-size: 18px;
            font-weight: 800;
        }

        #order-stats-chart {
            height: 420px;
        }

        #order-stats-radar {
            height: 420px;
        }

        .order-stats-table {
            margin-bottom: 0;
        }

        .order-stats-table > thead > tr > th {
            background: #f8fafc;
            border-bottom-width: 1px;
            white-space: nowrap;
        }

        .order-stats-table th[data-sortable] {
            cursor: pointer;
            user-select: none;
        }

        .order-stats-table th[data-sortable] .order-stats-sort-indicator {
            display: inline-block;
            width: 12px;
            margin-left: 6px;
            color: #94a3b8;
            text-align: center;
        }

        .order-stats-table th[data-sort-direction='asc'] .order-stats-sort-indicator,
        .order-stats-table th[data-sort-direction='desc'] .order-stats-sort-indicator {
            color: #0f172a;
        }

        .order-stats-table .text-amount {
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        .order-stats-table .order-stats-table-name {
            font-weight: 700;
            color: #0f172a;
        }

        .order-stats-table .order-stats-table-secondary {
            display: block;
            margin-top: 3px;
            color: #64748b;
            font-size: 12px;
        }

        .order-stats-empty {
            padding: 24px;
            text-align: center;
            color: #64748b;
        }

        .order-stats-details {
            margin: 0;
        }

        .order-stats-details summary {
            cursor: pointer;
            color: #1d4ed8;
            font-weight: 600;
            outline: none;
        }

        .order-stats-details[open] summary {
            margin-bottom: 8px;
        }

        .order-stats-details-list {
            margin: 0;
            padding-left: 18px;
            color: #475569;
        }

        .order-stats-details-list li {
            margin-bottom: 6px;
        }

        .order-stats-accordion {
            border-top: 1px solid #e5e7eb;
            background: #fcfcfd;
        }

        .order-stats-accordion summary {
            padding: 16px 20px;
            cursor: pointer;
            font-weight: 700;
            color: #0f172a;
            outline: none;
        }

        @media (max-width: 991px) {
            #order-stats-chart,
            #order-stats-radar {
                height: 340px;
            }
        }
    </style>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Statistiques commandes</h1>
        </div>
    </div>

    <div class="panel panel-default order-stats-panel">
        <div class="panel-heading">
            Filtres et lecture rapide
        </div>
        <div class="panel-body">
            <form method="get" action="{{ path('admin_order_stats') }}" id="order-stats-filters">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="payment_method_id">Mode de paiement</label>
                            <select name="payment_method_id" id="payment_method_id" class="form-control">
                                <option value="">Tous</option>
                                {% for payment_method in payment_methods %}
                                    <option value="{{ payment_method.id }}" {% if filters.payment_method_id == payment_method.id.toString %}selected{% endif %}>
                                        {{ payment_method.method|trans }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="paid_from">Payee du</label>
                            <input type="date" name="paid_from" id="paid_from" class="form-control" value="{{ filters.paid_from_input }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="paid_to">au</label>
                            <input type="date" name="paid_to" id="paid_to" class="form-control" value="{{ filters.paid_to_input }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="group_by">Regroupement</label>
                            <select name="group_by" id="group_by" class="form-control">
                                <option value="day" {% if filters.group_by == 'day' %}selected{% endif %}>Jour</option>
                                <option value="month" {% if filters.group_by == 'month' %}selected{% endif %}>Mois</option>
                                <option value="year" {% if filters.group_by == 'year' %}selected{% endif %}>Annee</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <div>
                                <button type="submit" class="btn btn-primary">Filtrer</button>
                                <a href="{{ path('admin_order_stats') }}" class="btn btn-default">Reinitialiser</a>
                                <a href="{{ path('admin_order_stats_pdf', filters.query_parameters) }}" class="btn btn-info">Exporter en PDF</a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <div class="order-stats-meta">
                <span class="order-stats-meta-chip">Periode : {{ filters.paid_from_input }} au {{ filters.paid_to_input }}</span>
                <span class="order-stats-meta-chip">
                    Regroupement :
                    {% if filters.group_by == 'day' %}
                        Jour
                    {% elseif filters.group_by == 'year' %}
                        Annee
                    {% else %}
                        Mois
                    {% endif %}
                </span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-default order-stats-card -accent">
                <div class="panel-body">
                    <div class="order-stats-label">Chiffre d'affaire net</div>
                    <div class="order-stats-value">{{ (stats.summary.net_revenue_ttc / 100)|number_format(2, ',', ' ') }} €</div>
                    <div class="order-stats-kicker">Brut - avoirs - frais de transaction</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default order-stats-card">
                <div class="panel-body">
                    <div class="order-stats-label">Chiffre d'affaire brut</div>
                    <div class="order-stats-value">{{ (stats.summary.revenue_ttc / 100)|number_format(2, ',', ' ') }} €</div>
                    <div class="order-stats-subtle" style="margin-top: 10px;">
                        Produits : {{ (stats.summary.products_ttc / 100)|number_format(2, ',', ' ') }} €<br>
                        Port : {{ (stats.summary.shipping_ttc / 100)|number_format(2, ',', ' ') }} €
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default order-stats-card">
                <div class="panel-body">
                    <div class="order-stats-label">Commandes payees</div>
                    <div class="order-stats-value">{{ stats.summary.order_count }}</div>
                    <div class="order-stats-subtle" style="margin-top: 10px;">
                        Clients distincts : {{ stats.summary.unique_customer_count }}<br>
                        Clients recurrents : {{ stats.summary.repeat_customer_count }}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default order-stats-card">
                <div class="panel-body">
                    <div class="order-stats-label">Panier moyen TTC</div>
                    <div class="order-stats-value">{{ (stats.summary.average_basket_ttc / 100)|number_format(2, ',', ' ') }} €</div>
                    <div class="order-stats-subtle" style="margin-top: 10px;">
                        Port moyen : {{ (stats.summary.average_shipping_ttc / 100)|number_format(2, ',', ' ') }} €<br>
                        Equivalence moyenne : {{ stats.summary.average_equivalence|number_format(2, ',', ' ') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-default order-stats-card">
                <div class="panel-body">
                    <div class="order-stats-label">Avoirs</div>
                    <div class="order-stats-value">{{ (stats.summary.credit_total_ttc / 100)|number_format(2, ',', ' ') }} €</div>
                    <div class="order-stats-subtle" style="margin-top: 10px;">
                        Produits : {{ (stats.summary.credit_items_ttc / 100)|number_format(2, ',', ' ') }} €<br>
                        Port : {{ (stats.summary.credit_shipping_ttc / 100)|number_format(2, ',', ' ') }} €
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default order-stats-card">
                <div class="panel-body">
                    <div class="order-stats-label">Frais de transaction</div>
                    <div class="order-stats-value">{{ (stats.summary.transaction_fees_ttc / 100)|number_format(2, ',', ' ') }} €</div>
                    <div class="order-stats-subtle" style="margin-top: 10px;">
                        {{ stats.summary.transaction_fee_order_count }}/{{ stats.summary.order_count }} commandes calculees<br>
                        {{ stats.summary.transaction_fee_missing_order_count }} calcul(s) manquant(s)
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default order-stats-card">
                <div class="panel-body">
                    <div class="order-stats-label">Remises et promos</div>
                    <div class="order-stats-value">{{ ((stats.summary.discount_ttc + stats.summary.promo_items_ttc + stats.summary.promo_shipping_ttc) / 100)|number_format(2, ',', ' ') }} €</div>
                    <div class="order-stats-subtle" style="margin-top: 10px;">
                        Tarifaires : {{ (stats.summary.discount_ttc / 100)|number_format(2, ',', ' ') }} €<br>
                        Degressif : {{ (stats.summary.degressive_ttc / 100)|number_format(2, ',', ' ') }} €
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default order-stats-card">
                <div class="panel-body">
                    <div class="order-stats-label">Ratios</div>
                    <div class="order-stats-value">{{ stats.summary.shipping_rate_percent|number_format(2, ',', ' ') }} %</div>
                    <div class="order-stats-subtle" style="margin-top: 10px;">
                        Part du port dans le CA brut<br>
                        Avoirs : {{ stats.summary.credit_rate_percent|number_format(2, ',', ' ') }} %<br>
                        Remises : {{ stats.summary.discount_rate_percent|number_format(2, ',', ' ') }} %
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default order-stats-panel">
                <div class="panel-heading">
                    Detail du chiffre d'affaire
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered order-stats-breakdown">
                        <tbody>
                        {% for item in stats.revenue_breakdown %}
                            <tr class="
                                {% if item.tone == 'negative' %}
                                    -negative
                                {% elseif item.tone == 'total' %}
                                    -total
                                {% else %}
                                    -positive
                                {% endif %}
                            ">
                                <th>{{ item.label }}</th>
                                <td class="order-stats-subtle">{{ item.context }}</td>
                                <td class="text-right text-amount">
                                    {% if item.tone == 'negative' %}-{% endif %}{{ (item.amount_ttc / 100)|number_format(2, ',', ' ') }} €
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="panel panel-default order-stats-panel">
                <div class="panel-heading">
                    Reperes de lecture
                </div>
                <div class="panel-body">
                    <table class="table table-bordered" style="margin-bottom: 0;">
                        <tbody>
                        <tr>
                            <th>Produits / CA brut</th>
                            <td>{{ stats.summary.products_ttc > 0 and stats.summary.revenue_ttc > 0 ? ((stats.summary.products_ttc / stats.summary.revenue_ttc) * 100)|number_format(2, ',', ' ') : '0,00' }} %</td>
                        </tr>
                        <tr>
                            <th>Port / CA brut</th>
                            <td>{{ stats.summary.shipping_rate_percent|number_format(2, ',', ' ') }} %</td>
                        </tr>
                        <tr>
                            <th>Avoirs / CA brut</th>
                            <td>{{ stats.summary.credit_rate_percent|number_format(2, ',', ' ') }} %</td>
                        </tr>
                        <tr>
                            <th>Commandes avec avoir</th>
                            <td>{{ stats.summary.credited_order_count }}</td>
                        </tr>
                        <tr>
                            <th>Promos produits</th>
                            <td>{{ (stats.summary.promo_items_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                        </tr>
                        <tr>
                            <th>Promos frais de port</th>
                            <td>{{ (stats.summary.promo_shipping_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                        </tr>
                        <tr>
                            <th>Montant degressif</th>
                            <td>{{ (stats.summary.degressive_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                        </tr>
                        <tr>
                            <th>Commandes sans frais de transaction</th>
                            <td>{{ stats.summary.transaction_fee_missing_order_count }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-7">
            <div class="panel panel-default order-stats-panel">
                <div class="panel-heading">
                    Evolution des commandes et du chiffre d'affaire
                </div>
                <div class="panel-body">
                    {% if stats.summary.order_count > 0 %}
                        <div id="order-stats-chart" data-chart="{{ stats.chart|json_encode|e('html_attr') }}"></div>
                    {% else %}
                        <div class="alert alert-info" style="margin-bottom: 0;">
                            Aucune commande payee ne correspond aux filtres selectionnes.
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="panel panel-default order-stats-panel">
                <div class="panel-heading">
                    Graphique etoile des produits
                </div>
                <div class="panel-body">
                    {% if stats.radar.indicators is not empty %}
                        <div id="order-stats-radar" data-radar="{{ stats.radar|json_encode|e('html_attr') }}"></div>
                        <p class="order-stats-subtle" style="margin-bottom: 0;">
                            Comparaison des produits les plus vendeurs sur deux axes : part du chiffre d'affaire et part des quantites vendues.
                        </p>
                    {% else %}
                        <div class="order-stats-empty">Pas assez de donnees produits pour afficher le radar.</div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default order-stats-panel">
        <div class="panel-heading">
            Produits vendus
        </div>
        {% set visible_sold_products = stats.sold_products|slice(0, 10) %}
        {% set hidden_sold_products = stats.sold_products|slice(10) %}
        <div class="table-responsive">
            <table class="table table-bordered table-striped order-stats-table" data-sortable-table data-default-sort="6" data-default-order="desc">
                <thead>
                <tr>
                    <th data-sortable data-sort-type="text">Produit<span class="order-stats-sort-indicator"></span></th>
                    <th data-sortable data-sort-type="text">Type<span class="order-stats-sort-indicator"></span></th>
                    <th data-sortable data-sort-type="text">Unite<span class="order-stats-sort-indicator"></span></th>
                    <th class="text-right" data-sortable data-sort-type="number">Quantite<span class="order-stats-sort-indicator"></span></th>
                    <th class="text-right" data-sortable data-sort-type="number">Commandes<span class="order-stats-sort-indicator"></span></th>
                    <th class="text-right" data-sortable data-sort-type="number">Prix moyen TTC<span class="order-stats-sort-indicator"></span></th>
                    <th class="text-right" data-sortable data-sort-type="number">CA net TTC<span class="order-stats-sort-indicator"></span></th>
                    <th class="text-right" data-sortable data-sort-type="number">Part CA<span class="order-stats-sort-indicator"></span></th>
                </tr>
                </thead>
                <tbody>
                {% for product in visible_sold_products %}
                    <tr>
                        <td data-sort-value="{{ product.product_name }}">
                            <span class="order-stats-table-name">{{ product.product_name }}</span>
                        </td>
                        <td data-sort-value="{{ product.type_name }}">{{ product.type_name }}</td>
                        <td data-sort-value="{{ product.unit_label }}">{{ product.unit_label }}</td>
                        <td class="text-right" data-sort-value="{{ product.quantity }}">{{ product.quantity }}</td>
                        <td class="text-right" data-sort-value="{{ product.order_count }}">{{ product.order_count }}</td>
                        <td class="text-right text-amount" data-sort-value="{{ product.average_price_ttc }}">{{ (product.average_price_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                        <td class="text-right text-amount" data-sort-value="{{ product.revenue_ttc }}">{{ (product.revenue_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                        <td class="text-right" data-sort-value="{{ product.share_revenue_percent }}">{{ product.share_revenue_percent|number_format(2, ',', ' ') }} %</td>
                    </tr>
                {% else %}
                    <tr data-empty-row="true">
                        <td colspan="8" class="order-stats-empty">Aucune ligne produit sur la periode selectionnee.</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {% if hidden_sold_products is not empty %}
            <details class="order-stats-accordion">
                <summary>Voir les {{ hidden_sold_products|length }} autres produits</summary>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped order-stats-table" data-sortable-table data-default-sort="6" data-default-order="desc">
                        <thead>
                        <tr>
                            <th data-sortable data-sort-type="text">Produit<span class="order-stats-sort-indicator"></span></th>
                            <th data-sortable data-sort-type="text">Type<span class="order-stats-sort-indicator"></span></th>
                            <th data-sortable data-sort-type="text">Unite<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">Quantite<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">Commandes<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">Prix moyen TTC<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">CA net TTC<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">Part CA<span class="order-stats-sort-indicator"></span></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for product in hidden_sold_products %}
                            <tr>
                                <td data-sort-value="{{ product.product_name }}">
                                    <span class="order-stats-table-name">{{ product.product_name }}</span>
                                </td>
                                <td data-sort-value="{{ product.type_name }}">{{ product.type_name }}</td>
                                <td data-sort-value="{{ product.unit_label }}">{{ product.unit_label }}</td>
                                <td class="text-right" data-sort-value="{{ product.quantity }}">{{ product.quantity }}</td>
                                <td class="text-right" data-sort-value="{{ product.order_count }}">{{ product.order_count }}</td>
                                <td class="text-right text-amount" data-sort-value="{{ product.average_price_ttc }}">{{ (product.average_price_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                                <td class="text-right text-amount" data-sort-value="{{ product.revenue_ttc }}">{{ (product.revenue_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                                <td class="text-right" data-sort-value="{{ product.share_revenue_percent }}">{{ product.share_revenue_percent|number_format(2, ',', ' ') }} %</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </details>
        {% endif %}
    </div>

    {% if stats.option_summary.products_with_options_count > 0 %}
        <div class="panel panel-default order-stats-panel">
            <div class="panel-heading">
                Options produits
            </div>
            <div class="panel-body">
                <div class="row" style="margin-bottom: 18px;">
                    <div class="col-md-3 col-sm-6">
                        <div class="order-stats-label">CA options TTC</div>
                        <div class="order-stats-value" style="font-size: 24px;">{{ (stats.option_summary.option_revenue_ttc / 100)|number_format(2, ',', ' ') }} €</div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="order-stats-label">Quantites avec option</div>
                        <div class="order-stats-value" style="font-size: 24px;">{{ stats.option_summary.option_quantity }}</div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="order-stats-label">Commandes avec option</div>
                        <div class="order-stats-value" style="font-size: 24px;">{{ stats.option_summary.option_order_count }}</div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="order-stats-label">Taux d'equipement</div>
                        <div class="order-stats-value" style="font-size: 24px;">{{ stats.option_summary.attach_rate_percent|number_format(2, ',', ' ') }} %</div>
                    </div>
                </div>

                <p class="order-stats-subtle">
                    Bloc affiche uniquement quand au moins un produit a vendu une option sur la periode.
                </p>
            </div>
            {% set visible_option_products = stats.option_products|slice(0, 10) %}
            {% set hidden_option_products = stats.option_products|slice(10) %}
            <div class="table-responsive">
                <table class="table table-bordered table-striped order-stats-table" data-sortable-table data-default-sort="4" data-default-order="desc">
                    <thead>
                    <tr>
                        <th data-sortable data-sort-type="text">Produit<span class="order-stats-sort-indicator"></span></th>
                        <th class="text-right" data-sortable data-sort-type="number">Ventes produit<span class="order-stats-sort-indicator"></span></th>
                        <th class="text-right" data-sortable data-sort-type="number">Quantites avec option<span class="order-stats-sort-indicator"></span></th>
                        <th class="text-right" data-sortable data-sort-type="number">Taux d'equipement<span class="order-stats-sort-indicator"></span></th>
                        <th class="text-right" data-sortable data-sort-type="number">CA options TTC<span class="order-stats-sort-indicator"></span></th>
                        <th>Detail<span class="order-stats-sort-indicator"></span></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for product in visible_option_products %}
                        <tr>
                            <td data-sort-value="{{ product.product_name }}">
                                <span class="order-stats-table-name">{{ product.product_name }}</span>
                                <span class="order-stats-table-secondary">{{ product.type_name }}{% if product.unit_label != '-' %} · {{ product.unit_label }}{% endif %}</span>
                            </td>
                            <td class="text-right" data-sort-value="{{ product.quantity }}">{{ product.quantity }}</td>
                            <td class="text-right" data-sort-value="{{ product.option_quantity }}">{{ product.option_quantity }}</td>
                            <td class="text-right" data-sort-value="{{ product.option_attach_rate_percent }}">{{ product.option_attach_rate_percent|number_format(2, ',', ' ') }} %</td>
                            <td class="text-right text-amount" data-sort-value="{{ product.option_revenue_ttc }}">{{ (product.option_revenue_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                            <td data-sort-value="{{ product.option_revenue_ttc }}">
                                {% if product.options is not empty %}
                                    <details class="order-stats-details">
                                        <summary>{{ product.options|length }} option(s)</summary>
                                        <ul class="order-stats-details-list">
                                            {% for option in product.options %}
                                                <li>
                                                    <strong>{{ option.name }}</strong> :
                                                    {{ option.quantity }} vente(s),
                                                    {{ (option.revenue_ttc / 100)|number_format(2, ',', ' ') }} € TTC
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </details>
                                {% else %}
                                    <span class="text-muted">Aucune option vendue</span>
                                {% endif %}
                            </td>
                        </tr>
                    {% else %}
                        <tr data-empty-row="true">
                            <td colspan="6" class="order-stats-empty">Aucune vente produit sur la periode selectionnee.</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            {% if hidden_option_products is not empty %}
                <details class="order-stats-accordion">
                    <summary>Voir les {{ hidden_option_products|length }} autres produits avec options</summary>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped order-stats-table" data-sortable-table data-default-sort="4" data-default-order="desc">
                            <thead>
                            <tr>
                                <th data-sortable data-sort-type="text">Produit<span class="order-stats-sort-indicator"></span></th>
                                <th class="text-right" data-sortable data-sort-type="number">Ventes produit<span class="order-stats-sort-indicator"></span></th>
                                <th class="text-right" data-sortable data-sort-type="number">Quantites avec option<span class="order-stats-sort-indicator"></span></th>
                                <th class="text-right" data-sortable data-sort-type="number">Taux d'equipement<span class="order-stats-sort-indicator"></span></th>
                                <th class="text-right" data-sortable data-sort-type="number">CA options TTC<span class="order-stats-sort-indicator"></span></th>
                                <th>Detail<span class="order-stats-sort-indicator"></span></th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for product in hidden_option_products %}
                                <tr>
                                    <td data-sort-value="{{ product.product_name }}">
                                        <span class="order-stats-table-name">{{ product.product_name }}</span>
                                        <span class="order-stats-table-secondary">{{ product.type_name }}{% if product.unit_label != '-' %} · {{ product.unit_label }}{% endif %}</span>
                                    </td>
                                    <td class="text-right" data-sort-value="{{ product.quantity }}">{{ product.quantity }}</td>
                                    <td class="text-right" data-sort-value="{{ product.option_quantity }}">{{ product.option_quantity }}</td>
                                    <td class="text-right" data-sort-value="{{ product.option_attach_rate_percent }}">{{ product.option_attach_rate_percent|number_format(2, ',', ' ') }} %</td>
                                    <td class="text-right text-amount" data-sort-value="{{ product.option_revenue_ttc }}">{{ (product.option_revenue_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                                    <td data-sort-value="{{ product.option_revenue_ttc }}">
                                        {% if product.options is not empty %}
                                            <details class="order-stats-details">
                                                <summary>{{ product.options|length }} option(s)</summary>
                                                <ul class="order-stats-details-list">
                                                    {% for option in product.options %}
                                                        <li>
                                                            <strong>{{ option.name }}</strong> :
                                                            {{ option.quantity }} vente(s),
                                                            {{ (option.revenue_ttc / 100)|number_format(2, ',', ' ') }} € TTC
                                                        </li>
                                                    {% endfor %}
                                                </ul>
                                            </details>
                                        {% else %}
                                            <span class="text-muted">Aucune option vendue</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </details>
            {% endif %}
        </div>
    {% endif %}

    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default order-stats-panel">
                <div class="panel-heading">
                    Chiffre d'affaire par type de produit
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped order-stats-table" data-sortable-table data-default-sort="4" data-default-order="desc">
                        <thead>
                        <tr>
                            <th data-sortable data-sort-type="text">Type<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">Quantite<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">Commandes<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">Prix moyen TTC<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">CA net TTC<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">Part CA<span class="order-stats-sort-indicator"></span></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for type in stats.product_types %}
                            <tr>
                                <td data-sort-value="{{ type.name }}">
                                    <span class="order-stats-table-name">{{ type.name }}</span>
                                </td>
                                <td class="text-right" data-sort-value="{{ type.quantity }}">{{ type.quantity }}</td>
                                <td class="text-right" data-sort-value="{{ type.order_count }}">{{ type.order_count }}</td>
                                <td class="text-right text-amount" data-sort-value="{{ type.average_price_ttc }}">{{ (type.average_price_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                                <td class="text-right text-amount" data-sort-value="{{ type.revenue_ttc }}">{{ (type.revenue_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                                <td class="text-right" data-sort-value="{{ type.share_revenue_percent }}">{{ type.share_revenue_percent|number_format(2, ',', ' ') }} %</td>
                            </tr>
                        {% else %}
                            <tr data-empty-row="true">
                                <td colspan="6" class="order-stats-empty">Aucune donnee de type produit.</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="panel panel-default order-stats-panel" style="margin-bottom: 20px;">
                <div class="panel-heading">
                    Top clients
                </div>
                <div class="panel-body">
                    <div class="row" style="margin-bottom: 14px;">
                        <div class="col-sm-7">
                            <div class="btn-group">
                                {% for client_limit in [10, 20, 30, 50] %}
                                    <a
                                        href="{{ path('admin_order_stats', filters.query_parameters|merge({'top_clients_limit': client_limit})) }}"
                                        class="btn {% if filters.top_clients_limit == client_limit %}btn-primary{% else %}btn-default{% endif %}"
                                    >
                                        Top {{ client_limit }}
                                    </a>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="col-sm-5 text-right">
                            <div class="order-stats-label">Total brut du top {{ filters.top_clients_limit }}</div>
                            <div class="order-stats-value" style="font-size: 24px; margin-top: 4px;">{{ (stats.top_clients_total_ttc / 100)|number_format(2, ',', ' ') }} €</div>
                        </div>
                    </div>
                    <p class="order-stats-subtle" style="margin-bottom: 0;">
                        Regroupement par email, tri par CA TTC decroissant. Si un client a plusieurs commandes, le nom et le prenom affiches correspondent a sa derniere commande.
                    </p>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped order-stats-table" data-sortable-table data-default-sort="5" data-default-order="desc">
                        <thead>
                        <tr>
                            <th data-sortable data-sort-type="text">Email<span class="order-stats-sort-indicator"></span></th>
                            <th data-sortable data-sort-type="text">Nom<span class="order-stats-sort-indicator"></span></th>
                            <th data-sortable data-sort-type="text">Prenom<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">Commandes<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">Panier moyen TTC<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">CA TTC<span class="order-stats-sort-indicator"></span></th>
                            <th data-sortable data-sort-type="text">Derniere commande<span class="order-stats-sort-indicator"></span></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for client in stats.top_clients %}
                            <tr>
                                <td data-sort-value="{{ client.email }}"><span class="order-stats-table-name">{{ client.email }}</span></td>
                                <td data-sort-value="{{ client.lastname }}">{{ client.lastname }}</td>
                                <td data-sort-value="{{ client.firstname }}">{{ client.firstname }}</td>
                                <td class="text-right" data-sort-value="{{ client.order_count }}">{{ client.order_count }}</td>
                                <td class="text-right text-amount" data-sort-value="{{ client.average_basket_ttc }}">{{ (client.average_basket_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                                <td class="text-right text-amount" data-sort-value="{{ client.revenue_ttc }}">{{ (client.revenue_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                                <td data-sort-value="{{ client.last_order_at ? client.last_order_at|date('Y-m-d H:i:s') : '' }}">
                                    {% if client.last_order_at %}
                                        {{ client.last_order_at|date('d/m/Y H:i') }}
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% else %}
                            <tr data-empty-row="true">
                                <td colspan="7" class="order-stats-empty">Aucun client sur la periode selectionnee.</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="panel panel-default order-stats-panel">
                <div class="panel-heading">
                    Par mode de paiement
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped order-stats-table" data-sortable-table data-default-sort="2" data-default-order="desc">
                        <thead>
                        <tr>
                            <th data-sortable data-sort-type="text">Mode<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">Commandes<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">CA TTC<span class="order-stats-sort-indicator"></span></th>
                            <th class="text-right" data-sortable data-sort-type="number">Frais transaction<span class="order-stats-sort-indicator"></span></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for method in stats.payment_methods %}
                            <tr>
                                <td data-sort-value="{{ method.name }}">
                                    <span class="order-stats-table-name">{{ method.name ?: '-' }}</span>
                                </td>
                                <td class="text-right" data-sort-value="{{ method.order_count }}">{{ method.order_count }}</td>
                                <td class="text-right text-amount" data-sort-value="{{ method.revenue_ttc }}">{{ (method.revenue_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                                <td class="text-right text-amount" data-sort-value="{{ method.transaction_fees_ttc }}">
                                    {% if method.missing_transaction_fee_order_count == 0 %}
                                        {{ (method.transaction_fees_ttc / 100)|number_format(2, ',', ' ') }} €
                                    {% elseif method.transaction_fee_order_count > 0 %}
                                        {{ (method.transaction_fees_ttc / 100)|number_format(2, ',', ' ') }} €
                                        <span class="order-stats-table-secondary">{{ method.transaction_fee_order_count }}/{{ method.order_count }} calculees</span>
                                    {% else %}
                                        <span class="text-muted">Non disponible</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% else %}
                            <tr data-empty-row="true">
                                <td colspan="4" class="order-stats-empty">Aucune donnee de paiement.</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default order-stats-panel">
        <div class="panel-heading">
            Par mode d'expedition ou de retrait
        </div>
        <div class="table-responsive">
            <table class="table table-bordered table-striped order-stats-table" data-sortable-table data-default-sort="5" data-default-order="desc">
                <thead>
                <tr>
                    <th data-sortable data-sort-type="text">Mode<span class="order-stats-sort-indicator"></span></th>
                    <th data-sortable data-sort-type="text">Type<span class="order-stats-sort-indicator"></span></th>
                    <th class="text-right" data-sortable data-sort-type="number">Commandes<span class="order-stats-sort-indicator"></span></th>
                    <th class="text-right" data-sortable data-sort-type="number">Produits TTC<span class="order-stats-sort-indicator"></span></th>
                    <th class="text-right" data-sortable data-sort-type="number">Port TTC<span class="order-stats-sort-indicator"></span></th>
                    <th class="text-right" data-sortable data-sort-type="number">Total TTC<span class="order-stats-sort-indicator"></span></th>
                </tr>
                </thead>
                <tbody>
                {% for method in stats.delivery_methods %}
                    <tr>
                        <td data-sort-value="{{ method.name }}"><span class="order-stats-table-name">{{ method.name ?: '-' }}</span></td>
                        <td data-sort-value="{{ method.type }}">{{ method.type }}</td>
                        <td class="text-right" data-sort-value="{{ method.order_count }}">{{ method.order_count }}</td>
                        <td class="text-right text-amount" data-sort-value="{{ method.products_ttc }}">{{ (method.products_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                        <td class="text-right text-amount" data-sort-value="{{ method.shipping_ttc }}">{{ (method.shipping_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                        <td class="text-right text-amount" data-sort-value="{{ method.revenue_ttc }}">{{ (method.revenue_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                    </tr>
                {% else %}
                    <tr data-empty-row="true">
                        <td colspan="6" class="order-stats-empty">Aucune donnee de livraison.</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="panel panel-default order-stats-panel" style="margin-top: 20px;">
        <div class="panel-heading">
            Tableau chronologique
        </div>
        <div class="panel-body">
            <div class="order-stats-meta" style="margin-bottom: 0;">
                <span class="order-stats-meta-chip">
                    Regroupement :
                    {% if stats.timeline.group_by == 'day' %}
                        Jour
                    {% elseif stats.timeline.group_by == 'year' %}
                        Annee
                    {% else %}
                        Mois
                    {% endif %}
                </span>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-bordered table-striped order-stats-table" data-sortable-table data-default-sort="0" data-default-order="asc">
                <thead>
                <tr>
                    <th data-sortable data-sort-type="number">Periode<span class="order-stats-sort-indicator"></span></th>
                    <th class="text-right" data-sortable data-sort-type="number">Commandes<span class="order-stats-sort-indicator"></span></th>
                    <th class="text-right" data-sortable data-sort-type="number">CA TTC<span class="order-stats-sort-indicator"></span></th>
                    <th class="text-right" data-sortable data-sort-type="number">Panier moyen TTC<span class="order-stats-sort-indicator"></span></th>
                </tr>
                </thead>
                <tbody>
                {% for row in stats.timeline.rows %}
                    <tr>
                        <td data-sort-value="{{ row.sort_value }}"><span class="order-stats-table-name">{{ row.label }}</span></td>
                        <td class="text-right" data-sort-value="{{ row.orders }}">{{ row.orders }}</td>
                        <td class="text-right text-amount" data-sort-value="{{ row.revenue_ttc }}">{{ (row.revenue_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                        <td class="text-right text-amount" data-sort-value="{{ row.average_basket_ttc }}">{{ (row.average_basket_ttc / 100)|number_format(2, ',', ' ') }} €</td>
                    </tr>
                {% else %}
                    <tr data-empty-row="true">
                        <td colspan="4" class="order-stats-empty">Aucune donnee chronologique sur cette vue.</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/cpcreationviticore/js/admin/lib/echarts.min.js') }}"></script>
    <script src="{{ asset('bundles/cpcreationviticore/js/admin/order-stats.js') }}"></script>
{% endblock %}
