@extends('layouts.app')
@section('titulo', 'Muro de Ganadores · ' . ($evento->nombre ?? ''))

@section('contenido')
<div class="d-flex align-items-center justify-content-between mb-3">
    <div>
        <h2 class="fw-bold mb-0" style="font-family:'DM Serif Display',serif;font-weight:400;color:#0F172A">
            Muro de ganadores
        </h2>
        <small class="text-muted">{{ $evento->nombre ?? '' }}</small>
    </div>
    <a href="{{ url('/muro/' . $evento->id) }}" target="_blank" rel="noopener" class="btn btn-primary btn-sm">
        <i class="bi bi-arrows-fullscreen"></i> Pantalla completa
    </a>
</div>

<div style="background:linear-gradient(135deg, var(--primary, #1D3D8E) 0%, #0F1F3A 100%); border-radius:16px; padding:40px 24px; min-height:70vh; color:#fff;">
    @if($ganadores->isEmpty())
        <div style="text-align:center;padding:60px 24px;color:rgba(255,255,255,.7)">
            <div style="font-size:4rem;opacity:.4;margin-bottom:12px">🎟️</div>
            <h3 style="font-family:'DM Serif Display',serif">Aún no hay ganadores</h3>
            <p>Los ganadores aparecerán acá en cuanto se realicen los sorteos.</p>
        </div>
    @else
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;max-width:1200px;margin:0 auto">
            @foreach($ganadores as $g)
            <div style="background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:22px 18px;text-align:center">
                <div style="font-size:3rem;margin-bottom:10px;line-height:1">{{ $g->sorteo->premio->emoji ?? '🎁' }}</div>
                <div style="font-family:'DM Serif Display',serif;font-size:1.3rem;color:#fff;margin-bottom:12px">{{ $g->participante->nombre }}</div>
                <div style="font-size:12px;color:rgba(255,255,255,.6);line-height:1.6;margin-bottom:12px">
                    Segmento: {{ $g->participante->segmento ?? '—' }}<br>
                    Boleta: {{ $g->participante->boleta }}
                </div>
                <span style="display:inline-block;background:var(--secondary,#8BBF2B);color:#fff;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600">
                    {{ $g->sorteo->premio->nombre ?? 'Premio' }}
                </span>
            </div>
            @endforeach
        </div>
    @endif
</div>

<style>
.reacciones-bar-embed {
    position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
    background:rgba(15,23,42,.92);backdrop-filter:blur(12px);
    padding:10px 16px;border-radius:999px;display:flex;gap:10px;
    border:1px solid rgba(255,255,255,.1);z-index:1050;
}
.reacciones-bar-embed .reaccion-btn {
    background:none;border:none;font-size:24px;cursor:pointer;
    padding:4px 8px;border-radius:50%;
    transition:transform .15s ease,background .15s ease;line-height:1;color:#fff;
}
.reacciones-bar-embed .reaccion-btn:hover{transform:scale(1.3);background:rgba(255,255,255,.08);}
@@keyframes reaccionFlotar{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-240px) scale(1.5);}}
.reaccion-float-embed{position:fixed;bottom:80px;font-size:36px;pointer-events:none;animation:reaccionFlotar 2.2s ease-out forwards;z-index:1060;}
</style>

<div class="reacciones-bar-embed">
    <button class="reaccion-btn" data-emoji="🎉">🎉</button>
    <button class="reaccion-btn" data-emoji="🔥">🔥</button>
    <button class="reaccion-btn" data-emoji="❤️">❤️</button>
    <button class="reaccion-btn" data-emoji="👏">👏</button>
    <button class="reaccion-btn" data-emoji="🎊">🎊</button>
    <button class="reaccion-btn" data-emoji="⭐">⭐</button>
</div>

@endsection

@push('scripts')
<script>
(function(){
    document.querySelectorAll('.reacciones-bar-embed .reaccion-btn').forEach(function(btn){
        btn.addEventListener('click',function(){
            var emoji=btn.dataset.emoji;
            spawnFloatFromBtn(emoji,btn);
            enviarReaccion(emoji);
        });
    });
    function spawnFloatFromBtn(emoji,btn){
        var el=document.createElement('div');el.className='reaccion-float-embed';el.textContent=emoji;
        var rect=btn.getBoundingClientRect();el.style.left=(rect.left+rect.width/2-18)+'px';
        document.body.appendChild(el);setTimeout(function(){el.remove();},2200);
    }
    function spawnFloatRandom(emoji){
        var el=document.createElement('div');el.className='reaccion-float-embed';el.textContent=emoji;
        el.style.left=(Math.random()*(window.innerWidth-80)+40)+'px';
        document.body.appendChild(el);setTimeout(function(){el.remove();},2200);
    }
    function enviarReaccion(emoji){
        @if(isset($ganadores)&&$ganadores->isNotEmpty())
        var sorteoId={{$ganadores->first()->sorteo_id??0}};
        if(!sorteoId)return;
        fetch('/reacciones',{method:'POST',headers:{'X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]')?.content||'','Content-Type':'application/json','Accept':'application/json'},body:JSON.stringify({sorteo_id:sorteoId,emoji:emoji})}).catch(function(){});
        @endif
    }
    var ultimoId=0;
    setInterval(function(){
        @if(isset($evento))
        fetch('/reacciones-muro/{{$evento->id}}?desde='+ultimoId)
            .then(r=>r.json()).then(d=>{if(d.reacciones){d.reacciones.forEach(r=>{spawnFloatRandom(r.emoji);});if(d.ultimo_id)ultimoId=d.ultimo_id;}}).catch(function(){});
        @endif
    },3000);
})();
</script>
@endpush