@extends('fan.layouts.commonmaster')

@section('title') | Dashboard @endsection

@section('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('storage/' . $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('storage/' . $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('storage/' . $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('storage/' . $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">
                                            {{ \Carbon\Carbon::parse($event->start_date)->format('D d') }}
                                        </span>
                                        {{ \Carbon\Carbon::parse($event->start_date)->format('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><a class="button button-sm button-primary" href="{{ route('guest.show', ['id' => $event->id]) }}">Buy tickets</a>
                                    </div>
                                </div>
                                <div class="game-info-team game-info-team-second">
                                    <figure><img src="{{ asset('storage/' . $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">
                                @foreach($non_seasonal_tickets as $ticket)
                                    <article class="product-inline col-md-6">
                                        <div class="product-inline-aside">
                                            @if($ticket->name == 'Regular')
                                            <img class="product-inline-image" src=" {{ asset('fanassets/images/tickets/r1.jpeg') }}" alt="" width="87" height="30" />
                                            @elseif($ticket->name == "Kids")
                                            <img class="product-inline-image" src="{{ asset('fanassets/images/tickets/kids.jpeg') }}" alt="" width="87" height="30" />
                                            @elseif($ticket->name == "Hawker")
                                            <img class="product-inline-image" src="{{ asset('fanassets/images/tickets/hawker.jpeg') }}" alt="" width="87" height="30" />
                                            @else
                                            <img class="product-inline-image" src="{{ asset('fanassets/images/tickets/vip2.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>
                                    @endforeach
                                </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">
                                    @foreach($seasonal_tickets as $ticket)
                                    <article class="product-inline col-md-6">
                                        <div class="product-inline-aside">
                                            @if($ticket->name == 'Regular')
                                            <img class="product-inline-image" src=" {{ asset('fanassets/images/tickets/sr.jpeg') }}" alt="" width="87" height="30" />
                                            @else($ticket->name == 'Vip')
                                            <img class="product-inline-image" src="{{ asset('fanassets/images/tickets/svip.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>
                                    @endforeach
                                </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="#">Checkout</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>
                                    @php
                                    $counter = 1;
                                    @endphp
                                    @forelse($event_stat as $es)
                                    <tr>
                                        <td><span>@php echo $counter; @endphp</span></td>
                                        <td class="team-inline" style="width: 20px;">
                                            <div class="team-figure"><img src="{{ asset('storage/' . $event->team_a_logo) }}" alt="" width="31" height="41"/>
                                            </div>
                                            <div class="">
                                                <div class="team-name">3K</div>
                                            </div>
                                        </td>
                                        <td>{{ $es->team_a_score }}</td>
                                        <td>{{ $es->team_b_score }}</td>
                                        <td class="team-inline">
                                            <div class="team-figure"><img src="{{ asset('storage/' . $es->team_b_logo) }}" alt="" width="31" height="41"/>
                                            </div>
                                            <div class="">
                                                <div class="team-name">
                                                    {{ $es->team_b }}
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @php $counter++; @endphp
                                    @empty
                                    <tr>No Events</tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script>
$(document).ready(function() {

    var ticketpurchasedata = []
    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),
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            url: '/save_ticket_purchase_data_to_session',
            contentType: 'application/json',
            success: function(res){
                window.location.href = '/checkout/' + event_id
            },
            error: function(error, xhr) {
                console.log(error)
            },
        })
    })
})
</script>
@endpush