@extends('layouts.site')

@section('title', 'Paiement - Sciences Afrique')

@section('content')
 <section class="relative pt-28 pb-20 overflow-hidden">
     <div class="absolute inset-0 z-0">
         <div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 rounded-full bg-blue-100/50 blur-3xl"></div>
         <div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 rounded-full bg-orange-100/50 blur-3xl"></div>
     </div>

     <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <header class="text-center mb-12">
             <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 border border-blue-100 text-blue-700 text-sm font-bold mb-6">
                 <span class="w-2 h-2 rounded-full bg-blue-600 animate-pulse"></span>
                 Paiement sécurisé
             </div>
             <h1 class="text-4xl sm:text-5xl font-black text-brand-dark leading-tight mb-3 tracking-tight">Finaliser votre <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-700 to-indigo-600">paiement</span></h1>
             <p class="text-lg text-slate-500">Choisis une méthode et confirme les détails.</p>
         </header>

         @if($errors->any())
             <div class="mb-8 p-5 bg-red-50 border border-red-100 rounded-2xl text-red-700 font-medium">
                 {{ $errors->first() }}
             </div>
         @endif

         @if(session('success'))
             <div class="mb-8 p-5 bg-green-50 border border-green-100 rounded-2xl text-green-700 font-medium">
                 {{ session('success') }}
             </div>
         @endif

         <form method="POST" action="{{ route('payments.store') }}" class="bg-white p-8 sm:p-10 rounded-3xl shadow-xl shadow-slate-200 border border-slate-100 space-y-8">
             @csrf

             <input type="hidden" name="reference_type" value="{{ $referenceType }}" />
             <input type="hidden" name="reference_id" value="{{ $referenceId }}" />

             <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                 <div>
                     <label class="block text-xs font-black uppercase tracking-widest text-slate-400 mb-2">Montant</label>
                     <input name="amount" required value="{{ old('amount', $amount) }}" step="0.01" type="number" min="0.01"
                            class="w-full px-5 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-brand-dark font-medium focus:ring-2 focus:ring-blue-500 focus:bg-white" />
                 </div>
                 <div>
                     <label class="block text-xs font-black uppercase tracking-widest text-slate-400 mb-2">Description</label>
                     <input name="description" required value="{{ old('description', $description) }}"
                            class="w-full px-5 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-brand-dark font-medium focus:ring-2 focus:ring-blue-500 focus:bg-white" />
                 </div>
             </div>

              <div>
                  <label class="block text-xs font-black uppercase tracking-widest text-slate-400 mb-4">Méthode</label>
                  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                      <label class="group flex items-center gap-4 p-6 bg-white border border-slate-100 rounded-3xl cursor-pointer hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                          <input type="radio" name="payment_method" value="stripe" class="w-5 h-5" {{ old('payment_method', $paymentMethod) === 'stripe' ? 'checked' : '' }} />
                          <div>
                              <div class="font-black text-brand-dark">Stripe</div>
                              <div class="text-slate-500 text-sm">Mode démo (traitement simulé).</div>
                          </div>
                      </label>
                      <label class="group flex items-center gap-4 p-6 bg-white border border-slate-100 rounded-3xl cursor-pointer hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                          <input type="radio" name="payment_method" value="paypal" class="w-5 h-5" {{ old('payment_method', $paymentMethod) === 'paypal' ? 'checked' : '' }} />
                          <div>
                              <div class="font-black text-brand-dark">PayPal</div>
                              <div class="text-slate-500 text-sm">Redirection PayPal (Sandbox).</div>
                          </div>
                      </label>
                      <label class="group flex items-center gap-4 p-6 bg-white border border-slate-100 rounded-3xl cursor-pointer hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                          <input type="radio" name="payment_method" value="flexpay" class="w-5 h-5" {{ old('payment_method', $paymentMethod) === 'flexpay' ? 'checked' : '' }} />
                          <div>
                              <div class="font-black text-brand-dark">FlexPay</div>
                              <div class="text-slate-500 text-sm">Airtel Money, M-Pesa, Orange Money, Visa.</div>
                          </div>
                      </label>
                  </div>
              </div>

              <div id="flexpay-phone-field" class="{{ old('payment_method', $paymentMethod) === 'flexpay' ? '' : 'hidden' }}">
                  <label class="block text-xs font-black uppercase tracking-widest text-slate-400 mb-2">Numéro de téléphone (Mobile Money)</label>
                  <input name="phone_number" id="phone_number" value="{{ old('phone_number') }}" placeholder="243XXXXXXXXX"
                         {{ old('payment_method', $paymentMethod) === 'flexpay' ? 'required' : '' }}
                         class="w-full px-5 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-brand-dark font-medium focus:ring-2 focus:ring-blue-500 focus:bg-white" />
                  <p class="text-xs text-slate-400 mt-2">Format : 243 suivi de votre numéro (ex: 243999999999)</p>
              </div>

              <button type="submit" class="w-full bg-brand-orange text-white px-8 py-4 rounded-xl font-black hover-bg-brand-orange transition-all shadow-lg shadow-orange-500/30">
                  Continuer
              </button>
          </form>
      </div>
  </section>

  @push('scripts')
  <script>
      document.querySelectorAll('input[name="payment_method"]').forEach(radio => {
          radio.addEventListener('change', function() {
              const phoneField = document.getElementById('flexpay-phone-field');
              const phoneInput = document.getElementById('phone_number');
              if (this.value === 'flexpay') {
                  phoneField.classList.remove('hidden');
                  phoneInput.required = true;
              } else {
                  phoneField.classList.add('hidden');
                  phoneInput.required = false;
              }
          });
      });
  </script>
  @endpush
  @endsection