@extends('encuestador/layoutencuestador')
@section('title3', 'Encuestador')

@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">
            <div class="col-12">
                <!-- Mensaje de bienvenida -->
                <div class="alert alert-info text-center mb-3" role="alert">
                    <h5 class="alert-heading mb-0">
                        <i class="fas fa-vote-yea me-2"></i>
                        Bienvenido al Sistema de Encuestas del Partido Renovación Popular
                    </h5>
                </div>

                <!-- Información del Encuestador -->
                <div class="row mb-3">
                    <div class="col-md-10 mx-auto">
                        <div class="card shadow-sm">
                            <div class="card-header bg-primary text-white py-2">
                                <h6 class="mb-0">
                                    <i class="fas fa-user me-2"></i>
                                    Información del Encuestador
                                </h6>
                            </div>
                            <div class="card-body py-3">
                                <div class="row">
                                    <div class="col-md-6 mb-2">
                                        <label class="form-label fw-bold mb-1">Nombre:</label>
                                        <p class="form-control-plaintext bg-light px-3 py-1 rounded mb-0">{{ $encuestador->nombre ?? 'No disponible' }}</p>
                                    </div>

                                    <div class="col-md-6 mb-2">
                                        <label class="form-label fw-bold mb-1">Distrito:</label>
                                        <p class="form-control-plaintext bg-light px-3 py-1 rounded mb-0">{{ $encuestador->distrito ?? 'No disponible' }}</p>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-2">
                                        <label class="form-label fw-bold mb-1">Sector:</label>
                                        <p class="form-control-plaintext bg-light px-3 py-1 rounded mb-0">{{ $encuestador->sector ?? 'No disponible' }}</p>
                                    </div>

                                    <div class="col-md-6 mb-2">
                                        <label class="form-label fw-bold mb-1">Grupo:</label>
                                        <p class="form-control-plaintext bg-light px-3 py-1 rounded mb-0">{{ $encuestador->grupo ?? 'No disponible' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- NUEVA SECCIÓN: Progreso de Encuestas -->
                <div class="row mb-3">
                    <div class="col-md-10 mx-auto">
                        <div class="card shadow-sm">
                            <div class="card-header bg-success text-white py-2">
                                <h6 class="mb-0">
                                    <i class="fas fa-chart-line me-2"></i>
                                    Progreso de Encuestas
                                </h6>
                            </div>
                            <div class="card-body py-3">
                                <div class="row">
                                    <div class="col-md-3 text-center">
                                        <div class="stat-box">
                                            <div class="stat-number text-primary">{{ $totalEncuestas }}</div>
                                            <div class="stat-label">Realizadas</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-center">
                                        <div class="stat-box">
                                            <div class="stat-number text-warning">{{ $encuestasRestantes }}</div>
                                            <div class="stat-label">Restantes</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-center">
                                        <div class="stat-box">
                                            <div class="stat-number text-info">{{ $limiteEncuestas }}</div>
                                            <div class="stat-label">Meta Total</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 text-center">
                                        <div class="stat-box">
                                            <div class="stat-number text-success">{{ number_format($porcentajeCompletado, 1) }}%</div>
                                            <div class="stat-label">Completado</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Barra de Progreso -->
                                <div class="mt-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="small fw-bold">Progreso General</span>
                                        <span class="small text-muted">{{ $totalEncuestas }}/{{ $limiteEncuestas }}</span>
                                    </div>
                                    <div class="progress" style="height: 12px;">
                                        <div class="progress-bar
                                            @if($porcentajeCompletado >= 100) bg-success
                                            @elseif($porcentajeCompletado >= 75) bg-info
                                            @elseif($porcentajeCompletado >= 50) bg-warning
                                            @else bg-primary @endif"
                                             role="progressbar"
                                             style="width: {{ $porcentajeCompletado }}%;"
                                             aria-valuenow="{{ $porcentajeCompletado }}"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                    @if($encuestasRestantes == 0)
                                        <div class="mt-2 text-center">
                                            <span class="badge bg-success fs-6">
                                                <i class="fas fa-check-circle me-1"></i>
                                                ¡Meta Completada!
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Botones de Tipo de Encuesta - CONDICIONALES -->
                <div class="row mb-3">
                    <div class="col-md-10 mx-auto">
                        @if($tieneRegional || $tieneDistrital)
                            <div class="d-flex gap-3 justify-content-center">
                                @if($tieneRegional)
                                    <button type="button" id="btn-regional" class="btn btn-primary btn-lg px-4 btn-tipo-encuesta" data-tipo="regional">
                                        Encuesta Regional
                                    </button>
                                @endif

                                @if($tieneDistrital)
                                    <button type="button" id="btn-distrital" class="btn @if(!$tieneRegional) btn-primary @else btn-outline-secondary @endif btn-lg px-4 btn-tipo-encuesta" data-tipo="distrital">
                                        Encuesta Distrital
                                    </button>
                                @endif
                            </div>

                            @if($tieneRegional && $tieneDistrital)
                                <!-- Mensaje informativo cuando tiene ambos tipos -->
                                <div class="text-center mt-2">
                                    <small class="text-info">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Tienes asignaciones para ambos tipos de encuesta
                                    </small>
                                </div>
                            @elseif($tieneRegional)
                                <!-- Mensaje cuando solo tiene Regional -->
                                <div class="text-center mt-2">
                                    <small class="text-info">
                                        <i class="fas fa-map me-1"></i>
                                        Asignado a encuestas de tipo Regional
                                    </small>
                                </div>
                            @elseif($tieneDistrital)
                                <!-- Mensaje cuando solo tiene Distrital -->
                                <div class="text-center mt-2">
                                    <small class="text-info">
                                        <i class="fas fa-building me-1"></i>
                                        Asignado a encuestas de tipo Distrital
                                    </small>
                                </div>
                            @endif
                        @else
                            <!-- Mensaje cuando no tiene configuración específica -->
                            <div class="text-center">
                                <div class="alert alert-warning">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    <strong>Sin configuración específica</strong><br>
                                    <small>Contacta al administrador para configurar tu tipo de encuesta</small>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Botón Nueva Encuesta - CON INFORMACIÓN ESPECÍFICA POR TIPO -->
                <div class="row mb-3">
                    <div class="col-12 text-center">
                        @if($encuestasRestantes > 0)
                            <button type="button" class="btn-nueva-encuesta" onclick="nuevaEncuesta()">
                                <i class="fas fa-plus-circle me-2"></i>
                                <span id="texto-nueva-encuesta">Nueva Encuesta Regional</span>
                            </button>

                            <!-- MENSAJE DETALLADO POR TIPO -->
                            <div class="mt-3">
                                @if($tieneRegional && $tieneDistrital)
                                    <!-- Cuando tiene ambos tipos -->
                                    <div class="d-flex justify-content-center gap-4 flex-wrap">
                                        @if($encuestasRestantesRegionales > 0)
                                            <div class="text-center">
                                                <small class="text-primary fw-bold d-block">
                                                    <i class="fas fa-map me-1"></i>
                                                    Regionales
                                                </small>
                                                <span class="badge bg-primary fs-6">{{ $encuestasRestantesRegionales }} restantes</span>
                                            </div>
                                        @else
                                            <div class="text-center">
                                                <small class="text-muted d-block">
                                                    <i class="fas fa-map me-1"></i>
                                                    Regionales
                                                </small>
                                                <span class="badge bg-success fs-6">
                                                    <i class="fas fa-check me-1"></i>
                                                    Completadas
                                                </span>
                                            </div>
                                        @endif

                                        @if($encuestasRestantesDistritales > 0)
                                            <div class="text-center">
                                                <small class="text-secondary fw-bold d-block">
                                                    <i class="fas fa-building me-1"></i>
                                                    Distritales
                                                </small>
                                                <span class="badge bg-secondary fs-6">{{ $encuestasRestantesDistritales }} restantes</span>
                                            </div>
                                        @else
                                            <div class="text-center">
                                                <small class="text-muted d-block">
                                                    <i class="fas fa-building me-1"></i>
                                                    Distritales
                                                </small>
                                                <span class="badge bg-success fs-6">
                                                    <i class="fas fa-check me-1"></i>
                                                    Completadas
                                                </span>
                                            </div>
                                        @endif
                                    </div>
                                @elseif($tieneRegional)
                                    <!-- Solo Regionales -->
                                    <div class="text-center">
                                        <small class="text-primary">
                                            <i class="fas fa-map me-1"></i>
                                            Te quedan <strong>{{ $encuestasRestantesRegionales }}</strong> encuestas Regionales por realizar
                                        </small>
                                    </div>
                                @elseif($tieneDistrital)
                                    <!-- Solo Distritales -->
                                    <div class="text-center">
                                        <small class="text-secondary">
                                            <i class="fas fa-building me-1"></i>
                                            Te quedan <strong>{{ $encuestasRestantesDistritales }}</strong> encuestas Distritales por realizar
                                        </small>
                                    </div>
                                @endif
                            </div>
                        @else
                            <button type="button" class="btn-nueva-encuesta btn-disabled" disabled>
                                <i class="fas fa-check-circle me-2"></i>
                                Meta Completada
                            </button>
                            <div class="mt-2">
                                <small class="text-success fw-bold">
                                    <i class="fas fa-trophy me-1"></i>
                                    Has completado todas las encuestas asignadas
                                </small>

                                <!-- DESGLOSE COMPLETADO -->
                                @if($tieneRegional && $tieneDistrital)
                                    <div class="d-flex justify-content-center gap-3 mt-2">
                                        <span class="badge bg-success">
                                            <i class="fas fa-map me-1"></i>
                                            Regional: {{ $encuestasRegionales }}/{{ $limiteRegionales }}
                                        </span>
                                        <span class="badge bg-success">
                                            <i class="fas fa-building me-1"></i>
                                            Distrital: {{ $encuestasDistritales }}/{{ $limiteDistritales }}
                                        </span>
                                    </div>
                                @elseif($tieneRegional)
                                    <div class="mt-2">
                                        <span class="badge bg-success">
                                            <i class="fas fa-map me-1"></i>
                                            Regional: {{ $encuestasRegionales }}/{{ $limiteRegionales }}
                                        </span>
                                    </div>
                                @elseif($tieneDistrital)
                                    <div class="mt-2">
                                        <span class="badge bg-success">
                                            <i class="fas fa-building me-1"></i>
                                            Distrital: {{ $encuestasDistritales }}/{{ $limiteDistritales }}
                                        </span>
                                    </div>
                                @endif
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Tabla de Encuestas Realizadas -->
                <div class="row">
                    <div class="col-md-11 mx-auto">
                        <div class="card shadow-sm">
                            <div class="card-header bg-secondary text-white py-2">
                                <h6 class="mb-0">
                                    <i class="fas fa-list me-2"></i>
                                    <span id="titulo-tabla">Encuestas Realizadas - Regional</span>
                                </h6>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0">
                                        <thead class="table-dark">
                                        <tr>
                                            <th width="20%" class="text-center py-2">ID</th>
                                            <th width="55%" class="py-2">Candidato / Tipo Voto</th>
                                            <th width="25%" class="text-center py-2">Acciones</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tabla-encuestas">
                                        @php
                                            $hayEncuestas = count($encuestas_regionales) > 0 || count($encuestas_distritales) > 0;
                                        @endphp

                                        @if (!$hayEncuestas)
                                            <tr>
                                                <td colspan="3" class="text-center text-muted py-4">Aún no se realizaron encuestas.</td>
                                            </tr>
                                        @endif

                                        {{-- Regionales --}}
                                        @foreach ($encuestas_regionales as $item)
                                            <tr class="fila-regional">
                                                <td class="text-center align-middle py-2">
                                                    <span class="badge bg-primary fs-6">{{ $item->IdDetalleEncuesta }}</span>
                                                </td>
                                                <td class="align-middle py-2">
                                                    <div>
                                                        <strong class="text-primary">Encuesta Regional</strong>
                                                    </div>
                                                    @if($item->candidato_nombre)
                                                        {{-- VOTO CONFIRMADO - Mostrar candidato --}}
                                                        <div class="mt-1">
                                                            <span class="badge bg-success me-2">Confirmado</span>
                                                            <i class="fas fa-user-check text-success me-1"></i>
                                                            <span class="text-success fw-bold">{{ $item->candidato_nombre }}</span>
                                                            @if($item->partido_nombre)
                                                                <small class="text-muted d-block ms-4">{{ $item->partido_nombre }}</small>
                                                            @endif
                                                        </div>
                                                    @else
                                                        {{-- VOTO NO CONFIRMADO - Mostrar tipo de voto --}}
                                                        <div class="mt-1">
                                                            @if(strtolower($item->tipo_voto) === 'indeciso')
                                                                <span class="badge bg-warning me-2">Indeciso</span>
                                                                <i class="fas fa-question-circle text-warning me-1"></i>
                                                                <span class="text-warning fw-bold">{{ $item->tipo_voto }}</span>
                                                            @elseif(strtolower($item->tipo_voto) === 'no sabe, no opina' || strpos(strtolower($item->tipo_voto), 'no sabe') !== false)
                                                                <span class="badge bg-secondary me-2">No Sabe</span>
                                                                <i class="fas fa-ban text-secondary me-1"></i>
                                                                <span class="text-secondary fw-bold">{{ $item->tipo_voto }}</span>
                                                            @else
                                                                <span class="badge bg-info me-2">{{ $item->tipo_voto }}</span>
                                                                <i class="fas fa-question-circle text-muted me-1"></i>
                                                                <span class="text-muted fw-bold">{{ $item->tipo_voto }}</span>
                                                            @endif
                                                        </div>
                                                    @endif
                                                </td>
                                                <td class="text-center align-middle py-2">
                                                    <div class="btn-group">
                                                        <button class="btn btn-sm btn-outline-danger" onclick="eliminarEncuesta('{{ $item->IdDetalleEncuesta }}', 'Regional')">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                        <button class="btn btn-sm btn-outline-warning" onclick="editarEncuesta('{{ $item->IdDetalleEncuesta }}', 'Regional')">
                                                            <i class="fas fa-edit"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach

                                        {{-- Distritales --}}
                                        @foreach ($encuestas_distritales as $item)
                                            <tr class="fila-distrital" style="display: none;">
                                                <td class="text-center align-middle py-2">
                                                    <span class="badge bg-secondary fs-6">{{ $item->IdDetalleEncuesta }}</span>
                                                </td>
                                                <td class="align-middle py-2">
                                                    <div>
                                                        <strong class="text-secondary">Encuesta Distrital</strong>
                                                    </div>
                                                    @if($item->candidato_nombre)
                                                        {{-- VOTO CONFIRMADO - Mostrar candidato --}}
                                                        <div class="mt-1">
                                                            <span class="badge bg-success me-2">Confirmado</span>
                                                            <i class="fas fa-user-check text-success me-1"></i>
                                                            <span class="text-success fw-bold">{{ $item->candidato_nombre }}</span>
                                                            @if($item->partido_nombre)
                                                                <small class="text-muted d-block ms-4">{{ $item->partido_nombre }}</small>
                                                            @endif
                                                        </div>
                                                    @else
                                                        {{-- VOTO NO CONFIRMADO - Mostrar tipo de voto --}}
                                                        <div class="mt-1">
                                                            @if(strtolower($item->tipo_voto) === 'indeciso')
                                                                <span class="badge bg-warning me-2">Indeciso</span>
                                                                <i class="fas fa-question-circle text-warning me-1"></i>
                                                                <span class="text-warning fw-bold">{{ $item->tipo_voto }}</span>
                                                            @elseif(strtolower($item->tipo_voto) === 'no sabe, no opina' || strpos(strtolower($item->tipo_voto), 'no sabe') !== false)
                                                                <span class="badge bg-secondary me-2">No Sabe</span>
                                                                <i class="fas fa-ban text-secondary me-1"></i>
                                                                <span class="text-secondary fw-bold">{{ $item->tipo_voto }}</span>
                                                            @else
                                                                <span class="badge bg-info me-2">{{ $item->tipo_voto }}</span>
                                                                <i class="fas fa-question-circle text-muted me-1"></i>
                                                                <span class="text-muted fw-bold">{{ $item->tipo_voto }}</span>
                                                            @endif
                                                        </div>
                                                    @endif
                                                </td>
                                                <td class="text-center align-middle py-2">
                                                    <div class="btn-group">
                                                        <button class="btn btn-sm btn-outline-danger" onclick="eliminarEncuesta('{{ $item->IdDetalleEncuesta }}', 'Distrital')">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                        <button class="btn btn-sm btn-outline-warning" onclick="editarEncuesta('{{ $item->IdDetalleEncuesta }}', 'Distrital')">
                                                            <i class="fas fa-edit"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                <!-- Estadísticas actualizadas con contadores dinámicos -->
                                @if($hayEncuestas)
                                    <div class="p-3 bg-light border-top">
                                        <div class="row text-center">
                                            <div class="col-4">
                                                <div class="small text-muted">Regionales</div>
                                                <div class="fw-bold text-primary">{{ count($encuestas_regionales) }}</div>
                                            </div>
                                            <div class="col-4">
                                                <div class="small text-muted">Distritales</div>
                                                <div class="fw-bold text-secondary">{{ count($encuestas_distritales) }}</div>
                                            </div>
                                            <div class="col-4">
                                                <div class="small text-muted">Total</div>
                                                <div class="fw-bold text-success">{{ $totalEncuestas }}/{{ $limiteEncuestas }}</div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mensaje cuando no hay encuestas -->
                <div class="row mt-3" style="display: none;" id="sin-encuestas">
                    <div class="col-12">
                        <div class="text-center py-4">
                            <i class="fas fa-clipboard-list fa-2x text-muted mb-2"></i>
                            <h6 class="text-muted">No hay encuestas realizadas</h6>
                            <p class="text-muted mb-0">Presiona "Nueva Encuesta" para comenzar</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL BOOTSTRAP AGREGADO -->
    <div class="modal fade" id="modalEliminar" tabindex="-1" aria-labelledby="modalEliminarLabel" 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, #dc3545 0%, #c82333 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">Confirmar Eliminación</h5>
                    </div>
                </div>
                <div class="modal-body text-center" style="padding: 2rem 1.5rem;">
                    <h6 class="mb-3">¿Estás seguro de que quieres eliminar esta encuesta?</h6>
                    <div class="alert alert-light border-0 mb-3" style="background: #f8f9fa; border-left: 4px solid #007bff !important;">
                        <i class="fas fa-poll text-primary me-2"></i>
                        <span id="info-encuesta" class="fw-bold text-primary">Encuesta #123</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-times me-2"></i>Cancelar
                    </button>
                    <button type="button" class="btn btn-danger px-4" id="btnConfirmarEliminar" style="border-radius: 12px; font-weight: 600;">
                        <i class="fas fa-trash me-2"></i>Eliminar
                    </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 eliminada 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>
        /* TUS ESTILOS ACTUALES */
        .card {
            border-radius: 12px;
            border: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        }

        .card-header {
            border-radius: 12px 12px 0 0 !important;
        }

        .form-control-plaintext {
            border: 1px solid #e9ecef;
            margin-bottom: 0;
            font-size: 0.95rem;
        }

        .table th {
            border-top: none;
            font-weight: 600;
            padding: 0.6rem;
            font-size: 0.9rem;
        }

        .table td {
            padding: 0.6rem;
            vertical-align: middle;
            font-size: 0.9rem;
        }

        .badge.fs-6 {
            font-size: 0.85rem !important;
            padding: 0.4rem 0.65rem;
            border-radius: 12px;
        }

        .btn-sm {
            padding: 0.25rem 0.6rem;
            font-size: 0.8rem;
            border-radius: 6px;
        }

        .alert-info {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            border: 1px solid #2196f3;
            color: #1976d2;
            padding: 0.75rem 1rem;
            border-radius: 10px;
        }

        /* ESTILOS PARA PROGRESO */
        .stat-box {
            padding: 1rem;
            margin: 0.5rem 0;
        }

        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            line-height: 1;
        }

        .stat-label {
            font-size: 0.85rem;
            color: #6c757d;
            margin-top: 0.25rem;
            font-weight: 500;
        }

        .progress {
            border-radius: 10px;
            background-color: #e9ecef;
        }

        .progress-bar {
            border-radius: 10px;
            transition: width 0.6s ease;
        }

        /* Botón Nueva Encuesta */
        .btn-nueva-encuesta {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            border: none;
            color: white;
            padding: 0.65rem 1.8rem;
            border-radius: 25px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-nueva-encuesta:hover:not(.btn-disabled) {
            background: linear-gradient(135deg, #218838 0%, #1abc9c 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
        }

        .btn-nueva-encuesta.btn-disabled {
            background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
            cursor: not-allowed;
            opacity: 0.8;
            box-shadow: 0 2px 8px rgba(108, 117, 125, 0.2);
        }

        .btn-tipo-encuesta {
            border-width: 2px;
            font-weight: 600;
            transition: all 0.3s ease;
            border-radius: 25px;
        }

        .btn-outline-primary {
            color: #28a745;
            border-color: #28a745;
        }

        .btn-outline-primary:hover {
            background-color: #28a745;
            border-color: #28a745;
            color: white;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
        }

        .btn-primary.btn-tipo-encuesta {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            border-color: #28a745;
            color: white;
            box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
        }

        .btn-outline-secondary {
            color: #28a745;
            border-color: #28a745;
        }

        .btn-outline-secondary:hover {
            background-color: #28a745;
            border-color: #28a745;
            color: white;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
        }

        .btn-secondary.btn-tipo-encuesta {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            border-color: #28a745;
            color: white;
            box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
        }

        .btn-outline-danger:hover {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            border-color: #dc3545;
            color: white;
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(220, 53, 69, 0.3);
        }

        .btn-outline-warning:hover {
            background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
            border-color: #ffc107;
            color: #212529;
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(255, 193, 7, 0.3);
        }

        /* NUEVO: Estilos para toast */
        .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;
        }

        /* NUEVO: Animación para el modal */
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .btn-group {
                flex-direction: column;
                gap: 0.3rem;
            }

            .btn-sm {
                font-size: 0.75rem;
                padding: 0.2rem 0.4rem;
            }

            .table td, .table th {
                padding: 0.4rem;
                font-size: 0.85rem;
            }

            .btn-tipo-encuesta {
                font-size: 0.9rem;
                padding: 0.5rem 1.5rem !important;
            }

            .btn-nueva-encuesta {
                font-size: 0.9rem;
                padding: 0.5rem 1.2rem;
            }

            .stat-number {
                font-size: 1.5rem;
            }

            .stat-box {
                padding: 0.5rem;
                margin: 0.25rem 0;
            }
        }
    </style>

    <script>
        // Variables globales
        let encuestaAEliminar = { id: null, tipo: null };
        let estadisticasActuales = {
            totalEncuestas: {{ $totalEncuestas }},
            limiteEncuestas: {{ $limiteEncuestas }},
            encuestasRestantes: {{ $encuestasRestantes }},
            porcentajeCompletado: {{ $porcentajeCompletado }}
        };

        // Función para cambiar el tipo de elección - CORREGIDA para que siempre funcione
        function cambiarTipoEleccion(tipo) {
            const btnRegional = document.getElementById('btn-regional');
            const btnDistrital = document.getElementById('btn-distrital');
            const tituloTabla = document.getElementById('titulo-tabla');
            const textoNuevaEncuesta = document.getElementById('texto-nueva-encuesta');

            // Resetear clases de ambos botones
            btnRegional.className = 'btn btn-outline-primary btn-lg px-4 btn-tipo-encuesta';
            btnDistrital.className = 'btn btn-outline-secondary btn-lg px-4 btn-tipo-encuesta';

            // ASEGURAR que los botones NUNCA se deshabiliten
            btnRegional.disabled = false;
            btnDistrital.disabled = false;

            if (tipo === 'regional') {
                btnRegional.classList.remove('btn-outline-primary');
                btnRegional.classList.add('btn-primary');
                tituloTabla.textContent = 'Encuestas Realizadas - Regional';
                if (textoNuevaEncuesta) {
                    textoNuevaEncuesta.textContent = 'Nueva Encuesta Regional';
                }
                // Mostrar filas regionales, ocultar distritales
                document.querySelectorAll('.fila-regional').forEach(f => f.style.display = '');
                document.querySelectorAll('.fila-distrital').forEach(f => f.style.display = 'none');
            } else {
                btnDistrital.classList.remove('btn-outline-secondary');
                btnDistrital.classList.add('btn-secondary');
                tituloTabla.textContent = 'Encuestas Realizadas - Distrital';
                if (textoNuevaEncuesta) {
                    textoNuevaEncuesta.textContent = 'Nueva Encuesta Distrital';
                }
                // Mostrar filas distritales, ocultar regionales
                document.querySelectorAll('.fila-regional').forEach(f => f.style.display = 'none');
                document.querySelectorAll('.fila-distrital').forEach(f => f.style.display = '');
            }

            // Actualizar variable global
            window.tipoEncuestaActual = tipo;

            console.log(`Tipo cambiado a: ${tipo}`); // Para debug
        }

        // Función para eliminar encuesta con modal Bootstrap
        function eliminarEncuesta(id, tipo) {
            // Guardar datos de la encuesta
            encuestaAEliminar.id = id;
            encuestaAEliminar.tipo = tipo;

            // Actualizar información en el modal
            const infoEncuesta = document.getElementById('info-encuesta');
            if (infoEncuesta) {
                infoEncuesta.textContent = `Encuesta ${tipo} #${id}`;
            }

            // Mostrar modal Bootstrap
            const modal = new bootstrap.Modal(document.getElementById('modalEliminar'));
            modal.show();
        }

        // Función para mostrar toast en lugar de alert
        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');

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

            toastMessage.textContent = mensaje;

            // Mostrar toast de Bootstrap
            const bsToast = new bootstrap.Toast(toast, {
                delay: 4000 // Se cierra automáticamente después de 4 segundos
            });
            bsToast.show();
        }

        // Función para confirmar eliminación
        function confirmarEliminacion() {
            const id = encuestaAEliminar.id;
            const tipo = encuestaAEliminar.tipo;

            if (!id || !tipo) {
                mostrarToast('Error: No se pudo identificar la encuesta', 'error');
                return;
            }

            // Cambiar botón a estado loading
            const btnConfirmar = document.getElementById('btnConfirmarEliminar');
            const textoOriginal = btnConfirmar.innerHTML;
            btnConfirmar.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Eliminando...';
            btnConfirmar.disabled = true;

            fetch(`/encuesta/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success || data.message) {
                        // Cerrar modal
                        const modal = bootstrap.Modal.getInstance(document.getElementById('modalEliminar'));
                        modal.hide();

                        // Mostrar toast de éxito
                        mostrarToast(data.message || 'Encuesta eliminada exitosamente', 'success');

                        // Actualizar estadísticas locales si están disponibles
                        if (data.estadisticas) {
                            estadisticasActuales = {
                                totalEncuestas: data.estadisticas.encuestas_realizadas,
                                limiteEncuestas: data.estadisticas.limite_total,
                                encuestasRestantes: data.estadisticas.encuestas_restantes,
                                porcentajeCompletado: data.estadisticas.porcentaje
                            };
                        }

                        // Recargar página después de mostrar el toast
                        setTimeout(() => window.location.reload(), 2000);
                    } else {
                        btnConfirmar.innerHTML = textoOriginal;
                        btnConfirmar.disabled = false;
                        mostrarToast(data.error || 'Error al eliminar la encuesta', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    btnConfirmar.innerHTML = textoOriginal;
                    btnConfirmar.disabled = false;
                    mostrarToast('Error de conexión', 'error');
                });
        }

        // Función para nueva encuesta - SOLO esta se deshabilita cuando se alcanza el límite
        function nuevaEncuesta() {
            // Verificar límite SOLO para nueva encuesta
            if (estadisticasActuales.encuestasRestantes <= 0) {
                mostrarToast('Has alcanzado el límite máximo de encuestas permitidas', 'warning');
                return;
            }

            const tipoEncuesta = window.tipoEncuestaActual || 'regional';
            const tipoCapitalizado = tipoEncuesta.charAt(0).toUpperCase() + tipoEncuesta.slice(1);

            // Mostrar loading en el botón de nueva encuesta ÚNICAMENTE
            const btnNuevaEncuesta = document.querySelector('.btn-nueva-encuesta:not(.btn-disabled)');
            if (btnNuevaEncuesta) {
                const textoOriginal = btnNuevaEncuesta.innerHTML;
                btnNuevaEncuesta.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Cargando...';
                btnNuevaEncuesta.disabled = true;
            }

            // Redirigir después de un pequeño delay
            setTimeout(() => {
                window.location.href = "/encuesta/" + tipoCapitalizado;
            }, 500);
        }

        // NUEVA FUNCIÓN: Asegurar que los botones de tipo siempre estén habilitados
        function mantenerBotonesTipoActivos() {
            const btnRegional = document.getElementById('btn-regional');
            const btnDistrital = document.getElementById('btn-distrital');

            if (btnRegional) {
                btnRegional.disabled = false;
                btnRegional.style.pointerEvents = 'auto';
                btnRegional.style.opacity = '1';
            }

            if (btnDistrital) {
                btnDistrital.disabled = false;
                btnDistrital.style.pointerEvents = 'auto';
                btnDistrital.style.opacity = '1';
            }
        }

        // Event listeners
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM cargado, inicializando eventos...');

            // Verificar token CSRF
            const csrfToken = document.querySelector('meta[name="csrf-token"]');
            if (!csrfToken) {
                console.error('Token CSRF no encontrado.');
            }

            // Determinar tipo inicial según botones disponibles
            const btnRegional = document.getElementById('btn-regional');
            const btnDistrital = document.getElementById('btn-distrital');

            let tipoInicial = 'regional';

            // Si solo existe el botón distrital, inicializar como distrital
            if (!btnRegional && btnDistrital) {
                tipoInicial = 'distrital';
            }

            // Inicializar tipo de encuesta
            window.tipoEncuestaActual = tipoInicial;
            cambiarTipoEleccion(tipoInicial);

            // ASEGURAR que los botones de tipo SIEMPRE estén activos
            mantenerBotonesTipoActivos();

            // Event listeners para botones de tipo - CON VERIFICACIÓN DE EXISTENCIA
            if (btnRegional) {
                btnRegional.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('Click en botón Regional');
                    cambiarTipoEleccion('regional');
                    mantenerBotonesTipoActivos();
                });
            }

            if (btnDistrital) {
                btnDistrital.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('Click en botón Distrital');
                    cambiarTipoEleccion('distrital');
                    mantenerBotonesTipoActivos();
                });
            }

            // Event listener para confirmar eliminación
            const btnConfirmarEliminar = document.getElementById('btnConfirmarEliminar');
            if (btnConfirmarEliminar) {
                btnConfirmarEliminar.addEventListener('click', function() {
                    confirmarEliminacion();
                });
            }

            // Restaurar estado del modal cuando se cierra
            const modalEliminar = document.getElementById('modalEliminar');
            if (modalEliminar) {
                modalEliminar.addEventListener('hidden.bs.modal', function() {
                    const btnConfirmar = document.getElementById('btnConfirmarEliminar');
                    if (btnConfirmar) {
                        btnConfirmar.innerHTML = '<i class="fas fa-trash me-2"></i>Eliminar';
                        btnConfirmar.disabled = false;
                    }
                    encuestaAEliminar.id = null;
                    encuestaAEliminar.tipo = null;
                });
            }

            // Verificación periódica para mantener botones activos
            setInterval(mantenerBotonesTipoActivos, 1000);

            console.log('Eventos inicializados correctamente');
        });

        // Función actualizada para cambiar tipo - CON VERIFICACIÓN DE EXISTENCIA
        function cambiarTipoEleccion(tipo) {
            const btnRegional = document.getElementById('btn-regional');
            const btnDistrital = document.getElementById('btn-distrital');
            const tituloTabla = document.getElementById('titulo-tabla');
            const textoNuevaEncuesta = document.getElementById('texto-nueva-encuesta');

            // Solo resetear los botones que existen
            if (btnRegional) {
                btnRegional.className = 'btn btn-outline-primary btn-lg px-4 btn-tipo-encuesta';
                btnRegional.disabled = false;
            }

            if (btnDistrital) {
                btnDistrital.className = 'btn btn-outline-secondary btn-lg px-4 btn-tipo-encuesta';
                btnDistrital.disabled = false;
            }

            if (tipo === 'regional' && btnRegional) {
                btnRegional.classList.remove('btn-outline-primary');
                btnRegional.classList.add('btn-primary');
                if (tituloTabla) tituloTabla.textContent = 'Encuestas Realizadas - Regional';
                if (textoNuevaEncuesta) textoNuevaEncuesta.textContent = 'Nueva Encuesta Regional';

                // Mostrar filas regionales, ocultar distritales
                document.querySelectorAll('.fila-regional').forEach(f => f.style.display = '');
                document.querySelectorAll('.fila-distrital').forEach(f => f.style.display = 'none');

            } else if (tipo === 'distrital' && btnDistrital) {
                btnDistrital.classList.remove('btn-outline-secondary');
                btnDistrital.classList.add('btn-secondary');
                if (tituloTabla) tituloTabla.textContent = 'Encuestas Realizadas - Distrital';
                if (textoNuevaEncuesta) textoNuevaEncuesta.textContent = 'Nueva Encuesta Distrital';

                // Mostrar filas distritales, ocultar regionales
                document.querySelectorAll('.fila-regional').forEach(f => f.style.display = 'none');
                document.querySelectorAll('.fila-distrital').forEach(f => f.style.display = '');
            }

            // Actualizar variable global
            window.tipoEncuestaActual = tipo;

            console.log(`Tipo cambiado a: ${tipo}`);
        }

        // Función actualizada para mantener botones activos - CON VERIFICACIÓN
        function mantenerBotonesTipoActivos() {
            const btnRegional = document.getElementById('btn-regional');
            const btnDistrital = document.getElementById('btn-distrital');

            if (btnRegional) {
                btnRegional.disabled = false;
                btnRegional.style.pointerEvents = 'auto';
                btnRegional.style.opacity = '1';
            }

            if (btnDistrital) {
                btnDistrital.disabled = false;
                btnDistrital.style.pointerEvents = 'auto';
                btnDistrital.style.opacity = '1';
            }
        }

    </script>

@endsection