@extends('layouts.gamification')

@section('title', 'Достижения')
@section('gami-active', 'achievements')

@push('styles')
<style>
    .ach-card {
        background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
        padding: 16px; display: flex; gap: 12px; align-items: flex-start;
        position: relative; overflow: hidden; height: 100%;
    }
    .ach-card.unlocked { border-color: rgba(245,158,11,0.45); }
    .ach-card.unlocked::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
        background: linear-gradient(90deg, var(--gold), var(--gold-lt));
    }
    .ach-card.claimed { opacity: 0.55; }
    .ach-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--bg);
        display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
    .ach-name { font-size: 14px; font-weight: 700; }
    .ach-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
    .ach-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
    .ach-progress-tag { font-size: 11px; font-family: 'JetBrains Mono', monospace; color: #94A3B8; background: var(--bg); padding: 2px 7px; border-radius: 4px; }
    .ach-coin-tag { font-size: 12px; font-weight: 700; color: var(--gold); font-family: 'JetBrains Mono', monospace; }
    .claim-btn {
        background: linear-gradient(135deg, var(--gold), #D97706); color: #fff; border: none;
        font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 6px; cursor: pointer;
    }
    .claim-btn:disabled { background: var(--border); color: var(--text-dim); cursor: default; }

    .toast-zone { position: fixed; top: 20px; right: 20px; z-index: 1050; }
    .toast-item { min-width: 220px; }
</style>
@endpush

@section('content')

    <div class="sec-title">🏆 Достижения</div>
    <div class="row g-3">
        @foreach ($achievements as $a)
            @php
                $isUnlocked = $a->completed_at !== null;
                $isClaimed = $a->claimed_at !== null;
                $progress = (int) ($a->progress ?? 0);
                $target = (int) $a->condition_value;
            @endphp
            <div class="col-md-6">
                <div class="ach-card {{ $isUnlocked ? 'unlocked' : '' }} {{ $isClaimed ? 'claimed' : '' }}">
                    <div class="ach-icon">{{ $a->icon }}</div>
                    <div class="flex-grow-1">
                        <div class="ach-name">{{ $a->name }}</div>
                        <div class="ach-desc">{{ $a->description }}</div>
                        <div class="ach-foot">
                            <span class="ach-progress-tag">{{ min($progress, $target) }} / {{ $target }}</span>
                            @if ($isClaimed)
                                <span class="ach-coin-tag">✅ получено</span>
                            @elseif ($isUnlocked)
                                <button class="claim-btn" onclick="claimAchievement({{ (int) $a->id }}, this)">
                                    Забрать {{ (int) $a->coin_reward }} 🪙
                                </button>
                            @else
                                <span class="ach-coin-tag">{{ (int) $a->coin_reward }} 🪙</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- position:fixed, so its spot in the DOM doesn't affect where it renders. --}}
    <div class="toast-zone" id="toastZone"></div>

@endsection

@push('scripts')
<script>
    async function claimAchievement(achievementId, btnEl) {
        btnEl.disabled = true;
        btnEl.textContent = 'Получаем...';

        try {
            const resp = await fetch('/student/claim_achievement.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: 'achievement_id=' + encodeURIComponent(achievementId)
            });
            const data = await resp.json();

            if (!resp.ok || data.error) {
                showToast(data.error || 'Не удалось получить награду', false);
                btnEl.disabled = false;
                btnEl.textContent = 'Забрать награду';
                return;
            }

            showToast('Награда получена: +' + data.reward + ' 🪙', true);
            const card = btnEl.closest('.ach-card');
            card.classList.add('claimed');
            btnEl.outerHTML = '<span class="ach-coin-tag">✅ получено</span>';
        } catch (e) {
            showToast('Ошибка сети', false);
            btnEl.disabled = false;
            btnEl.textContent = 'Забрать награду';
        }
    }

    function showToast(message, success) {
        const zone = document.getElementById('toastZone');
        const el = document.createElement('div');
        el.className = 'alert toast-item ' + (success ? 'alert-success' : 'alert-danger') + ' shadow';
        el.textContent = message;
        zone.appendChild(el);
        setTimeout(() => el.remove(), 3500);
    }
</script>
@endpush