<?php
if (session_status() === PHP_SESSION_NONE) ini_set("session.gc_maxlifetime", 86400);
session_set_cookie_params(86400);
session_save_path("/home/evolucionamos/public_html/mejora/sessions");
session_start();
if (empty($_SESSION['adm']) || ($_SESSION['role'] != 1 && $_SESSION['role'] != 3)) {
    header("Location: index.php"); exit;
}
require_once '../app/models/conexion.php';
require_once '../app/models/datos.php';
require_once '../app/helpers/csrf.php';

$datosModel = new \app\models\datos();
$cfg        = $datosModel->obtenerDatos();   // $cfg — único nombre usado en toda la vista
$csrfHtml   = csrfField();
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <?php require '../head.php'; ?>
    <style>
        body { background:#f8f9fa !important; background-image:none !important;
               font-family:'Segoe UI',Tahoma,Verdana,sans-serif; }
        .nav-cfg { background:#fff; border-bottom:2px solid #17c1e8;
                   padding:12px 0; box-shadow:0 2px 8px rgba(0,0,0,.05); }
        .card-cfg { border:none; border-radius:15px;
                    box-shadow:0 4px 20px rgba(0,0,0,.07); margin-bottom:24px; overflow:hidden; }
        .sec-hdr  { background:linear-gradient(90deg,#1F4E79,#17c1e8); color:#fff;
                    padding:13px 22px; font-size:.79em; font-weight:700;
                    text-transform:uppercase; letter-spacing:1.5px;
                    display:flex; align-items:center; gap:10px; }
        .sec-body { padding:24px; background:#fff; }
        label.lbl { font-size:.76em; font-weight:700; color:#666;
                    text-transform:uppercase; letter-spacing:.5px;
                    margin-bottom:4px; display:block; }
        .hint     { font-size:.72em; color:#bbb; margin-top:3px; display:block; }
        .form-control:focus,
        .form-select:focus { border-color:#17c1e8;
                             box-shadow:0 0 0 .2rem rgba(23,193,232,.15); }
        .btn-save { background:linear-gradient(90deg,#1F4E79,#17c1e8); color:#fff;
                    border:none; border-radius:10px; padding:13px 44px;
                    font-weight:700; font-size:.88em;
                    text-transform:uppercase; letter-spacing:1px; cursor:pointer;
                    box-shadow:0 4px 15px rgba(23,193,232,.3); transition:opacity .2s; }
        .btn-save:hover { opacity:.88; color:#fff; }
        .prev-box { background:#f0fbff; border:1px solid #b8ebf7;
                    border-radius:10px; padding:12px 18px; margin-top:12px; }

        /* Assets */
        .asset-thumb { max-height:44px; border-radius:6px;
                       border:1px solid #e0e0e0; padding:2px; margin-bottom:6px; }
        .asset-path  { font-size:.7em; color:#17c1e8; font-weight:600;
                       background:#f0fbff; border-radius:6px;
                       padding:2px 8px; display:inline-block; margin-bottom:6px; }

        /* Candidatos */
        .foto-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
        .foto-item { text-align:center; width:80px; }
        .foto-item img { width:60px; height:60px; object-fit:cover;
                         border-radius:50%; border:2px solid #17c1e8; }
        .foto-item .fn { font-size:.68em; color:#888; margin-top:3px;
                         overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .btn-upload-foto {
            background:linear-gradient(90deg,#1F4E79,#17c1e8); color:#fff;
            border:none; border-radius:8px; padding:8px 20px;
            font-size:.82em; font-weight:700; cursor:pointer; transition:opacity .2s;
        }
        .btn-upload-foto:hover { opacity:.88; }
    </style>
</head>
<body>

<!-- Navbar -->
<nav class="nav-cfg mb-4">
    <div class="container">
        <div class="d-flex align-items-center">
            <img src="../assets/images/logo.png" style="height:44px;" alt="Logo"
                 onerror="this.style.display='none'">
            <span class="ms-3 fw-bold" style="color:#1F4E79;font-size:1.02em;">
                ⚙ CONFIGURACIÓN GENERAL
            </span>
            <div class="ms-auto">
                <a href="admin.php"
                   class="btn btn-sm btn-outline-secondary"
                   style="border-radius:8px;font-weight:700;font-size:.8em;padding:7px 18px;">
                    ← Panel
                </a>
            </div>
        </div>
    </div>
</nav>

<div class="container" style="max-width:900px;">

    <?php if (isset($_GET['success'])): ?>
        <div class="alert alert-success alert-dismissible fade show">
            ✔ <?= htmlspecialchars($_GET['success']) ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <?php endif; ?>
    <?php if (isset($_GET['error'])): ?>
        <div class="alert alert-danger alert-dismissible fade show">
            ⚠ <?= htmlspecialchars($_GET['error']) ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <?php endif; ?>

    <!-- ═══════════════════════════════════════════════════════════
         FORM PRINCIPAL — enctype multipart para uploads
    ═══════════════════════════════════════════════════════════ -->
    <form action="../app/controllers/administradores/configuracionController.php"
          method="post" enctype="multipart/form-data">
        <?= $csrfHtml ?>

        <!-- ── 1. IDENTIDAD ─────────────────────────────────────── -->
        <div class="card-cfg">
            <div class="sec-hdr">🏛 Identidad de la Asamblea</div>
            <div class="sec-body">
                <div class="row g-3">
                    <div class="col-md-8">
                        <label class="lbl">Título de la Asamblea *</label>
                        <input type="text" name="titulo" class="form-control" id="inp-titulo"
                               value="<?= htmlspecialchars($cfg->titulo ?? '') ?>"
                               placeholder="ej: Asamblea General FONDOENERGIA 2026" required>
                        <span class="hint">Cabecera principal en la pantalla de votación.</span>
                    </div>
                    <div class="col-md-4">
                        <label class="lbl">Nombre Entidad</label>
                        <input type="text" name="app" class="form-control"
                               value="<?= htmlspecialchars($cfg->app ?? '') ?>"
                               placeholder="ej: FONDOENERGIA">
                        <span class="hint">Aparece en reportes y encabezados.</span>
                    </div>
                    <div class="col-md-6">
                        <label class="lbl">Saludo inicial</label>
                        <input type="text" name="saludo" class="form-control" id="inp-saludo"
                               value="<?= htmlspecialchars($cfg->saludo ?? '') ?>"
                               placeholder="ej: Estimado(a) Asociado(a):">
                        <span class="hint">Primera línea en la pantalla de candidatos.</span>
                    </div>
                    <div class="col-md-6">
                        <label class="lbl">Texto botón "Ver Plancha"</label>
                        <input type="text" name="modal" class="form-control"
                               value="<?= htmlspecialchars($cfg->modal ?? '') ?>"
                               placeholder="ej: Ver plancha">
                    </div>
                    <div class="col-12">
                        <label class="lbl">Instrucción principal</label>
                        <textarea name="parrafo" class="form-control" rows="2"
                        ><?= htmlspecialchars($cfg->parrafo ?? '') ?></textarea>
                        <span class="hint">Texto visible sobre los candidatos.</span>
                    </div>
                </div>
                <div class="prev-box mt-3">
                    <p style="font-size:.72em;font-weight:700;color:#aaa;margin-bottom:6px;">
                        VISTA PREVIA — PANTALLA DEL DELEGADO
                    </p>
                    <span style="font-size:1.05em;font-weight:700;color:#1F4E79;"
                          id="prev-titulo"><?= htmlspecialchars($cfg->titulo ?? '—') ?></span><br>
                    <span style="color:#666;font-size:.9em;"
                          id="prev-saludo"><?= htmlspecialchars($cfg->saludo ?? '—') ?></span>
                </div>
            </div>
        </div>

        <!-- ── 2. MENSAJES ──────────────────────────────────────── -->
        <div class="card-cfg">
            <div class="sec-hdr">💬 Mensajes al Delegado</div>
            <div class="sec-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="lbl">Votación no activa</label>
                        <textarea name="estadoCerrado" class="form-control"
                                  rows="3"><?= htmlspecialchars($cfg->estadoCerrado ?? '') ?></textarea>
                        <span class="hint">Cuando no hay votación abierta.</span>
                    </div>
                    <div class="col-md-6">
                        <label class="lbl">Ya votó</label>
                        <textarea name="mensajeVotoRealizado" class="form-control"
                                  rows="3"><?= htmlspecialchars($cfg->mensajeVotoRealizado ?? '') ?></textarea>
                        <span class="hint">Si intenta votar por segunda vez.</span>
                    </div>
                    <div class="col-12">
                        <label class="lbl">Voto confirmado ✓</label>
                        <textarea name="mensajeVoto" class="form-control"
                                  rows="2"><?= htmlspecialchars($cfg->mensajeVoto ?? '') ?></textarea>
                        <span class="hint">Pantalla verde de confirmación tras votar.</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- ── 3. COMUNICACIONES ────────────────────────────────── -->
        <div class="card-cfg">
            <div class="sec-hdr">📱 Comunicaciones — SMS / WhatsApp</div>
            <div class="sec-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="lbl">Celular de soporte</label>
                        <div class="input-group">
                            <span class="input-group-text"
                                  style="background:#eef2ff;color:#1F4E79;font-weight:700;">+57</span>
                            <input type="text" name="celular" class="form-control"
                                   value="<?= htmlspecialchars($cfg->celular ?? '') ?>">
                        </div>
                        <span class="hint">Botón de soporte WhatsApp.</span>
                    </div>
                    <div class="col-md-8">
                        <label class="lbl">Texto botón WhatsApp soporte</label>
                        <input type="text" name="textoWS" class="form-control"
                               value="<?= htmlspecialchars($cfg->textoWS ?? '') ?>">
                        <span class="hint">Texto prellenado al abrir WhatsApp.</span>
                    </div>
                    <div class="col-12">
                        <label class="lbl">Mensaje de notificación de acceso (SMS)</label>
                        <textarea name="mensajeDeTexto" class="form-control"
                                  rows="2"><?= htmlspecialchars($cfg->mensajeDeTexto ?? '') ?></textarea>
                        <span class="hint">El sistema agrega URL y código al final.</span>
                    </div>
                    <div class="col-12">
                        <label class="lbl">Texto "Comuníquese" (pantalla login)</label>
                        <input type="text" name="textoComuniquese" class="form-control"
                               value="<?= htmlspecialchars($cfg->textoComuniquese ?? '') ?>">
                        <span class="hint">Ayuda al delegado que no puede ingresar.</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- ── 4. ASSETS VISUALES & TEMPORIZADOR ────────────────── -->
        <div class="card-cfg">
            <div class="sec-hdr">🎨 Assets Visuales &amp; Temporizador</div>
            <div class="sec-body">
                <p class="text-muted mb-3" style="font-size:.82em;">
                    Las imágenes se guardan directamente en las rutas que usa el login.
                    Deja vacío un campo para mantener la imagen actual.
                </p>
                <div class="row g-4">

                    <!-- Tiempo de palabra -->
                    <div class="col-md-3">
                        <label class="lbl">⏱ Tiempo de Palabra</label>
                        <select name="tiempo_palabra" class="form-select">
                            <?php
                            $tp = (int)($cfg->tiempo_palabra ?? 120);
                            foreach ([60=>'1 min',90=>'1 min 30s',120=>'2 min',
                                      180=>'3 min',300=>'5 min'] as $v=>$l):
                            ?>
                            <option value="<?= $v ?>"<?= $tp===$v?' selected':'' ?>>
                                <?= $l ?>
                            </option>
                            <?php endforeach; ?>
                        </select>
                        <span class="hint">Duración del temporizador en admin.php</span>
                    </div>

                    <!-- Logo -->
                    <div class="col-md-3">
                        <label class="lbl">🏢 Logo de la Entidad</label>
                        <?php $logoPath = '../assets/images/logo.png'; ?>
                        <?php if (file_exists($logoPath)): ?>
                            <div>
                                <img src="../assets/images/logo.png?v=<?= time() ?>"
                                     class="asset-thumb" alt="Logo actual">
                            </div>
                            <div class="asset-path">assets/images/logo.png</div>
                        <?php endif; ?>
                        <input type="file" name="logo" class="form-control form-control-sm"
                               accept="image/png,image/jpeg,image/webp">
                        <span class="hint">PNG/JPG/WEBP · máx 2MB</span>
                    </div>

                    <!-- Fondo escritorio -->
                    <div class="col-md-3">
                        <label class="lbl">🖥 Fondo Escritorio ≥1200px</label>
                        <?php if (file_exists('../assets/images/2a.jpg')): ?>
                            <div>
                                <img src="../assets/images/2a.jpg?v=<?= time() ?>"
                                     class="asset-thumb" alt="Fondo escritorio actual">
                            </div>
                            <div class="asset-path">assets/images/2a.jpg</div>
                        <?php endif; ?>
                        <input type="file" name="bg_desktop" class="form-control form-control-sm"
                               accept="image/jpeg,image/png,image/webp">
                        <span class="hint">JPG/PNG/WEBP · máx 2MB · 1920×1080</span>
                    </div>

                    <!-- Fondo móvil -->
                    <div class="col-md-3">
                        <label class="lbl">📱 Fondo Móvil 300–1199px</label>
                        <?php if (file_exists('../assets/images/2.jpg')): ?>
                            <div>
                                <img src="../assets/images/2.jpg?v=<?= time() ?>"
                                     class="asset-thumb" alt="Fondo móvil actual">
                            </div>
                            <div class="asset-path">assets/images/2.jpg</div>
                        <?php endif; ?>
                        <input type="file" name="bg_mobile" class="form-control form-control-sm"
                               accept="image/jpeg,image/png,image/webp">
                        <span class="hint">JPG/PNG/WEBP · máx 2MB · 480×900</span>
                    </div>

                </div>
            </div>
        </div>


        <!-- ── 5. QUÓRUM ──────────────────────────────────────────── -->
        <div class="card-cfg">
            <div class="sec-hdr">📊 Configuración de Quórum</div>
            <div class="sec-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="lbl">Modo de conteo de Quórum</label>
                        <select name="usar_poderes" class="form-select">
                            <option value="1"<?= (int)($cfg->usar_poderes??1)===1 ? ' selected' : '' ?>>
                                Con poderes — cuenta poderes por delegado
                            </option>
                            <option value="0"<?= (int)($cfg->usar_poderes??1)===0 ? ' selected' : '' ?>>
                                Sin poderes — cuenta solo personas
                            </option>
                        </select>
                        <span class="hint">
                            "Con poderes": muestra multiplicadores y suma poderes para el porcentaje.<br>
                            "Sin poderes": oculta poderes, cuenta cada delegado como 1.
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- ── BOTONES GUARDAR ───────────────────────────────────── -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <a href="admin.php" class="btn btn-outline-secondary"
               style="border-radius:10px;font-weight:700;padding:11px 28px;">
                ← Volver sin guardar
            </a>
            <button type="submit" class="btn-save">
                💾 GUARDAR CONFIGURACIÓN
            </button>
        </div>

    </form><!-- fin form principal -->

    <!-- ═══════════════════════════════════════════════════════════
         SECCIÓN FOTOS CANDIDATOS — multi-upload con preview
    ═══════════════════════════════════════════════════════════ -->
    <div class="card-cfg">
        <div class="sec-hdr">📷 Fotos de Candidatos</div>
        <div class="sec-body">
            <p class="text-muted mb-3" style="font-size:.82em;">
                Selecciona una o varias fotos. El nombre del archivo se usa como ID
                (<code>5.jpg</code> → candidato 5). JPG/PNG/WEBP · máx 2MB por foto.
            </p>

            <!-- Form multi-upload -->
            <form action="../app/controllers/administradores/fotoCandidatoController.php"
                  method="post" enctype="multipart/form-data"
                  id="form-foto" style="margin-bottom:20px;">
                <?= csrfField() ?>
                <div class="row g-3 align-items-end">
                    <div class="col-md-8">
                        <label class="lbl">Fotos de candidatos</label>
                        <input type="file" name="fotos[]" id="input-fotos"
                               class="form-control" multiple
                               accept="image/jpeg,image/png,image/webp" required>
                        <span class="hint">Puedes seleccionar varias a la vez</span>
                    </div>
                    <div class="col-md-4">
                        <button type="submit" class="btn-upload-foto w-100">
                            📤 Subir Fotos
                        </button>
                    </div>
                </div>
            </form>

            <!-- Preview antes de subir -->
            <div id="preview-container" style="display:none;margin-bottom:18px;">
                <p style="font-size:.76em;font-weight:700;color:#aaa;
                           text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;">
                    Vista previa — fotos a subir
                </p>
                <div class="foto-grid" id="preview-grid"></div>
            </div>

            <script>
            document.getElementById('input-fotos').addEventListener('change', function() {
                const grid = document.getElementById('preview-grid');
                const container = document.getElementById('preview-container');
                grid.innerHTML = '';
                if (!this.files.length) { container.style.display = 'none'; return; }
                container.style.display = 'block';
                Array.from(this.files).forEach(file => {
                    const reader = new FileReader();
                    const nombre = file.name;
                    reader.onload = function(e) {
                        var div = document.createElement('div');
                        div.className = 'foto-item';
                        var img = document.createElement('img');
                        img.src = e.target.result;
                        img.style.cssText = 'width:60px;height:60px;object-fit:cover;border-radius:50%;border:2px solid #0099b8;';
                        var fn = document.createElement('div');
                        fn.className = 'fn';
                        fn.textContent = nombre;
                        div.appendChild(img);
                        div.appendChild(fn);
                        grid.appendChild(div);
                    };
                    reader.readAsDataURL(file);
                });
            });
            </script>

            <!-- Grid de fotos actuales -->
            <div>
                <p style="font-size:.76em;font-weight:700;color:#aaa;
                           text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;">
                    Fotos actuales en assets/candidatos/
                </p>
                <div class="foto-grid" id="foto-grid">
                    <?php
                    $fotoDir = '../assets/candidatos/';
                    $fotos   = glob($fotoDir . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
                    if (!empty($fotos)):
                        sort($fotos);
                        foreach ($fotos as $f):
                            $nombre = basename($f);
                            $id     = pathinfo($nombre, PATHINFO_FILENAME);
                    ?>
                        <div class="foto-item">
                            <img src="../assets/candidatos/<?= htmlspecialchars($nombre) ?>?v=<?= time() ?>"
                                 alt="Candidato <?= htmlspecialchars($id) ?>"
                                 onerror="this.src='../assets/candidatos/0.jpg'">
                            <div class="fn"><?= htmlspecialchars($nombre) ?></div>
                        </div>
                    <?php
                        endforeach;
                    else:
                    ?>
                        <p class="text-muted" style="font-size:.85em;">
                            Sin fotos subidas aún.
                        </p>
                    <?php endif; ?>
                </div>
            </div>

        </div>
    </div>

</div><!-- /container -->

<footer class="py-3 border-top text-center text-muted mt-4" style="font-size:.82em;">
    FYCLS S.A.S — Brújula Virtual
</footer>

<script>
// Preview en tiempo real de título y saludo
document.getElementById('inp-titulo').addEventListener('input', function(){
    document.getElementById('prev-titulo').textContent = this.value || '—';
});
document.getElementById('inp-saludo').addEventListener('input', function(){
    document.getElementById('prev-saludo').textContent = this.value || '—';
});
</script>
</body>
</html>
