@php
    $rows = $elements['rows'] ?? null;

    $colors = [
        'fire' => '#c9484d',
        'earth' => '#9d7e61',
        'air' => '#49535c',
        'water' => '#4AA3DF',
    ];

    // ✅ HamburgSymbols Fontu Eşleşmesi
    // NOT: Font dosyanızda element sembollerinin hangi harfe/sayıya denk geldiğini
    // kontrol ederek aşağıdaki değerleri güncelleyin.
    // (Örn: Ateş üçgeni '1' tuşundaysa 'fire' => '1' yapın)
    //  'fire' => '!', // Ateş (Üçgen Yukarı) - Genelde Shift+1
    //     'water' => '$', // Su (Üçgen Aşağı) - Genelde Shift+4
    //     'earth' => '"', // Toprak (Üçgen Aşağı Çizgili) - Genelde Shift+2
    //     'air' => '#', // Hava (Üçgen Yukarı Çizgili) - Genelde Shift+3
    // $elementSymbols = [
    //     'fire' => '🜂',
    //     'earth' => '🜃',
    //     'air' => '🜁',
    //     'water' => '🜄',
    // ];

    // ✅ Elementler için Görsel (PNG) Yolları
    $elementIcons = [
        'fire' => 'fire.png',
        'water' => 'water.png',
        'earth' => 'earth.png',
        'air' => 'air.png',
    ];

    $order = ['fire', 'water', 'earth', 'air'];
@endphp

<div class="elements-card">
    <div class="chart-badge">{{ t('elements') }}</div>

    @if (!$rows)
        <div class="text-muted small p-2">{{ t('elements-data-not-found') }}</div>
    @else
        <div class="vchart cols-4">
            @foreach ($order as $key)
                @php
                    $r = $rows[$key] ?? null;
                    if (!$r) {
                        continue;
                    }

                    $fill = $colors[$key] ?? '#479483';
                    $pct = (int) ($r['pct'] ?? 0);
                    $cnt = (int) ($r['count'] ?? 0);

                    // İlgili elementin ikon dosya adını al
                    $iconName = $elementIcons[$key] ?? 'air.png';
                @endphp
                <div class="vchart-col">

                    <div class="vchart-val" title="{{ $r['label'] ?? $key }}">{{ $cnt }}</div>

                    <div class="vchart-wrap" title="{{ $r['label'] ?? $key }}">
                        <span class="vchart-bar"
                            style="height: {{ $pct }}%; background: {{ $fill }};"></span>
                    </div>

                    {{-- ✅ İKON DEĞİŞİKLİĞİ BURADA YAPILDI --}}
                    {{-- HamburgSymbols Fontu ile Sembol Gösterimi --}}
                    {{-- ✅ Element Görseli --}}
                    <div class="vchart-ico-text mt-1 panel-element-icon" title="{{ $r['label'] ?? $key }}">
                        <img src="{{ asset('frontend/images/icons/' . $iconName) }}"
                            class="panel-element-icon__img" alt="{{ $key }}">
                    </div>

                </div>
            @endforeach
        </div>
    @endif
</div>