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

{% block stylesheets %}
    {{ parent() }}
    <style>
        .stat-toolbar {
            display: flex;
            align-items: center;
            gap: .6rem;
            flex-wrap: wrap;
            margin-bottom: .9rem;
        }

        .stat-card-shell {
            background: #fff;
            border: 1px solid #e6e9ef;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
        }

        .crm-filter-box {
            background: #fff;
            border: 1px solid #e6e9ef;
            border-radius: 10px;
            padding: .9rem;
        }

        .crm-filter-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .5rem;
            border-bottom: 1px solid #eef2f7;
            padding-bottom: .6rem;
            margin-bottom: .8rem;
        }

        .crm-filter-field {
            display: block;
            margin-bottom: .7rem;
        }

        .crm-filter-label {
            font-size: .82rem;
            color: #475569;
            font-weight: 600;
            margin: 0 0 .28rem 0;
        }

        .crm-filter-control .form-control,
        .crm-filter-control .select2-container {
            width: 100% !important;
        }

        .stat-inline-radios {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: .65rem;
        }

        .stat-inline-radios .m-radio {
            margin: 0;
        }

        .date-range-row {
            display: flex;
            align-items: center;
            gap: .5rem;
            flex-wrap: wrap;
        }

        #filterOffcanvasStatProd {
            --bs-offcanvas-width: clamp(310px, 32vw, 380px);
            top: var(--statprod-offcanvas-top, 100px);
            height: calc(100vh - var(--statprod-offcanvas-top, 100px));
            z-index: 1018;
        }

        @media (max-width: 991.98px) {
            #filterOffcanvasStatProd {
                --bs-offcanvas-width: min(80vw, 340px);
            }
        }

        @media (max-width: 767.98px) {
            #statisticTable {
                border: 0;
            }

            #statisticTable thead {
                display: none;
            }

            #statisticTable tbody tr {
                display: block;
                margin-bottom: .6rem;
                border: 1px solid #e4e9f0;
                border-radius: 12px;
                background: #fff;
                box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
                overflow: visible;
            }

            #statisticTable tbody td {
                display: none !important;
                border: 0 !important;
                padding: 0 !important;
            }

            #statisticTable tbody td.stat-mobile-host {
                display: block !important;
            }

            .stat-m-card {
                display: grid;
                grid-template-columns: 48px minmax(0, 1fr) auto;
                gap: .55rem;
                padding: .5rem .55rem;
                align-items: start;
            }

            .stat-m-thumb {
                width: 48px;
                height: 48px;
                border-radius: 10px;
                border: 1px solid #e7ebf2;
                background: #f8fafc;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }

            .stat-m-thumb img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .stat-m-main {
                min-width: 0;
            }

            .stat-m-top {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: .4rem;
            }

            .stat-m-right {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: .2rem;
            }

            .stat-m-badge-state,
            .stat-m-badge-sold {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 999px;
                font-size: .66rem;
                line-height: 1;
                padding: .24rem .4rem;
                border: 1px solid transparent;
                white-space: nowrap;
            }

            .stat-m-badge-state {
                background: #f1f5f9;
                border-color: #e2e8f0;
                color: #334155;
            }

            .stat-m-badge-sold {
                background: #e8f7ef;
                border-color: #b8e7cc;
                color: #166534;
                font-weight: 700;
            }

            .stat-m-ref {
                color: #1d4ed8;
                font-weight: 700;
                font-size: .86rem;
                line-height: 1.2;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 48vw;
            }

            .stat-m-name {
                margin-top: .06rem;
                font-size: .8rem;
                color: #0f172a;
                font-weight: 600;
                line-height: 1.2;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .stat-m-cat {
                margin-top: .04rem;
                font-size: .72rem;
                color: #64748b;
                line-height: 1.2;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .stat-m-chips {
                margin-top: .28rem;
                display: flex;
                gap: .3rem;
                flex-wrap: wrap;
            }

            .stat-m-chip {
                font-size: .68rem;
                line-height: 1;
                padding: .24rem .42rem;
                border-radius: 999px;
                background: #f1f5f9;
                color: #1f2937;
                border: 1px solid #e2e8f0;
                white-space: nowrap;
            }

            .stat-m-chip .k {
                font-weight: 700;
                color: #334155;
                margin-right: .16rem;
            }

            .stat-m-actions .btn {
                width: 28px;
                height: 28px;
                min-width: 28px;
                padding: 0;
                border-radius: 8px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .crm-filter-field {
                margin-bottom: .65rem;
            }
        }
    </style>
{% endblock %}

{% block subheader %}
  <div class="badge-titre d-flex justify-content-between align-items-center flex-wrap w-100 mb-3" style="min-height:3.2rem;">
    <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center gap-2">
      <span class="crm-badge me-2">
        <i class="fa fa-chart-bar"></i>
      </span>
      <div>
        <h3 class="badge-title-main mb-0" style="font-size:1.18rem;">
          STATISTIQUES - VENTES PAR PRODUIT
        </h3>
      </div>
    </div>
  </div>
{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block bodycontent %}
<div class="container-fluid py-4">
    <div class="stat-toolbar">
        <button class="btn btn-outline-primary btn-sm"
                type="button"
                data-bs-toggle="offcanvas"
                data-bs-target="#filterOffcanvasStatProd"
                aria-controls="filterOffcanvasStatProd">
            <i class="fa fa-filter me-1"></i> Filtres
        </button>
        <button class="btn btn-outline-dark btn-sm"
                type="button"
                id="btnRefreshStatProd"
                title="Actualiser avec les filtres actuels">
            <i class="fa fa-rotate-right me-1"></i> Actualiser
        </button>
    </div>

    <div class="stat-card-shell p-3">
        <div class="table-responsive">
            <table id="statisticTable" class="table table-striped table-bordered w-100">
                <thead>
                    <tr>
                        <th></th>
                        <th>Photo</th>
                        <th>Actif</th>
                        <th>Reference</th>
                        <th>Nom</th>
                        <th>Categorie</th>
                        <th>Qt Cde</th>
                        <th>Qt Vendue</th>
                        <th>Qt Annulee</th>
                        <th>Qt Retournee</th>
                        <th>Montant</th>
                        <th>Prix moyen</th>
                        <th>Fournisseur</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<div class="offcanvas offcanvas-start"
     tabindex="-1"
     id="filterOffcanvasStatProd"
     aria-labelledby="filterOffcanvasStatProdLabel"
     data-bs-backdrop="false"
     data-bs-scroll="true">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="filterOffcanvasStatProdLabel">
            Filtres statistiques
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
    </div>
    <div class="offcanvas-body">
        <div class="crm-filter-box">
            {{ form_start(form, {
                attr: {
                    id: 'form_statistic_filters',
                    class: 'm-form m-form--fit m-form--label-align-left'
                }
            }) }}

            <div class="crm-filter-head">
                <button type="submit" class="btn btn-sm btn-dark">
                    <i class="fa fa-search me-1"></i> Rechercher
                </button>
                <a href="{{ path(app.request.attributes.get('_route'), { reset: 1 }) }}"
                   class="btn btn-sm btn-light border"
                   title="Reinitialiser les filtres">
                    <i class="fa fa-eraser"></i>
                </a>
            </div>

            <div class="crm-filter-field">
                <div class="crm-filter-label">Produits archives</div>
                <div class="crm-filter-control">
                    <div class="stat-inline-radios">
                        <label class="m-radio m-radio--solid m-radio--primary">
                            <input type="radio" name="filter_statistic[archived]" value="all" checked> Tous<span></span>
                        </label>
                        <label class="m-radio m-radio--solid m-radio--primary">
                            <input type="radio" name="filter_statistic[archived]" value="0"> Non<span></span>
                        </label>
                        <label class="m-radio m-radio--solid m-radio--primary">
                            <input type="radio" name="filter_statistic[archived]" value="1"> Oui<span></span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="crm-filter-field">
                <div class="crm-filter-label">Reference produit</div>
                <div class="crm-filter-control">
                    {{ 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="Reference 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>
            </div>

            <div class="crm-filter-field">
                <div class="crm-filter-label">Date de creation</div>
                <div class="crm-filter-control">
                    {{ form_widget(form.date, { attr: { id:'filter_statistic_date', class:'form-control m-input select2', placeholder:'Date' } }) }}
                    <div class="date-range-row mt-2">
                        <label class="dateBefore mb-0" style="display:none;">Du</label>
                        {{ form_widget(form.dateBefore,  { attr: { id:'filter_statistic_dateBefore', class:'form-control form-control-sm m-input', autocomplete:'off', style:'width:145px;display:none;' } }) }}
                        <label class="dateAfter mb-0" style="display:none;">Au</label>
                        {{ form_widget(form.dateAfter,   { attr: { id:'filter_statistic_dateAfter', class:'form-control form-control-sm m-input', autocomplete:'off', style:'width:145px;display:none;' } }) }}
                    </div>
                </div>
            </div>

            <div class="crm-filter-field">
                <div class="crm-filter-label">Source document</div>
                <div class="crm-filter-control">
                    {{ form_widget(form.sources, {'attr': {'class': 'form-control m-input select2'}}) }}
                </div>
            </div>

            <div class="crm-filter-field">
                <div class="crm-filter-label">Categories produits</div>
                <div class="crm-filter-control">
                    {{ form_widget(form.categories, {'attr': {'class': 'form-control m-input select2'}}) }}
                </div>
            </div>

            <div class="crm-filter-field">
                <div class="crm-filter-label">Fournisseur</div>
                <div class="crm-filter-control">
                    {{ form_widget(form.supplier, {'attr': {'class': 'form-control m-input select2'}}) }}
                </div>
            </div>

            <div class="crm-filter-field">
                <div class="crm-filter-label">Type commande</div>
                <div class="crm-filter-control">
                    {{ form_widget(form.type, {'attr': {'class': 'form-control m-input select2'}}) }}
                </div>
            </div>

            <div class="crm-filter-field">
                <div class="crm-filter-label">Statut commande</div>
                <div class="crm-filter-control">
                    {{ form_widget(form.status, {'attr': {'class': 'form-control m-input select2'}}) }}
                </div>
            </div>

            <div class="pt-2">
                {{ form_widget(form.save, {
                    attr: {
                        class: 'btn btn-dark w-100',
                        id: 'filter_statistic_save'
                    },
                    label: 'Rechercher'
                }) }}
            </div>

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

{% include '@admin/statistic/_modal_declinations_stats.html.twig' %}
{% endblock %}

{% block js %}
{{ parent() }}
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
<script>
    function renderStatisticMobileCards() {
        if (!window.matchMedia('(max-width: 767.98px)').matches) return;
        if (!$.fn.DataTable.isDataTable('#statisticTable')) return;

        var dt = $('#statisticTable').DataTable();
        dt.rows({ page: 'current' }).every(function () {
            var d = this.data() || {};
            var $tr = $(this.node());
            var $first = $tr.find('td').eq(0);
            if (!$first.length) return;

            var imageSrc = d.image ? ('/images/' + (d.image_folder || '300-400') + '/' + d.image) : '';
            var activeBadge = d.isArchived
                ? '<span class="stat-m-badge-state">Archive</span>'
                : '<span class="stat-m-badge-state">Actif</span>';

            var supplier = d.supplier ? String(d.supplier) : '-';
            var amount = ((Number(d.montantTotal) || 0).toFixed(3)) + ' TND';

            $first
                .addClass('stat-mobile-host')
                .html(
                    '<div class="stat-m-card">' +
                        '<div class="stat-m-thumb">' +
                            (imageSrc ? '<img src="' + imageSrc + '" alt="">' : '<i class="fa fa-image text-muted"></i>') +
                        '</div>' +
                        '<div class="stat-m-main">' +
                            '<div class="stat-m-top">' +
                                '<div class="stat-m-ref">' + (d.reference || '-') + '</div>' +
                                '<div class="stat-m-right">' +
                                    activeBadge +
                                    '<span class="stat-m-badge-sold">Qt vendue: ' + (d.qtVendu || 0) + '</span>' +
                                '</div>' +
                            '</div>' +
                            '<div class="stat-m-name">' + (d.name || '') + '</div>' +
                            '<div class="stat-m-cat">' + (d.categories || '') + '</div>' +
                            '<div class="stat-m-chips">' +
                                '<span class="stat-m-chip"><span class="k">Montant:</span>' + amount + '</span>' +
                                '<span class="stat-m-chip"><span class="k">Four.:</span>' + supplier + '</span>' +
                            '</div>' +
                        '</div>' +
                        '<div class="stat-m-actions">' +
                            '<button class="btn btn-sm btn-primary show-declination-stats" data-id="' + (d.id || '') + '" data-ref="' + (d.reference || '') + '">' +
                                '<i class="fa fa-chart-bar"></i>' +
                            '</button>' +
                        '</div>' +
                    '</div>'
                );
        });
    }

    function initStatisticFilters() {
        if (typeof initSelect2Filters === 'function') {
            initSelect2Filters();
        }

        if (typeof filterStatisticDate === 'function' && $('#filter_statistic_date').length) {
            filterStatisticDate(false);
            $('#filter_statistic_date')
                .off('change.statprod select2:select.statprod')
                .on('change.statprod select2:select.statprod', function () {
                    filterStatisticDate(true);
                });
        }

        if (typeof statisticsDatatable === 'function') {
            statisticsDatatable();
        }

        $('#form_statistic_filters')
            .off('submit.statprod')
            .on('submit.statprod', function (e) {
                e.preventDefault();
                if (typeof statisticsDt !== 'undefined' && statisticsDt && statisticsDt.ajax) {
                    statisticsDt.ajax.reload();
                }

                var ocEl = document.getElementById('filterOffcanvasStatProd');
                if (ocEl && window.bootstrap && bootstrap.Offcanvas) {
                    bootstrap.Offcanvas.getOrCreateInstance(ocEl).hide();
                }
            });

        $('#btnRefreshStatProd')
            .off('click.statprod')
            .on('click.statprod', function () {
                $('#form_statistic_filters').trigger('submit');
            });

        $(document)
            .off('draw.dt.statprod')
            .on('draw.dt.statprod', function (e, settings) {
                if (!settings || settings.nTable.id !== 'statisticTable') return;
                renderStatisticMobileCards();
            });

        renderStatisticMobileCards();
    }

    function bindStatProdOffcanvasOffset() {
        var offcanvasEl = document.getElementById('filterOffcanvasStatProd');
        if (!offcanvasEl) return;

        var applyOffset = function () {
            var top = 92;
            var topnav = document.querySelector('#m_header, .crm-topbar, .m-topbar, .topbar, .topnav, .m-header');
            if (topnav) {
                var r = topnav.getBoundingClientRect();
                top = Math.max(64, Math.round(r.bottom + 6));
            }
            offcanvasEl.style.setProperty('--statprod-offcanvas-top', top + 'px');
        };

        applyOffset();
        window.addEventListener('resize', applyOffset, { passive: true });
        window.addEventListener('orientationchange', applyOffset, { passive: true });
        offcanvasEl.addEventListener('show.bs.offcanvas', applyOffset);
    }

    document.addEventListener('DOMContentLoaded', function () {
        try {
            bindStatProdOffcanvasOffset();
            initStatisticFilters();
        } catch (e) {
            console.error('[StatisticFilters] Erreur globale dans initStatisticFilters()', e);
        }
    });
</script>
{% endblock %}