@extends('layouts.app')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">Gestion des Abonnements</h1>
</div>

@if(session('success'))
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
    <span class="block sm:inline">{{ session('success') }}</span>
</div>
@endif

<!-- Formulaire de recherche -->
<div class="bg-white shadow rounded-lg p-6 mb-6">
    <form method="GET" action="{{ route('abonnements.index') }}" class="flex flex-wrap gap-4 items-end">
        <div class="flex-1 min-w-[250px]">
            <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Rechercher</label>
            <input type="text" name="search" id="search" value="{{ request('search') }}" 
                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" 
                   placeholder="Nom, prénom, numéro GPS, type, statut...">
        </div>
        
        <div class="w-48">
            <label for="statut" class="block text-sm font-medium text-gray-700 mb-1">Statut</label>
            <select name="statut" id="statut" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                <option value="">Tous les statuts</option>
                <option value="Actif" {{ request('statut') == 'Actif' ? 'selected' : '' }}>Actif</option>
                <option value="En attente" {{ request('statut') == 'En attente' ? 'selected' : '' }}>En attente</option>
                <option value="Expiré" {{ request('statut') == 'Expiré' ? 'selected' : '' }}>Expiré</option>
            </select>
        </div>

        <div class="w-48">
            <label for="type_abonnement" class="block text-sm font-medium text-gray-700 mb-1">Type d'abonnement</label>
            <select name="type_abonnement" id="type_abonnement" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                <option value="">Tous les types</option>
                @for($i = 1; $i <= 12; $i++)
                    <option value="{{ $i }}" {{ request('type_abonnement') == $i ? 'selected' : '' }}>{{ $i }} mois</option>
                @endfor
            </select>
        </div>

        <div class="flex gap-2">
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                <i class="fas fa-search mr-2"></i>Rechercher
            </button>
            <a href="{{ route('abonnements.index') }}" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                <i class="fas fa-times mr-2"></i>Effacer
            </a>
        </div>
    </form>
</div>

<div class="bg-white shadow rounded-lg overflow-hidden">
    <div class="px-4 py-5 sm:p-6">
        @if($abonnements->count() > 0)
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prix</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Début</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fin</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Temps restant</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($abonnements as $abonnement)
                    @php
                        $now = \Carbon\Carbon::now();
                        $dateFin = \Carbon\Carbon::parse($abonnement->date_fin);
                        $joursRestants = $now->diffInDays($dateFin, false); // false pour avoir des valeurs négatives si expiré
                        
                        // Calcul SIMPLIFIÉ avec floor() pour garantir des entiers
                        $moisRestants = 0;
                        $semainesRestantes = 0;
                        $joursRestantsFinal = 0;
                        
                        if ($joursRestants > 0) {
                            // Méthode simple et fiable
                            $joursTotalRestants = $joursRestants;
                            
                            // Mois entiers
                            $moisRestants = floor($joursTotalRestants / 30);
                            $joursApresMois = $joursTotalRestants % 30;
                            
                            // Semaines entières
                            $semainesRestantes = floor($joursApresMois / 7);
                            $joursRestantsFinal = $joursApresMois % 7;
                        }
                        
                        // Formatage du texte dans le format "7M 3S 4J"
                        $texte = '';
                        if ($moisRestants > 0) {
                            $texte .= $moisRestants . 'M';
                        }
                        if ($semainesRestantes > 0) {
                            if ($texte !== '') $texte .= ' ';
                            $texte .= $semainesRestantes . 'S';
                        }
                        if ($joursRestantsFinal > 0 || ($moisRestants === 0 && $semainesRestantes === 0 && $joursRestants > 0)) {
                            if ($texte !== '') $texte .= ' ';
                            $texte .= $joursRestantsFinal . 'J';
                        }
                        
                        // Déterminer la classe de couleur en fonction des jours restants
                        if ($joursRestants < 0) {
                            $couleur = 'text-red-600';
                            $texte = 'Expiré';
                        } elseif ($joursRestants == 0) {
                            $couleur = 'text-orange-600';
                            $texte = 'Dernier jour';
                        } elseif ($joursRestants <= 7) {
                            $couleur = 'text-orange-600';
                            // Pour moins d'une semaine, on affiche seulement les jours
                            if ($moisRestants == 0 && $semainesRestantes == 0) {
                                $texte = $joursRestants . 'J';
                            }
                        } else {
                            $couleur = 'text-green-600';
                        }
                    @endphp
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">{{ $abonnement->client->prenom }} {{ $abonnement->client->nom }}</div>
                                    <div class="text-sm text-gray-500">{{$abonnement->gps_numero}}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $abonnement->type_abonnement }} mois
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ number_format($abonnement->prix, 0, ',', ' ') }} FCFA
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $abonnement->date_debut->format('d/m/Y') }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $abonnement->date_fin->format('d/m/Y') }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium {{ $couleur }}">
                            {{ $texte }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if($abonnement->statut == 'Actif')
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                Actif
                            </span>
                            @elseif($abonnement->statut == 'En attente')
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                En attente
                            </span>
                            @elseif($abonnement->statut == 'Expiré')
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                Expiré
                            </span>
                            @else
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                {{ $abonnement->statut }}
                            </span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <a href="{{ route('abonnements.show', $abonnement) }}" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i>
                            <a href="{{ route('paiements.index', $abonnement) }}" class="text-green-600 hover:text-green-900 mr-3"><i class="fa-solid fa-money-bill-wave mr-2"></i>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="mt-4">
            {{ $abonnements->links() }}
        </div>
        @else
        <div class="text-center py-8">
            <i class="fas fa-search text-gray-400 text-4xl mb-4"></i>
            <p class="text-gray-500 text-lg">Aucun abonnement trouvé</p>
            @if(request()->hasAny(['search', 'statut', 'type_abonnement']))
            <a href="{{ route('abonnements.index') }}" class="text-blue-600 hover:text-blue-800 mt-2 inline-block">
                Afficher tous les abonnements
            </a>
            @endif
        </div>
        @endif
    </div>
</div>

<!-- Légende pour les couleurs -->
<div class="mt-4 bg-gray-50 p-4 rounded-lg">
    <h3 class="text-sm font-semibold mb-2">Légende des temps restants:</h3>
    <div class="flex flex-wrap gap-4 text-xs">
        <div class="flex items-center">
            <span class="w-3 h-3 bg-green-600 rounded-full mr-1"></span>
            <span class="text-green-600">+7 jours : Abonnement valide</span>
        </div>
        <div class="flex items-center">
            <span class="w-3 h-3 bg-orange-600 rounded-full mr-1"></span>
            <span class="text-orange-600">0-7 jours : Bientôt expiré</span>
        </div>
        <div class="flex items-center">
            <span class="w-3 h-3 bg-red-600 rounded-full mr-1"></span>
            <span class="text-red-600">Négatif : Expiré</span>
        </div>
    </div>
</div>
@endsection