{{--
    Positionsliste, gegliedert nach Warengruppe -> Hersteller -> Gebinde
    (Vorgabe 09.09.2026).

    EIN Baustein fuer alle Listen: Bestelluebersicht, Vorschau je Lieferant,
    Zentrallager. Vorher hatte jede Seite ihre eigene Tabelle, und die
    Reihenfolge wich voneinander ab - dieselbe Position war auf jeder Seite
    woanders zu suchen.

    Erwartet:
      $gruppen    Ergebnis von ArticleGrouping::gruppiere()
      $spalten    [['kopf' => 'Bestand', 'typ' => 'zahl'|'text',
                    'wert' => fn ($z) => ..., 'klasse' => 'text-right ...'], ...]
      $menge      fn ($z) => Zahl fuer die Zwischensummen (optional)
      $offen      ob die erste Ebene aufgeklappt startet (Vorgabe: true)

    Die Spalten kommen als Aufrufparameter und nicht fest verdrahtet, weil die
    Listen verschiedene Zahlen zeigen - Bestellmenge hier, Fehlmenge dort. Der
    Aufbau darunter ist ueberall derselbe.
--}}
@php
    $menge  = $menge  ?? null;
    $offen  = $offen  ?? true;
    $nf0    = fn ($v) => number_format((float) $v, 0, ',', '.');
    $summe  = fn ($zeilen) => $menge ? $zeilen->sum($menge) : null;
    $spalten = collect($spalten);
@endphp

<div class="divide-y divide-gray-100">
@foreach($gruppen as $wgName => $wg)
    <div x-data="{ wgAuf: {{ $offen ? 'true' : 'false' }} }"
         @alle-zu.window="wgAuf = false" @alle-auf.window="wgAuf = true">

        <div role="button" tabindex="0" @click="wgAuf = !wgAuf" @keydown.enter="wgAuf = !wgAuf"
             class="flex flex-wrap items-center justify-between gap-3 px-5 py-2.5 bg-gray-50 cursor-pointer hover:bg-gray-100">
            <p class="text-sm font-bold text-gray-900 flex items-center gap-2">
                <svg class="w-3.5 h-3.5 text-gray-400 transition-transform" :class="wgAuf ? 'rotate-90' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                {{ $wgName }}
                <span class="font-normal text-xs text-gray-400">{{ $nf0($wg['zeilen']->count()) }} Positionen</span>
            </p>
            @if($menge)
                <p class="text-xs text-gray-600">{{ $nf0($summe($wg['zeilen'])) }} Stück</p>
            @endif
        </div>

        <div x-show="wgAuf" x-cloak>
            @foreach($wg['hersteller'] as $hName => $h)
                <div x-data="{ hAuf: {{ $wg['hersteller']->count() <= 4 ? 'true' : 'false' }} }"
                     @alle-zu.window="hAuf = false" @alle-auf.window="hAuf = true">

                    <div role="button" tabindex="0" @click="hAuf = !hAuf" @keydown.enter="hAuf = !hAuf"
                         class="flex flex-wrap items-center justify-between gap-3 px-5 py-2 pl-9 border-t border-gray-100 cursor-pointer hover:bg-gray-50">
                        <p class="text-xs font-semibold text-gray-800 flex items-center gap-2">
                            <svg class="w-3 h-3 text-gray-400 transition-transform" :class="hAuf ? 'rotate-90' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                            {{ $hName }}
                            <span class="font-normal text-gray-400">{{ $nf0($h['zeilen']->count()) }}</span>
                        </p>
                        @if($menge)
                            <p class="text-xs text-gray-500">{{ $nf0($summe($h['zeilen'])) }} Stück</p>
                        @endif
                    </div>

                    <div x-show="hAuf" x-cloak>
                        @foreach($h['gebinde'] as $bName => $b)
                            <div x-data="{ bZu: false }"
                                 @alle-zu.window="bZu = true" @alle-auf.window="bZu = false">

                                <div role="button" tabindex="0" @click="bZu = !bZu" @keydown.enter="bZu = !bZu"
                                     class="flex flex-wrap items-center justify-between gap-3 px-5 py-1.5 pl-14 bg-gray-50 border-t border-gray-100 cursor-pointer hover:bg-gray-100">
                                    <p class="text-xs text-gray-600 flex items-center gap-2">
                                        <svg class="w-3 h-3 text-gray-400 transition-transform" :class="bZu ? '' : 'rotate-90'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                                        <span class="font-semibold">{{ $bName }}</span>
                                        <span class="text-gray-400">{{ $nf0($b['zeilen']->count()) }}</span>
                                    </p>
                                    @if($menge)
                                        <p class="text-xs text-gray-500">{{ $nf0($summe($b['zeilen'])) }} Stück</p>
                                    @endif
                                </div>

                                <div x-show="! bZu" x-cloak class="overflow-x-auto">
                                    <table x-data="sortierbareTabelle()" class="min-w-full text-sm">
                                        <thead class="bg-white">
                                            <tr class="text-xs text-gray-500 uppercase border-y border-gray-100">
                                                @foreach($spalten as $i => $sp)
                                                    <th class="px-4 py-2 {{ $i === 0 ? 'pl-16 text-left' : ($sp['klasse'] ?? 'text-right') }} cursor-pointer hover:text-gray-800"
                                                        data-typ="{{ $sp['typ'] ?? 'text' }}" @click="sortiere($el)">{{ $sp['kopf'] }}</th>
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-gray-100">
                                            @foreach($b['zeilen'] as $z)
                                                <tr class="hover:bg-gray-50">
                                                    @foreach($spalten as $i => $sp)
                                                        <td class="px-4 py-2 {{ $i === 0 ? 'pl-16' : ($sp['klasse'] ?? 'text-right') }}">
                                                            {!! ($sp['wert'])($z) !!}
                                                        </td>
                                                    @endforeach
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endforeach
</div>