@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">Détails du Paiement</h1>
        <div>
            <button onclick="openEditModal()" class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded mr-2">
                <i class="fa-solid fa-pen mr-2"></i> Modifier
            </button>
            <a href="{{ route('paiements.index', $paiement->abonnement) }}" class="bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded">
                <i class="fa-solid fa-arrow-left mr-2"></i> Retour
            </a>
        </div>
    </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

    <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
        <div class="px-4 py-5 sm:px-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
                Informations du paiement
            </h3>
        </div>
        <div class="border-t border-gray-200">
            <dl>
                <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Client
                    </dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ $paiement->abonnement->client->prenom }} {{ $paiement->abonnement->client->nom }}
                    </dd>
                </div>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Abonnement
                    </dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ $paiement->abonnement->type_abonnement }} mois - 
                        {{ number_format($paiement->abonnement->prix, 0, ',', ' ') }} FCFA
                    </dd>
                </div>
                <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Montant payé
                    </dt>
                    <dd class="mt-1 text-sm text-green-600 font-bold sm:mt-0 sm:col-span-2">
                        {{ number_format($paiement->montant, 0, ',', ' ') }} FCFA
                    </dd>
                </div>
                @php
                    // Calcul du reste à payer
                    $abonnement = $paiement->abonnement;
                    $totalAbonnement = $abonnement->prix;
                    $paiements = $abonnement->paiements()->where('id', '<=', $paiement->id)->get();
                    $totalPaye = $paiements->sum('montant');
                    $resteAPayer = max(0, $totalAbonnement - $totalPaye);
                @endphp
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Prix abonnement
                    </dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ number_format($totalAbonnement, 0, ',', ' ') }} FCFA
                    </dd>
                </div>
                <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Total payé
                    </dt>
                    <dd class="mt-1 text-sm text-green-600 font-bold sm:mt-0 sm:col-span-2">
                        {{ number_format($totalPaye, 0, ',', ' ') }} FCFA
                    </dd>
                </div>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Reste à payer
                    </dt>
                    <dd class="mt-1 text-sm font-bold sm:mt-0 sm:col-span-2 {{ $resteAPayer > 0 ? 'text-red-600' : 'text-green-600' }}">
                        {{ number_format($resteAPayer, 0, ',', ' ') }} FCFA
                    </dd>
                </div>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Date de paiement
                    </dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ \Carbon\Carbon::parse($paiement->date_paiement)->format('d/m/Y') }}
                    </dd>
                </div>
                <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Méthode de paiement
                    </dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ $paiement->methode_paiement }}
                    </dd>
                </div>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Référence
                    </dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ $paiement->reference ?? 'Aucune référence' }}
                    </dd>
                </div>
                
                <!-- CORRECTION : Afficher la facture du paiement si elle existe -->
                @if($paiement->facture_path)
                <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Preuve de paiement
                    </dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        <div class="flex items-center">
                            <a href="{{ asset('storage/' . $paiement->facture_path) }}" target="_blank" class="text-blue-600 hover:text-blue-800 mr-4"></a>
                                <i class="fa-solid fa-file-invoice mr-2"></i> Voir la preuve
                            <div class="border rounded-lg p-2">
                                <img src="{{ asset('storage/' . $paiement->facture_path) }}" alt="Facture du paiement" class="h-32 object-contain">
                                <p class="text-xs text-center mt-2 text-gray-500">Aperçu de la preuve</p>
                            </div>
                        </div>
                    </dd>
                </div>
                @else
                <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Facture du paiement
                    </dt>
                    <dd class="mt-1 text-sm text-gray-500 sm:mt-0 sm:col-span-2">
                        Aucune facture attachée à ce paiement
                    </dd>
                </div>
                @endif
                
                <!-- Afficher aussi la facture de l'abonnement si elle existe -->
                @if($paiement->abonnement->facture_path)
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Facture de l'abonnement
                    </dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        <div class="flex items-center">
                            <a href="{{ asset('storage/' . $paiement->abonnement->facture_path) }}" target="_blank" class="text-blue-600 hover:text-blue-800 mr-4">
                                <i class="fa-solid fa-file-invoice mr-2"></i> Voir la facture
                            </a>
                            <div class="border rounded-lg p-2">
                                <img src="{{ asset('storage/' . $paiement->abonnement->facture_path) }}" alt="Facture de l'abonnement" class="h-32 object-contain">
                                <p class="text-xs text-center mt-2 text-gray-500">Aperçu de la facture d'abonnement</p>
                            </div>
                        </div>
                    </dd>
                </div>
                @endif
                
                <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Date de création
                    </dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ $paiement->created_at->format('d/m/Y H:i') }}
                    </dd>
                </div>
            </dl>
        </div>
    </div>
</div>

<!-- Modal d'édition -->
<div id="editModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">Modifier le paiement</h3>
                <button onclick="closeEditModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fa-solid fa-times"></i>
                </button>
            </div>

            <form action="{{ route('paiements.update', $paiement) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="montant">
                        Montant (FCFA) *
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="montant" name="montant" type="number" step="0.01" placeholder="Montant" required value="{{ $paiement->montant }}">
                </div>
                
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="date_paiement">
                        Date de paiement *
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="date_paiement" name="date_paiement" type="date" required value="{{ \Carbon\Carbon::parse($paiement->date_paiement)->format('Y-m-d') }}">
                </div>
                
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="methode_paiement">
                        Méthode de paiement *
                    </label>
                    <select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="methode_paiement" name="methode_paiement" required>
                        <option value="Espèces" {{ $paiement->methode_paiement == 'Espèces' ? 'selected' : '' }}>Espèces</option>
                        <option value="Mobile Money" {{ $paiement->methode_paiement == 'Mobile Money' ? 'selected' : '' }}>Mobile Money</option>
                        <option value="Virement" {{ $paiement->methode_paiement == 'Virement' ? 'selected' : '' }}>Virement</option>
                        <option value="Carte" {{ $paiement->methode_paiement == 'Carte' ? 'selected' : '' }}>Carte</option>
                    </select>
                </div>
                
                <div class="mb-6">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="reference">
                        Référence
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="reference" name="reference" type="text" placeholder="Référence du paiement" value="{{ $paiement->reference }}">
                </div>
                
                <!-- Ajout du champ pour modifier la facture dans le modal -->
                <div class="mb-6">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="facture">
                        Changer la facture
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="facture" name="facture" type="file" accept="image/*">
                    <p class="text-xs text-gray-500 mt-1">Formats acceptés: JPEG, PNG, JPG, GIF. Taille max: 2MB</p>
                    @if($paiement->facture_path)
                    <p class="text-xs text-blue-500 mt-1">Facture actuelle: <a href="{{ asset('storage/' . $paiement->facture_path) }}" target="_blank" class="underline">Voir</a></p>
                    @endif
                </div>
                
                <div class="flex items-center justify-between">
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                        Mettre à jour
                    </button>
                    <button type="button" onclick="closeEditModal()" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
                        Annuler
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function openEditModal() {
        document.getElementById('editModal').classList.remove('hidden');
    }

    function closeEditModal() {
        document.getElementById('editModal').classList.add('hidden');
    }

    // Fermer le modal en cliquant à l'extérieur
    window.onclick = function(event) {
        const modal = document.getElementById('editModal');
        if (event.target === modal) {
            closeEditModal();
        }
    }
</script>
@endsection