@extends('layouts.app')

@section('content')
<div class="mb-6">
    <h1 class="text-2xl font-bold">Tableau de bord Administrateur</h1>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <div class="bg-white rounded-lg shadow 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">Total Clients</h2>
                <p class="text-3xl font-bold">{{ $totalClients }}</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow 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">{{ $totalAgents }}</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow 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">{{ $abonnementsActifs }}</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex items-center">
            <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
                <i class="fa-solid fa-clock text-2xl"></i>
            </div>
            <div class="ml-4">
                <h2 class="text-gray-500">Expirent bientôt</h2>
                <p class="text-3xl font-bold">{{ $abonnementsExpirant }}</p>
            </div>
        </div>
    </div>
</div>

<div class="bg-white shadow rounded-lg overflow-hidden mb-8">
    <!-- En-tête cliquable -->
    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50 cursor-pointer" 
         onclick="toggleCaIndicators()">
        <div class="flex justify-between items-center">
            <div>
                <h2 class="text-lg font-semibold text-gray-800">Indicateurs de Chiffre d'Affaires</h2>
                <p class="text-sm text-gray-600">Analyse comparative abonnements vs paiements</p>
            </div>
            <div class="transform transition-transform duration-300" id="ca-chevron-icon">
                <i class="fa-solid fa-chevron-down text-gray-600"></i>
            </div>
        </div>
    </div>
    
    <!-- Contenu pliable -->
    <div class="transition-all duration-300 ease-in-out p-6" id="ca-indicators-content">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- CA basé sur les abonnements -->
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center mb-3">
                    <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3">
                        <i class="fa-solid fa-receipt"></i>
                    </div>
                    <h2 class="text-lg font-semibold text-gray-800">CA Abonnements</h2>
                </div>
                <p class="text-2xl font-bold text-blue-600">{{ number_format($caAbonnements, 0, ',', ' ') }} FCFA</p>
                <p class="text-sm text-gray-600 mt-1">Valeur des abonnements souscrits</p>
            </div>

            <!-- CA basé sur les paiements -->
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center mb-3">
                    <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
                        <i class="fa-solid fa-money-bill-wave"></i>
                    </div>
                    <h2 class="text-lg font-semibold text-gray-800">CA Paiements</h2>
                </div>
                <p class="text-2xl font-bold text-green-600">{{ number_format($caPaiements, 0, ',', ' ') }} FCFA</p>
                <p class="text-sm text-gray-600 mt-1">Paiements effectivement perçus</p>
            </div>

            <!-- Différence entre les deux -->
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center mb-3">
                    <div class="p-2 rounded-full bg-purple-100 text-purple-600 mr-3">
                        <i class="fa-solid fa-scale-balanced"></i>
                    </div>
                    <h2 class="text-lg font-semibold text-gray-800">Différence</h2>
                </div>
                @php
                    $difference = $caAbonnements - $caPaiements;
                    $couleur = $difference > 0 ? 'text-orange-600' : 'text-purple-600';
                    $icon = $difference > 0 ? 'fa-arrow-up' : 'fa-arrow-down';
                    $texte = $difference > 0 ? 'En attente' : 'Avoir';
                @endphp
                <p class="text-2xl font-bold {{ $couleur }}">
                    {{ number_format(abs($difference), 0, ',', ' ') }} FCFA
                </p>
                <p class="text-sm text-gray-600 mt-1 flex items-center">
                    <i class="fa-solid {{ $icon }} mr-1 {{ $couleur }}"></i>
                    {{ $texte }}
                </p>
            </div>
        </div>

        <!-- Légende explicative -->
        <div class="mt-6 p-4 bg-gray-50 rounded-lg">
            <h3 class="text-sm font-semibold text-gray-800 mb-2 flex items-center">
                <i class="fa-solid fa-circle-info mr-2"></i> Comprendre les indicateurs
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
                <div class="flex items-start">
                    <span class="w-3 h-3 bg-blue-600 rounded-full mt-1 mr-2"></span>
                    <span><strong>CA Abonnements:</strong> Montant total des abonnements souscrits ce mois</span>
                </div>
                <div class="flex items-start">
                    <span class="w-3 h-3 bg-green-600 rounded-full mt-1 mr-2"></span>
                    <span><strong>CA Paiements:</strong> Montant réellement encaissé ce mois</span>
                </div>
                <div class="flex items-start">
                    <span class="w-3 h-3 bg-purple-600 rounded-full mt-1 mr-2"></span>
                    <span><strong>Différence:</strong> Écart entre le théorique et le réel (impayés ou avoirs)</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="bg-white rounded-lg shadow p-6">
    <h2 class="text-xl font-bold mb-4">Actions rapides</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <a href="{{ route('clients.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg text-center">
            <i class="fa-solid fa-user-plus text-2xl mb-2"></i>
            <p>Nouveau Client</p>
        </a>
        <a href="{{ route('clients.index') }}" class="bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg text-center">
            <i class="fa-solid fa-users text-2xl mb-2"></i>
            <p>Voir Clients</p>
        </a>
        <a href="{{ route('abonnements.index') }}" class="bg-purple-600 hover:bg-purple-700 text-white py-3 px-4 rounded-lg text-center">
            <i class="fa-solid fa-receipt text-2xl mb-2"></i>
            <p>Abonnements</p>
        </a>
        <a href="{{ route('reports.index') }}" class="bg-yellow-600 hover:bg-yellow-700 text-white py-3 px-4 rounded-lg text-center">
            <i class="fa-solid fa-chart-bar text-2xl mb-2"></i>
            <p>Rapports</p>
        </a>
    </div>
