@extends('layouts.commonmaster')

@section('title') | Dashboard @endsection

@push('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>

@endpush

@section('content')

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

        <div class="col-12 mb-4">
            <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">{{ \Carbon\Carbon::parse($season->start_date)->format('M') }}</div>
                                        <div class="date-day">{{ \Carbon\Carbon::parse($season->start_date)->format('d') }}</div>
                                        <div class="date-year">{{ \Carbon\Carbon::parse($season->start_date)->format('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">{{ \Carbon\Carbon::parse($season->end_date)->format('M') }}</div>
                                        <div class="date-day">{{ \Carbon\Carbon::parse($season->end_date)->format('d') }}</div>
                                        <div class="date-year">{{ \Carbon\Carbon::parse($season->end_date)->format('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('storage/' . $season->season_banner_file) }}" 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>
        </div>

        <div class="card" style="padding: 20px">
        <livewire:user-membership-table :season_id="$season_id" wire:init="initializeEvent(({{ $season_id }})"/>
        </div>
    </div>
</div>

@endsection

@push('scripts')

@endpush