@extends('frontend.inc.layout-front')
@section('title')
    Paiement Fedapay || {{env("APP_NAME")}}
@endsection
<script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>

<style>
  label{
    font-weight: bold;
  }
  #payer{
    color:red;
  } 
</style>
 @section('container')
    <!-- home 4grids block -->
    <section class="services-w3l-block py-5 mt-5" id="features" style="background-color: #f4f4f4; margin-bottom=-2rem;">
         
            <div class="container py-md-5 py-1">
                <div class="row">
                    <div class="col-md-12 mx-auto card">
                        <div class="row card-body mx-auto">
                        @mobile()
                            <h3 class="text-center color-theme mb-4 mt-2" style="font-size:90%; font-weight: bold;">PAIEMENT FACTURE N° {{$paiement->reference}}</h3>
                        @endmobile

                        @desktop
                            <h3 class="text-center color-theme mb-4 mt-2" style="font-weight: bold;">PAIEMENT FACTURE N° {{$paiement->reference}}</h3>
                        @enddesktop
                             <div class="mb-4"> 
                                <div class="align-items-stretch mx-auto"> 
                                    <form id="form-data" action="{{route('lionsconjointe.callback_fedapay')}}"  method="post">
                                        @csrf
                                        <input type="hidden" name="reference" id="reference" value="{{Crypt::encrypt($paiement->reference)}}">
                                        <div class="col-md-12 mb-3">
                                            <label for="label" class="form-label">Nom <i class="text-danger">*</i></label>
                                            <input type="text" value="{{$paiement->nom}}" style="text-transform: uppercase;" name="nom" id="nom" class="form-control" placeholder=""
                                              readonly  required aria-describedby="helpId"> 
                                        </div>
                                        <div class="col-md-12 mb-3">
                                            <label for="" class="form-label">Prénoms <i class="text-danger">*</i></label>
                                            <input type="text" value="{{$paiement->prenoms}}" name="prenoms" id="prenoms" class="form-control" required
                                            readonly  placeholder="" aria-describedby="helpId"> 
                                        </div>
                                        <div class="col-md-12 mb-3">
                                            <label for="" class="form-label">Téléphone <i class="text-danger"></i></label>
                                            <input type="tel" readonly value="{{$paiement->getInscription->telephone}}" name="email" id="email" class="form-control" placeholder=""
                                            readonly     aria-describedby="helpId"> 
                                        </div> 
                                        <div class="col-md-12 mb-3">
                                            <label for="" class="form-label">E-mail <i class="text-danger"></i></label>
                                            <input type="email" readonly value="{{$paiement->email}}" name="email" id="email" class="form-control" placeholder=""
                                            readonly     aria-describedby="helpId"> 
                                        </div> 
                                        <div class="col-md-12 mb-3">
                                            <label for="" class="form-label">Montant à payer <i class="text-danger">*</i></label>
                                            <input type="number" readonly value="{{$paiement->montant_total}}" required name="montant_total" id="montant_total" class="form-control" placeholder=""
                                                 aria-describedby="helpId"> 
                                        </div> 
                                        <div class="col-md-12 mb-3"> 
                                          <div class="clearfix"></div>
                                          <button id="soumettre" class="btn btn-primary btn-sm d-none" type="submit">Valider</button>
                                          <button id="pay-btn" class="btn btn-primary btn-sm hidden" type="button">Cliquez ici pour Payer {{$paiement->montant_total}} XOF</button>
                                        </div> 
                                        {{--
                                        <script
                                        src="https://cdn.fedapay.com/checkout.js?v=1.1.7"
                                        data-public-key="{{env('FEDAPAY_CLE_PUBLIQUE')}}"
                                        data-button-text="Payer {{$paiement->montant_total}} XOF"
                                        data-button-class="btn btn-primary"
                                        data-transaction-amount="{{$paiement->montant_total}}"
                                        data-transaction-description="{{$paiement->reference}} : {{$paiement->getRubrique->code}} : {{$paiement->getRubrique->libelle}}"
                                        data-currency-iso="XOF"
                                        data-customer-email="{{$paiement->email}}"
                                        data-customer-firstname="{{$paiement->prenoms}}"
                                        data-customer-lastname="{{$paiement->nom}}"
                                        data-customer-phone_number-number="{{$paiement->getInscription->telephone}}"
                                        data-customer-phone_number-country="{{$paiement->getInscription->code_iso}}"
                                        data-environment="{{env("FEDAPAY_ENVIRONMENT")}}"
                                        > 

                                      </script>
                                      --}} 
                                     </form>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
    </section>
    <!-- home 4grids block -->
 

