@php
    use App\Services\HeroStatsService;
    use App\Models\Attribute;

    $statsService = new HeroStatsService($hero);
    $allAttributes = Attribute::all();
@endphp

<div class="w-full md:w-[384px] h-[678px] bg-yellow-50 border border-yellow-800 rounded-xl shadow-md overflow-hidden flex flex-col justify-between font-serif"
     style="background-image: url('{{ asset('images/blank_panel.png') }}'); background-size: cover; background-position: center;">
    
    <div class="p-4 text-yellow-900 overflow-y-auto">
        <h3 class="text-xl font-bold mb-2 text-yellow-900">Detailed Hero Stats</h3>

        <table class="w-full text-sm text-yellow-900">
            <thead>
                <tr class="border-b border-yellow-800">
                    <th class="text-left py-1">Attribute</th>
                    <th class="text-right py-1">Base</th>
                    <th class="text-right py-1">Equip</th>
                    <th class="text-right py-1">Buff</th>
                    <th class="text-right py-1">Total</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($allAttributes as $attribute)
                    @php
                        $key = $attribute->key;
                        $stat = $statsService->exposeStatBreakdown($key);
                    @endphp
                    <tr class="border-b border-yellow-700">
                        <td class="py-1 text-yellow-800">{{ $attribute->name }}</td>
                        <td class="py-1 text-right">{{ $stat['base'] }}</td>
                        <td class="py-1 text-right text-green-600">+{{ $stat['equip'] }}</td>
                        <td class="py-1 text-right text-blue-500">+{{ $stat['buff'] }}</td>
                        <td class="py-1 text-right font-semibold text-yellow-900">{{ $stat['total'] }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="flex justify-end p-4">
        <button @click="showDetails = false"
            class="inline-block bg-yellow-800 text-yellow-100 font-bold px-4 py-2 rounded hover:bg-yellow-700 transition shadow">
            Close Details
        </button>
    </div>
</div>