@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">
                        @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="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('leo.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