@endsection
@section('jsScript') 


<script> 
  /*swal({
                                    title:"Merci de ne pas quitter cette page.", 
                                    text:"traitement des données...",
                                    icon: "https://www.boasnotas.com/img/loading2.gif",
                                    buttons: false,      
                                    closeOnClickOutside: false,
                                    timer: 1000,
                                    //icon: "success"
                      });*/
    let montant = parseInt('{{$paiement->montant_total}}'); 
    let widget =  FedaPay.init({
      public_key: '{{env('FEDAPAY_CLE_PUBLIQUE')}}',
      transaction: {
          amount: montant,
          description: '{{$paiement->reference}} : {{$paiement->getRubrique->code}} : {{$paiement->getRubrique->libelle}}'
        },
        customer: {
          email: '{{$paiement->email}}',
          firstname: '{{$paiement->prenoms}}',
          lastname: '{{$paiement->nom}}',
          phoneNumberNumber: '{{$paiement->getInscription->telephone}}',
          phoneNumberCountry: '{{$paiement->getInscription->code_iso}}'
        },
        environnement:'{{env('FEDAPAY_ENVIRONMENT')}}',
        onComplete: onPaymentComplete
    });

    let btn = document.getElementById('pay-btn');
    btn.addEventListener('click', () => {
      widget.open();
    }); 

  function onPaymentComplete(response) {
    // Exemple : Traitez les informations de la transaction ici
    console.log('Reason complète :', response); 

    if (response.reason == "DIALOG DISMISSED") {
      // transaction annulée, veuillez cliquez réessayer
      console.log('transaction annulée');
    } else {
      // envoi des données
      updatePaiement(response.transaction.description, response.transaction.id);
      // redirection sur la page
    }

    // Vous pouvez rediriger l'utilisateur, afficher un message ou effectuer des actions supplémentaires
    //alert(`Paiement réussi avec l'identifiant : ${transaction.id}`);
  }


function  updatePaiement(reference,transaction_id){ 

$.ajax({
        url: "{{ route('lionsconjointe.callback_fedapay') }}",
        data: {
            reference: reference,  
            transaction_id: transaction_id,  
            _token: '{{csrf_token()}}'
        },
        type: 'POST',
        dataType: 'json', 
        beforeSend: function() {
          swal({
                        title:"Traitement", 
                        text:"Traitement des données...",
                        icon: "https://www.boasnotas.com/img/loading2.gif",
                        buttons: false,      
                        closeOnClickOutside: false,
                        //timer: 3000,
                        //icon: "success"
          });
        }, 
        success: function(response, status) {   
              swal(
                  'Opération effectuée!',
                  'Paiement enregistré avec succès.',
                  'success'
              );
              console.log(response)
              // redirection sur la page public
              let url =  '{{route('inscriptions_valides')}}'
              window.location.href = url;
        },
        error: function(xhr, textStatus, errorThrown) {
           //  alert('Veuillez renseigner tous les champs');
        console.log(xhr);
        }
    });

}
 
        $(document).ready(function () {
        // Intercepter la soumission du formulaire
       // $('#form-data').on('submit', function (e) {
       //     e.preventDefault(); // Bloquer la soumission automatique
       //     console.log('Soumission du formulaire interceptée.');

            // Récupérer les données du formulaire
           /* var formData = $(this).serialize();
            console.log('Données du formulaire :', formData);

            // Logique avant la soumission (par exemple : afficher une confirmation)
            if (confirm('Voulez-vous vraiment soumettre ce formulaire ?')) {
                console.log('Soumission confirmée par l\'utilisateur.');

                // Soumettre manuellement le formulaire
                this.submit(); // Relance la soumission normale si nécessaire
            } else {
                console.log('Soumission annulée.');
            }*/
     //   });
    });

  </script>
     <!-- jquery -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <!-- include sweet alert -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
     <!-- end include sweet alert -->


@endsection