@php
    $rows = $chakras['rows'] ?? null;
    $labels = $chakras['labels'] ?? [];

    $colors = [
        'crown' => '#e8bbe6',
        'third_eye' => '#080ee3',
        'throat' => '#3f87b3',
        'heart' => '#789a49',
        'solar' => '#e9d537',
        'sacral' => '#e99d1f',
        'root' => '#ae2628',
    ];

    $order = ['crown', 'third_eye', 'throat', 'heart', 'solar', 'sacral', 'root'];
@endphp
<div class="elements-card">
    <div class="chart-badge">{{ t('chakras', 'Chakras') }}</div>

    @if (!$rows)
        <div class="text-muted small p-2">{{ t('chakra-data-not-found', 'Datos de chakras no encontrados.') }}</div>
    @else
        <div class="chakra-layout">
            {{-- SOL: sabit görsel --}}
            <div class="chakra-side">
                <img class="chakra-img" src="{{ asset('frontend/images/panel/chakras.png') }}" alt="Chakras">
            </div>

            {{-- SAĞ: eğik basit barlar (isim yok, sola uzar) --}}
            <div class="chakra-main">
                <div class="chakra-bars chakra-tilt">
                    @foreach ($order as $key)
                        @php
                            $r = $rows[$key] ?? null;
                            if (!$r) {
                                continue;
                            }

                            $pct = (int) ($r['pct'] ?? 0);
                            $cnt = (int) ($r['count'] ?? 0);
                            $fill = $colors[$key] ?? '#479483';
                        @endphp
                        @php
                            $lab = $labels[$key] ?? $key; // isim buradan gelecek
                        @endphp
                        <div class="chakra-row">
                            {{-- <div class="chakra-lab" style="font-size: 8px">{{ $lab }}</div> --}}
                            <div class="chakra-track" title="{{ $lab }}" title="{{ $lab }}">
                                <span class="chakra-bar"
                                    style="width: {{ $pct }}%; background: {{ $fill }};"></span>
                            </div>
                            <div class="chakra-val" title="{{ $lab }}">{{ $cnt }}</div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
</div>