@extends('layouts.front-layout')
@section('title') Home @endsection

@section('content')
<style>
    .event-container {
        display: none !important;
        width: 100%;
        border-radius: 10px;
        margin-bottom: 10px;
        transition: all 0.3s ease;
        cursor: pointer;
        float: left;
    }

    .calendar-sidebar .active-month {
        background: #ea0000 !important;
    }

    .calendar-sidebar .calendar-months > li {
        padding: 7px 30px;
        cursor: pointer;
        font-size: 16px;
        font-family: 'Poppins';
    }

    .calendar-sidebar .calendar-months>li {
        padding: 8px 1.875rem;
        font-size: 1.1875rem;
        font-weight: 500;
    }
</style>
    <section class="main-slider p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">

                @forelse($get_sliders as $slider)
                <div class="swiper-slide">
                    <div class="slide-inner bg-image" data-background="{{$slider->sliderImage('slider_image') ? : ''}}">
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="slideOne">
                                        <h1>{{$slider->first_heading ? : ''}}</h1>
                                        <p>{!! $slider->description ? : '' !!}</p>
                                        <a href="{{route('tournament.schedule')}}" class="themeBtn">US Tournament Schedule</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                    <h2 class="text-center text-danger">Slider Data Not Found</h2>
                @endforelse
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </section>

    <section class="serviceSec">
        <div class="container">
            <h2 class="mainHeading text-center pb-4" data-aos="fade-up">{{$pageData['Services']['services_top_banner_title']}}</h2>
            <div class="row">
                @forelse($get_services as $services)

                <div class="col-md-6">
                    <div class="serviceWrap" data-aos="fade-up">
                        <figure>
                            <img src="{{$services->servicesImage('services_image') ? : ''}}" class="img-fluid" alt="">
                        </figure>
                        <div class="serviceContent">
                            <h3>{{$services->heading ? : ''}}</h3>
                            <a href="{{route('tournament.schedule')}}" class="themeBtn">US Tournament Schedule</a>
                        </div>
                    </div>
                </div>

                @empty
                    <h2 class="text-center text-danger"> Services Data Not Found</h2>
                @endforelse
            </div>
        </div>
    </section>

    <section class="productSec">
        <div class="container">
            <h2 class="mainHeading text-center mb-4" data-aos="fade-up">Dart products</h2>
            <div class="row">
              @forelse($get_products as $product)
                <div class="col-md-3">
                    <div class="productWrap" data-aos="fade-up">
                        <figure>
                            <img src="{{$product->productImage('product_image') ? : ''}}" class="img-fluid" alt="">
                        </figure>
                        <div class="productContent">
                            <h3>{{$product->product_name ? : ''}}</h3>
                            <span>$ {{$product->price ? : ''}}</span>
                            <ul>
                                <li><i class="fas fa-star"></i></li>
                                <li><i class="fas fa-star"></i></li>
                                <li><i class="fas fa-star"></i></li>
                                <li><i class="fas fa-star"></i></li>
                                <li><i class="fas fa-star"></i></li>
                            </ul>
                            <a href="{{route('dart.product')}}">Shop Now</a>
                        </div>
                    </div>
                </div>
                @empty
                    <h3 class="text-danger mx-auto">Dart products Data Not Found</h3>
                @endforelse
            </div>
        </div>
    </section>

    <section class="eventSec">
        <div class="container-fluid p-0">
            <h2 class="mainHeading text-center" data-aos="fade-up">upcoming public events</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="eventTabs" data-aos="fade-up">
                        <ul class="nav nav-pills" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="pills-home-tab" data-toggle="pill"
                                        data-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                                        aria-selected="true">Past events</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-profile-tab" data-toggle="pill"
                                        data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile"
                                        aria-selected="false">Upcoming public events</button>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                             aria-labelledby="pills-home-tab">

                            <div class="row">
                                @forelse($get_past_events as $past_event)
                                <div class="col-md-6">
                                    <div class="eventWrap">
                                        <figure>
                                            <img src="{{ $past_event->image_status === 1 ? $past_event->image_url : $past_event->eventImage('event_image') }}" class="img-fluid" alt="">

                                            <div class="eventDate">
                                                <i class="fal fa-calendar"></i>
                                                Posted on {{ date('F - d - Y', strtotime($past_event->start_date)) }}
                                            </div>
                                        </figure>
                                        <div class="eventContent">
                                            <h3>{{$past_event->event_name ? : ''}}</h3>
                                            <a href="{{route('upcoming.hit.man.events')}}" class="themeBtn">View More Details</a>
                                        </div>
                                    </div>
                                </div>

                                @empty
                                    <h3 class="text-danger mx-auto">Past Event Data Not Found</h3>
                                @endforelse
                            </div>

                        </div>

                        <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                             aria-labelledby="pills-profile-tab">
                            <div class="row">
                                @forelse($get_future_events as $future_event)
                                <div class="col-md-6">
                                    <div class="eventWrap">
                                        <figure>
                                            <img src="{{ $future_event->image_status === 1 ? $future_event->image_url : $future_event->eventImage('event_image') }}" class="img-fluid" alt="">
                                            <div class="eventDate">
                                                <i class="fal fa-calendar"></i>
                                                Posted on {{ date('F - d - Y', strtotime($future_event->start_date)) }}
                                            </div>
                                        </figure>
                                        <div class="eventContent">
                                            <h3>{{$future_event->event_name ? : ''}}</h3>
                                            <a href="{{route('upcoming.hit.man.events')}}" class="themeBtn">View More Details</a>
                                        </div>
                                    </div>
                                </div>
                                @empty
                                    <h3 class="text-danger mx-auto">Upcoming Event Data Not Found</h3>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="cornholeSec">
        <div class="container">
            <h2 class="mainHeading text-center" data-aos="fade-up">Cornhole products</h2>
            <div class="col-md-12">
                <div class="eventTabs" data-aos="fade-up">
                    <ul class="nav nav-pills" id="pills-tab" role="tablist">
                        @foreach($get_categories as $index => $category)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link {{ $index == 0 ? 'active' : '' }}" id="pills-{{ $category->id }}-tab"
                                        data-toggle="pill" data-target="#pills-{{ $category->id }}" type="button" role="tab"
                                        aria-controls="pills-{{ $category->id }}" aria-selected="{{ $index == 0 ? 'true' : 'false' }}">
                                    {{ $category->category_name }}
                                </button>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div class="tab-content" id="pills-tabContent">
                    @foreach($get_categories as $index => $category)
                        <div class="tab-pane fade {{ $index == 0 ? 'show active' : '' }}" id="pills-{{ $category->id }}" role="tabpanel"
                             aria-labelledby="pills-{{ $category->id }}-tab">
                            <div class="row">
                                @forelse($category->product as $product)
                                    <div class="col-md-4">
                                        <div class="cornholeWrap">
                                            <figure>
                                                <img src="{{ $product->productImage('product_image') }}" class="img-fluid" alt="">
                                            </figure>
                                            <div class="cornholeContent">
                                                <h3>{{ $product->product_name }}</h3>
                                                <span>$ {{ $product->price }}</span>
                                                <ul>
                                                    <li><i class="fas fa-star"></i></li>
                                                    <li><i class="fas fa-star"></i></li>
                                                    <li><i class="fas fa-star"></i></li>
                                                    <li><i class="fas fa-star"></i></li>
                                                    <li><i class="fas fa-star"></i></li>
                                                </ul>
                                                <a href="{{route('dart.product')}}">Shop Now</a>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <h3 class="text-center">Product Not Found</h3>
                                @endforelse
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <section class="calenderSec">
        <div class="container">
            <h2 class="mainHeading text-center mb-4" data-aos="fade-up">dart tournament calendar</h2>
            <div class="row justify-content-center">
                <div class="col-md-10" data-aos="fade-up">
                    <div id="evoCalendar"></div>
                </div>
                <!-- Table for displaying event details -->
                <div class="col-md-10 mt-4" data-aos="fade-up">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>Event Name</th>
                            <th>Date</th>
                            <th>Description</th>
                        </tr>
                        </thead>
                        <tbody id="eventDetails">
                        <tr>
                            <td colspan="3" class="text-center">Click an event to see details</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <section class="teamSec">
        <div class="container">
            <h2 class="mainHeading text-center mb-4" data-aos="fade-up">Team Hitman</h2>
            <div class="row">
                @forelse($get_team_hit_man as $team_hit_man)

                <div class="col-md-4">
                    <div class="teamWrap" data-aos="fade-up">
                        <figure>
                            <img src="{{$team_hit_man->teamHitmanImage('team_hit_man_image') ? : ''}}" class="img-fluid" alt="">
                        </figure>
                        <div class="teamContent">
                            <h3>{{$team_hit_man->heading ? : ''}}</h3>
                            <span>{!! $team_hit_man->description ? : '' !!}</span>
                            <ul class="socialMedia">
                                <li><a href="{{$setting->facebook ?? ''}}"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="{{$setting->instagram ?? ''}}"><i class="fab fa-instagram"></i></a></li>
                                <li><a href="{{$setting->twitter ?? ''}}"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="{{$setting->youtube ?? ''}}"><i class="fab fa-youtube"></i></a></li>
                                <li><a href="{{$setting->trip_advisor ?? ''}}"><i class="fab fa-tripadvisor"></i></a></li>
                            </ul>
                            <a href="{{route('team.hit.man')}}" class="teamDetail">View Details</a>
                        </div>
                    </div>
                </div>

                @empty
                    <h2 class="text-center text-danger"> Team Hitman Data Not Found</h2>
                @endforelse
            </div>
        </div>
    </section>

@endsection
@section('script')

<script>

    document.addEventListener('DOMContentLoaded', function() {
        const events = @json($events);

        $('#evoCalendar').evoCalendar({
            theme: 'Royal Navy',
            calendarEvents: events
        });


    });


    $('#evoCalendar').on('selectDate', function(event, activeDate) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Convert activeDate to YYYY-MM-DD format for database (ISO 8601)
        const formattedDateForDB = formatDate(activeDate, 'YYYY-MM-DD');
        // console.log("Formatted date for database (YYYY-MM-DD):", formattedDateForDB);

        $.ajax({
            url: "{{ route('event.details') }}",
            method: 'POST',
            data: {
                date: formattedDateForDB,
            },
            success: function(response) {

                $('#eventDetails').html(`
                <tr>
                    <td>${response.name}</td>
                    <td>${response.date}</td>
                    <td>${response.description || 'No description available'}</td>
                </tr>
            `);
            },
            error: function(xhr) {
                console.error('Error fetching event details:', xhr);
                $('#eventDetails').html(`
                <tr>
                    <td colspan="3" class="text-center">Event not found</td>
                </tr>
            `);
            }
        });
    });

    // Helper function to format date
    function formatDate(date, format) {
        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
        const formattedDate = new Date(date).toLocaleDateString('en-US', options);

        if (format === 'MM/DD/YYYY') {
            return formattedDate; // In MM/DD/YYYY format
        }

        // Convert to YYYY-MM-DD
        const [month, day, year] = formattedDate.split('/');
        return `${year}-${month}-${day}`;
    }

</script>

@endsection