{{-- ================================================================
     resources/views/sorteos/_multisorteo_modal.blade.php
     Sprint Multi · Multisorteo — UI v2
     ================================================================
     Cambios v2:
     - Botón disparador eliminado (vive en tarjeta naranja del index).
     - Control "Incluir ganadores previos" eliminado (vive como toggle
       global del evento, se aplica también a sorteos individuales).
     - Control "Zona global" eliminado (cada premio tiene su zona).
     - Modal queda enfocado en: lista de premios + cantidades + zonas.
     - Reveal usa FelShow.showWinner() del flujo normal (cascada).
     ================================================================ --}}

@php
    $premiosMulti = ($premios ?? collect())
        ->where('tipo_sorteo', 'normal')
        ->where('estado', '!=', 'ejecutado')
        ->values();
@endphp

{{-- ============== MODAL DE CONFIGURACIÓN ============== --}}
<div id="multi-modal-backdrop" class="multi-modal-backdrop" style="display:none"
     onclick="if(event.target===this) MultiSorteo.cerrar()">
    <div class="multi-modal" role="dialog" aria-labelledby="multi-modal-titulo">
        <div class="multi-modal-header">
            <h3 id="multi-modal-titulo">
                <span style="font-size:1.4em">🎲</span> Multisorteo
            </h3>
            <button type="button" class="multi-close" onclick="MultiSorteo.cerrar()" aria-label="Cerrar">×</button>
        </div>

        <div class="multi-modal-body">
            <p class="multi-intro">
                Seleccioná los premios a sortear simultáneamente. Cada premio puede tener su propia cantidad de ganadores y zona.
            </p>

            <div class="multi-info-toggle" id="multi-info-toggle" style="display:none">
                <span class="multi-info-icon">ℹ️</span>
                <span><strong>Atención:</strong> el toggle "Incluir ganadores anteriores" del evento está <strong>activo</strong> — los ganadores previos podrán volver a entrar al sorteo.</span>
            </div>

            <div class="multi-lista-header">
                <strong>Premios disponibles ({{ $premiosMulti->count() }})</strong>
                <div class="multi-acciones-rapidas">
                    <button type="button" class="btn btn-sm btn-outline-secondary"
                            onclick="MultiSorteo.seleccionarTodos(true)">Seleccionar todos</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary"
                            onclick="MultiSorteo.seleccionarTodos(false)">Limpiar</button>
                </div>
            </div>

            <div class="multi-lista" id="multi-lista-premios">
                @foreach($premiosMulti as $p)
                    <div class="multi-item" data-premio-id="{{ $p->id }}">
                        <label class="multi-item-check">
                            <input type="checkbox"
                                   class="multi-chk-premio"
                                   value="{{ $p->id }}"
                                   onchange="MultiSorteo.toggleItem(this)">
                            <span class="multi-emoji">{{ $p->emoji ?: '🏆' }}</span>
                            <span class="multi-nombre">{{ $p->nombre }}</span>
                        </label>

                        <div class="multi-item-inputs">
                            <div class="multi-input-group">
                                <label>Ganadores</label>
                                <input type="number"
                                       class="form-control form-control-sm multi-cantidad"
                                       value="{{ $p->cantidad_ganadores ?: 1 }}"
                                       min="1" max="50"
                                       data-premio-id="{{ $p->id }}">
                            </div>
                            <div class="multi-input-group">
                                <label>Zona</label>
                                <select class="form-select form-select-sm multi-zona-premio"
                                        data-premio-id="{{ $p->id }}">
                                    <option value="">— Todas las zonas —</option>
                                </select>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div id="multi-resumen" class="multi-resumen" style="display:none"></div>
            <div id="multi-errores" class="multi-errores" style="display:none"></div>
        </div>

        <div class="multi-modal-footer">
            <button type="button" class="btn btn-outline-secondary" onclick="MultiSorteo.cerrar()">
                Cancelar
            </button>
            <button type="button" class="btn btn-primary" id="multi-btn-ejecutar" onclick="MultiSorteo.ejecutar()">
                <span id="multi-btn-label">Ejecutar multisorteo</span>
                <span id="multi-btn-spinner" style="display:none">⏳ Ejecutando…</span>
            </button>
        </div>
    </div>
