{% extends '@fan/layouts/commonmaster.html.twig' %}


{% block content %}

<style>
@keyframes flash {
0% { background-color: #DCC0A7; }
50% { background-color: white; }
100% { background-color: #DCC0A7; }
}

.flash {
animation: flash 1.5s ease-in-out 3; /* Runs 3 times */
}

@keyframes redflash {
0% { background-color: #ed5547; }
50% { background-color: white; }
100% { background-color: #ed5547; }
}

.redflash {
animation: redflash 1.5s ease-in-out 3; /* Runs 3 times */
}

.content-box {
padding: 20px;
border: 1px solid #ccc;
margin: 20px;
font-size: 18px;
}
</style>

<section class="section parallax-container breadcrumbs-wrap" data-parallax-img="{{ asset('storage/' . $event_banner_file) }}">
    <div class="parallax-content breadcrumbs-custom context-dark">
        <div class="container">
            <h3 class="breadcrumbs-custom-title">Checkout</h3>
            <ul class="breadcrumbs-custom-path">
                <li><a href="/">Home</a></li>
                <li class="active">Checkout</li>
            </ul>
        </div>
    </div>
</section>
<!-- Shop Blocks, Elements-->
<section class="section section-md bg-gray-100">
    <div class="container text-center">
        <div class="row row-50 text-start">
            <div class="col-lg-6">
                <!-- Heading Component-->
                <article class="heading-component">
                    <div class="heading-component-inner">
                        <h5 class="heading-component-title">Cart Total
                        </h5>
                    </div>
                </article>
                <div class="table-custom-responsive">
                    <table class="table-custom card-shop-table">
                        <tr>
                            <td>cart subtotal</td>
                            <td id="orderSubtotal"></td>
                        </tr>
                        <tr>
                            <td>Charges</td>
                            <td>Free</td>
                        </tr>
                        <tr>
                            <td>Total</td>
                            <td id="secondOrderSubtotal"></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="col-lg-6" id="">
                    <article class="heading-component">
                        <div class="heading-component-inner">
                            <h5 class="heading-component-title">Payment Status
                            </h5>
                        </div>
                    </article>
                <div class="card-shop" id="shopping_cart_mpesa" style="border-radius: 20px;">
                    <ul class="list-md form-wrap">
                        <li>
                            <div class="radio-panel">
                                <div class="radio-panel-content">
                                    <p style="font-size: 18px;" id="shopping_cart_mpesa_message">
            Press the button below to confirm your ticket payment status
                                    </p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div><a class="button button-lg button-success" id="confirmTicketPurchaseBtn" href="#">Confirm Ticket Purchase</a>
        <script>
        $(document).ready(function() {
            $('#confirmTicketPurchaseBtn').click(function() {
                let div = $('#shopping_cart_mpesa');

                $.ajax({
                    method: 'GET',
                    data: {
                        data: paymentID,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    url: "/checkout/confirm/purchase/" + paymentID,
                    success: function(response) {

                        if (response.status == 'success') {

                            div.addClass('flash');
                            $('#shopping_cart_mpesa_message').text('')
                            $('#shopping_cart_mpesa_message').text('Your ticket(s) has been purchased successfully! Please check your M-Pesa messages for the payment confirmation and ticket details.')

                            setTimeout(() => {
                                div.removeClass('flash');
                                window.location = '/'
                            }, 3000);



                        } else {

                            console.log(response.message);

                            div.addClass('redflash');

                            $('#confirmTicketPurchaseBtn').replaceWith('<a class="button button-lg button-primary" id="repurchaseTicketBtn" href=".">Re Initiate Purchase</a>')
                            $('#shopping_cart_mpesa_message').text('Your ticket(s) has not been purchased yet. Click the button below to re initiate the purchase');

                            setTimeout(() => {
                                div.removeClass('flash');
                                window.location = '.'
                            }, 3000);
                        }
                    },
                    error: function(error) {
                        console.error(error);
                    }
                })

            });
        });
        </script>
    </div>
</section>
    
{% endblock %}