@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)

@section('content')
    @php
        $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
        $monthLabel = \Carbon\Carbon::createFromFormat('Y-m', $date)->format('F Y');
        $prevMonth = \Carbon\Carbon::createFromFormat('Y-m', $date)->copy()->subMonth()->format('Y-m');
        $nextMonth = \Carbon\Carbon::createFromFormat('Y-m', $date)->copy()->addMonth()->format('Y-m');
    @endphp

    @include('frontend.layouts.breadcrumb', ['title' => $pageCalendarTitle ?? 'Events Calendar'])

    <section class="space bg-light pb-80">
        <div class="container">
            @if(!empty($pageCalendarIntro))
                <div class="row mb-40">
                    <div class="col-lg-12 text-center">
                        <div class="title-wrap three">
                            <p class="mb-0">{{ $pageCalendarIntro }}</p>
                        </div>
                    </div>
                </div>
            @endif

            <div class="row gy-20 mb-35 align-items-center justify-content-between">
                <div class="col-lg-auto d-flex flex-wrap gap-2">
                    <a href="{{ route('frontend.events.index') }}" class="theme-btn {{ request()->routeIs('frontend.events.index') ? 'br-30' : 'style2 br-30 bg-white text-dark' }}">
                        <span class="link-effect"><span class="effect-1">List View</span><span class="effect-1">List View</span></span>
                    </a>
                    <a href="{{ route('frontend.events.calendar', ['date' => $date]) }}" class="theme-btn {{ request()->routeIs('frontend.events.calendar') ? 'br-30' : 'style2 br-30 bg-white text-dark' }}">
                        <span class="link-effect"><span class="effect-1">Calendar</span><span class="effect-1">Calendar</span></span>
                        <i class="fa-regular fa-calendar ms-1"></i>
                    </a>
                </div>
                <div class="col-lg-auto d-flex flex-wrap align-items-center gap-3">
                    <a href="{{ route('frontend.events.calendar', ['date' => $prevMonth]) }}" class="theme-btn style2 br-30 bg-white text-dark">
                        <span class="link-effect"><span class="effect-1"><i class="fa-solid fa-chevron-left"></i> Previous</span><span class="effect-1"><i class="fa-solid fa-chevron-left"></i> Previous</span></span>
                    </a>
                    <h3 class="mb-0 sec-title">{{ $monthLabel }}</h3>
                    <a href="{{ route('frontend.events.calendar', ['date' => $nextMonth]) }}" class="theme-btn style2 br-30 bg-white text-dark">
                        <span class="link-effect"><span class="effect-1">Next <i class="fa-solid fa-chevron-right"></i></span><span class="effect-1">Next <i class="fa-solid fa-chevron-right"></i></span></span>
                    </a>
                </div>
            </div>

            <div class="bg-white br-30 overflow-hidden border shadow-sm">
                <div class="d-grid text-center fw-semibold border-bottom" style="grid-template-columns: repeat(7, 1fr); background: var(--theme-color3, #f5f7fb);">
                    @foreach(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as $day)
                        <div class="py-3 border-end">{{ $day }}</div>
                    @endforeach
                </div>

                @php
                    $currentDate = $startOfMonth->copy()->startOfWeek();
                    $endGrid = $endOfMonth->copy()->endOfWeek();
                @endphp

                <div class="d-grid border-bottom" style="grid-template-columns: repeat(7, 1fr);">
                    @while($currentDate <= $endGrid)
                        @php
                            $isCurrentMonth = $currentDate->month === $startOfMonth->month;
                            $isToday = $currentDate->isToday();
                            $dayEvents = $events[$currentDate->format('Y-m-d')] ?? collect();
                            $cellClass = $isCurrentMonth ? 'bg-white' : 'bg-light';
                        @endphp
                        <div class="border-end border-bottom p-2 {{ $cellClass }}" style="min-height: 7rem;">
                            <div class="d-flex justify-content-between align-items-start mb-1">
                                <span class="fw-semibold {{ $isCurrentMonth ? '' : 'text-muted' }} {{ $isToday ? 'rounded-circle bg-theme text-white px-2 py-1 d-inline-block' : '' }}">
                                    {{ $currentDate->format('j') }}
                                </span>
                                @if($dayEvents->count() > 0)
                                    <span class="badge bg-theme small">{{ $dayEvents->count() }}</span>
                                @endif
                            </div>
                            <div class="d-flex flex-column gap-1">
                                @foreach($dayEvents->take(3) as $event)
                                    <a href="{{ route('frontend.events.show', $event->slug) }}"
                                       class="text-decoration-none small d-block text-truncate border-start border-3 ps-1 text-dark" style="border-color: var(--theme-color, #d69a00) !important;">
                                        <span class="text-theme fw-semibold">{{ $event->title }}</span>
                                        @if($event->start_date->format('H:i') !== '00:00')
                                            <span class="d-block text-muted" style="font-size: 0.7rem;">{{ $event->start_date->format('h:i A') }}</span>
                                        @endif
                                    </a>
                                @endforeach
                                @if($dayEvents->count() > 3)
                                    <span class="text-muted small text-center">+{{ $dayEvents->count() - 3 }} more</span>
                                @endif
                            </div>
                        </div>
                        @php $currentDate->addDay(); @endphp
                    @endwhile
                </div>
            </div>

            @if($events->flatten()->count() > 0)
                <div class="mt-50">
                    <div class="title-wrap three text-center mb-35">
                        <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Schedule</div>
                        <h2 class="sec-title">This month</h2>
                    </div>
                    <div class="row gy-30">
                        @foreach($events->flatten()->take(6) as $event)
                            <div class="col-lg-4 col-md-6">
                                <div class="tv-service-single-box h-100">
                                    <div class="inner-box">
                                        <div class="icon"><img src="{{ $assetPath('images/service/hm1-icon0' . (($loop->iteration % 3) ?: 3) . '.webp') }}" alt=""></div>
                                        <h4 class="title"><a href="{{ route('frontend.events.show', $event->slug) }}" class="text-dark">{{ $event->title }}</a></h4>
                                        <div class="border2 mt-20 mb-20"></div>
                                        <p class="text mb-15">{{ $event->start_date->format('M d, Y') }}
                                            @if($event->start_date->format('H:i') !== '00:00') · {{ $event->start_date->format('h:i A') }} @endif</p>
                                        <p class="text">{{ \Illuminate\Support\Str::limit(strip_tags($event->description ?? ''), 90) }}</p>
                                        <a href="{{ route('frontend.events.show', $event->slug) }}" class="theme-btn w-100 mt-25">
                                            <span class="link-effect"><span class="effect-1">Details</span><span class="effect-1">Details</span></span>
                                            <i class="fa-solid fa-arrow-up-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @if($events->flatten()->count() > 6)
                        <div class="text-center mt-40">
                            <a href="{{ route('frontend.events.index') }}" class="theme-btn br-30">
                                <span class="link-effect"><span class="effect-1">All events</span><span class="effect-1">All events</span></span>
                            </a>
                        </div>
                    @endif
                </div>
            @else
                <div class="cms-inotek-empty text-center mt-50">
                    <h3>No events scheduled</h3>
                    <p>There are no events for {{ $monthLabel }}.</p>
                    <a href="{{ route('frontend.events.index') }}" class="theme-btn br-30 mt-20">Back to events</a>
                </div>
            @endif
        </div>
    </section>

    @include('frontend.partials.newsletter')
@endsection