@extends('admin.panel')

@section('head')
<link rel="stylesheet" href="{{ asset('css/inicio.css') }}">
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
@endsection

@section('contenido')
<div class="dashboard">

    <h1>📊 Resumen de Encuestas</h1>

    <div class="tarjetas-resumen">
        <div class="card resumen total">
            <h3>Total de Encuestas</h3>
            <p>{{ $totalEncuestas }}</p>
        </div>
        <div class="card resumen publicas">
            <h3>Encuestas Públicas</h3>
            <p>{{ $publicas }}</p>
        </div>
        <div class="card resumen privadas">
            <h3>Encuestas Privadas</h3>
            <p>{{ $privadas }}</p>
        </div>
    </div>

    <h2>📝 Registros por Encuesta</h2>
    <table class="tabla-resumen clickable-rows">
        <thead>
            <tr>
                <th>TÍTULO</th>
                <th>TOTAL DE REGISTROS</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($encuestas as $encuesta)
                <tr data-id="{{ $encuesta->id }}">
                    <td>{{ $encuesta->titulo }}</td>
                    <td>{{ $encuesta->respuestas_count }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <h2 style="margin-top: 40px;">📈 Avance Diario</h2>
    <div id="grafico-avance" style="width: 100%; height: 400px; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 10px;"></div>

</div>
@endsection

@push('scripts')
<script>
    const avanceData = @json($graficosPorEncuesta);
    const chart = echarts.init(document.getElementById('grafico-avance'));

    function dibujarGrafico(idEncuesta) {
        const datos = avanceData[idEncuesta] || { fechas: [], cantidades: [] };
        chart.setOption({
            title: { text: 'Avance Diario de la Encuesta', left: 'center' },
            tooltip: { trigger: 'axis' },
            xAxis: {
                type: 'category',
                data: datos.fechas,
                boundaryGap: false,
                axisLabel: { color: '#334155' }
            },
            yAxis: {
                type: 'value',
                axisLabel: { color: '#334155' }
            },
            series: [{
                data: datos.cantidades,
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: '#bfdbfe'
                },
                itemStyle: {
                    color: '#3b82f6'
                }
            }]
        });
    }

    document.querySelectorAll('.clickable-rows tr[data-id]').forEach(row => {
        row.addEventListener('click', () => {
            const id = row.dataset.id;
            dibujarGrafico(id);
        });
    });

    // Carga por defecto el primero
    const primerId = document.querySelector('.clickable-rows tr[data-id]')?.dataset.id;
    if (primerId) dibujarGrafico(primerId);
</script>
@endpush