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

{% block title %} 3K FC | {{ event.team_a }} vs {{ event.team_b }} {% endblock %}

{% block metadata %}

{# Open Graph (Facebook, WhatsApp, LinkedIn) #}
<meta property="og:title" content="{{ event.team_a }} vs {{ event.team_b }}">
<meta property="og:description" content="{{ event.event_desc }}">
<meta property="og:image" content="{{ asset('MatchDayFiles/EventBanners/' ~ event.event_banner_file) ~ '?v=2' }}">
<meta property="og:image:height" content="630">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ app.request.uri }}">
<meta property="og:site_name" content="3KFC MatchDay">

{# Twitter Cards #}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ event.team_a }} vs {{ event.team_b }}">
<meta name="twitter:description" content="{{ event.event_desc }}">
<meta name="twitter:image" content="{{ absolute_url(asset('MatchDayFiles/EventBanners/' ~ event.event_banner_file)) }}">
{% endblock %}

{% block content %}

<section class="section swiper-container swiper-slider swiper-classic bg-gray-2" data-loop="true" data-autoplay="4000" data-simulate-touch="false" data-slide-effect="fade">
    <div class="swiper-wrapper">
        <div class="swiper-slide text-center" data-slide-bg="{{ asset('MatchDayFiles/EventBanners/') }}{{ event.event_banner_file }}">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-6">
                        <div class="swiper-slide-caption">
                            <h1 data-caption-animate="fadeInUp" data-caption-delay="100">Get the Latest tickets Here</h1>
                            <!-- <h4 data-caption-animate="fadeInUp" data-caption-delay="200">Looking for the latest game ? Get your ticket here or below</h4><a class="button button-primary" data-caption-animate="fadeInUp" data-caption-delay="300" href="about-us.html">Buy Tickets</a> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide" data-slide-bg="{{ asset('MatchDayFiles/EventBanners/') }}{{ event.event_banner_file }}">
            <div class="container">
                <div class="row justify-content-end">
                    <div class="col-xl-5">
                        <div class="swiper-slide-caption">
                            <h1 data-caption-animate="fadeInUp" data-caption-delay="100">We Are Embu's Pride</h1>
                            <!-- <h4 data-caption-animate="fadeInUp" data-caption-delay="200">in Everything Concerning Soccer</h4><a class="button button-primary" data-caption-animate="fadeInUp" data-caption-delay="300" href="about-us.html">Read More</a> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide" data-slide-bg="{{ asset('MatchDayFiles/EventBanners/') }}{{ event.event_banner_file }}">
            <div class="container">
                <div class="row">
                    <div class="col-xl-5">
                        <div class="swiper-slide-caption">
                            <h1 data-caption-animate="fadeInUp" data-caption-delay="100">3K FC Get Tickets</h1>
                            <!-- <h4 data-caption-animate="fadeInUp" data-caption-delay="200">for soccer news, updates, <br class="d-none d-xl-block"> and game results</h4><a class="button button-primary" data-caption-animate="fadeInUp" data-caption-delay="300" href="about-us.html">Read More</a> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-button swiper-button-prev"></div>
    <div class="swiper-button swiper-button-next"></div>
    <div class="swiper-pagination"></div>
</section>

<!-- Latest News-->
<section class="section section-md bg-gray-100">
    <div class="container">
        <div class="row row-50">
            <div class="col-lg-8">
                <div class="main-component">
                    <!-- Heading Component-->
                    <article class="heading-component">
                        <div class="heading-component-inner">
                            <h5 class="heading-component-title">Upcoming Match
                        </div>
                    </article>
                    <!-- Game Result Bug-->
                    <article class="game-result">
                        <div class="game-info game-info-creative">
                            <p class="game-info-subtitle">{{ event.venue_name }}
                                <time datetime="08:30">{{ event.start_time }}</time>
                            </p>
                            <h3 class="game-info-title">{{ event.match_day }}</h3>
                            <div class="game-info-main">
                                <div class="game-info-team game-info-team-first">
                                    <figure><img src="{{ asset('MatchDayFiles/TeamLogos/') }}{{ event.team_a_logo }}" alt="" width="75" height="99" />
                                    </figure>
                                    <div class="game-result-team-name">{{ event.team_a }}</div>
                                    <div class="game-result-team-country">Embu</div>
                                </div>
                                <div class="game-info-middle game-info-middle-vertical">
                                    <time class="time-big" datetime="2020-04-17">
                                        <span class="heading-3">
                                            {{ event.start_date|date('D d') }}
                                        </span>
                                        {{ event.start_date|date('M Y') }}
                                    </time>
                                    <div class="game-result-divider-wrap"><span class="game-info-team-divider">VS</span></div>
                                    <div class="group-sm">
                                        <div class="button button-sm button-share-outline">Share
                                            <ul class="game-info-share">
                                                <li class="game-info-share-item"><a class="icon fa fa-facebook" href="#"></a></li>
                                                <li class="game-info-share-item"><a class="icon fa fa-twitter" href="#"></a></li>
                                                <li class="game-info-share-item"><a class="icon fa fa-google-plus" href="#"></a></li>
                                                <li class="game-info-share-item"><a class="icon fa fa-instagram" href="#"></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="game-info-team game-info-team-second">
                                    <figure><img src="{{ asset('MatchDayFiles/TeamLogos/') }}{{ event.team_b_logo }}" alt="" width="91" height="91" />
                                    </figure>
                                    <div class="game-result-team-name">{{ event.team_b }}</div>
                                    <div class="game-result-team-country">AWAY</div>
                                </div>
                            </div>
                        </div>
                        <div class="game-info-countdown">
                            <div class="countdown countdown-bordered" data-type="until" data-time="31 Dec 2020 16:00"
                                data-format="dhms" data-style="short"></div>
                        </div>
                    </article>
                </div>

                <!-- TICKETS -->
                <div class="row">
                    <!-- Ticket Types -->
                    <article class="post-classic" id="">
                        <div class="cart-inline-inner">

                            <div class="cart-inline-header">
                                <h5 class="cart-inline-title">Standard Tickets</h5>
                            </div>
                            <div class="cart-inline-main">
                                <!-- Product inline-->
                                <div class="row">
                                    {% for ticket in non_seasonal_tickets %}
                                    <article class="product-inline col-md-6">
                                        <div class="product-inline-aside">
                                            {% if 'Regular' in ticket.name %}
                                            <img class="product-inline-image" src=" {{ asset('fanassets/images/tickets/r1.jpeg') }}" alt="" width="87" height="30" />
                                            {% elseif 'Kid' in ticket.name or 'KIDS' in ticket.name %}
                                            <img class="product-inline-image" src="{{ asset('fanassets/images/tickets/kids.jpeg') }}" alt="" width="87" height="30" />
                                            {% elseif 'VIP' in ticket.name or 'V.I.P' in ticket.name %}
                                            <img class="product-inline-image" src="{{ asset('fanassets/images/tickets/vip2.jpeg') }}" alt="" width="87" height="30" />
                                            {% elseif 'Hawker' in ticket.name %}
                                            <img class="product-inline-image" src="{{ asset('fanassets/images/tickets/hawker.jpg') }}" alt="" width="87" height="30" />
                                            {% endif %}
                                        </div>
                                        <div class="product-inline-main">
                                            <input type="hidden" value="{{ ticket.id }}" id="ticket_id-{{ ticket.id }}">
                                            <p class="heading-7 product-inline-title">
                                                <a href="#">
                                                    <span id="ticket_name-{{ ticket.id }}"> {{ ticket.name }}</span>
                                                    [KSH
                                                    <span class="default_ticket_price" id="ticket_price-{{ ticket.id }}">{{ ticket.price }}</span>
                                                    ]</a>
                                            </p>
                                            <ul class="product-inline-meta" id="product-inline-meta">
                                                <li>
                                                    <div class="stepper" id="stepper-{{ ticket.id }}">
                                                        <input id="ticket_counter-{{ ticket.id }}" class="form-input stepper-input" type="number" data-zeros="true" value="0" min="1" max="10">
                                                        <span id="step_up_ticket-{{ ticket.id }}" class="stepper-arrow up"></span>
                                                        <span id="step_down_ticket-{{ ticket.id }}" class="stepper-arrow down"></span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <p class="product-inline-price" id="cumulative_price-{{ ticket.id }}"></p>
                                                </li>
                                            </ul>
                                        </div>
                                    </article>
                                    {% endfor %}
                                </div>
                                <!-- Product inline-->
                            </div>
                            <div class="divider-medium divider-primary"></div>
                            <div class="cart-inline-header">
                                <h5 class="cart-inline-title">SEASON Tickets</h5>
                            </div>
                            <div class="cart-inline-main">
                                <!-- Product inline-->
                                <div class="row">
                                    {% for ticket in seasonal_tickets %}
                                    <article class="product-inline col-md-6">
                                        <div class="product-inline-aside">
                                            {% if 'Regular' in ticket.name %}
                                            <img class="product-inline-image" src=" {{ asset('fanassets/images/tickets/sr.jpeg') }}" alt="" width="87" height="30" />
                                            {% elseif 'VIP' in ticket.name or 'V.I.P' in ticket.name %}
                                            <img class="product-inline-image" src="{{ asset('fanassets/images/tickets/svip.jpeg') }}" alt="" width="87" height="30" />
                                            {% elseif 'Kid' in ticket.name or 'KIDS' in ticket.name %}
                                            <img class="product-inline-image" src="{{ asset('fanassets/images/tickets/kids.jpeg') }}" alt="" width="87" height="30" />
                                            {% endif %}
                                        </div>
                                        <div class="product-inline-main">
                                            <input type="hidden" value="{{ ticket.id }}" id="ticket_id-{{ ticket.id }}">
                                            <p class="heading-7 product-inline-title">
                                                <a href="#">
                                                    <span id="ticket_name-{{ ticket.id }}"> {{ ticket.name }}</span>
                                                    [KSH
                                                    <span class="default_ticket_price" id="ticket_price-{{ ticket.id }}">{{ ticket.price }}</span>
                                                    ]</a>
                                            </p>
                                            <ul class="product-inline-meta" id="product-inline-meta">
                                                <li>
                                                    <div class="stepper" id="stepper-{{ ticket.id }}">
                                                        <input id="ticket_counter-{{ ticket.id }}" class="form-input stepper-input" type="number" data-zeros="true" value="0" min="1" max="10">
                                                        <span id="step_up_ticket-{{ ticket.id }}" class="stepper-arrow up"></span>
                                                        <span id="step_down_ticket-{{ ticket.id }}" class="stepper-arrow down"></span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <p class="product-inline-price" id="cumulative_price-{{ ticket.id }}"></p>
                                                </li>
                                            </ul>
                                        </div>
                                    </article>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="cart-inline-footer">
                                <a class="button button-md button-default-outline" id="ticket_total_amount">KSH 0.00</a><a id="proceedToCheckoutBtn" class="button button-md button-primary" href="#">Buy Now</a></div>
                        </div>
                    </article>
                </div>
            </div>
            <!-- Aside Block-->
            <div class="col-lg-4">
                <aside class="aside-components">
                    <div class="aside-component">
                        <!-- Heading Component-->
                        <article class="heading-component">
                            <div class="heading-component-inner">
                                <h5 class="heading-component-title">Gallery
                                </h5>
                            </div>
                        </article>
                        <article class="gallery" data-lightgallery="group">
                            <div class="row row-10 row-narrow">
                                <div style="overflow:hidden;display:flex" class="col-6 col-sm-4 col-md-6 col-lg-4"><a class="thumbnail-creative" data-lightgallery="item" href="{{ asset('fanassets/images/team/team1.jpeg') }}"><img style="object-fit:cover" src="{{ asset('fanassets/images/team/team1.jpeg') }}" alt=""/>
                                    <div class="thumbnail-creative-overlay"></div></a>
                                </div>
                                <div style="overflow:hidden;display:flex" class="col-6 col-sm-4 col-md-6 col-lg-4"><a class="thumbnail-creative" data-lightgallery="item" href="{{ asset('fanassets/images/team/team2.jpeg') }}"><img style="object-fit:cover" src="{{ asset('fanassets/images/team/team2.jpeg') }}" alt=""/>
                                    <div class="thumbnail-creative-overlay"></div></a>
                                </div>
                                <div style="overflow:hidden;display:flex" class="col-6 col-sm-4 col-md-6 col-lg-4"><a class="thumbnail-creative" data-lightgallery="item" href="{{ asset('fanassets/images/team/team3.jpeg') }}"><img style="object-fit:cover" src="{{ asset('fanassets/images/team/team3.jpeg') }}" alt=""/>
                                    <div class="thumbnail-creative-overlay"></div></a>
                                </div>
                                <div style="overflow:hidden;display:flex" class="col-6 col-sm-4 col-md-6 col-lg-4"><a class="thumbnail-creative" data-lightgallery="item" href="{{ asset('fanassets/images/team/team4.jpeg') }}"><img style="object-fit:cover" src="{{ asset('fanassets/images/team/team4.jpeg') }}" alt=""/>
                                    <div class="thumbnail-creative-overlay"></div></a>
                                </div>
                                <div style="overflow:hidden;display:flex" class="col-6 col-sm-4 col-md-6 col-lg-4"><a class="thumbnail-creative" data-lightgallery="item" href="{{ asset('fanassets/images/team/team5.jpeg') }}"><img style="object-fit:cover" src="{{ asset('fanassets/images/team/team5.jpeg') }}" alt=""/>
                                    <div class="thumbnail-creative-overlay"></div></a>
                                </div>
                                <div style="overflow:hidden;display:flex" class="col-6 col-sm-4 col-md-6 col-lg-4"><a class="thumbnail-creative" data-lightgallery="item" href="{{ asset('fanassets/images/team/team6.jpeg') }}"><img style="object-fit:cover" src="{{ asset('fanassets/images/team/team6.jpeg') }}" alt=""/>
                                    <div class="thumbnail-creative-overlay"></div></a>
                                </div>
                            </div>
                        </article>
                    </div>
                    <div class="aside-component">
                        <!-- Heading Component-->
                        <article class="heading-component">
                            <div class="heading-component-inner">
                                <h5 class="heading-component-title">Standings
                            </div>
                        </article>
                        <div class="table-custom-responsive">
                            <table class="table-custom table-standings table-classic">
                                <thead>
                                    <tr>
                                        <th colspan="2">Team Results</th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% set counter = 1 %}
                                    {% for event in event_stat %}
                                    <tr>
                                        <td><span class="table-counter">{{ counter }}</span></td>
                                        <td class="team-inline" style="width: 20px;">
                        </div>
                        <div class="">
                            <div class="team-name">3K</div>
                        </div>
                        </td>
                        <td>{{ event.team_a_score }}</td>
                        <td>{{ event.team_b_score }}</td>
                        <td class="team-inline">
                            <div class="team-figure"><img src="{{ asset('MatchDayFiles/TeamLogos/') }}{{ event.team_b_logo }}" alt="" width="31" height="41"/>
                            </div>
                            <div class="">
                                <div class="team-name">
                                    {{ event.team_b }}
                                </div>
                            </div>
                        </td>
                        </tr>
                        {% set counter = counter + 1  %}
                        {% endfor %}
                        </tbody>
                        </table>
                    </div>
            </div>
            </aside>
        </div>
    </div>
    </div>
