@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);
                        
                        $moisRestants = 0;
                        $semainesRestantes = 0;
                        $joursRestantsFinal = 0;
                        
                        if ($joursRestants > 0) {
                            $joursTotalRestants = $joursRestants;
                            $moisRestants = floor($joursTotalRestants / 30);
                            $joursApresMois = $joursTotalRestants % 30;
                            $semainesRestantes = floor($joursApresMois / 7);
                            $joursRestantsFinal = $joursApresMois % 7;
                        }
                        
                        $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';
                        }
                        
                        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';
                            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">
                            @php
                                $isExpired = $abonnement->statut == 'Expiré' || $joursRestants < 0;
                            @endphp
                            @if($isExpired)
                            <button type="button" 
                                    onclick="openRenewModal('{{ $abonnement->id }}', '{{ $abonnement->gps_numero }}', '{{ $abonnement->client->prenom }} {{ $abonnement->client->nom }}', '{{ $abonnement->type_abonnement }}', '{{ $abonnement->engin_type }}', '{{ $abonnement->engin_immatriculation }}')"
                                    class="text-green-600 hover:text-green-900 mr-3" title="Renouveler">
                                <i class="fas fa-sync"></i>
                            </button>
                            @endif
                            <a href="{{ route('abonnements.edit', $abonnement) }}" class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></a>
                            <a href="{{ route('abonnements.show', $abonnement) }}" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a>
                            <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></a>
                            <form action="{{ route('abonnements.destroy', $abonnement) }}" method="POST" class="inline" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cet abonnement ? Cette action est irréversible.');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
                            </form>
                        </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>

<!-- Modal de renouvellement simplifié -->
<div id="renewModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="closeRenewModal()"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full">
            <form id="renewForm" method="POST">
                @csrf
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-sync text-green-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                                Renouveler l'abonnement
                            </h3>
                            <div class="mt-4 bg-gray-50 rounded-lg p-4">
                                <p class="text-sm font-semibold text-gray-700 mb-2">Informations de l'abonnement:</p>
                                <div class="text-sm text-gray-600 space-y-1">
                                    <p><span class="font-medium">Client:</span> <span id="modalClientName"></span></p>
                                    <p><span class="font-medium">Numéro GPS:</span> <span id="modalGpsNumero"></span></p>
                                    <p><span class="font-medium">Type d'engin:</span> <span id="modalEnginType"></span></p>
                                    <p><span class="font-medium">Immatriculation:</span> <span id="modalEnginImmat"></span></p>
                                    <p><span class="font-medium">Durée:</span> <span id="modalDuree"></span> mois</p>
                                </div>
                            </div>
                            <p class="mt-4 text-sm text-gray-500">
                                Cliquez sur "Confirmer" pour renouveler cet abonnement avec les mêmes informations.
                            </p>
                            <input type="hidden" name="type_abonnement" id="inputTypeAbonnement">
                            <input type="hidden" name="date_debut" value="{{ date('Y-m-d') }}">
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">
                        <i class="fas fa-check mr-2"></i> Confirmer le renouvellement
                    </button>
                    <button type="button" onclick="closeRenewModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        Annuler
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function openRenewModal(abonnementId, gpsNumero, clientName, duree, enginType, enginImmat) {
    document.getElementById('modalGpsNumero').textContent = gpsNumero;
    document.getElementById('modalClientName').textContent = clientName;
    document.getElementById('modalEnginType').textContent = enginType;
    document.getElementById('modalEnginImmat').textContent = enginImmat;
    document.getElementById('modalDuree').textContent = duree;
    document.getElementById('inputTypeAbonnement').value = duree;
    document.getElementById('renewForm').action = '/abonnements/' + abonnementId + '/renew';
    document.getElementById('renewModal').classList.remove('hidden');
}

function closeRenewModal() {
    document.getElementById('renewModal').classList.add('hidden');
}

document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeRenewModal();
    }
});
</script>
@endsection