@extends('fan.layouts.commonmaster')

@section('title') | Dashboard @endsection

@section('content')

<!-- Swiper-->
<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" data-slide-bg="{{ asset('fanassets/images/team/team2.jpeg') }}">
            <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('fanassets/images/team/team3.jpeg') }}">
            <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 text-center" data-slide-bg="{{ asset('fanassets/images/team/team1.jpeg') }}">
            <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>

@forelse($fundraiser_event as $fundraiser)
<section class="section section-md bg-gray-100">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">

                    <article class="heading-component">
                        <div class="heading-component-inner">
                            <h5 class="heading-component-title">Fundraiser Event
                            </h5>
                        </div>
                    </article>
                <div class="promo-creative unit-spacing-lg">
                    <div class="unit unit-md-horizontal align-items-center align-items-md-stretch">
                        <div class="unit-body">
                            <div class="promo-creative-meta">
                                <time class="promo-creative-time" datetime="2024-05-17"><span class="heading-1">{{ \Carbon\Carbon::parse($fundraiser->start_date)->format('d') }}</span><span class="heading-5">{{ \Carbon\Carbon::parse($fundraiser->start_date)->format('M') }}</span></time>
                                <div class="promo-creative-meta-description"><span class="text-primary">{{ $fundraiser->start_time }}</span><span>{{ \Carbon\Carbon::parse($fundraiser->start_date)->format('l') }}</span></div>
                            </div>
                            <div class="promo-creative-figure"><img src="{{ asset('storage/' . $fundraiser->event_banner_file) }}" alt="" width="357" height="321"/>
                            </div>
                        </div>
                        <div class="unit-right">
                            <div class="promo-creative-details">
                                <h3 class="promo-creative-title">26th March </h3>
                                <p class="promo-creative-location"><span class="icon icon-gray-800 mdi mdi-map-marker"></span>{{ $fundraiser->venue_name }}
                                </p>
                                <div class="promo-creative-countdown">
                                    <div class="countdown countdown-bordered" data-type="until" data-time="31 Dec 2024 16:00" data-format="dhms" data-style="short"></div>
                                </div>

                                <span>{{ $fundraiser->event_desc }}</span>
                                <div class="promo-creative-tickets">
                                    <div class="promo-buttons text-nowrap">
                                         <!-- <div class="promo-button promo-button-share fl-bigmug-line-share27"> -->
                                         <!--      <ul class="promo-share-list"> -->
                                         <!--          <li class="promo-share-item"><span>Share</span></li> -->
                                         <!--          <li class="promo-share-item"><a class="icon fa fa-facebook" href="#"></a></li> -->
                                         <!--          <li class="promo-share-item"><a class="icon fa fa-twitter" href="#"></a></li> -->
                                         <!--          <li class="promo-share-item"><a class="icon fa fa-google-plus" href="#"></a></li> -->
                                         <!--          <li class="promo-share-item"><a class="icon fa fa-instagram" href="#"></a></li> -->
                                         <!--      </ul> -->
                                         <!-- </div> -->
                                        <a class="button button-primary" href="{{ route('membership.checkout', ['event_id' => $fundraiser->id]) }}">Attend</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@empty
@endforelse

