@php
    $items = Auth::user()->items;
    $equippedItems = Auth::user()->equipment;
    $totalSlots = 21;
@endphp
@php
    $defaultTab = session('active_tab', 'inventory');
    session()->forget('active_tab');
@endphp

<div x-data="{ tab: '{{ $defaultTab }}' }" class="w-[384px] h-[678px] border border-yellow-800 rounded-xl shadow-md overflow-hidden font-serif" style="background-image: url('{{ asset('images/blank_panel.png') }}'); background-size: cover; background-position: center;">
    
    <!-- Tabs Header -->
    <div class="flex border-b border-yellow-800">
        <button @click="tab = 'equipment'" :class="{ 'bg-yellow-800 text-yellow-100': tab === 'equipment' }" class="w-1/2 p-2 text-center hover:bg-yellow-700 transition">Equipment</button>
        <button @click="tab = 'inventory'" :class="{ 'bg-yellow-800 text-yellow-100': tab === 'inventory' }" class="w-1/2 p-2 text-center hover:bg-yellow-700 transition">Inventory</button>
        <button @click="tab = 'stash'" :class="{ 'bg-yellow-800 text-yellow-100': tab === 'stash' }" class="w-1/3 p-2 text-center hover:bg-yellow-700 transition">Stash</button>
    </div>

    <!-- Equipment Tab -->
    <div x-show="tab === 'equipment'" class="h-full w-full px-3 py-4 overflow-y-auto">
        <div class="grid grid-cols-3 gap-2">
            @foreach ($equippedItems as $slot => $item)
                <div class="relative text-center">
                    <div class="text-xs text-yellow-200 mb-1">{{ ucfirst($item->display_name) }}</div>

                    @if ($item)
                        <form method="POST" action="{{ route('item.details') }}">
                            @csrf
                            <input type="hidden" name="item_id" value="{{ $item->id }}">
                            <button type="submit" class="w-[80px] h-[80px] bg-center bg-no-repeat bg-contain cursor-pointer relative"
                                style="background-image: url('{{ asset('images/items/' . $item->image) }}')"
                                title="{{ $item->name }} ({{ $item->rarity }})">
                            </button>
                        </form>
                    @else
                        <div class="w-[80px] h-[80px] bg-center bg-no-repeat bg-contain cursor-pointer opacity-40"
                            style="background-image: url('{{ asset('images/empty_slot.png') }}')">
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    <!-- Inventory View -->
    <div x-show="tab === 'inventory'" class="h-full w-full px-4 py-1 ml-5 overflow-y-auto">
        <div class="grid grid-cols-3 gap-2">
            @foreach ($items as $item)
                @if (!$item->equipped && $item->location != 'stash')
                    <form method="POST" action="{{ route('item.details') }}">
                        @csrf
                        <input type="hidden" name="item_id" value="{{ $item->id }}">
                        <button type="submit" class="w-[75px] h-[75px] bg-center bg-no-repeat bg-contain cursor-pointer relative"
                            style="background-image: url('{{ asset('images/items/' . $item->image) }}')"
                            title="{{ $item->name }} ({{ $item->rarity }})">
                            
                            @if ($item->quantity > 1)
                                <span class="absolute bottom-0 right-1 text-xs text-yellow-100 bg-yellow-900 px-1 rounded">
                                    x{{ $item->quantity }}
                                </span>
                            @endif
                        </button>
                    </form>
                @endif
            @endforeach

            @php
                $unequippedCount = $items->filter(fn($item) => !$item->equipped)->count();
            @endphp

            @for ($i = 0; $i < $totalSlots - $unequippedCount; $i++)
                <div class="w-[80px] h-[80px] bg-center bg-no-repeat bg-contain cursor-pointer"
                    style="background-image: url('{{ asset('images/empty_slot.png') }}')">
                </div>
            @endfor
        </div>
    </div>
    <!-- Stash --> 
    <div x-show="tab === 'stash'" class="h-full w-full px-4 py-1 overflow-y-auto">
        <div class="grid grid-cols-3 gap-2">
            @foreach ($items as $item)
                @if ($item->location === 'stash')
                    <div class="relative text-center">
                        <form method="POST" action="{{ route('item.details') }}">
                            @csrf
                            <input type="hidden" name="item_id" value="{{ $item->id }}">
                            <button type="submit"
                                class="w-[75px] h-[75px] bg-center bg-no-repeat bg-contain cursor-pointer"
                                style="background-image: url('{{ asset('images/items/' . $item->image) }}')"
                                title="{{ $item->name }} ({{ $item->rarity }})">
                                <span class="sr-only">View {{ $item->name }}</span>
                            </button>
                        </form>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</div>