@extends('layouts.gamification')

@section('title', 'Магазин')
@section('gami-active', 'shop')

@push('styles')
<style>
    .balance-bar {
        display: flex; align-items: center; justify-content: space-between;
        background: linear-gradient(135deg, #1E1B4B 0%, #0F172A 60%, #1A1F35 100%);
        border: 1px solid var(--border); border-radius: 12px;
        padding: 16px 20px; margin-bottom: 24px;
    }
    .balance-bar .lbl { font-size: 12px; color: var(--text-dim); text-transform: uppercase; }
    .balance-bar .amt { font-size: 24px; font-weight: 800; color: var(--gold); }

    .shop-card {
        background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
        padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center;
        gap: 8px; height: 100%;
    }
    .shop-card.owned { border-color: rgba(16,185,129,0.45); }
    .shop-card.equipped { border-color: rgba(245,158,11,0.6); }
    .shop-icon { font-size: 40px; }
    .shop-name { font-size: 14px; font-weight: 700; }
    .shop-cost { font-size: 13px; font-weight: 700; color: var(--gold); font-family: 'JetBrains Mono', monospace; }
    .shop-form { width: 100%; }
    .shop-btn {
        width: 100%; margin-top: 4px;
        background: linear-gradient(135deg, var(--gold), #D97706); color: #fff; border: none;
        font-size: 12px; font-weight: 700; padding: 7px 10px; border-radius: 6px; cursor: pointer;
    }
    .shop-btn:disabled { background: var(--border); color: var(--text-dim); cursor: default; }
    .shop-btn.equip { background: linear-gradient(135deg, var(--green), #059669); }
    .shop-tag-equipped { font-size: 12px; font-weight: 700; color: var(--gold-lt); }
</style>
@endpush

@section('content')

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <div class="balance-bar">
        <div class="lbl">Баланс</div>
        <div class="amt">{{ (int) $hero->coins_balance }} 🪙</div>
    </div>

    <div class="sec-title">🛒 Магазин аватаров</div>
    <div class="row g-3">
        @foreach ($items as $item)
            @php
                $isOwned = in_array((int) $item->id, $ownedItemIds, true);
                $isEquipped = $isOwned && ($hero->avatar ?? '') === $item->icon;
                $canAfford = (int) $hero->coins_balance >= (int) $item->cost_coins;
            @endphp
            <div class="col-6 col-md-3">
                <div class="shop-card {{ $isOwned ? 'owned' : '' }} {{ $isEquipped ? 'equipped' : '' }}">
                    <div class="shop-icon">{{ $item->icon }}</div>
                    <div class="shop-name">{{ $item->name }}</div>

                    @if ($isEquipped)
                        <span class="shop-tag-equipped">✅ надето</span>
                    @elseif ($isOwned)
                        <form method="POST" action="/student/equip_avatar.php" class="shop-form">
                            @csrf
                            <input type="hidden" name="item_id" value="{{ (int) $item->id }}">
                            <button type="submit" class="shop-btn equip">Надеть</button>
                        </form>
                    @else
                        <div class="shop-cost">{{ (int) $item->cost_coins }} 🪙</div>
                        <form method="POST" action="/student/buy_item.php" class="shop-form">
                            @csrf
                            <input type="hidden" name="item_id" value="{{ (int) $item->id }}">
                            <button type="submit" class="shop-btn" {{ $canAfford ? '' : 'disabled' }}>
                                {{ $canAfford ? 'Купить' : 'Не хватает монет' }}
                            </button>
                        </form>
                    @endif
                </div>
            </div>
        @endforeach
    </div>

@endsection