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

{% block title %} 3K FC | Matches & Tickets {% endblock %}

{% block content %}
<style>
.activePaginationButton {
background-color: #151515;
color: #fff;
}
.loader {
border: 6px solid #f3f3f3;
border-top: 6px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 0.8s linear infinite;
margin: 20px auto;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>

<!-- 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('MatchDayFiles/EventBanners/') }}{{ banner_image_1 }}">
            <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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide" data-slide-bg="{{ asset('MatchDayFiles/EventBanners/') }}{{ banner_image_2 }}">
            <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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide text-center" data-slide-bg="{{ asset('MatchDayFiles/EventBanners/') }}{{ banner_image_3 }}">
            <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>
                        </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>

{% for special_event in special_events %}
<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"> {{ special_event.getStartDate()|date('d') }} </span>
                                    <span class="heading-5"> {{ special_event.getStartDate()|date('M') }} </span>
                                </time>
                                <div class="promo-creative-meta-description">
                                    <span class="text-primary">{{ special_event.getStartTime() }}</span>
                                    <span> {{ special_event.getStartDate()|date('l') }} </span>
                                </div>
                            </div>
                            <div class="promo-creative-figure">
                                <img src="{{ asset('MatchDayFiles/SpecialEventBanner/') }}{{ special_event.getEventMetadata().getEventBannerFile() }}" alt="" width="357" height="321"/>
                            </div>
                        </div>
                        <div class="unit-right">
                            <div class="promo-creative-details">
                                <h3 class="promo-creative-title"> {{ special_event.getStartDate()|date('jS M') }} </h3>
                                <p class="promo-creative-location"><span class="icon icon-gray-800 mdi mdi-map-marker"></span>{{ special_event.getVenueName() }}
                                </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>{{ special_event.getEventMetadata().getEventDesc() }}</span>
                                <div class="promo-creative-tickets">
                                    <div class="promo-buttons text-nowrap">
                                        <a class="button button-primary" href="">Attend</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endfor %}

