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

{% block title %} | Season Events {% endblock %}

{% block styles %}
<style>
/* Calendar Date Card */
.date-card {
width: 80px; /* Adjust width for a square appearance */
border: 1px solid #ddd; /* Optional border */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
border-radius: 8px; /* Rounded corners */
background: #f9f9f9;
}

.date-month {
font-size: 1rem;
font-weight: bold;
color: #007bff;
}

.date-day {
font-size: 2rem;
font-weight: bold;
color: #333;
line-height: 1.2;
}

.date-year {
font-size: 0.8rem;
color: #666;
}

.date-label {
font-size: 0.75rem;
color: #888;
}

/* Circles for Matches */
.circle {
width: 20px;
height: 20px;
background-color: #007bff; /* Primary color */
border-radius: 50%;
display: inline-block;
}

.gap-2 {
gap: 10px; /* Space between circles */
}

/* Image */
.season-banner {
max-width: 100%; /* Ensures the image is responsive */
height: auto;
max-height: 300px; /* Optional: Limit the height */
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
.row.align-items-center.text-center.text-lg-start {
flex-direction: column; /* Stack content vertically */
}
.date-card {
margin-bottom: 1rem; /* Add spacing */
}
.season-banner {
margin-top: 1rem; /* Add spacing for better layout */
max-height: 200px; /* Smaller image for mobile */
}
}

/* Styling for the Navbar for this page */
.button-container {
display: flex;
justify-content: center; /* Center the content */
align-items: center; /* Align items vertically */
background-color: #f5f5f5; /* Light background for contrast */
overflow: hidden; /* Ensure content doesn't overflow the rounded corners */
width: fit-content;
margin: 10px auto; /* Center horizontally on the page */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for effect */
}

/* Remove list styles */
.button-container ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}

.button-container li {
flex: 1; /* Ensure equal widths */
text-align: center;
padding: 10px 20px;
background-color: #007bff; /* Button background color */
color: white; /* Text color */
font-size: 16px;
font-weight: bold;
cursor: pointer;
}

/* Remove the border on the last item */
.button-container li:last-child {
border-right: none;
}

/* Hover effect for buttons */
.button-container li:hover {
background-color: #0056b3; /* Darker blue on hover */
}

/* Active effect for buttons */
.button-container li:active {
background-color: #003f7f; /* Even darker blue on click */
}

</style>
{% endblock %}

{% block content %}

