@extends('adminlte::page')

@section('title', 'Grafici Circonferenze')

@section('content_header')
    <h1>
        <i class="fas fa-chart-line mr-2"></i>
        Grafici Circonferenze
    </h1>
@stop

@section('content')
    @livewire('Circonferenze.Grafici.Mostra', ['data' => $data])
@stop

@section('css')
    <style>
        /* Stili per i grafici */
        .apexcharts-tooltip {
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
        }
        
        .apexcharts-tooltip-title {
            font-weight: bold;
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
        }
        
        .custom-control-input:checked ~ .custom-control-label::before {
            background-color: #007bff;
            border-color: #007bff;
        }
    </style>
@stop

@section('js')
    <!-- Scripts per ApexCharts -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    @livewireChartsScripts
    
    <script>
        document.addEventListener('livewire:init', () => {
            // Notifica quando viene aggiornato il grafico
            Livewire.on('chartUpdated', (data) => {
                const message = data.message || 'Grafico aggiornato';
                toastr.success(message);
            });
            
            // Correzione per le date nei grafici
            window.addEventListener('DOMContentLoaded', () => {
                setTimeout(() => {
                    // Trova tutti i grafici ApexCharts nella pagina
                    const charts = document.querySelectorAll('.apexcharts-canvas');
                    if (charts.length > 0) {
                        console.log('Grafici trovati, inizializzazione completata');
                    }
                }, 1000);
            });
        });
    </script>
@stop