@extends('layouts.master')

@section('content')
    <h1 class="mb-4">Rapport des Pompes</h1>

    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <h5 class="card-title">Total Pompes</h5>
                    <p class="card-text display-4">{{ $stats['total'] }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-success">
                <div class="card-body">
                    <h5 class="card-title">Pompes Actives</h5>
                    <p class="card-text display-4">{{ $stats['actives'] }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-warning">
                <div class="card-body">
                    <h5 class="card-title">Pompes Gasoil</h5>
                    <p class="card-text display-4">{{ $stats['gasoil'] }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-info">
                <div class="card-body">
                    <h5 class="card-title">Pompes Essence</h5>
                    <p class="card-text display-4">{{ $stats['essence'] }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3>Détails des Pompes</h3>
        </div>
        <div class="card-body">
            <canvas id="capaciteChart" width="400" height="200"></canvas>
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header">
            <h3>Liste Complète</h3>
        </div>
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Nom</th>
                        <th>Type</th>
                        <th>Capacité (L)</th>
                        <th>Alerte (L)</th>
                        <th>Alerte (%)</th>
                        <th>Fréquence</th>
                        <th>Statut</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($pompes as $pompe)
                        <tr>
                            <td>{{ $pompe->code }}</td>
                            <td>{{ $pompe->nom }}</td>
                            <td>{{ ucfirst($pompe->type_carburant) }}</td>
                            <td>{{ number_format($pompe->capacite_cuve_l, 2, ',', ' ') }}</td>
                            <td>{{ number_format($pompe->seuil_alerte_l, 2, ',', ' ') }}</td>
                            <td>{{ $pompe->seuil_alerte_pct }}%</td>
                            <td>{{ $pompe->frequence_releve_jours }} jours</td>
                            <td>{{ $pompe->active ? 'Active' : 'Inactive' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('capaciteChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($pompes->pluck('nom')->toArray()) !!},
                datasets: [{
                    label: 'Capacité de la cuve (L)',
                    data: {!! json_encode($pompes->pluck('capacite_cuve_l')->toArray()) !!},
                    backgroundColor: 'rgba(54, 162, 235, 0.5)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
@endsection