@extends('frontend.layouts.app')
@section('title-suffix')
    {{ __('Paiement en Cours') }}
@endsection
@section('main-content')
    <section class="breadcrumb breadcrumb_bg">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="breadcrumb_iner">
                        <div class="breadcrumb_iner_item">
                            <h2>{{ __('Paiement en Cours') }}</h2>
                            <p>{{ __('Accueil') }}<span>></span>{{ __('Paiement ') }}></span>{{ __(' En Cours') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="whole-wrap">
            <div class="container box_1170 mb-4">
                <div class="section-top-border">
                        <div class="col-12 mt-sm-20">
                            <p class="text-center">
                                Transaction en cours. Veuillez vérifier votre terminal de paiement (téléphone, tablette, etc.)
                                afin de confirmer le paiement.
                            </p>

                        </div>
                    </div>
                </div>
                <div class="text-center mb-4">
                    <a href="{{ route('welcome') }}"
                        class="genric-btn primary circle arrow" id="already">{{ __("J'ai confirmé mon paiement") }}<span
                            class="lnr lnr-arrow-right"></span></a>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js"></script>

    <script>
        $(document).ready(function() {
            function checkTransactionStatus(transactionId, country, city) {
                $.ajax({
                    url: '{{ route("transaction.check") }}', // Endpoint to check the transaction status
                    method: 'POST',
                    data: {
                        transaction_id: transactionId,
                        country: country,
                        city: city,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status === 'pending') {
                            // Retry after a delay
                            setTimeout(function() {
                                checkTransactionStatus(transactionId, country, city);
                            }, 5000); // Retry every 5 seconds
                        } else if (response.status === 'success') {
                            // Transaction successful, redirect to confirmation page
                            window.location.href = '{{ route("user.confirmation") }}';
                        } else {
                            // Show error message
                            $.notify(response.message, "error");
                            window.location.href = '{{ route("user.checkout") }}';
                        }
                    },
                    error: function(xhr, status, error) {
                        $.notify("Une erreur est survenue, veuillez réessayer.", "error");
                    }
                });
            }

            // Trigger the checkTransactionStatus function when the page loads if the transaction is pending
            var transactionId = '{{ $transaction_id ?? '' }}'; // Pass the transaction ID from the server
            var country = '{{ $country_bis ?? "TG" }}';
            var city = '{{ $city_bis ?? "Lome" }}';
            if (transactionId) {
                checkTransactionStatus(transactionId, country, city);
            }

            $("#already").on('click', function(event) {
                event.preventDefault();
                checkTransactionStatus(transactionId, country, city);
            });
        });
    </script>
@endpush