@extends('layouts.game')

@section('title', 'Inventory')

@section('game-content')
    <div class="max-w-4xl mx-auto">
        <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg">
            <div class="px-6 py-4 border-b border-syndicate-700">
                <h1 class="font-display text-xl font-semibold text-gray-100">Inventory</h1>
                <p class="mt-1 text-sm text-gray-400">Equip weapons and armor, or use consumables.</p>
            </div>

            <div class="p-6">
                @if($inventory->isEmpty())
                    <p class="text-center text-gray-500 py-8 text-sm">Your inventory is empty.</p>
                @else
                    <div class="space-y-6">
                        @foreach($inventory->groupBy('item.type') as $type => $items)
                            <div>
                                <h3 class="font-display text-base font-semibold text-gray-300 capitalize mb-3">
                                    {{ ucfirst($type) }}s ({{ $items->sum('quantity') }})
                                </h3>
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                    @foreach($items as $item)
                                        <div class="bg-syndicate-700 border border-syndicate-600 rounded-lg p-4">
                                            <div class="flex justify-between items-start mb-2">
                                                <div>
                                                    <h4 class="font-medium text-gray-100">{{ $item->item->name }}</h4>
                                                    <p class="text-xs text-gray-500">x{{ $item->quantity }}</p>
                                                </div>
                                                @if($item->equipped)
                                                    <span class="text-xs px-2 py-1 bg-green-800/60 border border-green-700 text-green-400 rounded-full">Equipped</span>
                                                @endif
                                            </div>

                                            @if($item->item->description)
                                                <p class="text-sm text-gray-400 mb-3">{{ Str::limit($item->item->description, 80) }}</p>
                                            @endif

                                            <div class="grid grid-cols-2 gap-2 text-xs text-gray-400 mb-3">
                                                @if($item->item->attack_bonus > 0)
                                                    <div class="flex items-center space-x-1">
                                                        <span class="text-crime-400">⚔️</span>
                                                        <span>+{{ $item->item->attack_bonus }} Attack</span>
                                                    </div>
                                                @endif
                                                @if($item->item->defense_bonus > 0)
                                                    <div class="flex items-center space-x-1">
                                                        <span class="text-blue-400">🛡️</span>
                                                        <span>+{{ $item->item->defense_bonus }} Defense</span>
                                                    </div>
                                                @endif
                                                @if($item->item->health_bonus > 0)
                                                    <div class="flex items-center space-x-1">
                                                        <span class="text-green-400">❤️</span>
                                                        <span>+{{ $item->item->health_bonus }} Health</span>
                                                    </div>
                                                @endif
                                                @if($item->item->energy_bonus > 0)
                                                    <div class="flex items-center space-x-1">
                                                        <span class="text-yellow-400">⚡</span>
                                                        <span>+{{ $item->item->energy_bonus }} Energy</span>
                                                    </div>
                                                @endif
                                            </div>

                                            <div class="flex space-x-2">
                                                @if($item->item->canEquip())
                                                    @if($item->equipped)
                                                        <form action="{{ route('game.inventory.unequip', $item) }}" method="POST">
                                                            @csrf
                                                            <button type="submit"
                                                                class="px-3 py-1 text-xs bg-syndicate-600 hover:bg-syndicate-500 text-gray-300 rounded transition">
                                                                Unequip
                                                            </button>
                                                        </form>
                                                    @else
                                                        <form action="{{ route('game.inventory.equip', $item) }}" method="POST">
                                                            @csrf
                                                            <button type="submit"
                                                                class="px-3 py-1 text-xs bg-crime-600 hover:bg-crime-500 text-white rounded transition">
                                                                Equip
                                                            </button>
                                                        </form>
                                                    @endif
                                                @endif

                                                @if($item->item->canUse())
                                                    <form action="{{ route('game.inventory.use', $item) }}" method="POST">
                                                        @csrf
                                                        <button type="submit"
                                                            class="px-3 py-1 text-xs bg-green-700 hover:bg-green-600 text-white rounded transition">
                                                            Use
                                                        </button>
                                                    </form>
                                                @endif

                                                <form action="{{ route('game.inventory.drop', $item) }}" method="POST">
                                                    @csrf
                                                    <input type="number" name="quantity" value="1" min="1" max="{{ $item->quantity }}" class="hidden">
                                                    <button type="submit"
                                                        class="px-3 py-1 text-xs bg-red-900/60 hover:bg-red-800/80 border border-red-800 text-red-400 rounded transition">
                                                        Drop
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection