@extends('layouts.app')

@section('titulo', 'Sorteos — Sorteos FEL')

@section('breadcrumb')
    <a href="{{ route('inicio') }}" style="color:var(--primary,#1D3D8E)">Inicio</a>
    <span style="margin:0 6px;color:var(--border)">›</span>
    <span style="color:var(--text)">Sorteos</span>
@endsection

@section('estilos')
<style>
/* ═════════ SORTEOS — Layout 40/60 + SORTEAR inline ═════════ */
.sorteos-layout {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 20px;
    align-items: start;
}
@@media (max-width: 992px) {
    .sorteos-layout { grid-template-columns: 1fr; }
}

.sorteos-panel { display: flex; flex-direction: column; gap: 20px; }

.card-fel {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
}
.card-fel-header {
    padding: 14px 18px;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    color: #0F172A;
}
.card-fel-header.primary {
    background: var(--primary, #1D3D8E);
    color: #FFFFFF;
    border: none;
}
.card-fel-header.secondary {
    background: var(--secondary, #8BBF2B);
    color: #FFFFFF;
    border: none;
}
.card-fel-body { padding: 18px; }

.premios-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.premio-fila {
    display: grid;
    grid-template-columns: 60px 1fr auto 32px 32px;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s ease;
    position: relative;
}
.premio-fila:hover {
    border-color: var(--primary, #1D3D8E);
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.premio-fila.activo {
    border-color: var(--secondary, #8BBF2B);
    background: rgba(139,191,43,.06);
    box-shadow: 0 2px 14px rgba(139,191,43,.15);
}
.premio-fila.ejecutado {
    opacity: .55;
    cursor: not-allowed;
}
.premio-fila.ejecutado:hover {
    border-color: #E5E7EB;
    box-shadow: none;
}

.premio-emoji {
    font-size: 2.3rem;
    line-height: 1;
    text-align: center;
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif;
}
.premio-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.premio-nombre {
    font-weight: 600;
    color: #0F172A;
    font-size: 14px;
    line-height: 1.3;
}
.premio-meta {
    font-size: 11.5px;
    color: #64748B;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.premio-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: .3px;
}
.premio-badge.normal { background: rgba(29,61,142,.1); color: #1D3D8E; }
.premio-badge.agua { background: rgba(217,119,6,.12); color: #D97706; }
.premio-badge.sorteado { background: rgba(22,101,52,.12); color: #166534; }
.premio-badge.segmento { background: rgba(107,114,128,.1); color: #374151; }

/* Botón SORTEAR inline — solo visible en premio activo */
.btn-sortear-inline {
    display: none;
    background: var(--secondary, #8BBF2B);
    color: #FFFFFF;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .3px;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.btn-sortear-inline:hover {
    background: #7AAB22;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(139,191,43,.4);
}
.premio-fila.activo .btn-sortear-inline { display: inline-flex; align-items: center; gap: 6px; }
.premio-fila.ejecutado .btn-sortear-inline { display: none; }

.premio-eliminar {
    background: transparent;
    border: none;
    color: #CBD5E1;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: all .1s ease;
}
.premio-eliminar:hover {
    color: #DC2626;
    background: #FEF2F2;
}

.ganador-row {
    padding: 10px 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 13px;
}
.ganador-row:last-child { border-bottom: none; }
.ganador-premio-emoji { font-size: 1.2rem; margin-right: 6px; }

/* Emoji picker */
.emoji-picker-wrap { position: relative; }
.emoji-picker {
    display: none;
    position: absolute;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 14px;
    margin-top: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 100;
    width: 300px;
    max-height: 340px;
    overflow-y: auto;
    left: 0;
}
.emoji-picker.visible { display: block; }
.emoji-categoria {
    font-size: 10.5px;
    color: #94A3B8;
    font-weight: 700;
    margin: 10px 0 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid #F1F5F9;
    padding-bottom: 3px;
}
.emoji-categoria:first-child { margin-top: 0; }
.emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.emoji-btn {
    font-size: 1.4rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .1s ease;
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif;
}
.emoji-btn:hover {
    background: #F1F5F9;
    transform: scale(1.3);
}

#emoji-input {
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif;
}

/* Overlay countdown */
#sorteo-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .97);
    backdrop-filter: blur(4px);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
#sorteo-overlay.visible { display: flex; }
#countdown {
    font-size: clamp(10rem, 26vw, 20rem);
    font-weight: 800;
    color: #FFFFFF;
    text-shadow: 0 0 60px rgba(29,61,142,.95), 0 0 130px rgba(29,61,142,.5);
    animation: pulse 1s ease-in-out infinite;
    font-family: 'DM Serif Display', serif;
    position: relative; z-index: 2;
}
@@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.14); } }
/* Partículas flotantes del countdown */
.cnt-particle {
    position:absolute; border-radius:50%;
    background:rgba(100,160,255,.55);
    animation:cntFloat linear infinite;
    pointer-events:none;
}
.cnt-p1{width:14px;height:14px;left:10%;animation-duration:5.2s;animation-delay:0s;}
.cnt-p2{width:9px; height:9px; left:27%;animation-duration:7.0s;animation-delay:1.4s;}
.cnt-p3{width:18px;height:18px;left:50%;animation-duration:5.8s;animation-delay:0.6s;}
.cnt-p4{width:11px;height:11px;left:67%;animation-duration:8.2s;animation-delay:2.0s;}
.cnt-p5{width:7px; height:7px; left:81%;animation-duration:4.6s;animation-delay:0.9s;}
.cnt-p6{width:15px;height:15px;left:40%;animation-duration:6.4s;animation-delay:3.1s;}
#cnt-glow {
    position:absolute;width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle,rgba(29,61,142,.50) 0%,transparent 70%);
    animation:cntGlowPulse 2s ease-in-out infinite;
    pointer-events:none; z-index:1;
}
@@keyframes cntFloat {
    0%   { transform:translateY(100vh) scale(1);    opacity:0; }
    6%   { opacity:.75; }
    88%  { opacity:.25; }
    100% { transform:translateY(-12vh) scale(.35); opacity:0; }
}
@@keyframes cntGlowPulse {
    0%,100% { transform:scale(1);    opacity:.55; }
    50%     { transform:scale(1.38); opacity:1;   }
}

.ganador-card {
    background: linear-gradient(135deg, var(--primary, #1D3D8E), #0F1F3A);
    border-radius: 16px;
    padding: 2rem;
    color: #FFFFFF;
    text-align: center;
    animation: aparecer .5s ease;
    max-width: 480px;
    width: 100%;
    margin-bottom: 16px;
}
@@keyframes aparecer {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
}

#campos-agua { display: none; }


/* Sprint validación — botón edit + badge warning */
.premio-editar {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 15px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: all .1s ease;
}
.premio-editar:hover {
    color: var(--primary, #1D3D8E);
    background: rgba(29,61,142,.08);
}

.premio-badge.disp-ok    { background: rgba(22,101,52,.12); color: #166534; }
.premio-badge.disp-warn  { background: rgba(217,119,6,.15); color: #B45309; }
.premio-badge.disp-fail  { background: rgba(220,38,38,.12); color: #991B1B; }

.premio-fila.insuficiente {
    background: rgba(254,242,242,.4);
    cursor: not-allowed;
}
.premio-fila.insuficiente:hover {
    border-color: #E5E7EB;
    box-shadow: none;
}
.premio-fila.insuficiente .btn-sortear-inline { display: none !important; }

/* Modal edit */
.modal-edit-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.7);
    backdrop-filter: blur(4px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-edit-backdrop.visible { display: flex; }
.modal-edit {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 24px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-edit h4 {
    margin: 0 0 18px;
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    color: #0F172A;
}
</style>
@endsection

@section('contenido')

<div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
    <div>
        <h2 class="mb-0" style="font-family:'DM Serif Display',serif;font-weight:400;color:#0F172A">
            <i class="bi bi-shuffle"></i> Sorteos
        </h2>
        <small class="text-muted">{{ $evento->nombre }}</small>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('ganadores.csv', $evento) }}?formato=xlsx" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-download"></i> Exportar Excel
        </a>
        <a href="{{ route('resultado.muro.embed', $evento) }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-grid"></i> Muro
        </a>
        <a href="{{ route('eventos.index') }}" class="btn btn-outline-secondary btn-sm">
            ← Volver
        </a>
    </div>
</div>

<div class="sorteos-layout">

    {{-- IZQUIERDA 40%: Agregar Premio (verde) + Ganadores (azul) --}}
    <div class="sorteos-panel">

        {{-- Agregar Premio (VERDE SECUNDARIO arriba) --}}
        <div class="card-fel" id="form-premio">
            <div class="card-fel-header secondary">
                <i class="bi bi-plus-circle"></i> Agregar Premio
            </div>
            <div class="card-fel-body">
                <form method="POST" action="{{ route('premios.store', $evento) }}" id="form-agregar-premio">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label fw-bold" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748B">Nombre del premio</label>
                        <input type="text" name="nombre_premio" class="form-control" placeholder="Ej: Televisor 55&quot;" required>
                    </div>

                    <div class="row g-2 mb-3">
                        <div class="col-4">
                            <label class="form-label fw-bold" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748B">Emoji</label>
                            <div class="emoji-picker-wrap">
                                <input type="text" name="emoji_premio" id="emoji-input" class="form-control text-center" value="🏆" readonly onclick="toggleEmojiSelector()" style="cursor:pointer;font-size:1.4rem">
                                <div class="emoji-picker" id="emoji-selector">

                                    <div class="emoji-categoria">Premios clásicos</div>
                                    <div class="emoji-grid">
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🏆')">🏆</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🎁')">🎁</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🏅')">🏅</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('💎')">💎</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('👑')">👑</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🎖️')">🎖️</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('⭐')">⭐</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🌟')">🌟</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('✨')">✨</button>
                                    </div>

                                    <div class="emoji-categoria">Dinero / Bonos / Tickets</div>
                                    <div class="emoji-grid">
                                        <button type="button" class="emoji-btn" onclick="setEmoji('💰')">💰</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('💵')">💵</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('💳')">💳</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🛒')">🛒</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🎫')">🎫</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🎟️')">🎟️</button>
                                    </div>

                                    <div class="emoji-categoria">Tecnología</div>
                                    <div class="emoji-grid">
                                        <button type="button" class="emoji-btn" onclick="setEmoji('📱')">📱</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('💻')">💻</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🖥️')">🖥️</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('📺')">📺</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🎧')">🎧</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('⌚')">⌚</button>
                                    </div>

                                    <div class="emoji-categoria">Viajes y vehículos</div>
                                    <div class="emoji-grid">
                                        <button type="button" class="emoji-btn" onclick="setEmoji('✈️')">✈️</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🏖️')">🏖️</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🏨')">🏨</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🚗')">🚗</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🏍️')">🏍️</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🚲')">🚲</button>
                                    </div>

                                    <div class="emoji-categoria">Juegos y entretenimiento</div>
                                    <div class="emoji-grid">
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🎯')">🎯</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🎲')">🎲</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🎰')">🎰</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🎮')">🎮</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🎪')">🎪</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🎭')">🎭</button>
                                    </div>

                                    <div class="emoji-categoria">Hogar y oficina</div>
                                    <div class="emoji-grid">
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🏠')">🏠</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🛋️')">🛋️</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🪴')">🪴</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🧹')">🧹</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('🍳')">🍳</button>
                                        <button type="button" class="emoji-btn" onclick="setEmoji('☕')">☕</button>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="col-8">
                            <label class="form-label fw-bold" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748B">Tipo</label>
                            <select name="tipo_sorteo" id="tipo_sorteo" class="form-select" onchange="toggleCamposAgua(this.value)">
                                <option value="normal">Normal — ganador directo</option>
                                <option value="al agua">Al agua — candidatos → ganador</option>
                            </select>
                        </div>
                    </div>

                    <div id="campo-normal" class="mb-3">
                        <label class="form-label fw-bold" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748B">Cantidad ganadores</label>
                        <input type="number" name="cantidad_ganadores" class="form-control" value="1" min="1" max="50">
                    </div>

                    <div id="campos-agua" class="mb-3">
                        <div class="row g-2">
                            <div class="col-6">
                                <label class="form-label fw-bold" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748B">Candidatos</label>
                                <input type="number" name="cantidad_al_agua" class="form-control" value="3" min="2" max="20">
                            </div>
                            <div class="col-6">
                                <label class="form-label fw-bold" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748B">Ganadores</label>
                                <input type="number" name="cantidad_ganadores_finales" class="form-control" value="1" min="1" max="10">
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                                    <label class="form-label fw-semibold" style="font-size:12px;letter-spacing:.5px;color:var(--text)">
                                        ZONAS / SEGMENTOS <span style="font-weight:400;opacity:.55;font-size:11px">— vacío = todos participan</span>
                                    </label>
                                    <div id="fel-seg-wrap" style="border:1px solid var(--border,#E2E8F0);border-radius:8px;padding:10px 14px;background:#FAFAFA;">
                                        <div id="fel-seg-loading" style="font-size:13px;color:#9CA3AF;">Cargando zonas…</div>
                                        <div id="fel-seg-list" style="display:none">
                                            <label style="display:flex;align-items:center;gap:7px;padding-bottom:7px;margin-bottom:7px;border-bottom:1px solid var(--border,#E2E8F0);font-size:13px;font-weight:600;cursor:pointer;">
                                                <input type="checkbox" id="fel-seg-todos" onchange="felSegTodos(this.checked)"
                                                       style="width:15px;height:15px;accent-color:var(--primary,#1D3D8E);cursor:pointer;">
                                                Seleccionar todas las zonas
                                            </label>
                                            <div id="fel-seg-items" style="display:flex;flex-wrap:wrap;gap:5px 18px;"></div>
                                        </div>
                                        <div id="fel-seg-empty" style="display:none;font-size:13px;color:#9CA3AF;">
                                            Sin zonas registradas — todos los participantes quedan habilitados.
                                        </div>
                                    </div>
                                </div>

                    <button type="submit" class="btn w-100" style="background:var(--secondary,#8BBF2B);color:#FFFFFF;border:none;font-weight:600">
                        <i class="bi bi-plus-circle"></i> Agregar Premio
                    </button>
                </form>
            </div>
        </div>

        {{-- Ganadores (AZUL debajo) --}}
        <div class="card-fel">
            <div class="card-fel-header primary">
                <i class="bi bi-trophy"></i> Ganadores
            </div>
            <div class="card-fel-body" style="padding:0 18px">
                @php
                    $activos = $ganadores->where('estado', 'ganador');
                    $anulados = $ganadores->where('estado', 'anulado');
                @endphp
                @if($activos->isEmpty())
                    <p class="text-muted text-center py-3 mb-0" style="font-size:13px">Aún no hay ganadores</p>
                @else
                    @foreach($activos as $g)
                    <div class="ganador-row d-flex justify-content-between align-items-center">
                        <div style="min-width:0;flex:1">
                            <span class="ganador-premio-emoji">{{ $g->sorteo->premio->emoji }}</span>
                            <strong>{{ $g->participante->nombre }}</strong>
                            <div style="font-size:11.5px;color:#94A3B8;margin-left:26px">
                                {{ $g->sorteo->premio->nombre }}
                                @if($g->participante->segmento)
                                    · {{ $g->participante->segmento }}
                                @endif
                            </div>
                        </div>
                        <button class="btn btn-sm" style="color:#DC2626;background:none;border:none" title="Anular"
                                onclick="confirmarAnulacion('{{ route('ganadores.anular', $g) }}')">✕</button>
                    </div>
                    @endforeach
                @endif

                @if($anulados->isNotEmpty())
                <div style="border-top:1px solid #F1F5F9;padding:10px 0;cursor:pointer;font-size:12px;color:#94A3B8"
                     onclick="toggleAnulados()">
                    <i class="bi bi-slash-circle"></i> Anulados ({{ $anulados->count() }})
                    <i class="bi bi-chevron-down" id="icon-anulados" style="float:right"></i>
                </div>
                <div id="tabla-anulados" style="display:none;padding-bottom:10px">
                    @foreach($anulados as $g)
                    <div style="padding:6px 0;font-size:12px;color:#94A3B8">
                        <s>{{ $g->participante->nombre }}</s> · {{ $g->sorteo->premio->nombre }}
                        @if($g->motivo_anulacion)
                            <br><small style="margin-left:10px">Motivo: {{ $g->motivo_anulacion }}</small>
                        @endif
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>

    </div>

    {{-- DERECHA 60%: Premios --}}
    <div>
        <div class="card-fel">
            <div class="card-fel-header primary">
                <i class="bi bi-trophy"></i> Premios del evento
                <span style="margin-left:auto;font-weight:400;font-size:12px;opacity:.85">
                    Clickeá un premio para sortearlo
                </span>
            </div>
            <div class="card-fel-body" style="padding:14px">
                @if($premios->isEmpty())
                    <div class="text-center text-muted py-4">
                        <i class="bi bi-gift" style="font-size:2.5rem;opacity:.3;display:block;margin-bottom:8px"></i>
                        <p class="mb-0" style="font-size:13px">Agregá tu primer premio desde el formulario a la izquierda.</p>
                    </div>
                @else
                <div class="premios-lista">
                    @foreach($premios as $premio)
                    <div class="premio-fila {{ $premio->estado === 'ejecutado' ? 'ejecutado' : '' }}"
                         data-id="{{ $premio->id }}"
                         data-nombre="{{ $premio->nombre }}"
                         data-emoji="{{ $premio->emoji }}"
                         data-tipo="{{ $premio->tipo_sorteo }}"
                         data-cantidad="{{ $premio->cantidad_ganadores }}"
                         onclick="seleccionarPremio(this, event)">

                        <div class="premio-emoji">{{ $premio->emoji }}</div>

                        <div class="premio-info">
                            <div class="premio-nombre">{{ $premio->nombre }}</div>
                            <div class="premio-meta">
                                @if($premio->tipo_sorteo === 'al agua')
                                    <span class="premio-badge agua">💧 Al agua</span>
                                    <span>{{ $premio->cantidad_al_agua }} → {{ $premio->cantidad_ganadores_finales }} ganador(es)</span>
                                @else
                                    <span class="premio-badge normal">Normal</span>
                                    <span>{{ $premio->cantidad_ganadores }} ganador(es)</span>
                                @endif

                                @if($premio->segmento)
                                    <span class="premio-badge segmento">{{ $premio->segmento }}</span>
                                @endif

                                @if($premio->estado === 'ejecutado')
                                    <span class="premio-badge sorteado">✓ Sorteado</span>
                                @endif
                            </div>
                        </div>

                        {{-- Botón SORTEAR inline (solo visible en .activo) --}}
                        <button type="button" class="btn-sortear-inline"
                                onclick="event.stopPropagation(); iniciarSorteoDesde(this.parentNode)">
                            <i class="bi bi-shuffle"></i> SORTEAR
                        </button>

                        @if($premio->estado !== 'ejecutado')
                        <button type="button" class="premio-editar"
                                onclick="event.stopPropagation(); abrirEdicion({{ $premio->id }})"
                                title="Editar premio">
                            <i class="bi bi-pencil"></i>
                        </button>
                        @else
                        <span></span>
                        @endif

                        @if($premio->estado !== 'ejecutado')
                        <form method="POST" action="{{ route('premios.destroy', $premio) }}"
                              onclick="event.stopPropagation()"
                              onsubmit="event.preventDefault();if(typeof Swal!=='undefined'){Swal.fire({title:'¿Eliminar premio?',icon:'warning',showCancelButton:true,confirmButtonText:'Sí',cancelButtonText:'Cancelar',confirmButtonColor:'#dc3545'}).then(r=>{if(r.isConfirmed)this.submit();})}else{if(confirm('¿Eliminar?'))this.submit();}">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="premio-eliminar" title="Eliminar">✕</button>
                        </form>
                        @else
                        <span></span>
                        @endif
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </div>

</div>



{{-- Modal edición de premio --}}
<div id="modal-edit-premio" class="modal-edit-backdrop" onclick="if(event.target===this) cerrarEdicion()">
    <div class="modal-edit">
        <h4><i class="bi bi-pencil"></i> Editar premio</h4>
        <form id="form-edit-premio" onsubmit="event.preventDefault(); guardarEdicion()">
            @csrf
            @method('PUT')
            <input type="hidden" id="edit-premio-id">

            <div class="mb-3">
                <label class="form-label fw-bold" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748B">Nombre</label>
                <input type="text" id="edit-nombre" class="form-control" required>
            </div>

            <div class="row g-2 mb-3">
                <div class="col-4">
                    <label class="form-label fw-bold" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748B">Emoji</label>
                    <input type="text" id="edit-emoji" class="form-control text-center" maxlength="10"
                           style="font-size:1.4rem;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Segoe UI Symbol',sans-serif">
                </div>
                <div class="col-8">
                    <label class="form-label fw-bold" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748B">Tipo</label>
                    <select id="edit-tipo" class="form-select" onchange="toggleEditCamposAgua(this.value)">
                        <option value="normal">Normal</option>
                        <option value="al agua">Al agua</option>
                    </select>
                </div>
            </div>

            <div id="edit-campo-normal" class="mb-3">
                <label class="form-label fw-bold" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748B">Cantidad ganadores</label>
                <input type="number" id="edit-cantidad-ganadores" class="form-control" min="1" max="50">
            </div>

            <div id="edit-campos-agua" class="mb-3" style="display:none">
                <div class="row g-2">
                    <div class="col-6">
                        <label class="form-label fw-bold" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748B">Candidatos</label>
                        <input type="number" id="edit-cantidad-agua" class="form-control" min="2" max="20">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-bold" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748B">Ganadores finales</label>
                        <input type="number" id="edit-ganadores-finales" class="form-control" min="1" max="10">
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label fw-bold" style="font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748B">Segmento (opcional)</label>
                <input type="text" id="edit-segmento" class="form-control" placeholder="Ej: Zona Norte">
            </div>

            <div id="edit-error" class="alert alert-danger py-2 mb-3" style="display:none;font-size:13px"></div>

            <div class="d-flex gap-2 justify-content-end">
                <button type="button" class="btn btn-outline-secondary" onclick="cerrarEdicion()">Cancelar</button>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check"></i> Guardar cambios
                </button>
            </div>
        </form>
    </div>
</div>

<div id="sorteo-overlay">
    <div class="cnt-particle cnt-p1"></div>
    <div class="cnt-particle cnt-p2"></div>
    <div class="cnt-particle cnt-p3"></div>
    <div class="cnt-particle cnt-p4"></div>
    <div class="cnt-particle cnt-p5"></div>
    <div class="cnt-particle cnt-p6"></div>
    <div id="cnt-glow"></div>
    <div id="countdown">3</div>
    <div id="resultado-sorteo"></div>
</div>

@endsection


{{-- ═══════════════════════════════════════════════════════════════
     FEL SHOW OVERLAY — sprint_show_total
     Overlay fullscreen para countdown + ganadores + al agua
     ═══════════════════════════════════════════════════════════════ --}}
<div id="fel-show-overlay"
     style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;
            z-index:99999;background:linear-gradient(135deg,#050e1f 0%,#1D3D8E 55%,#050e1f 100%);
            flex-direction:column;align-items:center;justify-content:center;gap:20px;
            padding:32px;">
    <div id="fel-show-marca"
         style="position:absolute;top:24px;left:50%;transform:translateX(-50%);
                font-size:14px;letter-spacing:4px;color:rgba(255,255,255,0.70);font-weight:600;
                text-transform:uppercase;pointer-events:none;">
        Sorteos FEL
    </div>
    <div id="fel-show-content"
         style="width:100%;max-width:720px;text-align:center;color:#fff;">
    </div>
    <div id="fel-show-sub"
         style="font-size:16px;color:rgba(255,255,255,0.60);letter-spacing:1px;min-height:24px;">
    </div>
    <button id="fel-show-close"
            onclick="FelShow.close(); location.reload();"
            style="display:none;margin-top:22px;padding:15px 56px;
                   background:var(--secondary);color:var(--white);
                   border:1.5px solid var(--secondary-hover);border-radius:50px;
                   font-size:16px;font-weight:600;cursor:pointer;letter-spacing:1px;
                   transition:all 0.25s;"
            onmouseover="this.style.background='var(--secondary-hover)'"
            onmouseout="this.style.background='var(--secondary)'">
        Continuar →
    </button>
</div>


@push('styles')
{{-- FEL SHOW CSS — sprint_show_total --}}
<style>
#fel-show-overlay { display: none; }
#fel-show-overlay.fel-visible { display: flex !important; }

@@keyframes felCountZoom {
    0%   { transform: scale(3);   opacity: 0; }
    15%  { transform: scale(1.1); opacity: 1; }
    75%  { transform: scale(1);   opacity: 1; }
    100% { transform: scale(0.6); opacity: 0; }
}
@@keyframes felWinnerSlideUp {
    0%   { transform: translateY(80px) scale(0.92); opacity: 0; }
    60%  { transform: translateY(-6px) scale(1.02); opacity: 1; }
    100% { transform: translateY(0)    scale(1);    opacity: 1; }
}
@@keyframes felCandidateFadeIn {
    0%   { transform: translateX(-24px); opacity: 0; }
    100% { transform: translateX(0);     opacity: 1; }
}
@@keyframes felGoldGlow {
    0%, 100% { box-shadow: 0 0 24px rgba(255,215,0,0.25), 0 0 60px rgba(29,61,142,0.3); }
    50%       { box-shadow: 0 0 48px rgba(255,215,0,0.55), 0 0 100px rgba(29,61,142,0.5); }
}
@@keyframes felPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

.fel-count-num {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(140px, 28vw, 240px);
    color: #ffffff;
    line-height: 1;
    animation: felCountZoom 1s cubic-bezier(0.34,1.56,0.64,1) forwards;
    text-shadow: 0 0 60px rgba(139,191,43,0.6);
}
.fel-winner-card {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 24px;
    padding: 40px 52px;
    animation: felWinnerSlideUp 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards,
               felGoldGlow 2.5s ease-in-out infinite 0.8s;
    backdrop-filter: blur(10px);
}
.fel-winner-name {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(38px, 6vw, 64px);
    color: #FFD700;
    line-height: 1.15;
    margin-bottom: 14px;
}
.fel-candidate-item {
    animation: felCandidateFadeIn 0.35s ease-out forwards;
    opacity: 0;
}
.fel-drum-pulse {
    animation: felPulse 0.18s ease-in-out infinite;
}
</style>
@endpush

@push('scripts')
<script>
(function() {
    let premioSeleccionado = null;

    window.seleccionarPremio = function(el, evt) {
        if (el.classList.contains('ejecutado')) return;
        if (el.classList.contains('insuficiente')) return;

        // Limpiar selección previa
        document.querySelectorAll('.premio-fila').forEach(p => p.classList.remove('activo'));

        const premioId = el.dataset.id;

        // Consultar disponibilidad antes de marcar activo
        fetch(`/api/premios/${premioId}/disponibles`)
            .then(r => r.json())
            .then(d => {
                if (d.ok && d.suficientes) {
                    el.classList.add('activo');
                    premioSeleccionado = {
                        id: el.dataset.id,
                        nombre: el.dataset.nombre,
                        emoji: el.dataset.emoji,
                        tipo: el.dataset.tipo,
                        cantidad: el.dataset.cantidad,
                    };
                    mostrarBadgeDisponibilidad(el, d);
                } else {
                    el.classList.add('insuficiente');
                    mostrarBadgeDisponibilidad(el, d);
                    premioSeleccionado = null;

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Participantes insuficientes',
                            html: `Este premio necesita <strong>${d.necesarios}</strong> participante(s) pero solo hay <strong>${d.disponibles}</strong> disponible(s).<br><br>` +
                                  (d.premio.segmento ? `Segmento: <strong>${d.premio.segmento}</strong><br>` : '') +
                                  `Faltan: <strong>${d.faltan}</strong>`,
                            confirmButtonText: 'Entendido',
                            confirmButtonColor: '#1D3D8E',
                        });
                    } else {
                        alert(`Faltan ${d.faltan} participantes. Disponibles: ${d.disponibles}, necesarios: ${d.necesarios}.`);
                    }
                }
            })
            .catch(e => {
                console.error('Error consultando disponibles:', e);
                // Fallback: marcar activo y dejar que el backend decida
                el.classList.add('activo');
                premioSeleccionado = {
                    id: el.dataset.id,
                    nombre: el.dataset.nombre,
                    emoji: el.dataset.emoji,
                    tipo: el.dataset.tipo,
                    cantidad: el.dataset.cantidad,
                };
            });
    };

    function mostrarBadgeDisponibilidad(filaEl, d) {
        // Remueve badge previo
        filaEl.querySelectorAll('.premio-badge.disp-ok, .premio-badge.disp-warn, .premio-badge.disp-fail').forEach(b => b.remove());

        const badge = document.createElement('span');
        badge.className = 'premio-badge ' + (d.suficientes
            ? (d.disponibles === d.necesarios ? 'disp-warn' : 'disp-ok')
            : 'disp-fail');
        badge.textContent = d.suficientes
            ? `${d.disponibles}/${d.necesarios} disp.`
            : `⚠ Faltan ${d.faltan}`;

        const meta = filaEl.querySelector('.premio-meta');
        if (meta) meta.appendChild(badge);
    }

    window.iniciarSorteoDesde = function(filaEl) {
        // Asegurar selección por si el click anterior no disparó
        if (!premioSeleccionado || premioSeleccionado.id !== filaEl.dataset.id) {
            seleccionarPremio(filaEl);
        }
        iniciarSorteo();
    };

    window.toggleEmojiSelector = function() {
        const el = document.getElementById('emoji-selector');
        if (el) el.classList.toggle('visible');
    };

    window.setEmoji = function(emoji) {
        document.getElementById('emoji-input').value = emoji;
        document.getElementById('emoji-selector').classList.remove('visible');
    };

    document.addEventListener('click', function(e) {
        const wrap = e.target.closest('.emoji-picker-wrap');
        if (!wrap) {
            const sel = document.getElementById('emoji-selector');
            if (sel) sel.classList.remove('visible');
        }
    });

    window.toggleCamposAgua = function(valor) {
        document.getElementById('campos-agua').style.display = valor === 'al agua' ? 'block' : 'none';
        document.getElementById('campo-normal').style.display = valor === 'al agua' ? 'none' : 'block';
    };

    window.toggleAnulados = function() {
        const tabla = document.getElementById('tabla-anulados');
        const icon = document.getElementById('icon-anulados');
        if (tabla.style.display === 'none') {
            tabla.style.display = 'block';
            if (icon) icon.classList.replace('bi-chevron-down', 'bi-chevron-up');
        } else {
            tabla.style.display = 'none';
            if (icon) icon.classList.replace('bi-chevron-up', 'bi-chevron-down');
        }
    };

    window.confirmarAnulacion = function(url) {
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: '¿Anular ganador?',
                text: 'Podés indicar un motivo.',
                icon: 'warning',
                input: 'text',
                inputPlaceholder: 'Motivo (opcional)',
                showCancelButton: true,
                confirmButtonText: 'Sí, anular',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#DC2626',
            }).then(r => {
                if (r.isConfirmed) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = url;
                    form.innerHTML = '<input type="hidden" name="_token" value="' + document.querySelector('meta[name=csrf-token]').content + '">' +
                                     '<input type="hidden" name="motivo" value="' + (r.value || '').replace(/"/g, '&quot;') + '">';
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        } else if (confirm('¿Anular este ganador?')) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = url;
            form.innerHTML = '<input type="hidden" name="_token" value="' + document.querySelector('meta[name=csrf-token]').content + '">';
            document.body.appendChild(form);
            form.submit();
        }
    };

    window.iniciarSorteo = function() {
        if (!premioSeleccionado) return;

        const overlay = document.getElementById('sorteo-overlay');
        const countdownEl = document.getElementById('countdown');
        const resultadoEl = document.getElementById('resultado-sorteo');

        overlay.classList.add('visible');
        resultadoEl.innerHTML = '';

        let segundos = {{ $evento->segundos_cuenta_regresiva ?? 5 }};
        countdownEl.style.display = 'block';
        countdownEl.textContent = segundos;

        const interval = setInterval(() => {
            segundos--;
            if (typeof FelShow !== 'undefined') { FelShow.audio.tick(segundos); }
            if (segundos > 0) {
                countdownEl.textContent = segundos;
            } else {
                clearInterval(interval);
                countdownEl.style.display = 'none';
                ejecutarSorteo();
            }
        }, 1000);
    };

    function ejecutarSorteo() {
        const csrf = document.querySelector('meta[name=csrf-token]').content;
        fetch('{{ route("sorteos.ejecutar") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrf,
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
            body: JSON.stringify({ premio_id: premioSeleccionado.id }),
        })
        .then(r => r.json())
        .then(d => mostrarResultado(d))
        .catch(e => {
            document.getElementById('resultado-sorteo').innerHTML =
                '<div style="color:#fff;text-align:center"><h3>Error</h3><p>' + e.message + '</p>' +
                '<button class="btn btn-light mt-3" onclick="cerrarOverlay()">Cerrar</button></div>';
        });
    }

    function mostrarResultado(d) {
        const resultadoEl = document.getElementById('resultado-sorteo');

        if (!d.ok) {
            if (d.codigo === 'CONCURRENT_SORTEO') {
                resultadoEl.innerHTML =
                    '<div style="color:#fff;text-align:center;max-width:500px">' +
                    '<h2 style="font-family:\'DM Serif Display\',serif;margin-bottom:12px">⏳ Hay un sorteo sin terminar</h2>' +
                    '<p style="opacity:.9;margin-bottom:20px">' + (d.msg || '') + '</p>' +
                    '<button class="btn btn-warning me-2" onclick="liberarYReintentar()">🧹 Liberar y reintentar</button>' +
                    '<button class="btn btn-light" onclick="cerrarOverlay()">Cerrar</button>' +
                    '</div>';
                return;
            }
            resultadoEl.innerHTML =
                '<div style="color:#fff;text-align:center;max-width:500px">' +
                '<h2 style="font-family:\'DM Serif Display\',serif;margin-bottom:12px">No se pudo ejecutar</h2>' +
                '<p style="opacity:.9;margin-bottom:20px">' + (d.msg || 'Error desconocido') + '</p>' +
                '<button class="btn btn-light" onclick="cerrarOverlay()">Cerrar</button>' +
                '</div>';
            return;
        }



                        
            /* ── FEL SHOW ENTERPRISE: flujo al agua ──────────────── */
            if (d.tipo === 'al_agua' || d.tipo === 'al agua') {
                var candidatos  = d.candidatos || [];
                var ganFin      = Array.isArray(d.ganadores_finales)
                                  ? d.ganadores_finales
                                  : Object.values(d.ganadores_finales || {});
                var premioData  = d.premio || {};
                console.log('[FelShow] al_agua — candidatos:', candidatos.length, 'ganFin:', ganFin);

                /* FelShow.showCandidates guarda ganFin internamente
                   y espera que el admin presione "ELEGIR GANADOR FINAL" */
                if (typeof FelShow !== 'undefined') {
                    FelShow.showCandidates(candidatos, ganFin, premioData);
                }

                /* Recargar premios al cerrar el overlay */
                var cl = document.getElementById('fel-show-close');
                if (cl) {
                    cl.onclick = function() { FelShow.close(); location.reload(); };
                }
                return;
            }
            /* ── fin flujo al agua ──────────────────────────────── */



        const lista = (d.ganadores || []);
        let html = '';
        lista.forEach(p => {
            html += '<div class="ganador-card">' +
                    '<div style="font-size:4rem;margin-bottom:10px">' + (d.premio && d.premio.emoji ? d.premio.emoji : (premioSeleccionado && premioSeleccionado.emoji ? premioSeleccionado.emoji : '🏆')) + '</div>' +
                    '<h2 style="font-family:\'DM Serif Display\',serif;margin-bottom:8px">' + (p.nombre || '?') + '</h2>' +
                    '<div style="opacity:.8;font-size:14px">Boleta: ' + (p.boleta || '—') + ' · ' + (p.segmento || p.zona || 'Sin segmento') + '</div>' +
                    '</div>';
        });
        html += '<button class="btn btn-light mt-3" onclick="cerrarOverlay()">Cerrar y continuar</button>';
        resultadoEl.innerHTML = html;

        
        /* Ocultar overlay original para que FelShow sea visible */
        (function() {
            var orig = document.getElementById('sorteo-overlay');
            if (orig) {
                orig.classList.remove('visible','active','show');
                orig.style.display = 'none';
            }
            /* También limpiar el countdown */
            var cd = document.getElementById('countdown');
            if (cd) cd.style.display = 'none';
            var rs = document.getElementById('resultado-sorteo');
            if (rs) rs.style.display = 'none';
        })();
        // FelShow: mostrar ganador con overlay, fanfarria y confeti
        if (typeof FelShow !== "undefined" && lista.length > 0) {
            FelShow.showWinner(
                lista,
                { nombre: (d.premio && d.premio.nombre) || "", emoji: (d.premio && d.premio.emoji) || "🏆" },
                "normal"
            );
        }
    }

        window.cerrarOverlay = function() {
            // Cerrar overlay original
            var ov = document.getElementById('sorteo-overlay') ||
                     document.getElementById('overlay-sorteo') ||
                     document.getElementById('countdown-overlay');
            if (ov) {
                ov.style.display = 'none';
                ov.classList.remove('active', 'show', 'visible');
            }
            // Cerrar FelShow overlay
            if (typeof FelShow !== 'undefined') FelShow.close();
            // Actualizar panel de premios SIN recargar la página
            if (typeof recargarPremios === 'function') {
                recargarPremios();
            }
            location.reload(); // recarga explícita usuario
        };


    // ─── EDICIÓN DE PREMIOS ───
    window.abrirEdicion = function(premioId) {
        // Cargar datos actuales del premio buscando en el DOM (tenemos data-* en la fila)
        const fila = document.querySelector(`.premio-fila[data-id="${premioId}"]`);
        if (!fila) return;

        document.getElementById('edit-premio-id').value = premioId;
        document.getElementById('edit-nombre').value = fila.dataset.nombre || '';
        document.getElementById('edit-emoji').value = fila.dataset.emoji || '🏆';
        document.getElementById('edit-tipo').value = fila.dataset.tipo || 'normal';
        document.getElementById('edit-cantidad-ganadores').value = fila.dataset.cantidad || 1;

        // Segmento y cantidades agua: tomar desde el rendering (está en el texto)
        const infoText = fila.querySelector('.premio-meta')?.textContent || '';
        const seg = fila.querySelector('.premio-badge.segmento')?.textContent || '';
        document.getElementById('edit-segmento').value = seg;

        // Para cantidades al agua: defaults razonables si no lo podemos leer
        document.getElementById('edit-cantidad-agua').value = 3;
        document.getElementById('edit-ganadores-finales').value = 1;

        toggleEditCamposAgua(fila.dataset.tipo);

        document.getElementById('edit-error').style.display = 'none';
        document.getElementById('modal-edit-premio').classList.add('visible');
    };

    window.cerrarEdicion = function() {
        document.getElementById('modal-edit-premio').classList.remove('visible');
    };

    window.toggleEditCamposAgua = function(val) {
        document.getElementById('edit-campos-agua').style.display = val === 'al agua' ? 'block' : 'none';
        document.getElementById('edit-campo-normal').style.display = val === 'al agua' ? 'none' : 'block';
    };

    window.guardarEdicion = function() {
        const id = document.getElementById('edit-premio-id').value;
        const csrf = document.querySelector('meta[name=csrf-token]').content;

        const payload = {
            nombre_premio: document.getElementById('edit-nombre').value,
            emoji_premio:  document.getElementById('edit-emoji').value,
            tipo_sorteo:   document.getElementById('edit-tipo').value,
            cantidad_ganadores:         parseInt(document.getElementById('edit-cantidad-ganadores').value, 10) || 1,
            cantidad_al_agua:           parseInt(document.getElementById('edit-cantidad-agua').value, 10) || 3,
            cantidad_ganadores_finales: parseInt(document.getElementById('edit-ganadores-finales').value, 10) || 1,
            segmento:      document.getElementById('edit-segmento').value || null,
        };

        fetch(`/premios/${id}`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrf,
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-HTTP-Method-Override': 'PUT',
            },
            body: JSON.stringify(Object.assign({}, payload, {_method: 'PUT'})),
        })
        .then(r => r.json().then(d => ({status: r.status, data: d})))
        .then(({status, data}) => {
            if (status === 200 && data.ok) {
                cerrarEdicion();
                location.reload(); // recarga explícita usuario
            } else {
                const errEl = document.getElementById('edit-error');
                errEl.textContent = data.msg || 'No se pudo guardar.';
                errEl.style.display = 'block';
            }
        })
        .catch(e => {
            const errEl = document.getElementById('edit-error');
            errEl.textContent = 'Error de red: ' + e.message;
            errEl.style.display = 'block';
        });
    };

    // Init
    toggleCamposAgua('normal');
})();
</script>
@endpush


@push('scripts')
{{-- ═══════════════════════════════════════════════════════════════
     FEL SHOW ENTERPRISE — sprint_show_enterprise
     Fase 1: Tarjetas candidatos + botón manual
     Fase 2: Reveal ganador + fanfarria + confeti
     ═══════════════════════════════════════════════════════════════ --}}
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>
<script src="{{ asset('js/felshow.js') }}"></script>

@push('styles')
{{-- FEL SHOW ENTERPRISE CSS --}}
<style>
@@keyframes felCandFadeIn {
    from { opacity:0; transform:translateX(-28px); }
    to   { opacity:1; transform:translateX(0); }
}
@@keyframes felWinnerSlideUp {
    0%   { opacity:0; transform:translateY(70px) scale(.92); }
    60%  { opacity:1; transform:translateY(-8px)  scale(1.02); }
    100% { opacity:1; transform:translateY(0)     scale(1); }
}
@@keyframes felGoldGlow {
    0%,100% { box-shadow:0 0 28px rgba(255,215,0,.2),0 0 60px rgba(29,61,142,.3); }
    50%      { box-shadow:0 0 56px rgba(255,215,0,.5),0 0 110px rgba(29,61,142,.5); }
}
@@keyframes felEmojiPop {
    0%   { transform:scale(0) rotate(-15deg); }
    70%  { transform:scale(1.2) rotate(5deg); }
    100% { transform:scale(1)   rotate(0); }
}
@@keyframes felBtnPulse {
    0%,100% { box-shadow:0 4px 24px rgba(139,191,43,.35); }
    50%      { box-shadow:0 4px 40px rgba(139,191,43,.65); }
}
</style>
@endpush
@endpush


