{% extends '@admin/base.html.twig' %}
{% block stylesheets %}
    {{ parent() }}

    <style>
        /* 🧩 Table fixée mais fluide */
        .table.filter-table {
            table-layout: auto;
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 0.5rem;
        }

        .filter-table th {
            white-space: nowrap;
            text-align: right;
            vertical-align: middle;
            color: #444;
            font-weight: 600;
            padding-right: 10px;
            width: 180px;
        }

        .filter-table td {
            vertical-align: middle;
            padding-bottom: 0.5rem;
        }

        /* 🎯 Champs */
        .filter-table input.form-control,
        .filter-table select.form-control {
            max-width: 100%;
            width: 100%;
            min-width: 120px;
        }

        /* ✅ Responsive: champs s’adaptent en mobile */
        @media (max-width: 768px) {
            .filter-table th {
                display: block;
                width: 100%;
                text-align: left;
                margin-bottom: 4px;
            }

            .filter-table td {
                display: block;
                width: 100%;
                margin-bottom: 12px;
            }

            .filter-table tr {
                display: block;
                margin-bottom: 1rem;
                border-bottom: 1px solid #eee;
                padding-bottom: 1rem;
            }
        }

        /* 🪟 Encadré propre */
        .filter-box {
            background-color:rgb(240, 238, 238);
            border: 1px solid #e3e3e3;
            border-radius: 6px;
            padding: 1rem 1.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.04);
        }

        .filter-box {
            background-color: #f8f9fa;
            border: 1px solid #e3e3e3;
            border-radius: 6px;
            padding: 1rem 1.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.04);
            margin-bottom: 2rem;
        }

</style>


{% endblock %}
{% block subheader %}
<ul class="breadcrumb">
    <li class="breadcrumb-item">
        <a href="{{ path('statistic_index') }}">Accueil</a>
    </li>
    <li class="breadcrumb-item active">Statistiques Vente par Produits</li>
</ul>
{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block bodycontent %}
<div class="container-fluid py-4">
    {#--Bouton Filtre--#}
    <button class="btn btn-primary d-md-none" onclick="document.getElementById('filter-panel-stat').classList.add('show')">
        Filtres
    </button>
    <div class="row">
        {# Colonne de gauche : Filtres #}
        <div class="col-xl-3 col-lg-4">
            <div class="filter-box p-3 mb-4">


                {# Champs du formulaire : en colonne, proprement espacés #}
                <div class="mb-3">
                    <label class="form-label fw-bold">Groupes</label>
                    <div class="d-flex flex-column gap-2">
                        {% for gr in form.group %}
                            <div class="form-check">
                                {{ form_widget(gr, {'attr': {'class': 'form-check-input'}}) }}
                                {{ form_label(gr, null, {'label_attr': {'class': 'form-check-label'}}) }}
                            </div>
                        {% endfor %}
                    </div>
                </div>

                {# Référence Produit #}
                <div class="mb-3">
                    <label class="form-label fw-bold"></label>
                    {{ form_widget(form.reference, {'attr': {'class': 'form-control m-input'}}) }}
                    {{ form_widget(form.typeElement, {'attr': {'class': 'form-control m-input mt-2'}}) }}
                    <input type="text" id="add_reference_produit_stat" class="form-control mt-2" placeholder="Référence dynamique">
                    <div class="result-search-reference-produit-stat mt-1" style="display: none;">
                        <ul class="m-menu__subnav padding-5" id="content-result-reference-produit-stat"></ul>
                    </div>
                </div>

                {# Date Avant #}
                <div class="mb-3">
                    <label class="form-label fw-bold">Date Avant</label>
                    {{ form_widget(form.dateBefore, {'attr': {'class': 'form-control m-input', 'autocomplete': 'off'}}) }}
                </div>

                {# Date Après #}
                <div class="mb-3">
                    <label class="form-label fw-bold">Date Après</label>
                    {{ form_widget(form.dateAfter, {'attr': {'class': 'form-control m-input', 'autocomplete': 'off'}}) }}
                </div>

                {# Source document #}
                <div class="mb-3">
                    <label class="form-label fw-bold">Source document</label>
                    {{ form_widget(form.sources, {'attr': {'class': 'form-control m-input'}}) }}
                </div>

                {# Catégories Produits #}
                <div class="mb-3">
                    <label class="form-label fw-bold">Catégories Produits</label>
                    {{ form_widget(form.categories, {'attr': {'class': 'form-control m-input'}}) }}
                </div>

                {# Statut #}
                <div class="mb-3">
                    <label class="form-label fw-bold">Statut</label>
                    {{ form_widget(form.status, {'attr': {'class': 'form-control m-input'}}) }}
                </div>

                {# Type #}
                <div class="mb-3">
                    <label class="form-label fw-bold">Type</label>
                    {{ form_widget(form.type, {'attr': {'class': 'form-control m-input'}}) }}
                </div>

                {{ form_widget(form.category, {'attr': {'class': 'form-control d-none'}}) }}

                <div class="m-form__actions mt-4 text-center">
                    <div class="row justify-content-center">
                        <div class="col-12">
                            {{ form_widget(form.save, {
                                'attr': {
                                    'class': 'btn btn-dark w-100 py-2 fs-6'
                                },
                                'label': 'Rechercher'
                            }) }}
                        </div>
                    </div>
                </div>

                {{ form_errors(form) }}
                {{ form_rest(form) }}
                {{ form_end(form) }}
            </div>
        </div>

        {# Colonne de droite : résultats #}
        <div class="col-xl-9 col-lg-8">
            <div class="card shadow-sm fade-in">
                <div class="card-body">
                    <div class="table-responsive">
                        <div class="m_datatable table table-striped table-hover table-bordered" id="statisticTable"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block js %}
{{ parent() }}
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
<script src="{{ asset('assets/js/data-table.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        statisticsDatatable();

        $('#{{ form.save.vars.id }}').on('click', function (e) {
            e.preventDefault();
            statisticsDt.reload();
        });
    });
</script>
{% endblock %}