@extends('admin.panel')

@section('head')
    <link rel="stylesheet" href="{{ asset('css/estadistica.css') }}">
    <style>
        .btn-sm {
            padding: 5px 10px;
            font-size: 0.85rem;
            border-radius: 6px;
            margin: 2px;
        }
        .acciones-flex {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
        }
        .clave-wrapper {
            margin-top: 5px;
        }
    </style>
@endsection

@section('contenido')
<div class="contenedor-tabla">
    <h2>📊 Panel de Estadísticas de Encuestas</h2>

    <table class="tabla">
        <thead>
            <tr>
                <th>ID</th>
                <th>Título</th>
                <th>Tipo</th>
                <th>Estado</th>
                <th>Base de Datos</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            @foreach($encuestas as $encuesta)
            <tr>
                <td>{{ $encuesta->id }}</td>
                <td>{{ $encuesta->titulo }}</td>
                <td>{{ ucfirst($encuesta->tipo) }}</td>
                <td>
                    <span class="badge {{ $encuesta->publicada ? 'badge-success' : 'badge-secondary' }}">
                        {{ $encuesta->publicada ? 'Publicada' : 'Borrador' }}
                    </span>
                </td>
                <td>
                    @if($encuesta->estado_base)
                        🟢 <strong>{{ $encuesta->estado_base }}</strong>
                        <br>
                        @if($encuesta->es_privado)
                            🔒 <span style="color: #e53e3e;">Este reporte está protegido</span>
                        @else
                            🔓 <span style="color: #38a169;">Este reporte es público</span>
                        @endif
                    @else
                        🔴 <strong>No creada</strong>
                    @endif
                </td>

                <td class="acciones-flex">
                        @if (!$encuesta->estado_base)
                            <!-- Botón para crear la base si aún no existe -->
                            <form method="POST" action="{{ route('encuestas.crear_tabla', $encuesta->id) }}">
                                @csrf
                                <button class="btn btn-warning">⚙️ Crear Base</button>
                            </form>
                        @else
                            <!-- Botón para eliminar la base -->
                            <form method="POST" action="{{ route('encuestas.eliminar_tabla', $encuesta->id) }}">
                                @csrf
                                <button class="btn btn-danger">🗑️ Eliminar </button>
                            </form>

                            <!-- 🔥 NUEVO: Botón para generar trigger -->
                            <form method="POST" action="{{ route('encuestas.generar_trigger', $encuesta->id) }}">
                                @csrf
                                <button class="btn btn-accent">🧠 base</button>
                            </form>

                            <!-- Botón para diseñar reporte -->
                            <a href="{{ route('encuestas.diseñar', $encuesta->id) }}" class="btn btn-primary">
                                🎨 Diseño
                            </a>

                            @if(!$encuesta->es_privado)
                                <a href="{{ route('encuestas.reporte.link', $encuesta->id) }}" class="btn btn-success" target="_blank">
                                    📈 Reporte
                                </a>
                            <form method="POST" action="{{ route('encuestas.hacer_privada', $encuesta->id) }}">
                                @csrf
                                <input type="password" name="clave_reporte" placeholder="Definir contraseña" required class="form-control" style="margin-top: 5px; padding: 6px; font-size: 0.85rem;">
                                <button class="btn btn-secondary btn-sm" type="submit" style="margin-top: 4px;">🔒 Hacer Privado</button>
                            </form>

                            @else
                                <!-- Botón para ver el reporte privado -->
                                <a href="{{ route('encuestas.reporte.link', $encuesta->id) }}" class="btn btn-success" target="_blank">
                                    📈 link
                                </a>

                                <!-- Formulario para ingresar nueva clave -->
                                <form method="POST" action="{{ route('encuestas.configurarPrivacidad', $encuesta->id) }}">
                                    @csrf
                                    <input type="password" name="clave_reporte" placeholder="Nueva contraseña" required class="form-control" style="margin-top: 5px; padding: 6px; font-size: 0.85rem;">
                                    <button class="btn btn-dark btn-sm" type="submit" style="margin-top: 4px;">🔑 PSW</button>
                                </form>

                                <!-- Botón para hacer público nuevamente -->
                                <form method="POST" action="{{ route('encuestas.estadisticas.hacer_publica', $encuesta->id) }}">
                                    @csrf
                                    <button class="btn btn-warning" type="submit">🔓 Hacer Público</button>
                                </form>
                            @endif

                        @endif
                    </td>


            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection

@push('scripts')
<script>
    document.querySelectorAll('.toggle-pass-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            const id = this.getAttribute('data-id');
            const wrapper = document.getElementById('clave-wrapper-' + id);
            wrapper.style.display = wrapper.style.display === 'none' ? 'block' : 'none';
        });
    });

    document.querySelectorAll('.toggle-eye').forEach(eye => {
        eye.addEventListener('click', function () {
            const id = this.getAttribute('data-id');
            const input = document.getElementById('clave-input-' + id);
            if (input.type === 'password') {
                input.type = 'text';
                this.textContent = '🙈';
            } else {
                input.type = 'password';
                this.textContent = '👁️';
            }
        });
    });
</script>
@endpush