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

{% block title %} 3K FC | {{ event_metadata.getEventId().getTeamA() }} vs {{ event_metadata.getEventId().getTeamB() }} {% endblock %}

{% 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('MatchDayFiles/EventBanners/') }}{{ 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 id="shopping_cart" class="col-sm-12">
                <!-- Heading Component-->
                <article class="heading-component">
                    <div class="heading-component-inner">
                        <h5 class="heading-component-title">Your shopping cart
                        </h5>
                    </div>
                </article>
                <div class="product-cart">
                    <div class="table-custom-responsive">
                        <table class="table-custom table-product">
                            <thead>
                                <tr>
                                    <th>Product name</th>
                                    <th>Quantity</th>
                                    <th>Price</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for ticket in ticketdata %}
                                <tr>
                                    <td>
                                        <div class="product-cart-name">
                                            <a class="product-cart-media" href="product-page.html" style="padding: 0px;">
                                                {% if 'Regular' in ticket.0 %}
                                                <img src=" {{ asset('fanassets/images/tickets/r1.jpeg') }}" alt="">
                                                {% elseif 'Kid' in ticket.0 %}
                                                <img src="{{ asset('fanassets/images/tickets/kids.jpeg') }}" alt="">
                                                {% elseif 'VIP' in ticket.0 or 'V.I.P' in ticket.0 %}
                                                <img src="{{ asset('fanassets/images/tickets/vip2.jpeg') }}" alt="">
                                                {% elseif 'Regular Seasonal' in ticket.0 %}
                                                <img src=" {{ asset('fanassets/images/tickets/sr.jpeg') }}" alt="">
                                                {% elseif 'VIP Seasonal' in ticket.0 %}
                                                <img src="{{ asset('fanassets/images/tickets/svip.jpeg') }}" alt="">
                                                {% elseif 'Hawkers' in ticket.0 %}
                                                <img src="{{ asset('fanassets/images/tickets/hawker.jpg') }}" alt="">
                                                {% endif %}
                                            </a>
                                            <p class="product-cart-title"><a href="product-page.html">{{ ticket.0 }} Ticket</a></p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="stepper-modern">
                                            <input class="form-input" type="number" data-zeros="true" value="{{ ticket.1 }}" min="1" max="100" disabled>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="product-cart-price">
                                            KSH <span id="ticket_amount-{{ ticket.3 }}">
                                                {% set amount = ticket.1 * ticket.2  %}
                                                {{ amount }}
                                            </span>.00
                                        </div>
                                    </td>
                                    <td>
                                        <div class="product-cart-delete"><span class="icon fl-bigmug-line-recycling10"></span></div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-12" id="shopping_cart_form">
                <div class="row row-50">
                    <div class="col-lg-6">
                        <!-- Heading Component-->

                        <article class="heading-component">
                            <div class="heading-component-inner">
                                <h5 class="heading-component-title">PERSONAL DETAILS
                                </h5>
                            </div>
                        </article>
                        <form class="rd-form" id="checkoutForm">
                            <div class="form-wrap">
                                <div class="row row-10 row-narrow">
                                    <div class="col-md-6">
                                        <div class="form-wrap">
                                            <label class="form-label" for="biling-first-name">First Name</label>
                                            <input class="form-input" id="biling-first-name" required  type="text" name="name" data-constraints="" maxlength="40">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-wrap">
                                            <label class="form-label" for="biling-last-name">Last Name</label>
                                            <input class="form-input" id="biling-last-name" required  type="text" name="last_name" data-constraints="" maxlength="40">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-lg-6">
                        <!-- Heading Component-->
                        <article class="heading-component">
                            <div class="heading-component-inner">
                                <h5 class="heading-component-title">BILLING
                                </h5>
                            </div>
                        </article>
                        <form class="rd-form" id="ticketCheckoutForm" method="post">
                            <div class="form-wrap">
                                <div class="row row-10 row-narrow">
                                    <div class="col-md-6">
                                        <div class="form-wrap">
                                            <label class="form-label" for="phone_number">Phone Number</label>
                                            <input class="form-input" id="phone_number" required type="text" name="phone_number" data-constraints="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <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="shopping_cart_mpesa_div">
                <!-- Heading Component-->
                <article class="heading-component">
                    <div class="heading-component-inner">
                        <h5 class="heading-component-title">Payment Methods
                        </h5>
                    </div>
                </article>
                <div class="card-shop">
                    <ul class="list-md form-wrap">
                        <li>
                            <div class="radio-panel">
                                <label class="radio-inline radio-inline-lg active">
                                    <input name="input-radio" value="radio-1" type="radio" checked>M-PESA
                                </label>
                                <div class="radio-panel-content">
                                    <p>
                                        Make your payment directly to our paybill account. Contact support for more information.</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div><a class="button button-lg button-primary" id="checkoutBtn" href="#">Proceed to Checkout</a>
    </div>
</section>

{% endblock %}

{% block scripts %}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>

$(document).ready(function() {

    var event_slug = "{{ app.request.attributes.get('slug') }}";
    var paymentID = null

    var totalAmount = 0
    $('[id^=ticket_amount-]').each(function() {
        totalAmount += parseInt($(this).text())
    })

    $('#orderSubtotal').text('KSH ' + totalAmount + '.00')
    $('#secondOrderSubtotal').text('KSH ' + totalAmount + '.00')

    $('#checkoutBtn').on('click', function(e) {
        e.preventDefault()

        $(this).html('<img id="loadingSpinner" src="{{ asset('images/svg/spinningdots.svg') }}" alt="Loading..." width="20" height="20">')

        if($('#biling-first-name').val().length === 0){
            Swal.fire({
                icon: "error",
                title: "Oops...",
                text: "First Name Missing",
            });
            return;
        }

        if($('#biling-last-name').val().length === 0){
            Swal.fire({
                icon: "error",
                title: "Oops...",
                text: "Last Name Missing",
            });
            return;
        }

        if($('#phone_number').val().length === 0){
            Swal.fire({
                icon: "error",
                title: "Oops...",
                text: "Phone Number Missing",
            });
            return;
        }

        $.ajax({
            type: 'POST',
            url: "{{ path('app_fan_ticket_checkout') }}",
            data: {
                phone_number: $('#phone_number').val(),
                first_name: $('#biling-first-name').val(),
                last_name: $('#biling-last-name').val(),
                amount: totalAmount,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
        
                if (response.success) {
        
                    paymentID = response.payment_id
        
                    console.log(response)
        
                    Swal.fire({
                        icon: "success",
                        title: "Purchase in progress",
                        text: "Check your phone to proceed",
                    }).then(function(){
        
                            let htmlContent = `<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>`
        
                            $('#shopping_cart').remove()
                            $('#shopping_cart_form').remove()
                            $('#shopping_cart_mpesa_div').html('')
                            $('#shopping_cart_mpesa_div').html(htmlContent)
        
                            $('#checkoutBtn').replaceWith('<a class="button button-lg button-success" id="confirmTicketPurchaseBtn" href="#">Confirm Ticket Purchase</a>')
        
                        });
                } else {
                    Swal.fire({
                        icon: "error",
                        title: "An error occured",
                        text: response.message,
                    }).then(function() {
                            location.reload()
                        });
                }
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    })

    $('body').on('click', '#confirmTicketPurchaseBtn', function() {
        let div = $('#shopping_cart_mpesa');
        $(this).html('<img id="loadingSpinner" src="{{ asset('images/svg/spinningdots.svg') }}" alt="Loading..." width="20" height="20">')

        $.ajax({
            method: 'GET',
            url: "/confirm/purchase/" + paymentID,
            success: function(response) {

                if (response.status == 'success') {
                    $(this).html('Ticket Purchase Successfull')

                    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 = '/'
                    }, 6000);

                } else {

                    console.log(response.message);

                    $(this).html('<a class="button button-lg button-success" id="confirmTicketPurchaseBtn" href="#">Confirm Ticket Purchase</a>')

                    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');
                    }, 3000);
                }
            },
            error: function(error) {
                console.error(error);
            }
        })
    });

    $('body').on('click', '#repurchaseTicketBtn', function(e) {
        e.preventDefault()
        console.log('test')
        window.location = '/checkout/' + event_slug
    })
})
</script>
{% endblock %}