@extends('admin.layout')

@section('title', __('Destockage'))

@section('content')
<div class="pagetitle">
    <h1>{{ __('Destockage') }}</h1>
</div>
@include('admin.gestan._stale_banner')

<link rel="stylesheet" href="@assetV('css/accordeon.css')">
<link rel="stylesheet" href="@assetV('css/gestan/destockage.css')">

<section class="section contact">
    <div class="row gy-4">
        <div class="col-xl-12">

            <div class="card p-4">

                <p class="text-muted small mb-3">
                    {{ __('Familles « DESTOCKAGE » et « PORTILLON DESTOCKAGE » de Gestan. Cliquez sur une ligne pour voir le descriptif.') }}
                </p>

                {{-- Recherche et pastilles filtrent dans la page : les lignes
                     tiennent toutes sur une page, pas d'aller-retour. --}}
                <div class="d-flex gap-2 mb-3">
                    <input type="search"
                           id="destock-recherche"
                           class="form-control"
                           placeholder="{{ __('Rechercher (code, désignation, RAL, finition)') }}">

                    {{-- Les affiches des lignes visibles : le script y ajoute leurs ids. --}}
                    <a href="{{ route('destockages.affiches') }}" id="destock-affiches" target="_blank" rel="noopener"
                       class="btn btn-warning text-nowrap" title="{{ __('Une affiche A4 par produit affiché') }}">
                        <i class="bi bi-printer me-1"></i>{{ __('Affiches') }}
                    </a>

                    <a href="{{ route('destockages.export') }}" class="btn btn-success text-nowrap">
                        <i class="bi bi-file-earmark-excel me-1"></i>{{ __('Exporter') }}
                    </a>
                </div>

                {{-- Deux rangs de pastilles, qui se combinent : le type, puis la
                     disponibilité lue dans la désignation. Le chiffre de chacune
                     compte ce qu'un clic montrerait, l'autre rang et la recherche
                     compris : le script le tient à jour. --}}
                @if ($produits->isNotEmpty())
                    <div class="destock-rang mb-2" data-groupe="filtre">
                        <span class="destock-rang-titre">{{ __('Type') }}</span>
                        <button type="button" class="destock-pastille active" data-valeur="">
                            <span class="badge bg-primary">{{ __('Tous') }} · <span class="destock-compte">{{ $produits->count() }}</span></span>
                        </button>
                        @foreach ($pastilles as $libelle => $count)
                            <button type="button" class="destock-pastille" data-valeur="{{ $libelle }}">
                                <span class="badge bg-secondary">{{ __(ucfirst(mb_strtolower($libelle))) }} · <span class="destock-compte">{{ $count }}</span></span>
                            </button>
                        @endforeach
                    </div>

                    <div class="destock-rang mb-3" data-groupe="dispo">
                        <span class="destock-rang-titre">{{ __('Disponibilité') }}</span>
                        <button type="button" class="destock-pastille active" data-valeur="">
                            <span class="badge bg-primary">{{ __('Tous') }} · <span class="destock-compte">{{ $produits->count() }}</span></span>
                        </button>
                        @foreach ($dispos as $code => $count)
                            <button type="button" class="destock-pastille" data-valeur="{{ $code }}">
                                <span class="badge bg-secondary">{{ __(\App\Http\Controllers\DestockageController::DISPOS[$code]) }} · <span class="destock-compte">{{ $count }}</span></span>
                            </button>
                        @endforeach
                    </div>
                @endif

                <div class="table-responsive-sm">
                    <table class="table table-hover table-compacte">
                        <thead>
                            <tr>
                                <th>{{ __('Code') }}</th>
                                <th style="width: 40%">{{ __('Désignation') }}</th>
                                <th>{{ __('L × H (mm)') }}</th>
                                <th>{{ __('RAL') }}</th>
                                <th>{{ __('Finition') }}</th>
                                <th class="col-num">{{ __('Prix HT') }}</th>
                                <th>{{ __('Créateur') }}</th>
                                <th></th>
                            </tr>
                        </thead>

                        <tbody id="destock-lignes">
                            @forelse ($produits as $i => $p)
                                @php
                                    $dim = ($p['LONGUEUR'] ?? null) || ($p['HAUTEUR'] ?? null)
                                        ? ($p['LONGUEUR'] ?? '—') . ' × ' . ($p['HAUTEUR'] ?? '—')
                                        : '—';
                                    $recherche = mb_strtolower(implode(' ', [
                                        $p['CD_PRODUIT'], $p['LIB_PRODUIT'], $p['CODE_RAL'] ?? '', $p['FINITION'] ?? '',
                                    ]));
                                    // Le descriptif vient de l'éditeur riche de Gestan : on ne garde
                                    // que la mise en forme simple, sans aucun attribut.
                                    $descriptif = preg_replace(
                                        '/<(\/?)(\w+)[^>]*>/',
                                        '<$1$2>',
                                        strip_tags((string) ($p['DESCRIPTIF'] ?? ''), '<br><div><p><b><strong><i><em><u><ul><ol><li>')
                                    );
                                @endphp
                                <tr class="destock-ligne"
                                    aria-expanded="false"
                                    aria-controls="destock-descriptif-{{ $i }}"
                                    data-id="{{ $p['IDPRODUIT'] }}"
                                    data-filtre="{{ $p['FILTRE'] }}"
                                    data-dispo="{{ $p['DISPO'] }}"
                                    data-recherche="{{ $recherche }}">
                                    {{-- Le code passe à la ligne : cf. .destock-code --}}
                                    <td class="destock-code"><i class="bi bi-chevron-down destock-chevron"></i>{{ $p['CD_PRODUIT'] }}</td>
                                    <td class="col-souple" title="{{ $p['LIB_PRODUIT'] }}">{{ $p['LIB_PRODUIT'] }}</td>
                                    <td class="text-nowrap">{{ $dim }}</td>
                                    <td class="text-nowrap">
                                        @if (!empty($p['CODE_RAL']))
                                            <span class="badge bg-light text-dark border destock-ral" title="{{ $p['CODE_RAL'] }}">{{ $p['CODE_RAL'] }}</span>
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td>{{ $p['FINITION'] ?? '—' }}</td>
                                    <td class="col-num text-nowrap">{{ $p['PU_VENTE_HT'] !== null ? $p['PU_VENTE_HT'] . ' €' : '—' }}</td>
                                    <td class="text-muted text-nowrap" title="{{ $p['USCRE'] }} — {{ gestan_date_fr($p['DHCRE'] ?? null) }}">
                                        {{ gestan_auteur_court($p['USCRE'] ?? null) }} · {{ gestan_date_courte($p['DHCRE'] ?? null) }}
                                    </td>
                                    <td class="text-end">
                                        <a href="{{ route('destockages.affiches', ['ids' => $p['IDPRODUIT']]) }}" target="_blank" rel="noopener"
                                           class="destock-affiche" title="{{ __('Affiche de ce produit') }}" aria-label="{{ __('Affiche de ce produit') }}">
                                            <i class="bi bi-printer"></i>
                                        </a>
                                    </td>
                                </tr>
                                {{-- Hôte d-none, panneau animé : cf. js/accordeon.js. --}}
                                <tr class="destock-descriptif d-none" id="destock-descriptif-{{ $i }}">
                                    <td colspan="8">
                                        <div class="ac-accordeon">
                                            <div class="ac-accordeon-corps">
                                                <div class="destock-descriptif-corps">
                                                    {!! $descriptif !== '' ? $descriptif : e(__('Pas de descriptif dans Gestan.')) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center text-muted py-4">
                                        {{ __('Aucun produit en destockage.') }}
                                    </td>
                                </tr>
                            @endforelse

                            <tr id="destock-aucun" class="d-none">
                                <td colspan="8" class="text-center text-muted py-4">
                                    {{ __('Aucun produit ne correspond à cette recherche.') }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>

        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="@assetV('js/accordeon.js')"></script>
<script>
    (function () {
        const recherche = document.getElementById('destock-recherche');
        const lignes    = document.querySelectorAll('#destock-lignes .destock-ligne');
        const aucun     = document.getElementById('destock-aucun');
        const affiches  = document.getElementById('destock-affiches');
        const affichesUrl = affiches.getAttribute('href');
        const rangs     = document.querySelectorAll('.destock-rang');
        // Un choix par rang de pastilles : { filtre: 'BATTANT', dispo: 'vendu' }.
        // La clé est aussi le data- de la ligne qu'elle regarde.
        const choix = {};
        rangs.forEach(function (r) { choix[r.dataset.groupe] = ''; });

        function descriptif(ligne) {
            return document.getElementById(ligne.getAttribute('aria-controls'));
        }

        // Replié sec, sans animation : sa ligne disparaît dans le même geste.
        function fermerSec(ligne) {
            const d = descriptif(ligne);
            ligne.setAttribute('aria-expanded', 'false');
            d.classList.add('d-none');
            d.querySelector('.ac-accordeon').classList.remove('ac-ouvert');
        }

        // La ligne passe-t-elle les rangs de pastilles ? `sauf` en ignore un :
        // le chiffre d'une pastille se compte sans le choix de son propre rang.
        function passe(l, sauf) {
            return Object.keys(choix).every(function (g) {
                return g === sauf || !choix[g] || l.dataset[g] === choix[g];
            });
        }

        function appliquer() {
            const q = recherche.value.trim().toLowerCase();
            const cherchees = Array.from(lignes).filter(function (l) {
                return !q || l.dataset.recherche.includes(q);
            });
            let visibles = 0;

            lignes.forEach(function (l) {
                const ok = cherchees.includes(l) && passe(l);
                l.classList.toggle('d-none', !ok);
                // Un descriptif ouvert se referme avec sa ligne.
                if (!ok) fermerSec(l);
                if (ok) visibles++;
            });

            aucun.classList.toggle('d-none', visibles > 0 || lignes.length === 0);

            // Chaque pastille annonce ce que son clic montrerait.
            rangs.forEach(function (r) {
                const g = r.dataset.groupe;
                const dansLeRang = cherchees.filter(function (l) { return passe(l, g); });
                r.querySelectorAll('.destock-pastille').forEach(function (b) {
                    const v = b.dataset.valeur;
                    b.querySelector('.destock-compte').textContent =
                        v ? dansLeRang.filter(function (l) { return l.dataset[g] === v; }).length : dansLeRang.length;
                });
            });

            // Tout est visible : pas d'ids, le serveur sert tout.
            const ids = Array.from(lignes).filter(l => !l.classList.contains('d-none')).map(l => l.dataset.id);
            affiches.href = ids.length === lignes.length ? affichesUrl : affichesUrl + '?ids=' + ids.join(',');
            affiches.classList.toggle('disabled', ids.length === 0);
        }

        recherche.addEventListener('input', appliquer);

        rangs.forEach(function (r) {
            const pastilles = r.querySelectorAll('.destock-pastille');

            pastilles.forEach(function (b) {
                b.addEventListener('click', function () {
                    pastilles.forEach(function (x) {
                        x.classList.remove('active');
                        x.querySelector('.badge').classList.replace('bg-primary', 'bg-secondary');
                    });
                    b.classList.add('active');
                    b.querySelector('.badge').classList.replace('bg-secondary', 'bg-primary');
                    choix[r.dataset.groupe] = b.dataset.valeur;
                    appliquer();
                });
            });
        });

        lignes.forEach(function (l) {
            l.addEventListener('click', function (e) {
                // L'affiche de la ligne s'ouvre sans dérouler le descriptif.
                if (e.target.closest('.destock-affiche')) return;
                const ouvert = l.getAttribute('aria-expanded') === 'true';
                l.setAttribute('aria-expanded', ouvert ? 'false' : 'true');
                window.acDerouler(descriptif(l), !ouvert);
            });
        });
    })();
</script>
@endpush