</div>

{{-- ============== OVERLAY DE CONTEO REGRESIVO MULTI ============== --}}
<div id="multi-countdown-overlay" class="multi-countdown-overlay" style="display:none">
    <div class="multi-countdown-content">
        <div class="multi-countdown-header">
            <h2 id="multi-countdown-titulo">🎲 Multisorteo</h2>
            <p id="multi-countdown-sub">Sorteando <span id="multi-countdown-num">N</span> premios…</p>
        </div>
        <div id="multi-countdown-number" class="multi-countdown-number">3</div>
    </div>
</div>

{{-- ============== ESTILOS ============== --}}
<style>
.multi-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: multiFadeIn 0.2s ease;
}
@keyframes multiFadeIn { from { opacity: 0; } to { opacity: 1; } }

.multi-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    animation: multiSlideUp 0.3s ease;
}
@keyframes multiSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.multi-modal-header {
    background: linear-gradient(135deg, #1D3D8E 0%, #4F46E5 100%);
    color: #fff;
    padding: 18px 24px;
    display: flex; align-items: center; justify-content: space-between;
}
.multi-modal-header h3 {
    margin: 0;
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: #fff;
}
.multi-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}
.multi-close:hover { background: rgba(255, 255, 255, 0.35); }

.multi-modal-body {
    padding: 22px 24px;
    overflow-y: auto;
    flex: 1;
}
.multi-intro {
    color: #64748B;
    font-size: 0.92rem;
    margin-bottom: 14px;
}

.multi-info-toggle {
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
    font-size: 0.88rem;
    color: #78350F;
}
.multi-info-icon { font-size: 1.1rem; flex-shrink: 0; }

.multi-lista-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
    color: #334155;
}
.multi-acciones-rapidas { display: flex; gap: 6px; }

.multi-lista {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    max-height: 360px;
    overflow-y: auto;
}
.multi-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 12px 14px;
    border-bottom: 1px solid #F1F5F9;
    transition: background 0.15s ease;
}
.multi-item:last-child { border-bottom: none; }
.multi-item:hover { background: #F8FAFC; }
.multi-item.is-selected { background: #EEF2FF; }

.multi-item-check {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    flex: 1;
    min-width: 0;
}
.multi-item-check input[type=checkbox] {
    width: 18px; height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}
.multi-emoji { font-size: 1.4rem; flex-shrink: 0; }
.multi-nombre {
    font-weight: 600;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multi-item-inputs {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.multi-input-group {
    display: flex;
    flex-direction: column;
}
.multi-input-group label {
    font-size: 0.72rem;
    color: #64748B;
    margin-bottom: 2px;
    font-weight: 500;
}
.multi-cantidad { width: 80px; }
.multi-zona-premio { min-width: 150px; }

.multi-resumen {
    margin-top: 16px;
    padding: 12px 14px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 8px;
    color: #065F46;
    font-size: 0.9rem;
}
.multi-errores {
    margin-top: 16px;
    padding: 12px 14px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    color: #991B1B;
    font-size: 0.9rem;
}
.multi-errores ul { margin: 6px 0 0 18px; padding: 0; }
.multi-errores li { margin: 2px 0; }

.multi-modal-footer {
    padding: 14px 24px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.multi-countdown-overlay {
    position: fixed; inset: 0;
    background: linear-gradient(135deg, rgba(15,23,42,0.96) 0%, rgba(29,61,142,0.96) 100%);
    z-index: 9300;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    text-align: center;
}
.multi-countdown-content { animation: multiFadeIn 0.3s ease; }
.multi-countdown-header h2 {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: 2.4rem;
    margin: 0 0 6px;
    color: #fff;
}
.multi-countdown-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-bottom: 28px;
}
.multi-countdown-number {
    font-family: 'DM Serif Display', serif;
    font-size: 14rem;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.4);
    animation: multiCountPulse 1s ease-in-out;
}
@keyframes multiCountPulse {
    0%   { transform: scale(0.4); opacity: 0; }
    30%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1.0); opacity: 1; }
}

@media (max-width: 640px) {
    .multi-item { grid-template-columns: 1fr; }
    .multi-item-inputs { justify-content: flex-end; }
    .multi-countdown-number { font-size: 9rem; }
}
</style>