@extends('layouts.admin')
@section('content')
<div style="margin-bottom: 10px;" class="row">
        <div class="col-lg-12">
            <form action="{{ route('admin.commerciale_rechercher_annee') }}" method="POST">
            @csrf    
                <input type="number" min="2020" max="2099" step="1"  class="form-control" name="annee" value="" placeholder="Choisir l'année" />
                <br /> 
                <input type="hidden" class="form-control" name="commerciale_id" value="{{ $commerciale->id }}"/>
                <br /> 
                <div class="text-center"> 
                    <input type="submit" class="btn btn-primary" value="Rechercher" />  
                </div>
               
            </form> 
        </div>
    </div>

<h3 class="page-title"></h3>
                    <!-- RAPPORT CONCERNAT LES COMMANDES FOURNISSEURS  --> 
<div class="row"> 
  
    <div class="col-md-12"> 
        <div class="card card-primary">
            <div class="card-header">
                <h2 class="card-title"> {{ $commerciale->name. ' ' .$commerciale->email }}</h2>
                <h3 class="card-title"> Montant Commande par mois </h3>
            </div>
            <div class="card-body">
                <div class="chart">
                    <canvas id="ChartFourni" width="200" height="50"></canvas>
                </div>
            </div>
    <!-- /.card-body -->
        </div>
    </div>
</div> 

<br /> 


<script src="{{ asset('plugins/chart.js/Chart.min.js') }}"></script>

<script>
    const ctx2 = document.getElementById('ChartFourni').getContext('2d');

    const ChartFourni = new Chart(ctx2, {
        type: 'bar',
        data: {
            labels: @json($mois),
            datasets: [{
                label: 'Montant par mois',
                data: @json($montant),
                backgroundColor: '#696cff',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: false
                }
            }
        }
    });
</script>
@endsection