{{-- Este componente es flexible: sirve para barras, líneas, torta, etc. --}}

@props([
    'id' => 'chart_' . uniqid(), 
    'type' => 'line', // line, bar, pie, doughnut
    'labels' => [], 
    'datasets' => [], 
    'height' => 300
])

<div class="position-relative mb-4">
    <canvas id="{{ $id }}" height="{{ $height }}"></canvas>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const ctx = document.getElementById('{{ $id }}').getContext('2d');
        new Chart(ctx, {
            type: '{{ $type }}',
            data: {
                labels: @json($labels),
                datasets: @json($datasets)
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom' }
                },
                interaction: {
                    mode: 'index',
                    intersect: false,
                },
                // Si es 'bar' o 'line', iniciamos el eje Y en 0
                scales: {
                    y: { beginAtZero: true, display: '{{ $type }}' !== 'pie' && '{{ $type }}' !== 'doughnut' }
                }
            }
        });
    });
</script>

{{-- uso en controlador

public function index() {
    // Ejemplo: Ventas últimos 6 meses
    $labels = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun'];
    $data   = [1200, 1900, 300, 500, 2000, 3000];

    $chartData = [
        [
            'label' => 'Ventas ($)',
            'data' => $data,
            'backgroundColor' => 'rgba(60, 141, 188, 0.9)',
            'borderColor' => 'rgba(60, 141, 188, 0.8)',
            'fill' => false,
            'tension' => 0.1 // Curvatura de línea
        ]
    ];

    return view('home', compact('labels', 'chartData'));
} --}}



{{-- uso en la vista

<div class="row">
    <div class="col-md-6">
        <x-card header="Evolución de Ventas">
            <x-chart type="line" :labels="$labels" :datasets="$chartData" />
        </x-card>
    </div>
    
    <div class="col-md-6">
        <x-card header="Productos Más Vendidos" color="success">
             Ejemplo Hardcodeado para probar 
            <x-chart 
                type="doughnut" 
                :labels="['Harina', 'Arroz', 'Pasta']" 
                :datasets="[[
                    'data' => [30, 50, 20],
                    'backgroundColor' => ['#f56954', '#00a65a', '#f39c12']
                ]]" 
            />
        </x-card>
    </div>
</div>
 --}}