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

{% block stylesheets %}
    {{ parent() }}
    <style>
        #filter-panel-inventory { border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 1rem; background-color: #fff; }
        #filterOffcanvasInventory {
            --bs-offcanvas-width: var(--aside-width, 268px);
            top: var(--inventory-offcanvas-top, 100px);
            height: calc(100vh - var(--inventory-offcanvas-top, 100px));
            z-index: 1030;
        }
        @media (max-width: 991.98px) {
            #filterOffcanvasInventory {
                --bs-offcanvas-width: min(78vw, 320px);
            }
        }
        .applied-filters { display:flex; flex-wrap:wrap; gap:.5rem; }
        .applied-filters .badge { font-weight: 500; }
        .inv-head-card { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
        .inventory-toolbar-actions { display:flex; align-items:center; gap:.5rem; }

        @media (max-width: 767.98px) {
            #inventoriesTable.inv-mobile-cards { border: 0; }
            #inventoriesTable.inv-mobile-cards thead { display: none; }
            #inventoriesTable.inv-mobile-cards tbody tr {
                display: block;
                margin-bottom: .55rem;
                border: 1px solid #e4e9f0;
                border-radius: 12px;
                background: #fff;
                box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
                overflow: visible;
            }
            #inventoriesTable.inv-mobile-cards tbody td {
                display: none !important;
                border: 0 !important;
                padding: 0 !important;
            }
            #inventoriesTable.inv-mobile-cards tbody td.inv-mobile-host {
                display: block !important;
            }

            .inv-card {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                gap: .5rem;
                align-items: start;
                padding: .55rem .58rem;
            }
            .inv-main { min-width: 0; }
            .inv-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: .45rem;
                flex-wrap: nowrap;
                min-width: 0;
            }
            .inv-code {
                display: inline-flex;
                align-items: center;
                line-height: 1;
                border-radius: 999px;
                background: #eef2ff;
                border: 1px solid #d8dfff;
                color: #1e3a8a;
                font-size: .72rem;
                font-weight: 700;
                padding: .24rem .48rem;
                max-width: 62vw;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .inv-status .badge {
                font-size: .66rem;
                line-height: 1.1;
                padding: .24rem .42rem;
                margin-left: auto;
            }
            .inv-meta {
                margin-top: .28rem;
                display: flex;
                gap: .3rem;
                flex-wrap: wrap;
                min-width: 0;
            }
            .inv-chip {
                display: inline-flex;
                align-items: center;
                gap: .2rem;
                font-size: .7rem;
                line-height: 1.1;
                padding: .22rem .44rem;
                border-radius: 999px;
                background: #f8fafc;
                color: #1f2937;
                border: 1px solid #e2e8f0;
                white-space: nowrap;
                max-width: 80vw;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .inv-chip .k {
                font-weight: 700;
                color: #334155;
            }
            .inv-gap .badge {
                font-size: .67rem;
                line-height: 1.1;
                padding: .2rem .42rem;
            }
            .inv-actions {
                display: flex;
                align-items: flex-start;
            }
            .inv-actions .btn {
                width: 28px;
                height: 28px;
                min-width: 28px;
                padding: 0;
                border-radius: 8px;
            }
            .inv-actions .dropdown-menu { min-width: 180px; }

            .inventory-toolbar-actions .btn span { display: none; }
            .inventory-toolbar-actions .btn i { margin-right: 0 !important; }
        }
    </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-clipboard-check"></i></span>
            <div>
                <h3 class="m-subheader__title m-0">Liste des inventaires</h3>
                <small class="text-muted">Suivi et correction des stocks</small>
            </div>
        </div>
        <div class="d-flex gap-2">
            {% if "INVENTORY_CREATE" in arrayRight|default([]) or is_granted('ROLE_SUPER_ADMIN') %}
                <a href="{{ path('inventory_new') }}" class="btn btn-dark btn-sm">
                    <i class="fa fa-plus me-1"></i> Nouvel inventaire
                </a>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block bodycontent %}
    <div class="contentMargin">
        <div class="container-fluid py-3 px-0">
            <div class="d-flex align-items-center justify-content-between gap-2 flex-wrap">
                <div class="d-flex align-items-center gap-2">
                    <button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvasInventory" aria-controls="filterOffcanvasInventory">
                        <i class="fa fa-filter me-1"></i> Filtres
                    </button>
                    <div id="appliedFiltersInventory" class="applied-filters flex-grow-1"></div>
                </div>
                <div class="inventory-toolbar-actions ms-auto">
                    <button type="button" class="btn btn-light border btn-sm" id="export_inventory_csv">
                        <i class="fa fa-file-csv me-1"></i><span>CSV</span>
                    </button>
                    <button type="button" class="btn btn-success btn-sm" id="export_inventory_excel">
                        <i class="fa fa-file-excel me-1"></i><span>Excel</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="inv-head-card p-2">
            <table id="inventoriesTable"
                   data-url="{{ path('inventory_list') }}"
                   class="table table-striped table-hover table-bordered w-100 mb-0">
                <thead>
                <tr>
                    <th>Code</th>
                    <th>Cree le</th>
                    <th>Modifie le</th>
                    <th>Valide le</th>
                    <th>Cree par</th>
                    <th>Valide par</th>
                    <th>Articles</th>
                    <th>Stock avant</th>
                    <th>Stock apres</th>
                    <th>Ecart total</th>
                    <th>Entrepot</th>
                    <th>Statut</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div class="offcanvas offcanvas-start" tabindex="-1" id="filterOffcanvasInventory" aria-labelledby="filterOffcanvasInventoryLabel" data-bs-backdrop="false" data-bs-scroll="true">
        <div class="offcanvas-header">
            <h5 id="filterOffcanvasInventoryLabel" class="offcanvas-title">
                <i class="fa fa-filter me-2"></i> Filtres
            </h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <div class="crm-filter-box" id="filter-panel-inventory">
                <form id="inventoryFilterForm" class="m-form m-form--fit m-form--label-align-left">
                    <div class="d-flex align-items-center mb-4 pb-2 border-bottom">
                        <div class="ms-auto d-flex align-items-center" style="gap:.5rem;">
                            <button type="button" class="btn btn-sm btn-dark shadow-none" title="Rechercher" id="filter_inventory_save">
                                <i class="fa fa-search"></i>
                            </button>
                            <button type="button" id="clear_inventory_filter" class="btn btn-sm btn-light border shadow-none" title="Réinitialiser tous les filtres">
                                <i class="fa fa-eraser"></i>
                            </button>
                        </div>
                    </div>

                    <div class="crm-filter-field mb-2">
                        <div class="crm-filter-label">Date de création</div>
                        <div class="crm-filter-control">
                            <select id="filter_inventory_date" class="form-control m-input select2">
                                <option value="" selected>Toute la periode</option>
                                <option value="today">Aujourd'hui</option>
                                <option value="yesterday">Hier</option>
                                <option value="thisWeek">Cette semaine</option>
                                <option value="thisMonth">Ce mois</option>
                                <option value="thisYear">Cette année</option>
                                <option value="custom">Personnalisée</option>
                            </select>
                        </div>
                    </div>
                    <div class="crm-filter-field mb-2">
                        <div class="crm-filter-label"></div>
                        <div class="crm-filter-control d-flex align-items-center flex-wrap" style="gap:.7rem;">
                            <label class="invDateBefore mb-0" style="min-width:30px;display:none;">Du</label>
                            <input type="date" id="filter_inventory_dateAfter" class="form-control form-control-sm m-input" style="width:150px;display:none;">
                            <div class="w-100"></div>
                            <label class="invDateAfter mb-0" style="min-width:30px;display:none;">Au</label>
                            <input type="date" id="filter_inventory_dateBefore" class="form-control form-control-sm m-input" style="width:150px;display:none;">
                        </div>
                    </div>
                    <div class="crm-filter-field mb-2">
                        <div class="crm-filter-label">Article</div>
                        <div class="crm-filter-control">
                            <input type="hidden" id="filter_inventory_article" class="form-control m-input" placeholder="Référence / nom article">
                            <input type="text" id="add_reference_produit_inventory" class="form-control m-input mt-2" placeholder="Référence produit">
                            <div class="result-search-reference-produit-inventory" style="display:none; min-width:194px;">
                                <ul class="m-menu__subnav padding-5" id="content-result-reference-produit-inventory"></ul>
                            </div>
                        </div>
                    </div>
                    <div class="crm-filter-field mb-2">
                        <div class="crm-filter-label">Entrepôt</div>
                        <div class="crm-filter-control">
                            <select id="filter_inventory_storehouse" class="form-control form-control-sm m-input select2">
                                <option value="">Tous</option>
                                {% for sh in storehouses|default([]) %}
                                    <option value="{{ sh }}">{{ sh }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="crm-filter-field mb-2">
                        <div class="crm-filter-label">Statut</div>
                        <div class="crm-filter-control">
                            <select id="filter_inventory_status" class="form-control form-control-sm m-input no-select2">
                                <option value="">Tous</option>
                                <option value="draft">Brouillon</option>
                                <option value="validated">Validé</option>
                            </select>
                        </div>
                    </div>

                    <div class="crm-search-actions mt-3">
                        <button type="button" class="btn btn-dark btn-sm rounded-pill px-3" id="filter_inventory_save_bottom">Filtrer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
      (function () {
        var btnTop = document.getElementById('filter_inventory_save');
        var btnBottom = document.getElementById('filter_inventory_save_bottom');
        if (btnBottom && btnTop) {
          btnBottom.addEventListener('click', function () { btnTop.click(); });
        }

        function initFilterOffcanvasAutoClose() {
          var el = document.getElementById('filterOffcanvasInventory');
          var trigger = document.getElementById('filter_inventory_save');
          if (!el || !trigger || typeof bootstrap === 'undefined') return;

          trigger.addEventListener('click', function () {
            if (window.innerWidth > 991) return;
            var instance = bootstrap.Offcanvas.getInstance(el);
            if (instance) instance.hide();
          });
        }

        function initFilterOffcanvasTopOffset() {
          var offcanvasEl = document.getElementById('filterOffcanvasInventory');
          if (!offcanvasEl) return;

          function applyOffset() {
            var topnav = document.querySelector('.topbar, .topnav, .app-topbar, #kt_header');
            var top = 100;
            if (topnav) {
              var rect = topnav.getBoundingClientRect();
              top = Math.max(56, Math.round(rect.height + rect.top));
            }
            offcanvasEl.style.setProperty('--inventory-offcanvas-top', top + 'px');
          }

          applyOffset();
          window.addEventListener('resize', applyOffset);
          offcanvasEl.addEventListener('show.bs.offcanvas', applyOffset);
        }

        function toggleInventoryDateRange() {
          var mode = document.getElementById('filter_inventory_date');
          var isCustom = mode && mode.value === 'custom';
          document.querySelectorAll('.invDateBefore, .invDateAfter').forEach(function (el) {
            el.style.display = isCustom ? '' : 'none';
          });
          ['filter_inventory_dateAfter', 'filter_inventory_dateBefore'].forEach(function (id) {
            var el = document.getElementById(id);
            if (!el) return;
            el.style.display = isCustom ? '' : 'none';
            if (!isCustom) el.value = '';
          });
        }

        var dateMode = document.getElementById('filter_inventory_date');
        if (dateMode) dateMode.addEventListener('change', toggleInventoryDateRange);
        if (typeof $ !== 'undefined') {
          $(document).on('change', '#filter_inventory_date', toggleInventoryDateRange);
        }
        toggleInventoryDateRange();

        if (typeof $ !== 'undefined' && $.fn && $.fn.select2) {
          $('#filter_inventory_date, #filter_inventory_storehouse').select2({
            width: '100%',
            dropdownParent: $('#filterOffcanvasInventory')
          });
        }

        initFilterOffcanvasAutoClose();
        initFilterOffcanvasTopOffset();
      })();
    </script>

    <script>
      (function () {
        if (typeof $ === 'undefined') return;

        function esc(v) {
          return String(v === null || v === undefined ? '' : v)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
        }

        $(document).off('keyup.inventoryRef', '#add_reference_produit_inventory')
          .on('keyup.inventoryRef', '#add_reference_produit_inventory', function () {
            var query = $.trim($(this).val());
            var $list = $('#content-result-reference-produit-inventory');
            if (!query) {
              $('#filter_inventory_article').val('');
              $list.empty();
              $('.result-search-reference-produit-inventory').hide();
              return;
            }

            $.ajax({
              url: Routing.generate('search_item'),
              method: 'POST',
              data: { query: query, type: ['product'] },
              success: function (data) {
                if ($('#add_reference_produit_inventory').val().trim() === '') return;
                $list.empty();

                if (!data || data.length === 0) {
                  $list.html(
                    '<li><div class="m-alert m-alert--icon m-alert--air alert alert-dismissible fade show" role="alert">' +
                    '<div class="m-alert__icon"><i class="fa fa-warning"></i></div>' +
                    '<div class="m-alert__text">Pas de résultat disponible.</div></div></li>'
                  );
                  $('.result-search-reference-produit-inventory').show();
                  return;
                }

                $.each(data, function () {
                  var html = ''
                    + '<li class="m-menu__item search-dropdown-item-produit-reference-inventory margin-5 row" '
                    + 'data-value="' + esc(this.reference) + '" aria-haspopup="true" style="cursor:pointer;">'
                    + '<span class="col-3"><span class="m-menu__link-text width-30"><img class="img-search" src="' + esc(this.picture) + '"></span></span>'
                    + '<span class="col-9"><span class="m-menu__link-text">' + esc(this.reference) + '</span><br>'
                    + '<small class="m-menu__link-text">' + esc(this.name) + '</small></span>'
                    + '</li>';
                  $list.append(html);
                });

                $('.result-search-reference-produit-inventory').show();
              }
            });
          });

        $(document).off('click.inventoryRef', '.search-dropdown-item-produit-reference-inventory')
          .on('click.inventoryRef', '.search-dropdown-item-produit-reference-inventory', function () {
            var ref = ($(this).data('value') || '').toString();
            $('#add_reference_produit_inventory').val(ref);
            $('#filter_inventory_article').val(ref);
            $('.result-search-reference-produit-inventory').hide();
            $('#content-result-reference-produit-inventory').empty();
          });
      })();
    </script>

    <script>
      (function () {
        if (typeof $ === 'undefined') return;

        function inventoryListUrl() {
          var $tbl = $('#inventoriesTable');
          var url = $tbl.data('url');
          if (url) return url;
          if (typeof Routing !== 'undefined' && Routing.generate) {
            try { return Routing.generate('inventory_list'); } catch (e) {}
          }
          return '/admin/inventaire/list';
        }

        function getFiltersPayload() {
          return {
            draw: 1,
            start: 0,
            length: 10000,
            date: $('#filter_inventory_date').val() || '',
            dateAfter: $('#filter_inventory_dateAfter').val() || '',
            dateBefore: $('#filter_inventory_dateBefore').val() || '',
            article: $('#filter_inventory_article').val() || '',
            storehouse: $('#filter_inventory_storehouse').val() || '',
            status: $('#filter_inventory_status').val() || ''
          };
        }

        function fetchFilteredRows(done) {
          $.ajax({
            url: inventoryListUrl(),
            method: 'GET',
            data: getFiltersPayload(),
            success: function (res) {
              done((res && res.data) ? res.data : []);
            },
            error: function () {
              Swal.fire('Erreur', 'Export impossible pour le moment.', 'error');
            }
          });
        }

        function downloadBlob(content, type, filename) {
          var blob = new Blob([content], { type: type });
          var link = document.createElement('a');
          link.href = URL.createObjectURL(blob);
          link.download = filename;
          document.body.appendChild(link);
          link.click();
          setTimeout(function () {
            URL.revokeObjectURL(link.href);
            link.remove();
          }, 0);
        }

        function csvEscape(value) {
          var v = (value === null || value === undefined) ? '' : String(value);
          if (/[;"\r\n]/.test(v)) return '"' + v.replace(/"/g, '""') + '"';
          return v;
        }

        function normalizeStatus(raw) {
          var s = String(raw || 'draft').trim().toLowerCase();
          return (s === 'validated' || s === 'valide' || s === 'validé') ? 'Validé' : 'Brouillon';
        }

        function exportCsv(rows) {
          var headers = ['Code', 'Cree le', 'Modifie le', 'Valide le', 'Cree par', 'Valide par', 'Articles', 'Stock avant', 'Stock apres', 'Ecart total', 'Entrepot', 'Statut'];
          var lines = [headers.join(';')];
          rows.forEach(function (r) {
            lines.push([
              csvEscape(r.code || ''),
              csvEscape(r.createdAt || ''),
              csvEscape(r.updatedAt || '-'),
              csvEscape(r.validatedAt || '-'),
              csvEscape(r.createdBy || '-'),
              csvEscape(r.validatedBy || '-'),
              csvEscape(r.itemsCount || 0),
              csvEscape(r.stockBefore || 0),
              csvEscape(r.stockAfter || 0),
              csvEscape(r.totalGap || 0),
              csvEscape(r.storehouse || ''),
              csvEscape(normalizeStatus(r.status))
            ].join(';'));
          });
          downloadBlob('\uFEFF' + lines.join('\n'), 'text/csv;charset=utf-8;', 'inventaires_filtres.csv');
        }

        function exportExcel(rows) {
          var html = ''
            + '<table border="1">'
            + '<thead><tr>'
            + '<th>Code</th><th>Cree le</th><th>Modifie le</th><th>Valide le</th><th>Cree par</th><th>Valide par</th><th>Articles</th><th>Stock avant</th><th>Stock apres</th><th>Ecart total</th><th>Entrepot</th><th>Statut</th>'
            + '</tr></thead><tbody>';
          rows.forEach(function (r) {
            html += '<tr>'
              + '<td>' + (r.code || '') + '</td>'
              + '<td>' + (r.createdAt || '') + '</td>'
              + '<td>' + (r.updatedAt || '-') + '</td>'
              + '<td>' + (r.validatedAt || '-') + '</td>'
              + '<td>' + (r.createdBy || '-') + '</td>'
              + '<td>' + (r.validatedBy || '-') + '</td>'
              + '<td>' + (r.itemsCount || 0) + '</td>'
              + '<td>' + (r.stockBefore || 0) + '</td>'
              + '<td>' + (r.stockAfter || 0) + '</td>'
              + '<td>' + (r.totalGap || 0) + '</td>'
              + '<td>' + (r.storehouse || '') + '</td>'
              + '<td>' + normalizeStatus(r.status) + '</td>'
              + '</tr>';
          });
          html += '</tbody></table>';
          downloadBlob('\uFEFF' + html, 'application/vnd.ms-excel;charset=utf-8;', 'inventaires_filtres.xls');
        }

        $('#export_inventory_csv').off('click').on('click', function () {
          fetchFilteredRows(function (rows) {
            if (!rows.length) return Swal.fire('Info', 'Aucune ligne à  exporter.', 'info');
            exportCsv(rows);
          });
        });

        $('#export_inventory_excel').off('click').on('click', function () {
          fetchFilteredRows(function (rows) {
            if (!rows.length) return Swal.fire('Info', 'Aucune ligne à  exporter.', 'info');
            exportExcel(rows);
          });
        });
      })();
    </script>
{% endblock %}