@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <!-- En-tête -->
    <div class="bg-white shadow rounded-lg p-6 mb-6">
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold text-gray-800">Rapports Complets</h1>
                <p class="text-gray-600">Analyse détaillée des performances</p>
            </div>
            <div class="flex items-center space-x-4">
                <!-- Filtres de date -->
                <form method="GET" class="flex items-center space-x-3">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Du</label>
                        <input type="date" name="date_debut" value="{{ $dateDebut }}" 
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Au</label>
                        <input type="date" name="date_fin" value="{{ $dateFin }}" 
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    </div>
                    <button type="submit" class="mt-6 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
                        <i class="fa-solid fa-filter mr-2"></i>Filtrer
                    </button>
                </form>
                
            </div>
        </div>
    </div>

    <!-- Cartes de statistiques -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white shadow rounded-lg p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                    <i class="fa-solid fa-users text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h2 class="text-gray-500">Clients Total</h2>
                    <p class="text-3xl font-bold">{{ $stats['total_clients'] }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white shadow rounded-lg p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-600">
                    <i class="fa-solid fa-user-tie text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h2 class="text-gray-500">Agents</h2>
                    <p class="text-3xl font-bold">{{ $stats['total_agents'] }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white shadow rounded-lg p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-purple-100 text-purple-600">
                    <i class="fa-solid fa-receipt text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h2 class="text-gray-500">Abonnements Actifs</h2>
                    <p class="text-3xl font-bold">{{ $stats['abonnements_actifs'] }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white shadow rounded-lg p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-orange-100 text-orange-600">
                    <i class="fa-solid fa-chart-line text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h2 class="text-gray-500">CA Total</h2>
                    <p class="text-3xl font-bold">{{ number_format($caPaiements, 0, ',', ' ') }} FCFA</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Chiffre d'affaires détaillé -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <div class="bg-white shadow rounded-lg p-6">
            <h2 class="text-xl font-bold mb-4 text-gray-800">Chiffre d'affaires</h2>
            <div class="grid grid-cols-2 gap-4">
                <div class="text-center p-4 bg-blue-50 rounded-lg">
                    <div class="text-2xl font-bold text-blue-600">
                        {{ number_format($caAbonnements, 0, ',', ' ') }} FCFA
                    </div>
                    <p class="text-sm text-gray-600">Abonnements</p>
                </div>
                <div class="text-center p-4 bg-green-50 rounded-lg">
                    <div class="text-2xl font-bold text-green-600">
                        {{ number_format($caPaiements, 0, ',', ' ') }} FCFA
                    </div>
                    <p class="text-sm text-gray-600">Paiements</p>
                </div>
            </div>
        </div>

        <div class="bg-white shadow rounded-lg p-6">
            <h2 class="text-xl font-bold mb-4 text-gray-800">Évolution Mensuelle</h2>
            <div class="space-y-4">
                @php
                    $abonnements = array_column($evolutionMensuelle, 'abonnements');
                    $paiements = array_column($evolutionMensuelle, 'paiements');
                    $allValues = array_merge($abonnements, $paiements);
                    $maxValeur = max($allValues);
                    $maxValeur = max($maxValeur, 1); // Éviter division par zéro
                @endphp
                
                @foreach($evolutionMensuelle as $mois)
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span class="font-medium">{{ $mois['mois'] }}</span>
                        <span class="text-xs">
                            <span class="text-blue-600">Abonnements: {{ number_format($mois['abonnements'], 0, ',', ' ') }} Fcfa</span>
                            <span class="mx-2">|</span>
                            <span class="text-green-600">Paiements: {{ number_format($mois['paiements'], 0, ',', ' ') }} Fcfa</span>
                        </span>
                    </div>
                    <!-- Barre de progression -->
                    <div class="relative w-full h-6 bg-gray-200 rounded-full overflow-hidden">
                        <!-- Barre totale (abonnements) -->
                        <div class="absolute top-0 left-0 h-full bg-blue-400" 
                             style="width: {{ $maxValeur > 0 ? ($mois['abonnements'] / $maxValeur * 100) : 0 }}%">
                        </div>
                        <!-- Barre paiements superposée -->
                        <div class="absolute top-0 left-0 h-full bg-green-500" 
                             style="width: {{ $maxValeur > 0 ? ($mois['paiements'] / $maxValeur * 100) : 0 }}%">
                        </div>
                    </div>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-blue-500">■ Montant abonnement</span>
                        <span class="text-green-500">■ Montant payé</span>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>



    <!-- Répartition par type d'abonnement -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <div class="bg-white shadow rounded-lg p-6">
            <h2 class="text-xl font-bold mb-4 text-gray-800">Répartition par Type</h2>
            <div class="space-y-4">
                @foreach($abonnementsParType as $type)
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span>{{ $type->type_abonnement }} mois</span>
                        <span>{{ $type->count }} ({{ number_format($type->total, 0, ',', ' ') }} FCFA)</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-purple-600 h-2 rounded-full" 
                             style="width: {{ $type->count > 0 ? ($type->count / $abonnementsParType->sum('count') * 100) : 0 }}%">
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <div class="bg-white shadow rounded-lg p-6">
            <h2 class="text-xl font-bold mb-4 text-gray-800">Méthodes de Paiement</h2>
            <div class="space-y-4">
                @foreach($paiementsParMethode as $methode)
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span>{{ $methode->methode_paiement }}</span>
                        <span>{{ $methode->count }} ({{ number_format($methode->total, 0, ',', ' ') }} FCFA)</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-green-600 h-2 rounded-full" 
                             style="width: {{ $methode->count > 0 ? ($methode->count / $paiementsParMethode->sum('count') * 100) : 0 }}%">
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<style>
    @media print {
        .no-print {
            display: none !important;
        }
        body {
            font-size: 12pt;
        }
        .bg-gray-50 {
            background-color: #f9fafb !important;
            
        }
    }
</style>
@endsection