</section>

{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {

    var ticketpurchasedata = []
    let event_slug = "{{ event.slug }}"
    let event_id = "{{ event.id }}"

    // Increment the ticket counter on plus
    $('[id^=step_up_ticket-]').on('click', function() {

        var ticket_id = $(this).closest('.product-inline-main').find('[id^="ticket_id-"]').val();
        var ticket_name = $(this).closest('.product-inline-main').find('[id^="ticket_name-"]').text();
        var ticket_default_price = $(this).closest('.product-inline-main').find('[id^="ticket_price-"]').text();

        var ticket_purchased_count = $(this).closest('.product-inline-main').find('[id^="ticket_counter-"]');
        ticket_purchased_count.val(parseInt(ticket_purchased_count.val()) + 1)

        var ticket_cumulative_price = $(this).closest('.product-inline-main').find('[id^="cumulative_price-"]');
        ticket_cumulative_price.text('KSH ' + ticket_default_price * ticket_purchased_count.val() + '.00')

        addTicket(ticket_name, ticket_purchased_count.val(), ticket_default_price, ticket_id, event_id)
    })

    // Decrement the ticket
    $('[id^=step_down_ticket-]').on('click', function() {

        var ticket_id = $(this).closest('.product-inline-main').find('[id^="ticket_id-"]').val();
        var ticket_name = $(this).closest('.product-inline-main').find('[id^="ticket_name-"]').text();
        var ticket_default_price = $(this).closest('.product-inline-main').find('[id^="ticket_price-"]').text();

        var ticket_purchased_count = $(this).closest('.product-inline-main').find('[id^="ticket_counter-"]');
        ticket_purchased_count.val(Math.max(0, parseInt(ticket_purchased_count.val()) - 1))

        var ticket_cumulative_price = $(this).closest('.product-inline-main').find('[id^="cumulative_price-"]');
        ticket_cumulative_price.text('KSH ' + ticket_default_price * ticket_purchased_count.val() + '.00')

        removeTicket(ticket_name)
    })

    // Add ticket from the ticketpurchasedata array
    function addTicket(ticket_type, ticket_purchased_count, ticket_default_price, ticket_id, event_id){

        var ticketPurchaseCount = parseInt(ticket_purchased_count, 10)

        let existingTicket = ticketpurchasedata.find(ticket => ticket[0] === ticket_type)

        if(existingTicket){
            existingTicket[1] = ticket_purchased_count
        }else{
            ticketpurchasedata.push([ticket_type, ticket_purchased_count, ticket_default_price, ticket_id, event_id])
        }

        calculateTotalPrice()
        $('#ticket_total_amount').text('KSH ' + calculateTotalPrice() + '.00')
    }

    // Remove ticket from the ticketpurchasedata array
    function removeTicket(ticket_type, ticket_purchased_count, ticket_id){

        let existingTicket = ticketpurchasedata.find(ticket => ticket[0] === ticket_type)

        if(existingTicket){
            existingTicket[1] = parseInt(existingTicket[1]) - 1
        }

        if(existingTicket[1] == 0){
            let existingTicketIndex = ticketpurchasedata.findIndex(ticket => ticket[0] === ticket_type)
            if(existingTicketIndex !== -1){
                ticketpurchasedata.splice(existingTicketIndex, 1)
            }
        }

        calculateTotalPrice()
        $('#ticket_total_amount').text('KSH ' + calculateTotalPrice() + '.00')
    }

    // calculate total ticket price
    function calculateTotalPrice() {
        return ticketpurchasedata.reduce((total, ticket) => {
            return total + ticket[1] * ticket[2]
        }, 0)
    }

    // save ticketpurchasedata in session
    $('#proceedToCheckoutBtn').on('click', function(e) {
        e.preventDefault()
        $.ajax({
            method: 'POST',
            data: JSON.stringify(ticketpurchasedata),
            url: '/save_ticket_purchase_data_to_session',
            contentType: 'application/json',
            success: function(res){
                console.log(res)
                if(res == 'success')
                    window.location.href = '/checkout/' + event_slug
                    else if(res == 'error'){
                        toastr.options = {
                            'progressBar' : true,
                            "showMethod": "fadeIn",
                            "positionClass": "toast-bottom-right",
                            "hideMethod": "fadeOut",
                            "closeButton": true,
                            "newestOnTop": false,
                        }
                        toastr.error('An Error Occured Please Try Again')
                        window.location.reload()
                    }
            },
            error: function(error, xhr) {
                console.log(error)
            },
        })
    })
})
</script>

{% endblock %}