{{-- Grille de bar charts : une carte par famille, une barre par région. --}}
@php
    $scoresRegions = $this->scoresByRegionByFamily;
@endphp

@if (empty($scoresRegions['families']) || empty($scoresRegions['regions']))
    <div class="card mb-4">
        <div class="card-body text-center text-muted py-4">
            <i class="icon-base ti tabler-chart-bar icon-24px mb-2 d-block"></i>
            Pas encore de score par région pour le filtre courant.
        </div>
    </div>
@else
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title m-0">Graphiques à barre par région de chaque dimension</h5>
        </div>
        <div class="card-body">
            <div class="row g-3">
                @foreach ($scoresRegions['families'] as $famIdx => $family)
                    <div class="col-md-6 mb-3">
                        <div class="border rounded p-3 h-100" style="background: #f8f9ff;">
                            <div class="text-center fw-semibold text-uppercase mb-2 small">
                                {{ $family['label'] }}
                            </div>
                            <div wire:ignore
                                id="familyRegionChart-{{ $family['id'] }}"
                                data-family-values='@json(collect($scoresRegions['matrix'])->map(fn ($row) => $row[$famIdx] ?? null)->all())'
                                data-family-regions='@json($scoresRegions['regions'])'
                                style="min-height: 260px;"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    @script
        <script>
            const primary = getComputedStyle(document.documentElement).getPropertyValue('--bs-primary').trim() || '#1E88E5';
            let familyRegionCharts = [];

            function renderFamilyRegionCharts() {
                if (typeof ApexCharts === 'undefined') return;
                familyRegionCharts.forEach((c) => c.destroy());
                familyRegionCharts = [];

                document.querySelectorAll('[id^="familyRegionChart-"]').forEach((el) => {
                    let values = [];
                    let regions = [];
                    try {
                        values = JSON.parse(el.dataset.familyValues || '[]');
                        regions = JSON.parse(el.dataset.familyRegions || '[]');
                    } catch (e) {}
                    if (!values.length) return;
                    const chart = new ApexCharts(el, {
                        series: [{ name: 'Score moyen (%)', data: values }],
                        chart: {
                            type: 'bar',
                            height: 260,
                            toolbar: { show: false },
                            parentHeightOffset: 0,
                        },
                        plotOptions: {
                            bar: {
                                borderRadius: 4,
                                columnWidth: '55%',
                            },
                        },
                        dataLabels: { enabled: false },
                        stroke: { width: 0 },
                        colors: ['#a0c4ff'],
                        xaxis: {
                            categories: regions,
                            labels: { style: { fontSize: '10px' }, rotate: -35, rotateAlways: true },
                            axisTicks: { show: false },
                            axisBorder: { show: false },
                        },
                        yaxis: {
                            min: 0, max: 100,
                            tickAmount: 10,
                            labels: { style: { fontSize: '10px' } },
                        },
                        grid: { strokeDashArray: 3 },
                        tooltip: {
                            y: { formatter: v => (v == null ? '-' : v + '%') },
                        },
                    });
                    chart.render();
                    familyRegionCharts.push(chart);
                });
            }
            renderFamilyRegionCharts();
            Livewire.hook('morph.updated', () => renderFamilyRegionCharts());
        </script>
    @endscript
@endif