</div>

<div class="bg-white shadow rounded-lg overflow-hidden mb-8">
    <!-- En-tête cliquable -->
    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50 cursor-pointer" 
         onclick="toggleClientGrid()">
        <div class="flex justify-between items-center">
            <div>
                <h2 class="text-lg font-semibold text-gray-800">État des Abonnements Clients</h2>
                <p class="text-sm text-gray-600">Visualisation en temps réel de la progression</p>
            </div>
            <div class="transform transition-transform duration-300" id="chevron-icon">
                <i class="fa-solid fa-chevron-down text-gray-600"></i>
            </div>
        </div>
    </div>
    
    <!-- Barre de recherche et filtres -->
    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div class="relative flex-grow">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i class="fa-solid fa-magnifying-glass text-gray-400"></i>
                </div>
                <input type="text" id="client-search" placeholder="Rechercher par nom, contact, type d'engin..." 
                       class="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            </div>
            
            <div class="flex flex-wrap gap-2">
                <select id="filter-status" class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    <option value="">Tous les statuts</option>
                    <option value="valide">Valide</option>
                    <option value="attention">Attention</option>
                    <option value="expire">Expiré</option>
                    <option value="sans-abonnement">Sans abonnement</option>
                </select>
                
                <button id="reset-filters" class="px-3 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 text-sm">
                    <i class="fa-solid fa-rotate-left mr-1"></i> Réinitialiser
                </button>
            </div>
        </div>
    </div>
    
    <!-- Contenu pliable -->
    <div class="transition-all duration-300 ease-in-out" id="client-grid-content">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6" id="clients-container">
            @foreach($clients as $client)
            @php
                // Récupérer tous les abonnements actifs du client
                $abonnementsActifs = $client->abonnements_actifs;
                $hasMultipleAbonnements = $abonnementsActifs->count() > 1;
                $principalAbonnement = $abonnementsActifs->first();
                
                // Préparer les données pour le modal
                $abonnementsData = [];
                foreach ($abonnementsActifs as $abonnement) {
                    $now = \Carbon\Carbon::now();
                    $dateFin = \Carbon\Carbon::parse($abonnement->date_fin);
                    $joursTotal = $abonnement->date_debut->diffInDays($abonnement->date_fin);
                    $joursRestants = $now->diffInDays($dateFin, false);
                    
                    $pourcentageTemps = $joursRestants > 0 ? 
                        min(100, ($joursTotal - $joursRestants) / $joursTotal * 100) : 100;
                    
                    $totalPaye = $abonnement->paiements->sum('montant');
                    $difference = $totalPaye - $abonnement->prix;
                    
                    if ($joursRestants < 0) {
                        $couleur = 'text-red-500';
                        $icon = 'fa-exclamation-triangle';
                    } elseif ($joursRestants <= 7) {
                        $couleur = 'text-orange-500';
                        $icon = 'fa-clock';
                    } else {
                        $couleur = 'text-green-500';
                        $icon = 'fa-check-circle';
                    }
                    
                    if ($joursRestants < 0) {
                        $formatJours = 'Expiré';
                    } else {
                        $mois = floor($joursRestants / 30);
                        $semaines = floor(($joursRestants % 30) / 7);
                        $jours = $joursRestants % 7;
                        
                        $formatJours = '';
                        if ($mois > 0) $formatJours .= $mois . 'M ';
                        if ($semaines > 0) $formatJours .= $semaines . 'S ';
                        if ($jours > 0 || ($mois == 0 && $semaines == 0)) $formatJours .= $jours . 'J';
                        $formatJours = trim($formatJours);
                    }

                    $abonnementsData[] = [
                        'id' => $abonnement->id,
                        'type_abonnement' => $abonnement->type_abonnement,
                        'prix' => number_format($abonnement->prix, 0, '', ' '),
                        'total_paye' => number_format($totalPaye, 0, '', ' '),
                        'difference' => $difference,
                        'date_debut' => $abonnement->date_debut->format('d/m/Y'),
                        'date_fin' => $abonnement->date_fin->format('d/m/Y'),
                        'pourcentage_temps' => round($pourcentageTemps),
                        'couleur' => $couleur,
                        'icon' => $icon,
                        'jours_restants' => $formatJours,
                        'prix_num' => $abonnement->prix,
                        'total_paye_num' => $totalPaye
                    ];
                }
                
                if ($principalAbonnement) {
                    $now = \Carbon\Carbon::now();
                    $dateFin = \Carbon\Carbon::parse($principalAbonnement->date_fin);
                    $joursTotal = $principalAbonnement->date_debut->diffInDays($principalAbonnement->date_fin);
                    $joursRestants = $now->diffInDays($dateFin, false);
                    
                    // Calcul du pourcentage de progression temporelle
                    $pourcentageTemps = $joursRestants > 0 ? min(100, ($joursTotal - $joursRestants) / $joursTotal * 100) : 100;
                    
                    // Calcul du ratio paiement/abonnement
                    $totalPaye = $principalAbonnement->paiements->sum('montant');
                    $prixAbonnement = $principalAbonnement->prix;
                    $ratioPaiement = $prixAbonnement > 0 ? min(100, ($totalPaye / $prixAbonnement) * 100) : 0;
                    $difference = $totalPaye - $prixAbonnement;
                    
                    // Format des jours restants
                    if ($joursRestants < 0) {
                        $formatJours = 'Expiré';
                    } else {
                        $mois = floor($joursRestants / 30);
                        $semaines = floor(($joursRestants % 30) / 7);
                        $jours = $joursRestants % 7;
                        
                        $formatJours = '';
                        if ($mois > 0) $formatJours .= $mois . 'M ';
                        if ($semaines > 0) $formatJours .= $semaines . 'S ';
                        if ($jours > 0 || ($mois == 0 && $semaines == 0)) $formatJours .= $jours . 'J';
                        $formatJours = trim($formatJours);
                    }
                    
                    // Déterminer la couleur en fonction des jours restants
                    if ($joursRestants < 0) {
                        $couleur = 'text-red-500';
                        $couleurBg = 'bg-red-500';
                        $couleurStatut = 'bg-red-100 text-red-800';
                        $texteStatut = 'Expiré';
                        $icon = 'fa-exclamation-triangle';
                    } elseif ($joursRestants <= 7) {
                        $couleur = 'text-orange-500';
                        $couleurBg = 'bg-orange-500';
                        $couleurStatut = 'bg-orange-100 text-orange-800';
                        $texteStatut = $formatJours;
                        $icon = 'fa-clock';
                    } else {
                        $couleur = 'text-green-500';
                        $couleurBg = 'bg-green-500';
                        $couleurStatut = 'bg-green-100 text-green-800';
                        $texteStatut = $formatJours;
                        $icon = 'fa-check-circle';
                    }
                }
            @endphp
            
            <div class="client-card bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow duration-200 p-5 relative" 
                 data-client-id="{{ $client->id }}"
                 data-status="{{ $principalAbonnement ? ($joursRestants < 0 ? 'expire' : ($joursRestants <= 7 ? 'attention' : 'valide')) : 'sans-abonnement' }}"
                 data-name="{{ strtolower($client->prenom . ' ' . $client->nom) }}"
                 data-contact="{{ $client->contact }}"
                 data-engin="{{ strtolower($client->engin_type) }}"
                 data-abonnements="{{ htmlspecialchars(json_encode($abonnementsData), ENT_QUOTES, 'UTF-8') }}">
                <!-- Indicateur d'abonnements multiples -->
                @if($hasMultipleAbonnements)
                <div class="absolute top-2 right-2">
                    <button class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium multiple-abonnements hover:bg-blue-200 transition-colors"
                          title="Voir tous les abonnements"
                          onclick="showClientAbonnements({{ $client->id }}, '{{ $client->prenom }} {{ $client->nom }}')">
                        +{{ $abonnementsActifs->count() - 1 }}
                    </button>
                </div>
                @endif

                <!-- Cercle de progression (pour la durée jusqu'à expiration) -->
                <div class="relative mx-auto mb-4 w-20 h-20">
                    @if($principalAbonnement)
                    <svg class="w-20 h-20 transform -rotate-90" viewBox="0 0 36 36">
                        <circle cx="18" cy="18" r="16" class="fill-none stroke-gray-100 stroke-2" />
                        <circle cx="18" cy="18" r="16" class="fill-none stroke-current {{ $couleur }} stroke-2"
                            stroke-dasharray="100"
                            stroke-dashoffset="{{ 100 - $pourcentageTemps }}"
                            stroke-linecap="round" />
                    </svg>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <span class="text-sm font-bold {{ $couleur }}">
                            {{ number_format($pourcentageTemps, 0) }}%
                        </span>
                    </div>
                    @else
                    <div class="w-20 h-20 rounded-full bg-gray-100 flex items-center justify-center">
                        <i class="fa-solid fa-user text-gray-400 text-2xl"></i>
                    </div>
                    @endif
                </div>

                <!-- Informations client -->
                <div class="text-center mb-3">
                    <h3 class="font-semibold text-gray-800 text-sm truncate">
                        {{ $client->prenom }} {{ $client->nom }}
                    </h3>
                    <p class="text-xs text-gray-600 truncate">{{ $client->contact }}</p>
                    <p class="text-xs text-gray-500 mt-1">{{ $client->engin_type }}</p>
                </div>

                <!-- Statut avec format de jours personnalisé -->
                <div class="text-center mb-3">
                    @if($principalAbonnement)
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $couleurStatut }}">
                        <i class="fa-solid {{ $icon }} mr-1 text-xs"></i>
                        {{ $texteStatut }}
                    </span>
                    <p class="text-xs text-gray-500 mt-1">
                        {{ $principalAbonnement->date_fin->format('d/m/Y') }}
                    </p>
                    @else
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                        <i class="fa-solid fa-ban mr-1 text-xs"></i>
                        Sans abonnement
                    </span>
                    @endif
                </div>

                <!-- Barre de progression montrant la différence de paiement -->
                @if($principalAbonnement)
                <div class="mb-3">
                    <div class="flex justify-between text-xs text-gray-600 mb-1 px-1">
                        <span>Payé: {{ number_format($totalPaye, 0) }} F</span>
                        <span>Abmt: {{ number_format($prixAbonnement, 0) }} F</span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-1.5 relative">
                        <!-- Barre de fond grise -->
                        <div class="absolute top-0 left-0 w-full h-1.5 rounded-full bg-gray-200"></div>
                        
                        <!-- Partie payée (en vert si suffisant, en orange si insuffisant) -->
                        @if($totalPaye >= $prixAbonnement)
                            <div class="absolute top-0 left-0 h-1.5 rounded-full bg-green-500" 
                                 style="width: 100%"></div>
                                 
                            <!-- Excédent de paiement (en bleu) -->
                            @if($difference > 0)
                            <div class="absolute top-0 left-0 h-1.5 rounded-full bg-blue-500" 
                                 style="width: {{ min(100, ($difference / $prixAbonnement) * 100 + 100) }}%"></div>
                            @endif
                        @else
                            <div class="absolute top-0 left-0 h-1.5 rounded-full bg-orange-500" 
                                 style="width: {{ $ratioPaiement }}%"></div>
                        @endif
                    </div>
                    
                    <!-- Légende de la différence -->
                    <div class="flex justify-between text-xs mt-1 px-1">
                        @if($difference >= 0)
                            <span class="text-green-600">Solde: +{{ number_format($difference, 0) }} F</span>
                        @else
                            <span class="text-red-600">Dû: {{ number_format(abs($difference), 0) }} F</span>
                        @endif
                    </div>
                </div>
                @endif

                <!-- Actions -->
                <div class="flex justify-center space-x-2">
                    @if($principalAbonnement)
                    <a href="{{ route('abonnements.show', $principalAbonnement) }}" 
                       class="text-blue-600 hover:text-blue-800 text-xs p-1.5 rounded-lg bg-blue-50 hover:bg-blue-100 transition-colors"
                       title="Voir détails">
                        <i class="fa-solid fa-eye"></i>
                    </a>
                    <a href="{{ route('paiements.create', $principalAbonnement) }}" 
                       class="text-green-600 hover:text-green-800 text-xs p-1.5 rounded-lg bg-green-50 hover:bg-green-100 transition-colors"
                       title="Nouveau paiement">
                        <i class="fa-solid fa-money-bill-wave"></i>
                    </a>
                    @else
                    <a href="{{ route('abonnements.create', $client) }}" 
                       class="text-blue-600 hover:text-blue-800 text-xs px-3 py-1.5 rounded-lg bg-blue-50 hover:bg-blue-100 transition-colors flex items-center"
                       title="Créer abonnement">
                        <i class="fa-solid fa-plus mr-1"></i>
                        <span>Abonnement</span>
                    </a>
                    @endif
                    
                    <!-- Bouton pour voir tous les abonnements -->
                    @if($abonnementsActifs->count() > 0)
                    <button onclick="showClientAbonnements({{ $client->id }}, '{{ $client->prenom }} {{ $client->nom }}')" 
                       class="text-purple-600 hover:text-purple-800 text-xs p-1.5 rounded-lg bg-purple-50 hover:bg-purple-100 transition-colors"
                       title="Voir tous les abonnements">
                        <i class="fa-solid fa-list"></i>
                    </button>
                    @endif
                </div>
            </div>
            @endforeach
        </div>

        <!-- Légende mise à jour -->
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-lg m-6 border border-gray-200">
            <h3 class="text-sm font-semibold text-gray-800 mb-3 flex items-center">
                <i class="fa-solid fa-circle-info mr-2"></i> Guide de lecture
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
                <div>
                    <h4 class="font-semibold text-gray-700 mb-2">Cercles de progression</h4>
                    <div class="space-y-3">
                        <div class="flex items-center p-2 bg-white rounded-lg shadow-sm">
                            <div class="relative w-8 h-8 mr-3">
                                <svg class="w-8 h-8 transform -rotate-90" viewBox="0 0 36 36">
                                    <circle cx="18" cy="18" r="16" class="fill-none stroke-green-500 stroke-2" 
                                            stroke-dasharray="100" stroke-dashoffset="30" />
                                </svg>
                            </div>
                            <div>
                                <div class="text-green-600 font-semibold">Temps écoulé</div>
                                <div class="text-gray-500">70% du temps passé</div>
                            </div>
                        </div>
                        <div class="flex items-center p-2 bg-white rounded-lg shadow-sm">
                            <div class="relative w-8 h-8 mr-3">
                                <svg class="w-8 h-8 transform -rotate-90" viewBox="0 0 36 36">
                                    <circle cx="18" cy="18" r="16" class="fill-none stroke-orange-500 stroke-2" 
                                            stroke-dasharray="100" stroke-dashoffset="80" />
                                </svg>
                            </div>
                            <div>
                                <div class="text-orange-600 font-semibold">Presque expiré</div>
                                <div class="text-gray-500">20% du temps restant</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <h4 class="font-semibold text-gray-700 mb-2">Barres de progression</h4>
                    <div class="space-y-3">
                        <div class="p-2 bg-white rounded-lg shadow-sm">
                            <div class="flex justify-between text-xs mb-1">
                                <span>Payé: 15 000 F</span>
                                <span>Abmt: 10 000 F</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-1.5 relative">
                                <div class="absolute top-0 left-0 h-1.5 rounded-full bg-green-500" style="width: 100%"></div>
                                <div class="absolute top-0 left-0 h-1.5 rounded-full bg-blue-500" style="width: 150%"></div>
                            </div>
                            <div class="text-green-600 text-xs mt-1">Solde: +5 000 F</div>
                            <div class="text-gray-500 text-xs mt-1">Excédent de paiement (bleu)</div>
                        </div>
                        <div class="p-2 bg-white rounded-lg shadow-sm">
                            <div class="flex justify-between text-xs mb-1">
                                <span>Payé: 7 000 F</span>
                                <span>Abmt: 10 000 F</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-1.5 relative">
                                <div class="absolute top-0 left-0 h-1.5 rounded-full bg-orange-500" style="width: 70%"></div>
                            </div>
                            <div class="text-red-600 text-xs mt-1">Dû: 3 000 F</div>
                            <div class="text-gray-500 text-xs mt-1">Paiement incomplet</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour afficher les abonnements -->
