@extends('encuestador/layoutencuestador')
@section('title3', 'Nueva Encuesta')

@section('content3')
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <div class="container-fluid py-3">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6">
                <!-- Encuesta Card -->
                <div class="card encuesta-card shadow">
                    <!-- Header de la Encuesta -->
                    <div class="card-header encuesta-header">
                        <div class="encuesta-numero">Encuesta 001</div>
                        <div class="encuesta-tipo">Elecciones {{ $tipo }}</div>
                    </div>

                    <!-- Contenido de la Encuesta -->
                    <div class="card-body encuesta-body">
                        <!-- Área de Notificaciones Bootstrap -->
                        <div id="notificaciones-container" class="mb-3"></div>

                        <!-- FORM ACTUALIZADO CON TIPOS DE VOTO -->
                        <form id="formEncuesta" action="{{ route('encuesta.store') }}" method="POST">
                            @csrf

                            <!-- CAMPO HIDDEN PARA TIPO DE ENCUESTA -->
                            <input type="hidden" name="tipo" value="{{ $tipo }}">

                            <!-- NUEVA SECCIÓN: Tipo de Voto -->
                            <div class="tipo-voto-seccion mb-4">
                                <h5 class="pregunta-titulo">Tipo de Voto</h5>
                                <div class="tipos-voto-lista">
                                    @foreach ($tiposVoto as $tipoVoto)
                                        <div class="tipo-voto-item">
                                            <label class="tipo-voto-label">
                                                <input type="radio"
                                                       name="tipo_voto"
                                                       value="{{ $tipoVoto->IdTipoVotoEncuesta }}"
                                                       class="tipo-voto-radio"
                                                       data-nombre="{{ strtolower($tipoVoto->NombreTipoVotoEncuesta) }}"
                                                       @if($tipoVoto->NombreTipoVotoEncuesta === 'Confirmado') checked @endif>
                                                <span class="tipo-voto-circle"></span>
                                                <div class="tipo-voto-info">
                                                    <div class="fw-bold
                                                        @if($tipoVoto->NombreTipoVotoEncuesta === 'Confirmado') text-success
                                                        @elseif($tipoVoto->NombreTipoVotoEncuesta === 'Indeciso') text-warning
                                                        @else text-secondary @endif">
                                                        {{ $tipoVoto->NombreTipoVotoEncuesta }}
                                                    </div>
                                                    <div class="text-muted small">
                                                        @if($tipoVoto->NombreTipoVotoEncuesta === 'Confirmado')
                                                            Voto por un candidato específico
                                                        @elseif($tipoVoto->NombreTipoVotoEncuesta === 'Indeciso')
                                                            Aún no ha decidido su voto
                                                        @else
                                                            No tiene preferencia definida
                                                        @endif
                                                    </div>
                                                </div>
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <!-- Pregunta Principal - MOSTRAR SOLO SI ES VOTO CONFIRMADO -->
                            <div class="pregunta-seccion mb-4" id="seccion-candidatos" style="display: none;">
                                <h5 class="pregunta-titulo">¿Por cuál candidato votaría?</h5>

                                <!-- Lista de Candidatos -->
                                <div class="candidatos-lista">
                                    @foreach ($candidatos as $candidato)
                                        <div class="candidato-item">
                                            <label class="candidato-label">
                                                <input type="radio" name="candidato" value="{{ $candidato->IdElectoralCandidato }}" class="candidato-radio">
                                                <span class="candidato-checkbox"></span>

                                                <div class="d-flex align-items-center gap-3">
                                                    <!-- LOGO DEL PARTIDO PRIMERO - SIN BORDES REDONDEADOS -->
                                                    <img src="{{ $candidato->logo == '' || !$candidato->logo ? 'https://appcobranza.com/Sistema_Cobranza/Assets/app/usuarioazul_32.png' : $candidato->logo }}" alt="Logo del partido" width="50" height="50">

                                                    <!-- FOTO DEL CANDIDATO DESPUÉS - CON BORDES REDONDEADOS -->
                                                    <img src="{{ $candidato->foto == '' || !$candidato->foto ? 'https://appcobranza.com/Sistema_Cobranza/Assets/app/usuarioazul_32.png' : $candidato->foto }}" alt="Foto del candidato" width="50" height="50" style="border-radius: 50%;">

                                                    <div>
                                                        <div class="fw-bold text-primary">{{ $candidato->nombre }}</div>
                                                        <div class="text-muted small">
                                                            {{ $candidato->partido }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <!-- MENSAJE PARA VOTOS NO CONFIRMADOS -->
                            <div class="mensaje-voto-no-confirmado mb-4" id="mensaje-no-confirmado" style="display: none;">
                                <div class="alert alert-info text-center">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>Voto registrado</strong><br>
                                    <span id="texto-tipo-voto">Este tipo de voto no requiere selección de candidato</span>
                                </div>
                            </div>

                            <!-- Sección Sexo -->
                            <div class="sexo-seccion mb-4">
                                <h6 class="sexo-titulo">Sexo del Encuestado</h6>
                                <div class="sexo-opciones">
                                    <div class="sexo-item">
                                        <label class="sexo-label">
                                            <input type="radio" name="sexo" value="F" class="sexo-radio">
                                            <span class="sexo-circle"></span>
                                            <span class="sexo-texto">Femenino</span>
                                        </label>
                                    </div>
                                    <div class="sexo-item">
                                        <label class="sexo-label">
                                            <input type="radio" name="sexo" value="M" class="sexo-radio">
                                            <span class="sexo-circle"></span>
                                            <span class="sexo-texto">Masculino</span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- Botones de Acción -->
                            <div class="acciones-encuesta">
                                <button type="button" class="btn btn-cancelar" onclick="mostrarModalCancelar()">
                                    <i class="fas fa-times me-2"></i>
                                    Cancelar
                                </button>
                                <button type="submit" class="btn btn-guardar" id="btnGuardar">
                                    <i class="fas fa-save me-2"></i>
                                    <span id="textoBoton">Guardar Encuesta</span>
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Footer con información adicional -->
                    <div class="card-footer encuesta-footer">
                        <small class="text-muted">
                            <i class="fas fa-map-marker-alt me-1"></i>
                            @if($tipo === 'Regional')
                                {{ $asignacion->region ?? 'Región no disponible' }} - {{ $asignacion->sector ?? 'Sector no disponible' }}
                            @else
                                {{ $asignacion->distrito ?? 'Distrito no disponible' }} - {{ $asignacion->sector ?? 'Sector no disponible' }}
                            @endif
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL PARA CONFIRMAR GUARDADO -->
    <div class="modal fade" id="modalConfirmarGuardado" tabindex="-1" aria-labelledby="modalConfirmarGuardadoLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg" style="border-radius: 20px; overflow: hidden;">
                <div class="modal-header text-white position-relative" style="background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); border: none; padding: 2rem 1.5rem 1.5rem;">
                    <div class="w-100 text-center">
                        <i class="fas fa-question-circle mb-2" style="font-size: 2.5rem; animation: pulse 2s infinite;"></i>
                        <h5 class="modal-title fw-bold mb-0">Confirmar Encuesta</h5>
                    </div>
                </div>
                <div class="modal-body text-center" style="padding: 2rem 1.5rem;">
                    <h6 class="mb-3">¿Confirmar el registro de esta encuesta?</h6>
                    <div class="alert alert-light border-0 mb-3" style="background: #f8f9fa; border-left: 4px solid #48bb78 !important;">
                        <i class="fas fa-vote-yea text-success me-2"></i>
                        <span class="fw-bold text-success" id="resumen-encuesta">Los datos se guardarán permanentemente</span>
                    </div>
                    <p class="text-muted mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        Verifica que la información sea correcta
                    </p>
                </div>
                <div class="modal-footer justify-content-center" style="border: none; padding: 0 1.5rem 2rem;">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal" style="border-radius: 12px; font-weight: 600;">
                        <i class="fas fa-times me-2"></i>Revisar
                    </button>
                    <button type="button" class="btn btn-success px-4" id="btnConfirmarGuardado" style="border-radius: 12px; font-weight: 600;">
                        <i class="fas fa-check me-2"></i>Confirmar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL PARA CANCELAR -->
    <div class="modal fade" id="modalCancelar" tabindex="-1" aria-labelledby="modalCancelarLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg" style="border-radius: 20px; overflow: hidden;">
                <div class="modal-header text-white position-relative" style="background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%); border: none; padding: 2rem 1.5rem 1.5rem;">
                    <div class="w-100 text-center">
                        <i class="fas fa-exclamation-triangle mb-2" style="font-size: 2.5rem; animation: pulse 2s infinite;"></i>
                        <h5 class="modal-title fw-bold mb-0">Cancelar Encuesta</h5>
                    </div>
                </div>
                <div class="modal-body text-center" style="padding: 2rem 1.5rem;">
                    <h6 class="mb-3">¿Estás seguro de que quieres cancelar?</h6>
                    <div class="alert alert-light border-0 mb-3" style="background: #f8f9fa; border-left: 4px solid #ffa500 !important;">
                        <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                        <span class="fw-bold text-warning">Se perderán los datos ingresados</span>
                    </div>
                    <p class="text-muted mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        Esta acción no se puede deshacer
                    </p>
                </div>
                <div class="modal-footer justify-content-center" style="border: none; padding: 0 1.5rem 2rem;">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal" style="border-radius: 12px; font-weight: 600;">
                        <i class="fas fa-arrow-left me-2"></i>Continuar
                    </button>
                    <button type="button" class="btn btn-warning px-4" id="btnConfirmarCancelar" style="border-radius: 12px; font-weight: 600;">
                        <i class="fas fa-times me-2"></i>Cancelar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- TOAST CONTAINER PARA NOTIFICACIONES -->
    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 9999;">
        <div id="toastNotificacion" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <i id="toast-icon" class="fas fa-check-circle text-success me-2"></i>
                <strong id="toast-title" class="me-auto">Éxito</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body" id="toast-message">
                ¡Encuesta guardada exitosamente!
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <style>
        /* ESTILOS EXISTENTES */
        #notificaciones-container {
            position: relative;
            z-index: 10;
        }

        #notificaciones-container .alert {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            font-weight: 500;
        }

        #notificaciones-container .alert-danger {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
            color: white;
        }

        #notificaciones-container .alert-success {
            background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
            color: white;
        }

        #notificaciones-container .alert-warning {
            background: linear-gradient(135deg, #ffd43b 0%, #fab005 100%);
            color: #495057;
        }

        #notificaciones-container .btn-close {
            filter: brightness(0) invert(1);
            opacity: 0.8;
        }

        #notificaciones-container .btn-close:hover {
            opacity: 1;
        }

        .btn-guardar:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
        }

        .encuesta-card {
            border: none;
            border-radius: 15px;
            overflow: hidden;
            max-width: 600px;
            margin: 0 auto;
        }

        .encuesta-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            padding: 1.5rem;
            border: none;
        }

        .encuesta-numero {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            letter-spacing: 1px;
        }

        .encuesta-tipo {
            font-size: 1.1rem;
            font-weight: 500;
            opacity: 0.95;
        }

        .encuesta-body {
            padding: 2rem;
            background: #fafbfc;
        }

        .pregunta-titulo {
            color: #2d3748;
            font-weight: 600;
            margin-bottom: 1.5rem;
            font-size: 1.2rem;
            text-align: center;
        }

        /* NUEVOS ESTILOS PARA TIPOS DE VOTO */
        .tipo-voto-seccion {
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 1.5rem;
            background: white;
            margin-bottom: 1.5rem;
        }

        .tipos-voto-lista {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .tipo-voto-item {
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .tipo-voto-item:has(.tipo-voto-radio:checked) {
            border-color: #667eea;
            background: #f7fafc;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
        }

        .tipo-voto-label {
            display: flex;
            align-items: center;
            padding: 1rem 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            margin: 0;
        }

        .tipo-voto-label:hover {
            background: #f8f9fa;
        }

        .tipo-voto-radio {
            display: none;
        }

        .tipo-voto-circle {
            width: 24px;
            height: 24px;
            border: 3px solid #cbd5e0;
            border-radius: 50%;
            margin-right: 1rem;
            position: relative;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .tipo-voto-radio:checked + .tipo-voto-circle {
            border-color: #667eea;
            background: #667eea;
        }

        .tipo-voto-radio:checked + .tipo-voto-circle::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background: white;
            border-radius: 50%;
        }

        .tipo-voto-info {
            flex: 1;
        }

        /* ESTILOS EXISTENTES PARA CANDIDATOS */
        .candidatos-lista {
            space-y: 1rem;
        }

        .candidato-item {
            margin-bottom: 1rem;
        }

        .candidato-label {
            display: flex;
            align-items: center;
            padding: 1rem 1.2rem;
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            color: #374151;
        }

        .candidato-label:hover {
            border-color: #667eea;
            background: #f7fafc;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
        }

        .candidato-radio {
            display: none;
        }

        .candidato-checkbox {
            width: 20px;
            height: 20px;
            border: 2px solid #cbd5e0;
            border-radius: 4px;
            margin-right: 1rem;
            position: relative;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .candidato-radio:checked + .candidato-checkbox {
            background: #667eea;
            border-color: #667eea;
        }

        .candidato-radio:checked + .candidato-checkbox::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 14px;
            font-weight: bold;
        }

        .candidato-radio:checked + .candidato-checkbox + .candidato-nombre {
            color: #667eea;
            font-weight: 600;
        }

        .candidato-nombre {
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        /* MENSAJE PARA VOTO NO CONFIRMADO */
        .mensaje-voto-no-confirmado .alert {
            border-radius: 10px;
            border: none;
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
        }

        .sexo-seccion {
            border-top: 1px solid #e2e8f0;
            padding-top: 1.5rem;
        }

        .sexo-titulo {
            color: #2d3748;
            font-weight: 600;
            margin-bottom: 1rem;
            text-align: center;
        }

        .sexo-opciones {
            display: flex;
            justify-content: center;
            gap: 3rem;
        }

        .sexo-item {
            text-align: center;
        }

        .sexo-label {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sexo-radio {
            display: none;
        }

        .sexo-circle {
            width: 50px;
            height: 50px;
            border: 3px solid #cbd5e0;
            border-radius: 50%;
            margin-bottom: 0.5rem;
            transition: all 0.3s ease;
            position: relative;
        }

        .sexo-radio:checked + .sexo-circle {
            border-color: #667eea;
            background: #667eea;
        }

        .sexo-radio:checked + .sexo-circle::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
        }

        .sexo-texto {
            font-size: 1rem;
            font-weight: 600;
            color: #4a5568;
            transition: all 0.3s ease;
        }

        .sexo-radio:checked + .sexo-circle + .sexo-texto {
            color: #667eea;
        }

        .sexo-label:hover .sexo-circle {
            border-color: #667eea;
            transform: scale(1.05);
        }

        .acciones-encuesta {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 2rem;
        }

        .btn-cancelar {
            background: #f7fafc;
            border: 2px solid #e2e8f0;
            color: #718096;
            padding: 0.75rem 1.5rem;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-cancelar:hover {
            background: #edf2f7;
            border-color: #cbd5e0;
            color: #4a5568;
            transform: translateY(-1px);
        }

        .btn-guardar {
            background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
            border: none;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
        }

        .btn-guardar:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(72, 187, 120, 0.4);
        }

        .btn-guardar:active {
            transform: translateY(0);
        }

        .encuesta-footer {
            background: #f8f9fa;
            border-top: 1px solid #e2e8f0;
            text-align: center;
            padding: 1rem;
        }

        /* ANIMACIONES PARA MODALES */
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .toast {
            border-radius: 12px;
            border: none;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .toast-header {
            border-bottom: none;
            padding: 1rem 1rem 0.5rem;
            background: transparent;
        }

        .toast-body {
            padding: 0.5rem 1rem 1rem;
            font-weight: 500;
        }

        @media (max-width: 768px) {
            .encuesta-body {
                padding: 1.5rem;
            }

            .candidato-label {
                padding: 0.8rem 1rem;
            }

            .sexo-opciones {
                gap: 2rem;
            }

            .sexo-circle {
                width: 45px;
                height: 45px;
            }

            .acciones-encuesta {
                flex-direction: column;
            }

            .btn-cancelar,
            .btn-guardar {
                width: 100%;
            }

            .tipos-voto-lista {
                gap: 0.75rem;
            }

            .tipo-voto-label {
                padding: 0.8rem 1rem;
            }
        }

        @media (max-width: 480px) {
            .encuesta-numero {
                font-size: 1.5rem;
            }

            .encuesta-tipo {
                font-size: 1rem;
            }

            .pregunta-titulo {
                font-size: 1.1rem;
            }

            .candidato-nombre {
                font-size: 0.95rem;
            }

            .sexo-texto {
                font-size: 0.9rem;
            }
        }
    </style>

    <script>
        // Variables globales
        let formEnviado = false;

        // NUEVA FUNCIÓN: Mostrar toast en lugar de notificaciones inline
        function mostrarToast(mensaje, tipo = 'success') {
            const toast = document.getElementById('toastNotificacion');
            const toastIcon = document.getElementById('toast-icon');
            const toastTitle = document.getElementById('toast-title');
            const toastMessage = document.getElementById('toast-message');

            if (tipo === 'success') {
                toastIcon.className = 'fas fa-check-circle text-success me-2';
                toastTitle.textContent = 'Éxito';
            } else if (tipo === 'error') {
                toastIcon.className = 'fas fa-exclamation-circle text-danger me-2';
                toastTitle.textContent = 'Error';
            } else if (tipo === 'warning') {
                toastIcon.className = 'fas fa-exclamation-triangle text-warning me-2';
                toastTitle.textContent = 'Advertencia';
            }

            toastMessage.textContent = mensaje;

            const bsToast = new bootstrap.Toast(toast, { delay: 4000 });
            bsToast.show();
        }

        // NUEVA FUNCIÓN: Manejar cambio de tipo de voto
        function manejarCambioTipoVoto() {
            const tipoVotoSeleccionado = document.querySelector('input[name="tipo_voto"]:checked');
            const seccionCandidatos = document.getElementById('seccion-candidatos');
            const mensajeNoConfirmado = document.getElementById('mensaje-no-confirmado');
            const textoTipoVoto = document.getElementById('texto-tipo-voto');

            if (!tipoVotoSeleccionado) return;

            const nombreTipoVoto = tipoVotoSeleccionado.getAttribute('data-nombre');

            // Limpiar selección de candidatos
            document.querySelectorAll('input[name="candidato"]').forEach(radio => {
                radio.checked = false;
            });

            if (nombreTipoVoto === 'confirmado') {
                // Mostrar sección de candidatos
                seccionCandidatos.style.display = 'block';
                mensajeNoConfirmado.style.display = 'none';
            } else {
                // Ocultar sección de candidatos y mostrar mensaje
                seccionCandidatos.style.display = 'none';
                mensajeNoConfirmado.style.display = 'block';

                if (nombreTipoVoto === 'indeciso') {
                    textoTipoVoto.textContent = 'El encuestado aún está indeciso sobre su voto';
                } else {
                    textoTipoVoto.textContent = 'El encuestado no sabe o no opina sobre su preferencia';
                }
            }

            // Limpiar notificaciones al cambiar tipo
            limpiarNotificaciones();
        }

        // Función para validar horarios de encuesta
        function validarHorarioEncuesta() {
            const fechaInicio = @json($asignacion->FechaEncuestaInicio ?? null);
            const fechaFin = @json($asignacion->FechaEncuestaFin ?? null);

            if (!fechaInicio || !fechaFin) {
                return true;
            }

            const ahora = new Date();
            const inicio = new Date(fechaInicio);
            const fin = new Date(fechaFin);

            if (ahora < inicio) {
                mostrarNotificacion(`La encuesta estará disponible a partir del ${inicio.toLocaleDateString()}`, 'warning');
                return false;
            }

            if (ahora > fin) {
                mostrarNotificacion(`La encuesta finalizó el ${fin.toLocaleDateString()}`, 'warning');
                return false;
            }

            return true;
        }

        // Mantener función de notificaciones inline para validaciones
        function mostrarNotificacion(mensaje, tipo = 'danger') {
            const container = document.getElementById('notificaciones-container');

            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${tipo} alert-dismissible fade show`;
            alertDiv.role = 'alert';
            alertDiv.innerHTML = `
                <i class="fas fa-exclamation-circle me-2"></i>
                ${mensaje}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            `;

            container.innerHTML = '';
            container.appendChild(alertDiv);
            alertDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 5000);
        }

        function mostrarExito(mensaje) {
            mostrarNotificacion(mensaje, 'success');
        }

        function limpiarNotificaciones() {
            const container = document.getElementById('notificaciones-container');
            container.innerHTML = '';
        }

        function cambiarEstadoBoton(deshabilitado, texto = 'Guardar Encuesta') {
            const boton = document.getElementById('btnGuardar');
            const textoBoton = document.getElementById('textoBoton');

            boton.disabled = deshabilitado;
            textoBoton.textContent = texto;
        }

        // NUEVA FUNCIÓN: Mostrar modal de cancelar
        function mostrarModalCancelar() {
            const modal = new bootstrap.Modal(document.getElementById('modalCancelar'));
            modal.show();
        }

        // NUEVA FUNCIÓN: Confirmar cancelación
        function confirmarCancelacion() {
            window.location.href = '{{ route("vistaencuestador") }}';
        }

        // NUEVA FUNCIÓN: Mostrar modal de confirmación para guardar
        function mostrarModalConfirmarGuardado() {
            // Actualizar resumen en el modal
            const tipoVotoSeleccionado = document.querySelector('input[name="tipo_voto"]:checked');
            const candidatoSeleccionado = document.querySelector('input[name="candidato"]:checked');
            const sexoSeleccionado = document.querySelector('input[name="sexo"]:checked');
            const resumenEncuesta = document.getElementById('resumen-encuesta');

            let resumen = '';

            if (tipoVotoSeleccionado) {
                const nombreTipoVoto = tipoVotoSeleccionado.getAttribute('data-nombre');
                resumen += `Tipo: ${tipoVotoSeleccionado.closest('.tipo-voto-label').querySelector('.fw-bold').textContent}`;

                if (nombreTipoVoto === 'confirmado' && candidatoSeleccionado) {
                    const nombreCandidato = candidatoSeleccionado.closest('.candidato-label').querySelector('.fw-bold').textContent;
                    resumen += ` • Candidato: ${nombreCandidato}`;
                }
            }

            if (sexoSeleccionado) {
                resumen += ` • Sexo: ${sexoSeleccionado.value === 'F' ? 'Femenino' : 'Masculino'}`;
            }

            resumenEncuesta.textContent = resumen || 'Los datos se guardarán permanentemente';

            const modal = new bootstrap.Modal(document.getElementById('modalConfirmarGuardado'));
            modal.show();
        }

        // NUEVA FUNCIÓN: Proceder con el guardado
        function procederConGuardado() {
            // Cerrar modal de confirmación
            const modal = bootstrap.Modal.getInstance(document.getElementById('modalConfirmarGuardado'));
            modal.hide();

            // Marcar como enviado para evitar el modal
            formEnviado = true;

            // Deshabilitar botón y cambiar texto
            cambiarEstadoBoton(true, 'Guardando...');

            // Preparar datos del formulario
            const form = document.getElementById('formEncuesta');
            const formData = new FormData(form);

            // Enviar con fetch
            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        mostrarToast('¡Encuesta guardada exitosamente!', 'success');
                        setTimeout(() => {
                            window.location.href = '{{ route("vistaencuestador") }}';
                        }, 2000);
                    } else {
                        mostrarToast(data.error || 'Error al guardar la encuesta', 'error');
                        cambiarEstadoBoton(false);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    mostrarToast('Error de conexión. Inténtalo nuevamente.', 'error');
                    cambiarEstadoBoton(false);
                });
        }

        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('formEncuesta');

            // Inicializar vista según tipo de voto seleccionado por defecto
            manejarCambioTipoVoto();

            // Event listeners para cambios en tipo de voto
            document.querySelectorAll('input[name="tipo_voto"]').forEach(radio => {
                radio.addEventListener('change', manejarCambioTipoVoto);
            });

            // Manejar envío del formulario
            form.addEventListener('submit', function(e) {
                e.preventDefault();

                // Si ya se envió (desde el modal), no hacer nada
                if (formEnviado) {
                    return;
                }

                limpiarNotificaciones();

                if (!validarHorarioEncuesta()) {
                    return;
                }

                const tipoVotoSeleccionado = document.querySelector('input[name="tipo_voto"]:checked');
                const sexoSeleccionado = document.querySelector('input[name="sexo"]:checked');

                if (!tipoVotoSeleccionado) {
                    mostrarNotificacion('Por favor, selecciona el tipo de voto antes de continuar.');
                    return;
                }

                // Validar candidato solo si es voto confirmado
                const nombreTipoVoto = tipoVotoSeleccionado.getAttribute('data-nombre');
                if (nombreTipoVoto === 'confirmado') {
                    const candidatoSeleccionado = document.querySelector('input[name="candidato"]:checked');
                    if (!candidatoSeleccionado) {
                        mostrarNotificacion('Por favor, selecciona un candidato para voto confirmado.');
                        return;
                    }
                }

                if (!sexoSeleccionado) {
                    mostrarNotificacion('Por favor, selecciona el sexo antes de continuar.');
                    return;
                }

                // Mostrar modal de confirmación
                mostrarModalConfirmarGuardado();
            });

            // Event listener para confirmar guardado
            document.getElementById('btnConfirmarGuardado').addEventListener('click', function() {
                procederConGuardado();
            });

            // Event listener para confirmar cancelación
            document.getElementById('btnConfirmarCancelar').addEventListener('click', function() {
                confirmarCancelacion();
            });

            // Limpiar notificaciones al cambiar cualquier selección
            document.querySelectorAll('input[name="candidato"], input[name="sexo"], input[name="tipo_voto"]').forEach(input => {
                input.addEventListener('change', function() {
                    limpiarNotificaciones();
                });
            });
        });

        // Función cancelarEncuesta actualizada para usar modal
        function cancelarEncuesta() {
            mostrarModalCancelar();
        }
    </script>

@endsection