@extends('adminlte::page')

@section('title', 'Correlazione Statistiche BIA')

@section('content_header')
    <h1>
        <i class="fas fa-chart-scatter mr-2"></i>
        Correlazione Statistiche BIA
    </h1>
@stop

@section('content')
<div class="container-fluid">
    @livewire('statistics.correlazione')
</div>
@stop

@section('css')
    <style>
        .range-slider-container {
            padding: 20px 0;
        }
        .range-slider {
            width: 100%;
            height: 8px;
            border-radius: 5px;
            background: #ddd;
            outline: none;
            -webkit-appearance: none;
        }
        .range-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #007bff;
            cursor: pointer;
        }
        .range-slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #007bff;
            cursor: pointer;
            border: none;
        }
        .range-values {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        .range-value {
            font-weight: bold;
            color: #007bff;
        }
        .correlation-result {
            animation: fadeIn 0.5s;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .chart-container {
            position: relative;
            height: 400px;
            margin-top: 20px;
        }
    </style>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    let scatterChartInstance = null;
    let analisiIdMap = {}; // Mappa per memorizzare gli ID delle analisi per indice

    function renderScatterChart(datiGrafico) {
        const ctx = document.getElementById('scatterChart');
        if (!ctx) {
            console.warn('Canvas scatterChart non trovato');
            return;
        }

        // Rimuovi l'event listener precedente se presente
        if (scatterChartInstance && ctx.onclick) {
            ctx.onclick = null;
        }

        // Distruggi il grafico esistente se presente
        if (scatterChartInstance) {
            scatterChartInstance.destroy();
            scatterChartInstance = null;
        }

        // Reset della mappa
        analisiIdMap = {};

        // Prepara i dati per Chart.js e crea la mappa degli ID
        const punti = datiGrafico.punti.map((p, index) => {
            // Memorizza l'ID dell'analisi nella mappa usando l'indice come chiave
            if (p.analisi_id) {
                analisiIdMap[index] = p.analisi_id;
            }
            return {
                x: parseFloat(p.x),
                y: parseFloat(p.y)
            };
        });

        // Debug: verifica che i dati includano l'analisi_id
        console.log('Punti del grafico:', punti.slice(0, 3)); // Mostra i primi 3 punti per debug
        console.log('Mappa analisi_id:', analisiIdMap); // Debug

        scatterChartInstance = new Chart(ctx, {
            type: 'scatter',
            data: {
                datasets: [{
                    label: 'Correlazione',
                    data: punti,
                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    pointRadius: 5,
                    pointHoverRadius: 7,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    intersect: false,
                    mode: 'point'
                },
                onHover: function(event, elements) {
                    event.native.target.style.cursor = elements.length > 0 ? 'pointer' : 'default';
                },
                plugins: {
                    title: {
                        display: true,
                        text: 'Grafico di Dispersione: ' + datiGrafico.label1 + ' vs ' + datiGrafico.label2,
                        font: {
                            size: 16
                        }
                    },
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return datiGrafico.label1 + ': ' + context.parsed.x.toFixed(2) + 
                                       ' | ' + datiGrafico.label2 + ': ' + context.parsed.y.toFixed(2) +
                                       ' (Clicca per aprire l\'esame)';
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: datiGrafico.label1
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: datiGrafico.label2
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    }
                }
            }
        });

        // Aggiungi event listener per il click sul canvas
        ctx.onclick = function(event) {
            if (!scatterChartInstance) {
                return;
            }
            
            // Usa getElementsAtEventForMode con 'nearest' mode
            const points = scatterChartInstance.getElementsAtEventForMode(event, 'nearest', { intersect: true }, true);
            
            if (points.length > 0) {
                const firstPoint = points[0];
                const index = firstPoint.index;
                
                // Recupera l'ID dell'analisi dalla mappa usando l'indice
                const analisiId = analisiIdMap[index];
                
                if (analisiId) {
                    // Apri l'esame in una nuova scheda
                    const url = '/Analisi/' + analisiId;
                    window.open(url, '_blank');
                }
            }
        };
    }

    // Renderizza il grafico quando Livewire aggiorna il componente
    document.addEventListener('livewire:init', () => {
        // Listener per l'evento custom
        Livewire.on('correlation-updated', (data) => {
            if (data && data.datiGrafico && data.datiGrafico.punti && data.datiGrafico.punti.length > 0) {
                setTimeout(() => {
                    renderScatterChart(data.datiGrafico);
                }, 300);
            }
        });

        // Hook per quando Livewire aggiorna il DOM
        Livewire.hook('morph.updated', ({ el, component }) => {
            // Cerca il canvas nel DOM aggiornato
            setTimeout(() => {
                const canvas = document.getElementById('scatterChart');
                if (canvas) {
                    const chartDataAttr = canvas.getAttribute('data-chart-data');
                    if (chartDataAttr) {
                        try {
                            const chartData = JSON.parse(chartDataAttr);
                            if (chartData && chartData.punti && chartData.punti.length > 0) {
                                renderScatterChart(chartData);
                            }
                        } catch (e) {
                            console.error('Errore nel parsing dei dati del grafico:', e);
                        }
                    }
                }
            }, 200);
        });
    });

    // Fallback per quando il componente è già caricato
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            const canvas = document.getElementById('scatterChart');
            if (canvas) {
                const chartDataAttr = canvas.getAttribute('data-chart-data');
                if (chartDataAttr) {
                    try {
                        const chartData = JSON.parse(chartDataAttr);
                        if (chartData && chartData.punti && chartData.punti.length > 0) {
                            renderScatterChart(chartData);
                        }
                    } catch (e) {
                        console.error('Errore nel parsing dei dati del grafico:', e);
                    }
                }
            }
        }, 500);
    });
</script>
@stop