<div id="abonnements-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-2xl w-11/12 md:w-3/4 lg:w-2/3 max-h-screen overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-semibold text-gray-800" id="modal-client-name">Abonnements du client</h3>
            <button onclick="closeAbonnementsModal()" class="text-gray-400 hover:text-gray-600">
                <i class="fa-solid fa-xmark text-xl"></i>
            </button>
        </div>
        
        <div class="p-6 overflow-y-auto max-h-96">
            <div id="abonnements-container">
                <!-- Le contenu des abonnements sera chargé ici -->
            </div>
        </div>
        
        <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-end">
            <button onclick="closeAbonnementsModal()" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">
                Fermer
            </button>
        </div>
    </div>
</div>

<script>

  // Fonctionnalité de recherche et filtres
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('client-search');
        const statusFilter = document.getElementById('filter-status');
        const resetButton = document.getElementById('reset-filters');
        const clientCards = document.querySelectorAll('.client-card');
        
        function filterClients() {
            const searchText = searchInput.value.toLowerCase();
            const statusValue = statusFilter.value;
            
            clientCards.forEach(card => {
                const name = card.getAttribute('data-name');
                const contact = card.getAttribute('data-contact');
                const engin = card.getAttribute('data-engin');
                const status = card.getAttribute('data-status');
                
                const matchesSearch = name.includes(searchText) || 
                                    contact.includes(searchText) || 
                                    engin.includes(searchText);
                
                const matchesStatus = statusValue === '' || status === statusValue;
                
                if (matchesSearch && matchesStatus) {
                    card.classList.remove('hidden');
                } else {
                    card.classList.add('hidden');
                }
            });
        }
        
        searchInput.addEventListener('input', filterClients);
        statusFilter.addEventListener('change', filterClients);
        
        resetButton.addEventListener('click', function() {
            searchInput.value = '';
            statusFilter.value = '';
            filterClients();
        });
    });


    // Fonction pour afficher les abonnements d'un client
    function showClientAbonnements(clientId, clientName) {
        try {
            // Trouver la carte du client
            const clientCard = document.querySelector(`.client-card[data-client-id="${clientId}"]`);
            if (!clientCard) {
                throw new Error('Client non trouvé');
            }
            
            // Récupérer les données des abonnements depuis l'attribut data
            const abonnementsJson = clientCard.getAttribute('data-abonnements');
            
            // Nettoyer et parser le JSON
            let abonnementsData;
            try {
                // Remplacer les entités HTML par des guillemets normaux
                const cleanJson = abonnementsJson.replace(/&quot;/g, '"');
                abonnementsData = JSON.parse(cleanJson);
            } catch (e) {
                console.error('Erreur de parsing JSON:', e, 'Données:', abonnementsJson);
                throw new Error('Format de données invalide');
            }
            
            // Afficher le modal
            const modal = document.getElementById('abonnements-modal');
            const container = document.getElementById('abonnements-container');
            const clientNameElement = document.getElementById('modal-client-name');
            
            clientNameElement.textContent = `Abonnements de ${clientName}`;
            
            if (!abonnementsData || abonnementsData.length === 0) {
                container.innerHTML = `
                    <div class="text-center py-12">
                        <i class="fa-solid fa-inbox text-gray-400 text-4xl mb-4"></i>
                        <p class="text-gray-600">Aucun abonnement trouvé pour ce client</p>
                    </div>
                `;
            } else {
                // Afficher les abonnements
                container.innerHTML = abonnementsData.map(abonnement => `
                    <div class="bg-gray-50 rounded-lg p-6 mb-4">
                        <div class="flex flex-col md:flex-row gap-6">
                            <div class="flex-shrink-0">
                                <div class="relative mx-auto mb-4 w-20 h-20">
                                    <svg class="w-20 h-20 transform -rotate-90" viewBox="0 0 36 36">
                                        <circle cx="18" cy="18" r="16" class="fill-none stroke-gray-100 stroke-2" />
                                        <circle cx="18" cy="18" r="16" class="fill-none stroke-current ${abonnement.couleur} stroke-2"
                                            stroke-dasharray="100"
                                            stroke-dashoffset="${100 - abonnement.pourcentage_temps}"
                                            stroke-linecap="round" />
                                    </svg>
                                    <div class="absolute inset-0 flex items-center justify-center">
                                        <span class="text-sm font-bold ${abonnement.couleur}">
                                            ${abonnement.pourcentage_temps}%
                                        </span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex-grow">
                                <h4 class="text-lg font-semibold text-gray-800 mb-2">${abonnement.type_abonnement}</h4>
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                    <div>
                                        <p class="text-sm text-gray-600">Prix: <span class="font-medium">${abonnement.prix} F</span></p>
                                        <p class="text-sm text-gray-600">Payé: <span class="font-medium">${abonnement.total_paye} F</span></p>
                                        <p class="text-sm ${abonnement.difference >= 0 ? 'text-green-600' : 'text-red-600'}">
                                            ${abonnement.difference >= 0 ? 'Excédent: +' : 'Dû: '}${Math.abs(abonnement.difference).toLocaleString()} F
                                        </p>
                                    </div>
                                    
                                    <div>
                                        <p class="text-sm text-gray-600">Début: <span class="font-medium">${abonnement.date_debut}</span></p>
                                        <p class="text-sm text-gray-600">Fin: <span class="font-medium">${abonnement.date_fin}</span></p>
                                        <p class="text-sm ${abonnement.couleur}">
                                            <i class="fa-solid ${abonnement.icon} mr-1"></i> ${abonnement.jours_restants}
                                        </p>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <div class="flex justify-between text-xs text-gray-600 mb-1 px-1">
                                        <span>Payé: ${abonnement.total_paye} F</span>
                                        <span>Abmt: ${abonnement.prix} F</span>
                                    </div>
                                    <div class="w-full bg-gray-100 rounded-full h-1.5 relative">
                                        <div class="absolute top-0 left-0 w-full h-1.5 rounded-full bg-gray-200"></div>
                                        ${abonnement.difference >= 0 ? 
                                            `<div class="absolute top-0 left-0 h-1.5 rounded-full bg-green-500" style="width: 100%"></div>
                                             ${abonnement.difference > 0 ? 
                                                 `<div class="absolute top-0 left-0 h-1.5 rounded-full bg-blue-500" style="width: ${Math.min(100, (abonnement.difference / abonnement.prix_num) * 100 + 100)}%"></div>` 
                                                 : ''}`
                                            : `<div class="absolute top-0 left-0 h-1.5 rounded-full bg-orange-500" style="width: ${(abonnement.total_paye_num / abonnement.prix_num) * 100}%"></div>`
                                        }
                                    </div>
                                </div>
                                
                                <div class="flex justify-center space-x-2 mt-4">
                                    <a href="/abonnements/${abonnement.id}" 
                                       class="text-blue-600 hover:text-blue-800 text-xs px-3 py-2 rounded-lg bg-blue-50 hover:bg-blue-100 transition-colors"
                                       title="Voir détails">
                                        <i class="fa-solid fa-eye mr-1"></i> Détails
                                    </a>
                                    <a href="/paiements/create/${abonnement.id}" 
                                       class="text-green-600 hover:text-green-800 text-xs px-3 py-2 rounded-lg bg-green-50 hover:bg-green-100 transition-colors"
                                       title="Nouveau paiement">
                                        <i class="fa-solid fa-money-bill-wave mr-1"></i> Payer
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                `).join('');
            }
            
            modal.classList.remove('hidden');
            
        } catch (error) {
            console.error('Erreur:', error);
            const container = document.getElementById('abonnements-container');
            container.innerHTML = `
                <div class="text-center py-12">
                    <i class="fa-solid fa-exclamation-triangle text-red-400 text-4xl mb-4"></i>
                    <p class="text-red-600 mb-2">Erreur lors du chargement des abonnements</p>
                    <p class="text-gray-600 text-sm">${error.message}</p>
                </div>
            `;
            document.getElementById('abonnements-modal').classList.remove('hidden');
        }
    }
    
    // Fonction pour fermer le modal
    function closeAbonnementsModal() {
        document.getElementById('abonnements-modal').classList.add('hidden');
    }
    
    // Fermer le modal en cliquant à l'extérieur
    document.getElementById('abonnements-modal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeAbonnementsModal();
        }
    });
    
    // Fermer le modal avec la touche Échap
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeAbonnementsModal();
        }
    });


    // Fonction pour basculer l'affichage de la grille
    function toggleClientGrid() {
        const content = document.getElementById('client-grid-content');
        const chevron = document.getElementById('chevron-icon');
        
        if (content.classList.contains('hidden')) {
            // Ouvrir
            content.classList.remove('hidden');
            chevron.classList.remove('rotate-180');
            chevron.classList.add('rotate-0');
        } else {
            // Fermer
            content.classList.add('hidden');
            chevron.classList.remove('rotate-0');
            chevron.classList.add('rotate-180');
        }
    }

    // Fonction pour basculer l'affichage des indicateurs CA
    function toggleCaIndicators() {
        const content = document.getElementById('ca-indicators-content');
        const chevron = document.getElementById('ca-chevron-icon');
        
        if (content.classList.contains('hidden')) {
            // Ouvrir
            content.classList.remove('hidden');
            chevron.classList.remove('rotate-180');
            chevron.classList.add('rotate-0');
        } else {
            // Fermer
            content.classList.add('hidden');
            chevron.classList.remove('rotate-0');
            chevron.classList.add('rotate-180');
        }
    }

    // Optionnel: Fermer par défaut si beaucoup de contenu
    document.addEventListener('DOMContentLoaded', function() {
         toggleClientGrid();
         toggleCaIndicators();
     });
</script>

<style>
    .rotate-180 {
        transform: rotate(180deg);
    }
    .rotate-0 {
        transform: rotate(0deg);
    }
</style>
@endsection