<?php
/**
 * votacion_activa.php — Sprint UX
 * Tarjeta de votación rediseñada: pregunta prominente, márgenes
 * profesionales, botones uniformes, modal salida confirmada.
 */
header('Content-Type: text/html; charset=UTF-8');
ini_set('display_errors', 0);

require_once 'app/controllers/votacionActivaController.php';
require_once 'app/helpers/csrf.php';
require_once 'app/models/datos.php';

$datosModel = new \app\models\datos();
$config     = $datosModel->obtenerDatos();

$titulo  = isset($config->titulo)  ? $config->titulo  : '';
$saludo  = isset($config->saludo)  ? $config->saludo  : '';
$parrafo = $votacionActiva->descripcion
    ? $votacionActiva->descripcion
    : (isset($config->parrafo) ? $config->parrafo : '');

$pregunta = !empty($votacionActiva->pregunta)
    ? $votacionActiva->pregunta
    : (isset($config->nota) ? $config->nota : '');
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <?php require 'head.php'; ?>
    <link href="assets/css/effects.min.css" rel="stylesheet">
    <link href="assets/css/voto.css" rel="stylesheet">
    <style>
        :root {
            --azul:  #04548c;
            --cyan:  #17c1e8;
            --text:  #1a2b45;
        }
        body { padding-bottom: 0; }

        /* Contenedor estándar */
        .vot-wrap {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 32px;
        }

        /* Barra superior */
        .top-nav {
            position: fixed; top: 0; left: 0; right: 0; z-index: 200;
            background: rgba(23,193,232,.82);
            backdrop-filter: saturate(200%) blur(28px);
            border-radius: 0;
            margin: 0;
            padding: 7px 20px;
            display: flex; align-items: center; gap: 10px;
        }
        .top-nav .entidad {
            font-size: .72em; font-weight: 700; color: #fff;
            opacity: .88; letter-spacing: .4px;
            white-space: nowrap; overflow: hidden;
            text-overflow: ellipsis; max-width: 220px;
        }
        .top-nav .sep { color: rgba(255,255,255,.5); font-size: .8em; }
        .top-nav .usuario {
            font-size: .88em; font-weight: 700; color: #fff;
            flex-grow: 1;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .btn-votar-top {
            color: #fff; background: var(--azul); border: none;
            border-radius: 25px; font-weight: 700;
            padding: 7px 24px; font-size: .85em;
            white-space: nowrap; cursor: pointer;
            transition: background .15s;
            text-decoration: none; display: inline-block;
        }
        .btn-votar-top:hover { background: #033d69; color: #fff; }
        .btn-salir-top {
            color: #fff; background: transparent;
            border: 2px solid rgba(255,255,255,.75);
            border-radius: 25px; font-weight: 600;
            padding: 5px 18px; font-size: .83em;
            white-space: nowrap; cursor: pointer;
            transition: background .15s;
        }
        .btn-salir-top:hover { background: rgba(255,255,255,.15); }

        /* Cabecera logo */
        .logo-row img { max-height:64px; }
        .logo-row {
            display: flex; align-items: center;
            justify-content: space-between;
            padding: 10px 0 8px;
        }
        .logo-row .entidad-nombre {
            font-size: 1.2em; font-weight: 800;
            color: var(--azul); letter-spacing: .3px;
            text-align: right;
        }

        /* Pregunta */
        .pregunta-votacion {
            font-size: 1.3em; font-weight: 700; color: var(--azul);
            background: linear-gradient(135deg,#f0f8ff,#e8f4fd);
            border-left: 5px solid var(--cyan);
            border-radius: 0 12px 12px 0;
            padding: 14px 22px;
            margin: 8px 0 20px;
            box-shadow: 0 2px 10px rgba(23,193,232,.13);
        }

        /* Saludo / párrafo */
        .saludo-p  { font-size: 1.5em; margin-bottom: 3px; }
        .parrafo-p { font-size: 1.5em; color: #666; margin-bottom: 10px; }

        /* Candidatos */
        .candidato-posicion { font-size: 18px; color: var(--azul); font-weight: 600; margin-bottom: 2px; }
        .candidato-nombre   { font-size: 18px; font-weight: 700; color: #333; }
        .candidato-card {
            background: #fff; border-radius: 14px;
            border: 2px solid #e8edf5;
            padding: 16px 12px 14px;
            transition: border-color .18s, box-shadow .18s;
            cursor: pointer; height: 100%;
        }
        .candidato-card:hover,
        .candidato-card.seleccionado {
            border-color: var(--cyan);
            box-shadow: 0 4px 18px rgba(23,193,232,.22);
        }

        /* Botón VOTAR principal */
        .btn-votar-main {
            color: #fff; background: var(--azul); border: none;
            border-radius: 30px; font-weight: 700;
            font-size: 1.05em; padding: 13px 52px;
            box-shadow: 0 4px 16px rgba(4,84,140,.28);
            cursor: pointer; letter-spacing: .5px;
            transition: background .15s, transform .12s;
            display: inline-block; text-decoration: none;
        }
        .btn-votar-main:hover { background: #033d69; transform: translateY(-1px); }

        /* Divider */
        .hr-slim { border: none; border-top: 1px solid #eef2f7; margin: 6px 0; }

        /* Modal salida */
        #modal-salida {
            display: none; position: fixed; inset: 0;
            background: rgba(15,30,55,.48); z-index: 9999;
            align-items: center; justify-content: center;
        }
        .modal-salida-box {
            background: #fff; border-radius: 20px;
            padding: 38px 34px; max-width: 440px; width: 92%;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0,0,0,.22);
        }
        .modal-salida-icono {
            width: 60px; height: 60px;
            background: #fff8e1; border-radius: 50%;
            display: inline-flex; align-items: center;
            justify-content: center; font-size: 1.8em;
            margin-bottom: 18px;
        }
        .modal-salida-titulo {
            font-size: 1.12em; font-weight: 700;
            color: var(--text); margin-bottom: 8px;
        }
        .modal-salida-desc {
            font-size: .9em; color: #6c7a8d;
            line-height: 1.55; margin-bottom: 26px;
        }
        .modal-salida-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
        .btn-volver {
            padding: 10px 26px; border-radius: 25px;
            border: 2px solid #dee2e6; background: #fff;
            font-weight: 700; cursor: pointer; font-size: .9em;
            color: var(--text); transition: background .15s;
        }
        .btn-volver:hover { background: #f4f7fb; }
        .btn-salir-confirm {
            padding: 10px 26px; border-radius: 25px;
            background: #dc3545; color: #fff;
            font-weight: 700; text-decoration: none;
            font-size: .9em; transition: background .15s;
            display: inline-block;
        }
        .btn-salir-confirm:hover { background: #b02a37; color: #fff; }

        /* Confirm/alert modals */
        #modalVotoConfirm .modal-content {
            border-radius: 20px; border: none;
            box-shadow: 0 12px 50px rgba(0,0,0,.18);
        }
        .confirm-icono {
            width: 66px; height: 66px;
            background: linear-gradient(135deg,var(--azul),var(--cyan));
            border-radius: 50%; display: inline-flex;
            align-items: center; justify-content: center;
            margin-bottom: 18px;
        }
    </style>
</head>
<body>

<form method="post" action="app/controllers/votacionVotoController.php" id="form1"
      data-min="<?php echo (int)$minCandidatos; ?>"
      data-max="<?php echo (int)$maxCandidatos; ?>">
    <input type="hidden" name="votacion_id" value="<?php echo $votacionActiva->id; ?>">
    <?php echo csrfField(); ?>

    <!-- ── BARRA SUPERIOR ─────────────────────────────────── -->
    <div class="top-nav">
        <span class="entidad"><?php echo htmlspecialchars($titulo); ?></span>
        <span class="sep">|</span>
        <span class="usuario"><?php echo htmlspecialchars($usuario->name); ?></span>
        <input type="hidden" name="opcionVoto" id="opcionVoto" value="">
        <a onclick="valida()" class="btn-votar-top">VOTAR</a>
        <button type="button" onclick="confirmarSalida()" class="btn-salir-top">SALIR SIN VOTAR</button>
    </div>

    <!-- ── CABECERA LOGO ──────────────────────────────────── -->
    <div style="margin-top:54px;">
        <div class="vot-wrap">
            <div class="logo-row">
                <img src="assets/images/logo.png" alt="logo" style="max-height:52px;">
                <span class="entidad-nombre"><?php echo htmlspecialchars($titulo); ?></span>
            </div>
        </div>
        <hr class="hr-slim">
    </div>

    <!-- ── CONTENIDO ─────────────────────────────────────── -->
    <div class="vot-wrap" style="padding-top:18px;padding-bottom:44px;">

        <?php if(!empty($saludo)): ?>
            <p class="saludo-p"><?php echo htmlspecialchars($saludo); ?></p>
        <?php endif; ?>
        <?php if(!empty($parrafo)): ?>
            <p class="parrafo-p"><?php echo htmlspecialchars($parrafo); ?></p>
        <?php endif; ?>

        <?php if (!empty($pregunta)): ?>
            <div class="pregunta-votacion">
                <?php echo htmlspecialchars($pregunta); ?>
            </div>
        <?php endif; ?>

        <div class="row candidatos_row g-3" style="padding-top:6px;">
            <?php foreach ($listaCandidatos as $candidato): ?>
                <div class="col-xl-3 col-lg-4 col-sm-6 col-12 text-center candidato-row"
                     id="<?php echo $candidato->id; ?>div">
                    <div class="candidato-card hover ehover13">
                        <label for="candidato_<?php echo $candidato->id; ?>" style="cursor:pointer;display:block;text-align:center;">
                            <?php if (($candidato->descripcion ?? '') === 'SI' && ($candidato->cedula ?? '') !== ''): ?>
                                <img style="width:170px;height:170px;display:block;margin:0 auto;float:none;"
                                     class="img-circle img-responsive rounded-circle"
                                     src="assets/candidatos/<?php echo htmlspecialchars($candidato->cedula); ?>.jpg"
                                     alt="<?php echo htmlspecialchars($candidato->nombre); ?>"
                                     onerror="this.src='assets/candidatos/1.jpg'">
                            <?php else: ?>
                                <img style="width:170px;height:170px;display:block;margin:0 auto;float:none;"
                                     class="img-circle img-responsive"
                                     src="assets/candidatos/1.jpg" alt="">
                            <?php endif; ?>
                            <div class="overlay"><h2>SELECCIONAR</h2></div>
                        </label>
                        <br>
                        <input type="checkbox" style="height:28px;width:75%;margin:6px auto;display:block;"
                               class="voto_item"
                               value="<?php echo $candidato->id; ?>" name="voto[]"
                               id="candidato_<?php echo $candidato->id; ?>"
                               onchange="updateSelection(event);">
                        <?php if (!empty($candidato->posicion)): ?>
                            <p class="candidato-posicion mt-1"><?php echo htmlspecialchars($candidato->posicion); ?></p>
                        <?php endif; ?>
                        <p class="candidato-nombre"><?php echo htmlspecialchars($candidato->nombre); ?></p>
                    </div>
                </div>
            <?php endforeach; ?>

            <input type="hidden" name="opcionVoto" id="opcionVoto2" value="">
            <div class="w-100 text-center" style="margin-top:30px;">
                <a onclick="valida()" class="btn-votar-main">&#10003; VOTAR</a>
            </div>
        </div><!-- /.candidatos_row -->

    </div><!-- /.vot-wrap -->
</form>

<footer style="padding:14px 0;margin-top:8px;border-top:1px solid #eef2f7;">
    <div class="container text-center">
        <p style="font-size:.8em;color:#aaa;margin:0;">
            Copyright 2012 - 2026
            <a href="https://fyclsingenieria.com/" style="text-decoration:none;color:#17c1e8;">FYCLS S.A.S</a>
        </p>
    </div>
</footer>

<script src="assets/js/voto.js"></script>
<script>
function valida() {
    var sel = document.querySelectorAll('input[name="voto[]"]:checked');
    var min = <?php echo (int)$minCandidatos; ?>;
    var max = <?php echo (int)$maxCandidatos; ?>;
    if (sel.length < min) {
        mostrarAlerta('Por favor seleccione al menos ' + min + ' opci\u00f3n(es).');
        return;
    }
    if (sel.length > max) {
        mostrarAlerta('Por favor seleccione como m\u00e1ximo ' + max + ' opci\u00f3n(es).');
        return;
    }
    mostrarConfirmacion(
        '\u00bfConfirma que desea registrar su voto? Esta acci\u00f3n es definitiva e irreversible.',
        function(){ document.getElementById('form1').submit(); }
    );
}
function updateSelection(event) {
    var cb  = event.target;
    var sel = document.querySelectorAll('input[name="voto[]"]:checked');
    var max = <?php echo (int)$maxCandidatos; ?>;
    if (cb.checked && sel.length > max) {
        cb.checked = false;
        mostrarAlerta('M\u00e1ximo permitido: ' + max + ' opci\u00f3n(es).');
    }
    document.querySelectorAll('.candidato-card').forEach(function(c){ c.classList.remove('seleccionado'); });
    document.querySelectorAll('input.voto_item:checked').forEach(function(inp){
        var div = document.getElementById(inp.value + 'div');
        if(div) div.querySelector('.candidato-card').classList.add('seleccionado');
    });
}
function confirmarSalida() {
    document.getElementById('modal-salida').style.display = 'flex';
}
document.getElementById('modal-salida').addEventListener('click', function(e){
    if(e.target === this) this.style.display = 'none';
});
</script>

<!-- Modal alerta -->
<div class="modal fade" id="modalVotoAlerta" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered">
    <div class="modal-content" style="border-radius:16px;">
      <div class="modal-body text-center py-4 px-3">
        <p id="modalVotoAlertaMsg" style="font-size:1.05em;font-weight:600;color:#333;"></p>
        <button type="button" class="btn btn-primary mt-2" data-bs-dismiss="modal"
                style="background:var(--cyan);border-color:var(--cyan);padding:8px 30px;border-radius:25px;">
            Entendido
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal confirmación voto -->
<div class="modal fade" id="modalVotoConfirm" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
  <div class="modal-dialog modal-dialog-centered" style="max-width:440px;">
    <div class="modal-content">
      <div class="modal-body text-center py-5 px-4">
        <div class="confirm-icono">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none"
                 stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12"/>
            </svg>
        </div>
        <p id="modalVotoConfirmMsg" style="font-size:1.1em;font-weight:700;color:#1a2b45;margin-bottom:6px;"></p>
        <p style="font-size:.85em;color:#888;margin-bottom:26px;">Verifique su selección antes de confirmar.</p>
        <div class="d-flex gap-2 justify-content-center">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal"
                  style="padding:9px 28px;border-radius:25px;font-weight:600;border:2px solid #dee2e6;">
              Revisar
          </button>
          <button type="button" id="modalVotoBtnConfirm" class="btn"
                  style="background:var(--azul);border-color:var(--azul);color:#fff;
                         padding:9px 28px;font-weight:700;border-radius:25px;">
                  Confirmar Voto
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal salir sin votar -->
<div id="modal-salida">
    <div class="modal-salida-box">
        <div class="modal-salida-icono">&#9888;&#65039;</div>
        <p class="modal-salida-titulo">&#191;Desea salir sin votar?</p>
        <p class="modal-salida-desc">
            Si sale ahora, su voto no ser&#225; registrado.<br>
            &#191;Desea continuar o volver al tarjet&#243;n?
        </p>
        <div class="modal-salida-btns">
            <button onclick="document.getElementById('modal-salida').style.display='none';"
                    class="btn-volver">
                &#8592; Volver al tarjet&#243;n
            </button>
            <a href="app/controllers/logoutController.php?from=delegado"
               class="btn-salir-confirm">
               Salir sin votar
            </a>
        </div>
    </div>
</div>

</body>
</html>
