@extends('layouts.app')

@section('content')


<div class="container">
    <div class="row">
    <div class="col-md-6">
    <div class="card mt-4">
        <h5 class="card-header">Évolution du nombre de numéros de série par utilisateur (Top 9 + Autres)</h5>
        <div class="card-body">
            <div id="serialsByUserChart" class="c3" style="max-height: 500px;"></div>
        </div>
    </div>
</div>
    <div class="col-md-6">
        <div class="card">
            <h5 class="card-header">Évolution des numéros de série par année</h5>
            <div class="card-body">
                <div id="serialsByYearChart" class="c3" style="max-height: 320px;"></div>
            </div>
        </div>
    </div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 🔹 Graphique 1 : Nombre total de serials par année
        const years = @json($years);
        const totals = @json($totals);

        c3.generate({
            bindto: '#serialsByYearChart',
            data: {
                x: 'Années',
                columns: [
                    ['Années', ...years],
                    ['Quantité', ...totals]
                ],
                types: {
                    Quantité: 'area-spline'
                },
                colors: {
                    Quantité: '#5969ff'
                }
            },
            axis: {
                x: {
                    type: 'category',
                    label: 'Année'
                },
                y: {
                    label: 'Nombre de numéros de série'
                }
            },
            padding: {
                top: 20,
                right: 30,
                bottom: 40,
                left: 60
            }
        });

        // 🔹 Graphique 2 : Evolution par utilisateur (Top 9 + Autres)
        const userColumns = @json($c3Columns);

        c3.generate({
            bindto: '#serialsByUserChart',
            data: {
                x: 'Année',
                columns: userColumns,
                type: 'spline'
            },
            axis: {
                x: {
                    type: 'category',
                    label: 'Année'
                },
                y: {
                    label: 'Nombre de numéros de série'
                }
            },
            legend: {
                position: 'botton'
            },
            padding: {
                top: 20,
                right: 30,
                bottom: 40,
                left: 60
            }
        });
    });
</script>


@endsection