@extends('layouts.master')
@section('content')

<div class="row">
    <div class="col-12">
        <h4>Tableau de bord des paiements carburant</h4>
        <hr>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                Paiements par jour (30 derniers jours)
            </div>
            <div class="card-body">
                <canvas id="dailyChart"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                Répartition par carburant
            </div>
            <div class="card-body">
                <canvas id="fuelChart"></canvas>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Graphique journalier
const ctx1 = document.getElementById('dailyChart').getContext('2d');
new Chart(ctx1, {
    type: 'line',
    data: {
        labels @json($daily_labels),
        datasets: [{
            label: 'Montant payé (BIF)',
            data: @json($daily_data),
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    }
});

// Graphique carburant
const ctx2 = document.getElementById('fuelChart').getContext('2d');
new Chart(ctx2, {
    type: 'pie',
    data: {
        labels: ['Essence', 'Gasoil'],
        datasets: [{
            data: @json([$stats['total_essence'], $stats['total_gasoil']]),
            backgroundColor: ['#36a2eb', '#ffce56']
        }]
    }
});
</script>

@stop