@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold mb-6">Nouveau Paiement pour l'abonnement de {{ $abonnement->client->prenom }} {{ $abonnement->client->nom }}</h1>

    <form action="{{ route('paiements.store', $abonnement) }}" method="POST" enctype="multipart/form-data" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        @csrf
        
        <div class="mb-4">
            <h2 class="text-lg font-semibold mb-3 text-blue-800">Informations sur le paiement</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <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="{{ old('montant') }}">
                    @error('montant') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
                </div>
                
                <div>
                    <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="{{ old('date_paiement', date('Y-m-d')) }}">
                    @error('date_paiement') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
                </div>
                
                <div>
                    <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="">Sélectionner une méthode</option>
                        <option value="Espèces" {{ old('methode_paiement') == 'Espèces' ? 'selected' : '' }}>Espèces</option>
                        <option value="Mobile Money" {{ old('methode_paiement') == 'Mobile Money' ? 'selected' : '' }}>Mobile Money</option>
                        <option value="Virement" {{ old('methode_paiement') == 'Virement' ? 'selected' : '' }}>Virement</option>
                        <option value="Carte" {{ old('methode_paiement') == 'Carte' ? 'selected' : '' }}>Carte</option>
                    </select>
                    @error('methode_paiement') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
                </div>
                
                <div>
                    <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="{{ old('reference') }}">
                    @error('reference') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        <!-- Nouvelle section pour l'upload de la facture -->
        <div class="mb-6">
            <h2 class="text-lg font-semibold mb-3 text-blue-800">Preuve de paiement</h2>
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="facture">
                        Image de la preuve
                    </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>
                    @error('facture') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
                </div>
                
                <!-- Aperçu de l'image -->
                <div id="image-preview" class="hidden mt-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">Aperçu de la facture:</label>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center">
                        <img id="preview" class="max-h-48 mx-auto" src="" alt="Aperçu de la facture">
                        <p class="text-sm text-gray-500 mt-2">Image sélectionnée</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="flex items-center justify-between">
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
                Enregistrer le paiement
            </button>
            <a class="inline-block align-baseline font-bold text-sm text-blue-600 hover:text-blue-800" href="{{ route('abonnements.show', $abonnement) }}">
                Annuler
            </a>
        </div>
    </form>
</div>

<script>
    // Script pour l'aperçu de l'image
    document.getElementById('facture').addEventListener('change', function(e) {
        const file = e.target.files[0];
        const preview = document.getElementById('preview');
        const imagePreview = document.getElementById('image-preview');
        
        if (file) {
            const reader = new FileReader();
            
            reader.onload = function(e) {
                preview.src = e.target.result;
                imagePreview.classList.remove('hidden');
            }
            
            reader.readAsDataURL(file);
        } else {
            imagePreview.classList.add('hidden');
        }
    });
</script>
@endsection