<script>
/* ── FEL AUDIO INIT — activar AudioContext en primer clic (autoplay policy) ── */
(function felAudioInit() {
    var _started = false;
    function initCtx() {
        if (_started) return;
        _started = true;
        try {
            var ctx = new (window.AudioContext || window.webkitAudioContext)();
            if (ctx.state === 'suspended') ctx.resume();
            /* Reproducir silencio para "desbloquear" el contexto */
            var osc = ctx.createOscillator();
            var g   = ctx.createGain();
            g.gain.value = 0;
            osc.connect(g); g.connect(ctx.destination);
            osc.start(); osc.stop(ctx.currentTime + 0.001);
            ctx.close();
        } catch(e) { /* navegadores que no soportan Web Audio */ }
    }
    /* Escuchar el primer clic en el documento */
    document.addEventListener('click', initCtx, { once: true });
    document.addEventListener('touchstart', initCtx, { once: true });
})();
</script>


@push('scripts')
{{-- FEL SEGMENTOS JS — sprint_segmentos_final --}}
<script>
(function(){
    var EVENTO_ID = {{ $evento->id ?? 'null' }};
    var _segs = [];

    function cargarSegmentos(cb) {
        if (_segs.length > 0) { cb(_segs); return; }
        if (!EVENTO_ID) { cb([]); return; }
        fetch('/api/eventos/' + EVENTO_ID + '/segmentos')
            .then(function(r){ return r.json(); })
            .then(function(data){
                _segs = Array.isArray(data) ? data : (data.segmentos || []);
                cb(_segs);
            })
            .catch(function(){ cb([]); });
    }

    function renderItems(segs, itemsId, seleccionados) {
        var el = document.getElementById(itemsId);
        if (!el) return;
        el.innerHTML = segs.map(function(seg, idx){
            var chk = seleccionados && seleccionados.indexOf(seg) !== -1;
            return '<label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;padding:3px 0;min-width:140px;">' +
                '<input type="checkbox" name="segmentos[]" value="' + seg + '"' +
                (chk ? ' checked' : '') +
                ' onchange="felSegSync()"' +
                ' style="width:14px;height:14px;accent-color:var(--primary,#1D3D8E);cursor:pointer;">' +
                '<span>' + seg + '</span></label>';
        }).join('');
    }

    window.felSegmentosInit = function(seleccionados) {
        seleccionados = seleccionados || [];
        cargarSegmentos(function(segs){
            var load = document.getElementById('fel-seg-loading');
            var list = document.getElementById('fel-seg-list');
            var empty = document.getElementById('fel-seg-empty');
            if (load) load.style.display = 'none';
            if (segs.length === 0) { if (empty) empty.style.display = 'block'; return; }
            if (list) list.style.display = 'block';
            renderItems(segs, 'fel-seg-items', seleccionados);
            felSegSync();
        });
    };

    window.felSegTodos = function(checked) {
        document.querySelectorAll('#fel-seg-items input').forEach(function(cb){ cb.checked = checked; });
    };
    window.felSegSync = function() {
        var total   = document.querySelectorAll('#fel-seg-items input').length;
        var marcados = document.querySelectorAll('#fel-seg-items input:checked').length;
        var todos = document.getElementById('fel-seg-todos');
        if (todos) todos.checked = total > 0 && marcados === total;
    };

    document.addEventListener('DOMContentLoaded', function(){ felSegmentosInit(); });
})();
</script>
@endpush