<!-- Latest News-->
<section class="section section-md bg-gray-100">
    <div class="container">
        <div class="row row-50">
            <div class="col-lg-8">

                @if($featuredEvent)
                <div class="main-component">
                    <!-- Heading Component-->
                    <article class="heading-component">
                        <div class="heading-component-inner">
                            <h5 class="heading-component-title">Upcoming Match
                            </h5>
                        </div>
                    </article>
                    <!-- Game Result Bug-->
                    <article class="game-result">
                        <div class="game-info game-info-creative">
                            <p class="game-info-subtitle">{{ $featuredEvent->venue_name }}
                                <time datetime="08:30">{{ $featuredEvent->start_time }}</time>
                            </p>
                            <h3 class="game-info-title">{{ $featuredEvent->match_day }}</h3>
                            <div class="game-info-main">
                                <div class="game-info-team game-info-team-first">
                                    <figure><img src="{{ asset('storage/' . $featuredEvent->team_a_logo) }}" alt="" width="75" height="99" />
                                    </figure>
                                    <div class="game-result-team-name">{{ $featuredEvent->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($featuredEvent->start_date)->format('D d') }}
                                        </span>
                                        {{ \Carbon\Carbon::parse($featuredEvent->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' => $featuredEvent->id]) }}">Buy tickets</a>
                                    </div>
                                </div>
                                <div class="game-info-team game-info-team-second">
                                    <figure><img src="{{ asset('storage/' . $featuredEvent->team_b_logo) }}" alt="" width="91" height="91" />
                                    </figure>
                                    <div class="game-result-team-name">{{ $featuredEvent->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>
                @endif

                <div class="main-component">
                    <!-- Heading Component-->
                    <article class="heading-component">
                        <div class="heading-component-inner">
                            <h5 class="heading-component-title">Past Matches</h5>
                            <div class="owl-carousel-arrows-outline">
                                <div class="owl-nav">
                                    @for($pagenumber=1; $pagenumber<=$pages; $pagenumber++)
                                    <button
                                        @for($loop=2; $loop<=$pages; $loop++)
                                        style="margin-top: 0px"
                                        @endfor
                                        id="page-{{ $pagenumber }}" class="button button-xs button-gray-outline">{{ $pagenumber }}</button>
                                    @endfor
                                </div>
                            </div>
                        </div>
                    </article>

                    <div class="row row-30" id="all_events">
                        @forelse($all_events as $ae)
                        <div class="col-md-6">
                            <!-- Game Result Classic-->
                            <article class="game-result game-result-classic">
                                <div class="game-result-main">
                                    <div class="game-result-team game-result-team-first">
                                        <figure class="game-result-team-figure game-result-team-figure-big"><img src="{{ asset('storage/' . $ae->team_a_logo) }}" alt="" width="41" height="55" />
                                        </figure>
                                        <div class="game-result-team-name">{{ $ae->team_a }}</div>
                                        <div class="game-result-team-country">EMBU</div>
                                    </div>
                                    <div class="game-result-middle">
                                        <div class="game-result-score-wrap">
                                            <div class="game-result-score @if($ae->team_a_score > $ae->team_b_score) game-result-team-win @endif">
                                                {{ $ae->team_a_score }}
                                                <span class="game-result-team-label game-result-team-label-top">@if($ae->team_a_score > $ae->team_b_score) WIN @endif</span>
                                            </div>
                                            <div class="game-result-score-divider">
                                                @if($ae->team_a_score == $ae->team_b_score)
                                                <span style="color: yellow;" class="game-result-team-label game-result-team-label-top">DRAW</span>
                                                @endif
                                                <svg x="0px" y="0px" width="7px" height="21px" viewbox="0 0 7 21" enable-background="new 0 0 7 21" xml:space="preserve">
                                                    <g>
                                                        <circle cx="3.5" cy="3.5" r="3"></circle>
                                                        <path d="M3.5,1C4.879,1,6,2.122,6,3.5S4.879,6,3.5,6S1,4.878,1,3.5S2.122,1,3.5,1 M3.5,0C1.567,0,0,1.567,0,3.5S1.567,7,3.5,7      S7,5.433,7,3.5S5.433,0,3.5,0L3.5,0z"></path>
                                                    </g>
                                                    <g>
                                                        <circle cx="3.695" cy="17.5" r="3"></circle>
                                                        <path d="M3.695,15c1.378,0,2.5,1.122,2.5,2.5S5.073,20,3.695,20s-2.5-1.122-2.5-2.5S2.316,15,3.695,15 M3.695,14      c-1.933,0-3.5,1.567-3.5,3.5s1.567,3.5,3.5,3.5s3.5-1.567,3.5-3.5S5.628,14,3.695,14L3.695,14z"></path>
                                                    </g>
                                                </svg>
                                            </div>
                                            <div class="game-result-score @if($ae->team_a_score < $ae->team_b_score) game-result-team-win @endif">{{ $ae->team_b_score }}<span class="game-result-team-label game-result-team-label-top">
                                                @if($ae->team_a_score < $ae->team_b_score)
                                                WIN
                                                @endif
                                            </span>
                                            </div>
                                        </div>
                                        <div class="game-results-status">Home</div>
                                    </div>
                                    <div class="game-result-team game-result-team-second">
                                        <figure class="game-result-team-figure game-result-team-figure-big"><img src="{{ asset('storage/' . $ae->team_b_logo) }}" alt="" width="50" height="50" />
                                        </figure>
                                        <div class="game-result-team-name" id="truncatedString-{{ $ae->id }}">{{ $ae->team_b }}</div>
                                        <div class="game-result-team-country">AWAY</div>
                                    </div>
                                </div>
                                <div class="game-result-footer">
                                    <ul class="game-result-details">
                                        <li>{{ $ae->venue_name }}</li>
                                        <li>
                                            <time datetime="2020-04-14">
                                                {{ \Carbon\Carbon::parse($ae->start_date)->format('F j, Y') }}
                                            </time>
                                        </li>
                                    </ul>
                                </div>
                            </article>
                        </div>
                        @empty
                        No Events Yet
                        @endforelse
                    </div>
                    <article class="heading-component mt-2">
                        <div class="heading-component-inner">
                            <h5 class="heading-component-title"></h5>
                            <div class="owl-carousel-arrows-outline">
                                <div class="owl-nav">
                                    @for($pagenumber=1; $pagenumber<=$pages; $pagenumber++)
                                    <button
                                        @for($loop=2; $loop<=$pages; $loop++)
                                        style="margin-top: 0px"
                                        @endfor
                                        id="page-{{ $pagenumber }}" class="button button-xs button-gray-outline">{{ $pagenumber }}</button>
                                    @endfor
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
            <!-- Aside Block-->
            <div class="col-lg-4">
                <div class="aside-component">
                    <!-- Heading Component-->
                    <article class="heading-component">
                        <div class="heading-component-inner">
                            <h5 class="heading-component-title">Standings
                            </h5><a class="button button-xs button-gray-outline" href="#">Full Standings</a>
                        </div>
                    </article>
                    <!-- Table team-->
                    <div class="table-custom-responsive" style="overflow-y: scroll; height:1100px;overflow-x: hidden">
                        <table class="table-custom table-standings table-classic">
                            <thead>
                                <tr>
                                    <th colspan="2">Team Position</th>
                                    <th>W</th>
                                    <th>L</th>
                                    <th>GD</th>
                                    <th>PTS</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $count=0 @endphp
                                @forelse($team_standings as $ts)
                                @php $count++ @endphp
                                <tr @if($ts->team_name == '3K') style="background-color: #AD354F;" @endif>
                                    <td><span>{{ $count }}</span></td>
                                    <td class="team-inline">
                                        <div class="team-figure"><img src="{{ $ts->team_logo }}" alt="" width="31" height="41"/>
                                        </div>
                                        <div class="team-title">
                                            <div class="team-name">{{ $ts->team_name }}</div>
                                        </div>
                                    </td>
                                    <td>{{ $ts->won }}</td>
                                    <td>{{ $ts->lost }}</td>
                                    <td>{{ $ts->goal_diff }}</td>
                                    <td>{{ $ts->points }}</td>
                                </tr>
                                @empty
                                No Events Yet
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

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

    function truncateText(){
        $('body').find('[id^=truncatedString]').each(function() {
            $(this).text($(this).text().slice(0, 14))
        })
    }

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

        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 => {
                    let teamAWinClass = event.team_a_score > event.team_b_score ? 'game-result-team-win' : '';
                    let teamBWinClass = event.team_a_score < event.team_b_score ? 'game-result-team-win' : '';
                    let drawClass = event.team_a_score === event.team_b_score ? 'game-result-team-label-top' : '';

                    htmlContent += `<div class="col-md-6"><article class="game-result game-result-classic"><div class="game-result-main"><div class="game-result-team game-result-team-first">
<figure class="game-result-team-figure game-result-team-figure-big"><img src="/storage/${event.team_a_logo}" alt="" width="41" height="55"/></figure>
<div class="game-result-team-name">${event.team_a}</div><div class="game-result-team-country">EMBU</div></div><div class="game-result-middle"><div class="game-result-score-wrap">
<div class="game-result-score ${teamAWinClass}">${event.team_a_score}<span class="game-result-team-label game-result-team-label-top">${teamAWinClass ? 'WIN' : ''}</span>
</div><div class="game-result-score-divider">${event.team_a_score === event.team_b_score ?`<span style="color: yellow;" class="game-result-team-label ${drawClass}">DRAW</span>` : ''}
<svg x="0px" y="0px" width="7px" height="21px" viewbox="0 0 7 21" enable-background="new 0 0 7 21" xml:space="preserve"><g><circle cx="3.5" cy="3.5" r="3"></circle><path d="M3.5,1C4.879,1,6,2.122,6,3.5S4.879,6,3.5,6S1,4.878,1,3.5S2.122,1,3.5,1 M3.5,0C1.567,0,0,1.567,0,3.5S1.567,7,3.5,7 S7,5.433,7,3.5S5.433,0,3.5,0L3.5,0z"></path></g><g><circle cx="3.695" cy="17.5" r="3"></circle><path d="M3.695,15c1.378,0,2.5,1.122,2.5,2.5S5.073,20,3.695,20s-2.5-1.122-2.5-2.5S2.316,15,3.695,15 M3.695,14 c-1.933,0-3.5,1.567-3.5,3.5s1.567,3.5,3.5,3.5s3.5-1.567,3.5-3.5S5.628,14,3.695,14L3.695,14z"></path></g></svg></div>
<div class="game-result-score ${teamBWinClass}">${event.team_b_score}<span class="game-result-team-label game-result-team-label-top">${teamBWinClass ? 'WIN' : ''}</span></div>
</div><div class="game-results-status">Home</div></div><div class="game-result-team game-result-team-second"><figure class="game-result-team-figure game-result-team-figure-big">
<img src="/storage/${event.team_b_logo}" alt="" width="50" height="50"/></figure><div class="game-result-team-name" id="truncatedString-${event.team_b}">${event.team_b}</div>
<div class="game-result-team-country">AWAY</div></div></div><div class="game-result-footer"><ul class="game-result-details"><li>${event.venue_name}</li>
<li><time datetime="2020-04-14">${new Date(event.start_date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}</time></li></ul></div></article></div>`;
                });

                $('#all_events').html(htmlContent);

                truncateText()
            },
            error: function() {

            },
        })
    })
})
</script>
@endpush