@extends('layouts.master')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Rapport Annuel 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.rapport-mensuel') }}" class="btn btn-primary">
                Rapport mensuel
            </a>
            <a href="{{ route('releves.historique') }}" class="btn btn-dark">
                Historique
            </a>
        </div>
    </div>

    {{-- Sélecteur d'année --}}
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('releves.rapport-annuel') }}" class="row g-3">
                <div class="col-md-6">
                    <label for="year" class="form-label">Année</label>
                    <select name="year" id="year" class="form-select">
                        @foreach($annees as $an)
                            <option value="{{ $an }}" {{ $year == $an ? 'selected' : '' }}>
                                {{ $an }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">Afficher</button>
                </div>
            </form>
        </div>
    </div>

    {{-- En-tête --}}
    <div class="alert alert-success text-center">
        <h2 class="mb-0">Rapport annuel {{ $year }}</h2>
        @if(isset($evolution))
            <p class="mt-2 mb-0">
                Évolution par rapport à {{ $year-1 }} : 
                <strong class="{{ $evolution >= 0 ? 'text-success' : 'text-danger' }}">
                    {{ number_format(abs($evolution), 1) }}% {{ $evolution >= 0 ? '📈' : '📉' }}
                </strong>
            </p>
        @endif
    </div>

    {{-- Cartes de synthèse annuelle --}}
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body text-center">
                    <h5 class="card-title">Gasoil Distribué</h5>
                    <p class="display-5">{{ number_format($totalAnnuel['gasoil_releves'], 0, ',', ' ') }} L</p>
                    <small>Total annuel</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body text-center">
                    <h5 class="card-title">Essence Distribué</h5>
                    <p class="display-5">{{ number_format($totalAnnuel['essence_releves'], 0, ',', ' ') }} L</p>
                    <small>Total annuel</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <h5 class="card-title">Total Bons Gasoil</h5>
                    <p class="display-5">{{ number_format($totalAnnuel['gasoil_bons'], 0, ',', ' ') }} L</p>
                    <small>Status 3,4,5</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body text-center">
                    <h5 class="card-title">Total Bons Essence</h5>
                    <p class="display-5">{{ number_format($totalAnnuel['essence_bons'], 0, ',', ' ') }} L</p>
                    <small>Status 3,4,5</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Résumé annuel --}}
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card bg-secondary text-white">
                <div class="card-body text-center">
                    <h5>Total Distribué</h5>
                    <p class="display-6">{{ number_format($totalAnnuel['total_releves'], 0, ',', ' ') }} L</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-dark text-white">
                <div class="card-body text-center">
                    <h5>Total Bons</h5>
                    <p class="display-6">{{ number_format($totalAnnuel['total_bons'], 0, ',', ' ') }} L</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card {{ $totalAnnuel['difference_total'] >= 0 ? 'bg-danger' : 'bg-warning' }} text-white">
                <div class="card-body text-center">
                    <h5>Écart Annuel</h5>
                    <p class="display-6">
                        {{ number_format(abs($totalAnnuel['difference_total']), 0, ',', ' ') }} L
                        <br>
                        <small>({{ $totalAnnuel['difference_total'] >= 0 ? 'Surplus' : 'Manque' }})</small>
                    </p>
                </div>
            </div>
        </div>
    </div>

    {{-- Graphique mensuel --}}
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h4 class="mb-0">Évolution mensuelle des distributions</h4>
        </div>
        <div class="card-body">
            <canvas id="monthlyChart" width="400" height="200"></canvas>
        </div>
    </div>

    {{-- Tableau mensuel détaillé --}}
    <div class="card mb-4">
        <div class="card-header bg-secondary text-white">
            <h4 class="mb-0">Détail mensuel</h4>
        </div>
        <div class="card-body table-responsive">
            <table class="table table-bordered table-hover table-striped">
                <thead class="table-dark">
                    <tr>
                        <th>Mois</th>
                        <th colspan="3" class="text-center">Relevés (L)</th>
                        <th colspan="3" class="text-center">Bons (L)</th>
                        <th colspan="3" class="text-center">Écart (L)</th>
                    </tr>
                    <tr>
                        <th></th>
                        <th>Gasoil</th>
                        <th>Essence</th>
                        <th>Total</th>
                        <th>Gasoil</th>
                        <th>Essence</th>
                        <th>Total</th>
                        <th>Gasoil</th>
                        <th>Essence</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $cumulGasoilReleves = 0;
                        $cumulEssenceReleves = 0;
                        $cumulGasoilBons = 0;
                        $cumulEssenceBons = 0;
                    @endphp
                    @foreach($dataParMois as $moisData)
                        @php
                            $cumulGasoilReleves += $moisData['gasoil_releves'];
                            $cumulEssenceReleves += $moisData['essence_releves'];
                            $cumulGasoilBons += $moisData['gasoil_bons'];
                            $cumulEssenceBons += $moisData['essence_bons'];
                        @endphp
                        <tr>
                            <td><strong>{{ $moisData['mois'] }}</strong></td>
                            <td class="text-end">{{ number_format($moisData['gasoil_releves'], 0, ',', ' ') }}</td>
                            <td class="text-end">{{ number_format($moisData['essence_releves'], 0, ',', ' ') }}</td>
                            <td class="text-end bg-light">
                                <strong>{{ number_format($moisData['total_releves'], 0, ',', ' ') }}</strong>
                            </td>
                            <td class="text-end">{{ number_format($moisData['gasoil_bons'], 0, ',', ' ') }}</td>
                            <td class="text-end">{{ number_format($moisData['essence_bons'], 0, ',', ' ') }}</td>
                            <td class="text-end bg-light">
                                <strong>{{ number_format($moisData['total_bons'], 0, ',', ' ') }}</strong>
                            </td>
                            <td class="text-end {{ $moisData['difference_gasoil'] >= 0 ? 'text-danger' : 'text-warning' }}">
                                {{ number_format($moisData['difference_gasoil'], 0, ',', ' ') }}
                            </td>
                            <td class="text-end {{ $moisData['difference_essence'] >= 0 ? 'text-danger' : 'text-warning' }}">
                                {{ number_format($moisData['difference_essence'], 0, ',', ' ') }}
                            </td>
                            <td class="text-end bg-light {{ $moisData['difference_total'] >= 0 ? 'text-danger' : 'text-warning' }}">
                                <strong>{{ number_format($moisData['difference_total'], 0, ',', ' ') }}</strong>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot class="table-dark">
                    <tr>
                        <th class="text-end">TOTAL ANNÉE</th>
                        <th class="text-end">{{ number_format($cumulGasoilReleves, 0, ',', ' ') }}</th>
                        <th class="text-end">{{ number_format($cumulEssenceReleves, 0, ',', ' ') }}</th>
                        <th class="text-end bg-secondary">{{ number_format($totalAnnuel['total_releves'], 0, ',', ' ') }}</th>
                        <th class="text-end">{{ number_format($cumulGasoilBons, 0, ',', ' ') }}</th>
                        <th class="text-end">{{ number_format($cumulEssenceBons, 0, ',', ' ') }}</th>
                        <th class="text-end bg-secondary">{{ number_format($totalAnnuel['total_bons'], 0, ',', ' ') }}</th>
                        <th class="text-end {{ $totalAnnuel['difference_gasoil'] >= 0 ? 'text-danger' : 'text-warning' }}">
                            {{ number_format($totalAnnuel['difference_gasoil'], 0, ',', ' ') }}
                        </th>
                        <th class="text-end {{ $totalAnnuel['difference_essence'] >= 0 ? 'text-danger' : 'text-warning' }}">
                            {{ number_format($totalAnnuel['difference_essence'], 0, ',', ' ') }}
                        </th>
                        <th class="text-end bg-secondary {{ $totalAnnuel['difference_total'] >= 0 ? 'text-danger' : 'text-warning' }}">
                            <strong>{{ number_format($totalAnnuel['difference_total'], 0, ',', ' ') }}</strong>
                        </th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    {{-- Top 5 des pompes --}}
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header bg-warning">
                    <h5 class="mb-0">🏆 Top 5 des pompes les plus utilisées</h5>
                </div>
                <div class="card-body">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Pompe</th>
                                <th>Type</th>
                                <th class="text-end">Quantité (L)</th>
                                <th class="text-end">% du total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($topPompes as $index => $pompe)
                                @php
                                    $pourcentage = ($pompe['quantite'] / $totalAnnuel['total_releves']) * 100;
                                @endphp
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td><strong>{{ $pompe['nom'] }}</strong><br><small>{{ $pompe['code'] }}</small></td>
                                    <td>
                                        <span class="badge {{ $pompe['type'] == 'gasoil' ? 'bg-warning' : 'bg-info' }}">
                                            {{ ucfirst($pompe['type']) }}
                                        </span>
                                    </td>
                                    <td class="text-end">{{ number_format($pompe['quantite'], 0, ',', ' ') }} L</td>
                                    <td class="text-end">{{ number_format($pourcentage, 1) }}%</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header bg-info">
                    <h5 class="mb-0">📊 Statistiques des bons</h5>
                </div>
                <div class="card-body">
                    <table class="table">
                        <tr>
                            <th>Status 3 (Servi)</th>
                            <td class="text-end"><strong>{{ number_format($statsBonsAnnuel['status_3']) }}</strong></td>
                            <td class="text-end">{{ number_format(($statsBonsAnnuel['status_3'] / max($statsBonsAnnuel['total'], 1)) * 100, 1) }}%</td>
                        </tr>
                        <tr>
                            <th>Status 4 (Encaissé)</th>
                            <td class="text-end"><strong>{{ number_format($statsBonsAnnuel['status_4']) }}</strong></td>
                            <td class="text-end">{{ number_format(($statsBonsAnnuel['status_4'] / max($statsBonsAnnuel['total'], 1)) * 100, 1) }}%</td>
                        </tr>
                        <tr>
                            <th>Status 5 (Clôturé)</th>
                            <td class="text-end"><strong>{{ number_format($statsBonsAnnuel['status_5']) }}</strong></td>
                            <td class="text-end">{{ number_format(($statsBonsAnnuel['status_5'] / max($statsBonsAnnuel['total'], 1)) * 100, 1) }}%</td>
                        </tr>
                        <tr class="table-active">
                            <th>Total bons</th>
                            <td class="text-end"><strong>{{ number_format($statsBonsAnnuel['total']) }}</strong></td>
                            <td class="text-end">100%</td>
                        </tr>
                        <tr>
                            <th>Montant total des bons</th>
                            <td colspan="2" class="text-end">
                                <strong>{{ number_format($statsBonsAnnuel['montant_total'], 0, ',', ' ') }} FBu</strong>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Performance mensuelle --}}
    @if(isset($meilleurMoisNom) && isset($pireMoisNom))
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <h5>📈 Meilleur mois</h5>
                    <p class="display-6">{{ $mois[$meilleurMoisNom] ?? '-' }}</p>
                    <p>{{ number_format($dataParMois[$meilleurMoisNom]['total_releves'] ?? 0, 0, ',', ' ') }} L distribués</p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card bg-warning text-white">
                <div class="card-body text-center">
                    <h5>📉 Mois le moins actif</h5>
                    <p class="display-6">{{ $mois[$pireMoisNom] ?? '-' }}</p>
                    <p>{{ number_format($dataParMois[$pireMoisNom]['total_releves'] ?? 0, 0, ',', ' ') }} L distribués</p>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- Graphique camembert annuel --}}
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0">Répartition annuelle 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 annuelle 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-mensuel') }}" class="btn btn-info">
            <i class="fas fa-calendar-alt"></i> Rapport mensuel
        </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 mensuel (évolution)
        const moisLabels = {!! json_encode(collect($dataParMois)->pluck('mois')->toArray()) !!};
        const gasoilRelevesData = {!! json_encode(collect($dataParMois)->pluck('gasoil_releves')->toArray()) !!};
        const essenceRelevesData = {!! json_encode(collect($dataParMois)->pluck('essence_releves')->toArray()) !!};
        const gasoilBonsData = {!! json_encode(collect($dataParMois)->pluck('gasoil_bons')->toArray()) !!};
        const essenceBonsData = {!! json_encode(collect($dataParMois)->pluck('essence_bons')->toArray()) !!};
        
        const ctx = document.getElementById('monthlyChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: moisLabels,
                datasets: [
                    {
                        label: 'Gasoil - Relevés',
                        data: gasoilRelevesData,
                        backgroundColor: 'rgba(255, 193, 7, 0.7)',
                        borderColor: 'rgb(255, 193, 7)',
                        borderWidth: 1
                    },
                    {
                        label: 'Essence - Relevés',
                        data: essenceRelevesData,
                        backgroundColor: 'rgba(13, 202, 240, 0.7)',
                        borderColor: 'rgb(13, 202, 240)',
                        borderWidth: 1
                    },
                    {
                        label: 'Gasoil - Bons',
                        data: gasoilBonsData,
                        backgroundColor: 'rgba(220, 53, 69, 0.5)',
                        borderColor: 'rgb(220, 53, 69)',
                        borderWidth: 1,
                        type: 'line'
                    },
                    {
                        label: 'Essence - Bons',
                        data: essenceBonsData,
                        backgroundColor: 'rgba(25, 135, 84, 0.5)',
                        borderColor: 'rgb(25, 135, 84)',
                        borderWidth: 1,
                        type: 'line'
                    }
                ]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'Distribution mensuelle - Année {{ $year }}'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': ' + context.raw.toLocaleString() + ' L';
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Litres'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Mois'
                        }
                    }
                }
            }
        });

        // Graphique camembert relevés
        const relevesCtx = document.getElementById('relevesPieChart').getContext('2d');
        new Chart(relevesCtx, {
            type: 'pie',
            data: {
                labels: ['Gasoil', 'Essence'],
                datasets: [{
                    data: [{{ $totalAnnuel['gasoil_releves'] }}, {{ $totalAnnuel['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 value = context.raw || 0;
                                const total = {{ $totalAnnuel['total_releves'] }};
                                const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                return `${context.label}: ${value.toLocaleString()} L (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });

        // Graphique camembert bons
        const bonsCtx = document.getElementById('bonsPieChart').getContext('2d');
        new Chart(bonsCtx, {
            type: 'pie',
            data: {
                labels: ['Gasoil', 'Essence'],
                datasets: [{
                    data: [{{ $totalAnnuel['gasoil_bons'] }}, {{ $totalAnnuel['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 value = context.raw || 0;
                                const total = {{ $totalAnnuel['total_bons'] }};
                                const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                return `${context.label}: ${value.toLocaleString()} L (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    </script>

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