<div class="page-body">
  <div class="container-xl">

        {% if season_has_events %}

        <div class="col-12">
            <div class="card card-md">
                <div class="card-body">
                    <div class="container my-4">
                        <!-- Start and End Date, Season Name, and Image -->
                        <div class="row align-items-center text-center text-lg-start">
                            <!-- Start Date -->
                            <div class="col-6 col-lg-2">
                                <div class="card text-center date-card mx-auto mx-lg-0">
                                    <div class="card-body p-2">
                                        <div class="date-month">{{ season.StartDate|date('M') }}</div>
                                        <div class="date-day">{{ season.StartDate|date('d') }}</div>
                                        <div class="date-year">{{ season.StartDate|date('Y') }}</div>
                                        <div class="date-label text-muted">Start Date</div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Date -->
                            <div class="col-6 col-lg-2">
                                <div class="card text-center date-card mx-auto mx-lg-0">
                                    <div class="card-body p-2">
                                        <div class="date-month">{{ season.EndDate|date('M') }}</div>
                                        <div class="date-day">{{ season.EndDate|date('d') }}</div>
                                        <div class="date-year">{{ season.EndDate|date('Y') }}</div>
                                        <div class="date-label text-muted">End Date</div>
                                    </div>
                                </div>
                            </div>
                            <!-- Season Name -->
                            <div class="col-lg-4 mt-3 mt-lg-0">
                                <h1 class="h2">{{ season.Name }}</h1>
                            </div>
                            <!-- Season Image -->
                            <div class="col-lg-4 text-center mt-3 mt-lg-0">
                                <img src="{{ asset('MatchDayFiles/Season/') }}{{ season.SeasonBannerFile }}" alt="" class="img-fluid jarallax-img season-banner">
                            </div>
                        </div>

                        <!-- Text and Circles -->
                        <div class="row mt-4">
                            <!-- Text -->
                            <div class="col-12 text-center">
                                <span>
                                    The highly anticipated 2024-2025 Football Kenya Federation (FKF) National Super League promises to be a season of electrifying action
                                    and unforgettable moments.
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row row-deck row-cards mt-2">
            <div class="col-12">
                <div class="row row-cards">
                    <div class="col-sm-6 col-lg-3">
                        <a href="{{ path('app_show_season', { 'slug': app.request.attributes.get('slug') }) }}" style="text-decoration: none;">
                            <div class="card card-sm" style="background-color: #C4EED0;">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-primary text-white avatar">
                                                <i class="ti ti-ticket"></i>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="font-weight-medium">
                                                <strong>Season Dashboard</strong>
                                            </div>
                                            <div class="text-secondary">

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">

        {% for event in season_events %}
            
            <div class="mt-4 col-md-6 col-xl-4">

                <div class="card card-link card-link-pop test-watermark shadow-lg">

                <a href="{{ path('app_season_event_show', { 'slug': event.getSlug() }) }}">
                    <div class="card-cover card-cover-blurred text-center" style="background-image: url('{{ asset('MatchDayFiles/EventBanners/') }}{{ event.getEventMetadata().getEventBannerFile() }}');">
                        <span class="avatar avatar-xl avatar-thumb rounded" style="background-image: url('{{ asset('MatchDayFiles/EventBanners/') }}{{ event.getEventMetadata().getEventBannerFile() }}');"></span>
                    </div>
                </a>

                {% if event.getIsClosed() == '1' %}
                <div class="ribbon bg-red">Closed Event</div>
                {% else %}
                <div class="ribbon bg-green">Open</div>
                {% endif %}

                <div class="card-body">
                    <div class="card-title">Basic info</div>
                    <div class="mb-2">
                        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-ticket"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 5l0 2" /><path d="M15 11l0 2" /><path d="M15 17l0 2" /><path d="M5 5h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-3a2 2 0 0 0 0 -4v-3a2 2 0 0 1 2 -2" /></svg>
                        Event: <strong>
                            {{ event.getTeamA() }} vs {{ event.getTeamB() }}
                        </strong>
                    </div>
                    <div class="mb-2">
                        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-door-enter"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13 12v.01" /><path d="M3 21h18" /><path d="M5 21v-16a2 2 0 0 1 2 -2h6m4 10.5v7.5" /><path d="M21 7h-7m3 -3l-3 3l3 3" /></svg>
                        Venue: <strong>{{ event.getVenueName() }}</strong>
                    </div>
                    <div class="mb-2">
                        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-map-pin"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18.364 4.636a9 9 0 0 1 .203 12.519l-.203 .21l-4.243 4.242a3 3 0 0 1 -4.097 .135l-.144 -.135l-4.244 -4.243a9 9 0 0 1 12.728 -12.728zm-6.364 3.364a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z" /></svg>
                        Venue Address: <strong>{{ event.getVenueAddress() }}</strong> at {{ event.getStartTime() }}
                    </div>
                    <div class="mb-2">
                        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-eye-check"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M11.102 17.957c-3.204 -.307 -5.904 -2.294 -8.102 -5.957c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6a19.5 19.5 0 0 1 -.663 1.032" /><path d="M15 19l2 2l4 -4" /></svg>
                        Start Date: <strong>{{ event.getStartDate()|date('Y-m-d') }}</strong> at {{ event.getStartTime() }}
                    </div>
                    <div class="mb-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-secondary" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 7v5l3 3" /></svg>
                        End Date: <strong>{{ event.getEndDate()|date('Y-m-d') }}</strong> at {{ event.getEndTime() }}
                    </div>
                    <div class="">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-secondary" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                        Event Visibility: <strong class="badge badge-outline text-azure">{{ event.getEventVisibility() }}</strong>
                    </div>
                    <div class="mt-4 clearfix">
                        <div style="float: left;">
                            <span class="badge bg-blue-lt mt-1"><i>#Football</i></span>
                        </div>

                        {% if event.getIsClosed() == '0' %}
                        <div style="float: right;">
                            <a href="" style="text-decoration: none;"><i id="editEventBtn" class="ti ti-pencil" style="color: green;font-size: 25px;"></i></a>
                        </div>
                        {% endif %}

                    </div>

                </div>
            </div>
        </div>
        {% endfor %}

    </div>

        {% else %}

        <div class="col-12">
            <div class="card card-md">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h2 class="h3">There are no upcoming events for the season</h2>
                            <p class="m-0 text-secondary">
                                No Upcoming Events Scheduled
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-xl d-flex flex-column justify-content-center">
            <div class="empty">
                <div class="empty-img"><img src="{{ asset('images/static/illustrations/void.svg') }}" height="128" alt="">
                </div>
                <p class="empty-title">No upcoming events found</p>
                <p class="empty-subtitle text-secondary">
                    Try creating an event to populate your dashboard
                </p>
                <div class="empty-action">
                    <a href="{{ path('app_season_event_create', { 'slug': app.request.get('slug') }) }}" class="btn btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
                        Create Event
                    </a>
                </div>
            </div>
        </div>

        {% endif %}

    </div>
</div>

{% endblock %}