@extends('layouts.master')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Rapport Mensuel des Distributions</h1>
        <div>
            <a href="{{ route('releves.index') }}" class="btn btn-secondary">
                ← Nouveau relevé
            </a>
            <a href="{{ route('releves.rapport-journalier') }}" class="btn btn-info">
                Rapport journalier
            </a>
            <a href="{{ route('releves.historique') }}" class="btn btn-primary">
                Historique
            </a>
        </div>
    </div>

    {{-- Sélecteur de mois --}}
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('releves.rapport-mensuel') }}" class="row g-3">
                <div class="col-md-4">
                    <label for="month" class="form-label">Mois</label>
                    <select name="month" id="month" class="form-select">
                        <option value="1" {{ $month == 1 ? 'selected' : '' }}>Janvier</option>
                        <option value="2" {{ $month == 2 ? 'selected' : '' }}>Février</option>
                        <option value="3" {{ $month == 3 ? 'selected' : '' }}>Mars</option>
                        <option value="4" {{ $month == 4 ? 'selected' : '' }}>Avril</option>
                        <option value="5" {{ $month == 5 ? 'selected' : '' }}>Mai</option>
                        <option value="6" {{ $month == 6 ? 'selected' : '' }}>Juin</option>
                        <option value="7" {{ $month == 7 ? 'selected' : '' }}>Juillet</option>
                        <option value="8" {{ $month == 8 ? 'selected' : '' }}>Août</option>
                        <option value="9" {{ $month == 9 ? 'selected' : '' }}>Septembre</option>
                        <option value="10" {{ $month == 10 ? 'selected' : '' }}>Octobre</option>
                        <option value="11" {{ $month == 11 ? 'selected' : '' }}>Novembre</option>
                        <option value="12" {{ $month == 12 ? 'selected' : '' }}>Décembre</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="year" class="form-label">Année</label>
                    <select name="year" id="year" class="form-select">
                        @php
                            $currentYear = date('Y');
                        @endphp
                        @for($y = $currentYear - 2; $y <= $currentYear + 1; $y++)
                            <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>
                                {{ $y }}
                            </option>
                        @endfor
                    </select>
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">Afficher</button>
                </div>
            </form>
        </div>
    </div>

    {{-- En-tête du mois --}}
    <div class="alert alert-info text-center">
        <h3 class="mb-0">
            Rapport du mois : 
            @php
                $mois = [
                    1 => 'Janvier', 2 => 'Février', 3 => 'Mars', 4 => 'Avril',
                    5 => 'Mai', 6 => 'Juin', 7 => 'Juillet', 8 => 'Août',
                    9 => 'Septembre', 10 => 'Octobre', 11 => 'Novembre', 12 => 'Décembre'
                ];
            @endphp
            {{ $mois[$month] }} {{ $year }}
        </h3>
    </div>

    {{-- Cartes de synthèse --}}
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card bg-warning text-white">
                <div class="card-body text-center">
                    <h4 class="card-title">GASOIL</h4>
                    <hr>
                    <h5>Distribué (relevés)</h5>
                    <p class="display-4">{{ number_format($stats['gasoil']['releves'], 2, ',', ' ') }} L</p>
                    <h5>Bons servis</h5>
                    <p class="display-4">{{ number_format($stats['gasoil']['bons'], 2, ',', ' ') }} L</p>
                    <hr>
                    <h5>Différence</h5>
                    <p class="display-4 {{ $stats['gasoil']['difference'] >= 0 ? 'text-success' : 'text-danger' }}">
                        {{ number_format(abs($stats['gasoil']['difference']), 2, ',', ' ') }} L
                        <br>
                        <small>({{ $stats['gasoil']['difference'] >= 0 ? 'Surplus' : 'Manque' }})</small>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card bg-info text-white">
                <div class="card-body text-center">
                    <h4 class="card-title">ESSENCE</h4>
                    <hr>
                    <h5>Distribué (relevés)</h5>
                    <p class="display-4">{{ number_format($stats['essence']['releves'], 2, ',', ' ') }} L</p>
                    <h5>Bons servis</h5>
                    <p class="display-4">{{ number_format($stats['essence']['bons'], 2, ',', ' ') }} L</p>
                    <hr>
                    <h5>Différence</h5>
                    <p class="display-4 {{ $stats['essence']['difference'] >= 0 ? 'text-success' : 'text-danger' }}">
                        {{ number_format(abs($stats['essence']['difference']), 2, ',', ' ') }} L
                        <br>
                        <small>({{ $stats['essence']['difference'] >= 0 ? 'Surplus' : 'Manque' }})</small>
                    </p>
                </div>
            </div>
        </div>
    </div>

    {{-- Tableau comparatif détaillé --}}
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h4 class="mb-0">Tableau comparatif détaillé</h4>
        </div>
        <div class="card-body">
            <table class="table table-bordered table-hover">
                <thead class="table-dark">
                    <tr>
                        <th>Indicateur</th>
                        <th class="text-end">Gasoil (L)</th>
                        <th class="text-end">Essence (L)</th>
                        <th class="text-end">Total (L)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="table-warning">
                        <td><strong>Distribué (relevés pompes)</strong></td>
                        <td class="text-end">{{ number_format($stats['gasoil']['releves'], 2, ',', ' ') }}</td>
                        <td class="text-end">{{ number_format($stats['essence']['releves'], 2, ',', ' ') }}</td>
                        <td class="text-end">
                            <strong>{{ number_format($stats['gasoil']['releves'] + $stats['essence']['releves'], 2, ',', ' ') }}</strong>
                        </td>
                    </tr>
                    <tr class="table-success">
                        <td><strong>Bons servis (status 3,4,5)</strong></td>
                        <td class="text-end">{{ number_format($stats['gasoil']['bons'], 2, ',', ' ') }}</td>
                        <td class="text-end">{{ number_format($stats['essence']['bons'], 2, ',', ' ') }}</td>
                        <td class="text-end">
                            <strong>{{ number_format($stats['gasoil']['bons'] + $stats['essence']['bons'], 2, ',', ' ') }}</strong>
                        </td>
                    </tr>
                    <tr class="{{ ($stats['gasoil']['difference'] + $stats['essence']['difference']) >= 0 ? 'table-danger' : 'table-warning' }}">
                        <td><strong>Écart (Relevés - Bons)</strong></td>
                        <td class="text-end">
                            <strong class="{{ $stats['gasoil']['difference'] >= 0 ? 'text-danger' : 'text-warning' }}">
                                {{ number_format($stats['gasoil']['difference'], 2, ',', ' ') }}
                                ({{ $stats['gasoil']['difference'] >= 0 ? '+' : '-' }})
                            </strong>
                        </td>
                        <td class="text-end">
                            <strong class="{{ $stats['essence']['difference'] >= 0 ? 'text-danger' : 'text-warning' }}">
                                {{ number_format($stats['essence']['difference'], 2, ',', ' ') }}
                                ({{ $stats['essence']['difference'] >= 0 ? '+' : '-' }})
                            </strong>
                        </td>
                        <td class="text-end">
                            <strong>
                                {{ number_format($stats['gasoil']['difference'] + $stats['essence']['difference'], 2, ',', ' ') }}
                            </strong>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    {{-- Graphique camembert --}}
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0">Répartition Gasoil vs Essence (Relevés)</h5>
                </div>
                <div class="card-body">
                    <canvas id="relevesPieChart" width="400" height="300"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0">Répartition Gasoil vs Essence (Bons)</h5>
                </div>
                <div class="card-body">
                    <canvas id="bonsPieChart" width="400" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-4 text-center">
        <a href="{{ route('releves.index') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Nouveau relevé
        </a>
        <a href="{{ route('releves.rapport-journalier') }}" class="btn btn-info">
            <i class="fas fa-chart-bar"></i> Rapport journalier
        </a>
        <button onclick="window.print()" class="btn btn-secondary">
            <i class="fas fa-print"></i> Imprimer
        </button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Graphique pour les relevés
        const relevesCtx = document.getElementById('relevesPieChart').getContext('2d');
        new Chart(relevesCtx, {
            type: 'pie',
            data: {
                labels: ['Gasoil', 'Essence'],
                datasets: [{
                    data: [{{ $stats['gasoil']['releves'] }}, {{ $stats['essence']['releves'] }}],
                    backgroundColor: ['rgb(255, 193, 7)', 'rgb(13, 202, 240)'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const total = {{ $stats['gasoil']['releves'] + $stats['essence']['releves'] }};
                                const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                return `${label}: ${value.toLocaleString()} L (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });

        // Graphique pour les bons
        const bonsCtx = document.getElementById('bonsPieChart').getContext('2d');
        new Chart(bonsCtx, {
            type: 'pie',
            data: {
                labels: ['Gasoil', 'Essence'],
                datasets: [{
                    data: [{{ $stats['gasoil']['bons'] }}, {{ $stats['essence']['bons'] }}],
                    backgroundColor: ['rgb(255, 193, 7)', 'rgb(13, 202, 240)'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const total = {{ $stats['gasoil']['bons'] + $stats['essence']['bons'] }};
                                const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                return `${label}: ${value.toLocaleString()} L (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    </script>

    <style>
        @media print {
            .btn, form, .no-print {
                display: none;
            }
            .card {
                break-inside: avoid;
            }
        }
    </style>
@endsection