@extends('adminlte::page')

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

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

@section('content')
    @livewire('misurazioni.grafici.mostra')
@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);
            });
        });
    </script>
@stop