@extends('frontend.inc.layout-front')
@section('title')
    Paaiement Kkiapay || {{env("APP_NAME")}}
@endsection

@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-4">
                <div class="row">
                    <div class="col-8 mx-auto card">
                        <div class="card-body">
                            <h3 class="text-center color-theme mb-4 mt-2" style="font-weight: bold;">PAIEMENT FACTURE N° {{$paiement->reference}}</h3>
                        
                            <div class="row mb-4">
                                <div class="col-6 d-flex align-items-stretch mx-auto">
                                    <a data-bs-toggle="modal" data-bs-target="#modalConfirmationConjointe" href="#" style="text-decoration:none;">
                                        <div class="icon-box icon-box-clr-1" style="width: 20em">
                                            <div class="icon"><i class="fa fa-spinner fa-pulse fa-10x"></i></div> 
                                            <div class="text-danger text-center mt-2">
                                              <b>Veuillez patienter pendant le chargement de la page</b> 
                                           </div>
                                        </div>
                                    </a>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
    </section>
    <!-- home 4grids block -->



@endsection
@section('jsScript')
  
<script src="https://cdn.kkiapay.me/k.js"></script> 
<script> 

$(document).ready(function() {
              var montant = parseInt('{{ $paiement->montant_total}}') ;
              var nom_client = '{{ $paiement->nom}} {{ $paiement->prenoms}}';
              var reference = '{{ $paiement->reference}}'; 

              var status_sandbox = '{{env("KKIAPAY_SANDBOX")}}'; 

              if(parseInt(status_sandbox) == 1){
                status_sandbox = "true";
                var key = '{{env("KKIAPAY_SANDBOX_PUBLIC_KEY")}}';
              }else{
                status_sandbox = "false";
                var key = '{{env("KKIAPAY_LIVE_PUBLIC_KEY")}}';
              }  
    
                openKkiapayWidget({
                  amount: montant,
                  position: "center",
                  data: reference,
                  name: nom_client,
                  callback: "{{route('lions.kkiapay-store',$paiement->reference)}}",
                  theme: "blue",
                  sandbox: status_sandbox,
                  key: key,
              });

              addPaymentEndListener(response => {
                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: 3000,
                                  //icon: "success"
                    });
              });


              addSuccessListener(response => { 
                  });
 

});

</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