<!-- 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">
                    {% if featuredEvent %}
                    <!-- 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('MatchDayFiles/TeamLogos/') }}{{ 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">
                                            {{ featuredEvent.start_date|date('D d') }}
                                        </span>
                                        {{ featuredEvent.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><a class="button button-sm button-primary" href="{{ path('app_fan_event_show', {'slug': featuredEvent.slug}) }}">Buy tickets</a>
                                    </div>
                                </div>
                                <div class="game-info-team game-info-team-second">
                                    <figure><img src="{{ asset('MatchDayFiles/TeamLogos/') }}{{ 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>
                                        {% elseif last_match_results  %}
<article class="heading-component">
                        <div class="heading-component-inner">
                            <h5 class="heading-component-title">Latest Game Results
                            </h5>
                        </div>
                    </article>
<article class="game-result">
                <div class="game-info game-info-classic">
                                    <p class="game-info-subtitle">
                                        {{ last_match_results.venue_name }}
                                        <time datetime="2024-04-17">
                                            {{ last_match_results.start_date|date('F j, Y') }}
                                        </time>
                                    </p>
                                    <h3 class="game-info-title">{{ last_match_results.match_day }}</h3>
                                    <div class="game-info-main">
                                        <div class="game-info-team game-info-team-first">
                                            <figure><img src="{{ asset('MatchDayFiles/TeamLogos/') }}{{ last_match_results.team_a_logo }}" alt="" width="77" height="99"/>
                                            </figure>
                                            <div class="game-result-team-name">{{ last_match_results.team_a }}</div>
                                            <div class="game-result-team-country">Home</div>
                                        </div>
                                        <div class="game-info-middle">
                                            <div class="game-result-score-wrap">
                                                <div class="game-info-score text-primary">{{ last_match_results.team_a_score }}</div>
                                                <div class="game-info-score text-primary">{{ last_match_results.team_b_score }}</div>
                                            </div>
                                            <div class="game-result-divider-wrap"><span class="game-info-team-divider">VS</span></div>
                                        </div>
                                        <div class="game-info-team game-info-team-second">
                                            <figure><img src="{{ asset('MatchDayFiles/TeamLogos/') }}{{ last_match_results.team_b_logo }}" alt="" width="75" height="99"/>
                                            </figure>
                                            <div class="game-result-team-name">{{ last_match_results.team_b }}</div>
                                            <div class="game-result-team-country">AWAY</div>
                                        </div>
                                    </div>
                                </div>
                            </article>

                                        {% endif %}
                </div>

                <div class="main-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 page in 1..pages %}
                                    <button {% if loop.first %}{% else %} style="margin-top: 0px" {% endif %} id="page-{{ page }}" class="button button-xs button-gray-outline button_{{ page }}"> {{ page }} </button>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </article>

                    <div class="row row-30" id="all_events" style="">
                        <div id="loaderDiv" style="display: none"> <img src="{{ asset('fanassets/loader/loader.gif') }}" alt="Loading..."> </div>
                        {% for event in all_events %}
                        <div class="col-md-6" id="">
                            <!-- Game Result Classic-->
                            <article class="game-result game-result-classic" style="border-bottom: 3px solid #E80137;">
                                <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('MatchDayFiles/TeamLogos/') }}{{ 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
                                                {% if event.team_a_score > event.team_b_score %}
                                                game-result-team-win 
                                                {% endif %}">
                                                {{ event.team_a_score }}
                                                <span class="game-result-team-label game-result-team-label-top">
                                                    {% if event.team_a_score > event.team_b_score %}
                                                    WIN
                                                    {% endif %}
                                                </span>
                                            </div>
                                            <div class="game-result-score-divider">
                                                {% if event.team_a_score == event.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 event.team_a_score < event.team_b_score %}
                                                game-result-team-win 
                                                {% endif %}">
                                                {{ event.team_b_score }}<span class="game-result-team-label game-result-team-label-top">
                                                    {% if event.team_a_score < event.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('MatchDayFiles/TeamLogos/') }}{{ event.team_b_logo }}" alt="" width="50" height="50" />
                                        </figure>
                                        <div class="game-result-team-name" id="truncatedString-{{ event.id }}">{{ 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">
                                                {{ event.start_date|date('F j, Y') }}
                                            </time>
                                        </li>
                                    </ul>
                                </div>
                            </article>
                        </div>
                        {% endfor %}
                    </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 page in 1..pages %}
                                    <button {% if loop.first %}{% else %} style="margin-top: 0px" {% endif %} id="page-{{ page }}" class="button button-xs button-gray-outline button_{{ page }}"> {{ page }} </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 table-custom-striped">
                            <thead style="position: sticky; top: 0;">
                                <tr>
                                    <th colspan="2">Team Position</th>
                                    <th>W</th>
                                    <th>L</th>
                                    <th>GD</th>
                                    <th>PTS</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% set count = 0 %}
                                {% for team_standing in team_standings %}
                                <tr 
                                    {% set count = count + 1 %}
                                    {% if team_standing.getTeamName()|lower in fan_org_name %} style="background-color: #f2687b;"
                                    {% endif %}>
                                    <td><span class="">{{ count }}</span></td>
                                    <td class="team-inline">
                                        <div class="team-figure"><img src="{{ team_standing.getTeamLogo() }}" alt="" width="31" height="41"/>
                                        </div>
                                        <div class="team-title">
                                            <div class="team-name">{{ team_standing.getTeamName() }}</div>
                                        </div>
                                    </td>
                                    <td>{{ team_standing.getWon() }}</td>
                                    <td>{{ team_standing.getLost() }}</td>
                                    <td>{{ team_standing.getGoalDiff() }}</td>
                                    <td>{{ team_standing.getPoints() }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}

{% block 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(event) {

        $('[id^="page-"]').each(function(){
            $(this).css({'background-color' : '', 'color': ''})
        })

        buttonClass = $(this).attr("class").split(" ").pop()
        $('.' + buttonClass).css({ 'background-color': '#151515', 'color': '#fff' });

        const page = $(this).attr('id').split('-')[1];
        $('#all_events').html('<div id="loaderDiv" style="display: none"> <img src="{{ asset('fanassets/loader/loader.gif') }}" alt="Loading..."> </div>')
        $('#loaderDiv').css({ 'display': 'block', 'margin': '100px auto' });

        $.ajax({
            method: 'GET',
            url: '/fan/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' : '';
                    let teamALogo = "{{ asset('MatchDayFiles/TeamLogos/') }}" + event.team_a_logo
                    let teamBLogo = "{{ asset('MatchDayFiles/TeamLogos/') }}" + event.team_b_logo

                    htmlContent += `<div id="loaderDiv" style="display: none"> <img src="{{ asset('fanassets/loader/loader.gif') }}" alt="Loading..."> </div> <div id="" class="col-md-6"><article class="game-result game-result-classic" style="border-bottom: 3px solid #E80137;"><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="${teamALogo}" 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="${teamBLogo}" 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>
{% endblock %}