@extends('layouts.guestcommonmaster')

@section('content')

@if($event)

<section class="youplay-banner banner-top youplay-banner-parallax small">
    <div class="image" data-speed="0.4">
        <img src="{{ asset('guestassets/images/1.png') }}" alt="" class="jarallax-img">
    </div>
    <div class="info">
        <div>
            <div class="container">
                <h1 class="h1">Matches</h1>
            </div>
        </div>
    </div>
</section>
<!-- New Container -->
<div class="container youplay-content">
    <div class="row">
        <div class="col-md-9">
            <div role="tabpanel">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#tab-all" aria-controls="tab-all" role="tab" data-toggle="tab" aria-expanded="true">The Main Event</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <!-- All Matches -->
                    <!--  Add team support -->
                    <div role="tabpanel" class="tab-pane active" id="tab-all">
                        <div class="youplay-matches-list">
                            <a class="box youplay-single-match" href="{{ route('guest.show', ['id' => $featuredEvent->id]) }}">
                                <div class="pull-left">
                                    <div class="angled-img">
                                        <div class="img">
                                            <img src="{{ asset('storage/' . $featuredEvent->team_a_logo) }}" alt="{{ $featuredEvent->team_a }} Logo">
                                        </div>
                                    </div>
                                    <h5 class="text-center">{{ $featuredEvent->team_a }}</h5>
                                </div>
                                <div class="pull-left ml-30">
                                    <div class="angled-img">
                                        <div class="img">
                                            <img src="{{ asset('storage/' . $featuredEvent->team_b_logo) }}" alt="{{ $featuredEvent->team_b}} logo">
                                        </div>
                                    </div>
                                    <h5 class="text-center">{{ $featuredEvent->team_b }}</h5>
                                </div>
                                <div class="pull-left ml-30">
                                    <h3 class="youplay-match-title">{{ $featuredEvent->match_day }}</h3>
                                    <h4 class="youplay-match-title"> {{ $featuredEvent->team_a }} VS {{ $featuredEvent->team_b }}</h4>
                                    <span class="label label-danger">KICKOFF</span>
                                    <span class="label label-danger"></span><br>
                                    <span class="label label-default">Regular - 100 /=</span>
                                    <span class="label label-success">VIP - 200 /=</span>
                                </div>
                                <div class="label youplay-match-count">Get Ticket</div>
                                <div class="clearfix"></div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-9">
            <div role="tabpanel">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#tab-all" aria-controls="tab-all" role="tab" data-toggle="tab" aria-expanded="true">The Past Matches</a>
                    </li>
                    <li role="presentation" class="active">
                        <a href="#tab-away" aria-controls="tab-away" role="tab" data-toggle="tab" aria-expanded="true">23/24 Season</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <!-- All Matches -->
                    <!--  Add team support -->
                    <div role="tabpanel" class="tab-pane active" id="tab-all">
                        <div class="youplay-matches-list" id="all_events">
                            @forelse($all_events as $ae)
                            <a class="youplay-single-match" href="@if($ae->is_closed) # @else {{ route('guest.show', ['id' => $ae->id]) }} @endif">
                                <div class="pull-left">
                                    <div class="angled-img">
                                        <div class="img">
                                            <img src="{{ asset('storage/' . $ae->team_a_logo) }}" alt="{{ $ae->team_a }} Logo">
                                        </div>
                                    </div>
                                    <h5 class="text-center">{{ $ae->team_a }}</h5>
                                </div>
                                <div class="pull-left ml-30">
                                    <div class="angled-img">
                                        <div class="img">
                                            <img src="{{ asset('storage/' . $ae->team_b_logo) }}" alt="{{ $ae->team_b}} logo">
                                        </div>
                                    </div>
                                    <h5 class="text-center">{{ $ae->team_b }}</h5>
                                </div>
                                <div class="pull-left ml-30">
                                    <h3 class="youplay-match-title">{{ $ae->match_day }}</h3>
                                    <h4 class="youplay-match-title"> {{ $ae->team_a }} VS {{ $ae->team_b }}</h4>
                                    <span class="label label-danger">KICKOFF</span>
                                    <span class="label label-danger"></span><br>
                                    <span class="label label-default">Regular - 100 /=</span>
                                    <span class="label label-success">VIP - 200 /=</span>
                                </div>
                                <div class="label youplay-match-count">{{ $ae->team_a_score }}:{{ $ae->team_b_score }}</div>
                                <div class="clearfix"></div>
                            </a>
                            @empty
                            No Events Yet
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pagination Begins Here -->
            <ul class="pagination dib" id="paginationDiv">
                <li class="" style="cursor: pointer;" id="defaultPage">
                    <span id="page-1" class='page-numbers current'>1</span>
                </li>
                @for($pagenumber=2; $pagenumber<=$pages; $pagenumber++)
                <li style="cursor: pointer">
                    <span id="page-{{ $pagenumber }}" class="page-numbers">{{ $pagenumber }}</span>
                </li>
                @endfor
            </ul>
        </div>
    </div>
</div>

@else

<section class="youplay-banner banner-top youplay-banner-parallax full">
    <div class="image" data-speed="0.4">
        <img src="{{asset('guestassets/images/3kfc5.jpg')}}" alt="" class="jarallax-img">
    </div>
    <div class="info">
        <div>
            <div class="container text-center">
                <div class="youplay-match-vs">
                    <h2 class="h2"><strong>No Current Matches</strong></h2>
                    <h3><strong>Follow Us on Social Media to Get the latest Updates</strong></h3>
                    <a href="/" class="btn btn-lg">Go To Home</a>
                </div>
            </div>
        </div>
    </div>
</section>

@endif

<script>
$(document).ready(function() {

    $('#defaultPage').addClass('active')

    $(document).on('click', '[id^="page-"]', function() {

        $('#paginationDiv li').removeClass('active')
        $(this.parentNode).addClass('active')

        const page = $(this).attr('id').split('-')[1];

        $.ajax({
            method: 'GET',
            url: '/guest/all_events?page=' + page,
            success: function(res) {
		    console.log(res)

                const events = res
                let htmlContent = '';

                events.forEach(event => {
                    htmlContent += `<a class="youplay-single-match" href="${event.is_closed ? '#' : event.route}"><div class="pull-left"><div class="angled-img"><div class="img">
<img src="/storage/${event.team_a_logo}" alt="${event.team_a} Logo"></div></div><h5 class="text-center">${event.team_a}</h5></div><div class="pull-left ml-30"><div class="angled-img">
<div class="img"><img src="/storage/${event.team_b_logo}" alt="${event.team_b} Logo"></div></div><h5 class="text-center">${event.team_b}</h5></div><div class="pull-left ml-30">
<h3 class="youplay-match-title">${event.match_day}</h3><h4 class="youplay-match-title">${event.team_a} VS ${event.team_b}</h4><span class="label label-danger">KICKOFF</span>
<span class="label label-danger">${event.start_time} ${event.start_date}</span><br><span class="label label-default">Regular - 100 /=</span><span class="label label-success">VIP - 200 /=</span></div>
<div class="label youplay-match-count">${event.team_a_score}:${event.team_b_score}</div><div class="clearfix"></div></a>`;
                });

                $('#all_events').html(htmlContent);
            },
            error: function() {

            },
        })
    })
})
</script>

@endsection