@extends('frontend.layouts.app')

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

@section('content')
    @php
        $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
    @endphp

    @include('frontend.layouts.breadcrumb', ['title' => $event->title])

    <section class="blog-details-section space bg-light">
        <div class="container">
            <div class="row gy-30 flex-column-reverse flex-lg-row">
                <div class="col-xl-8 col-lg-8">
                    <div class="blog-details-left">
                        <div class="blog-list-card style-2">
                            <div class="image overlay-anim1 cms-frame cms-frame--blog-wide">
                                <img class="cms-img-cover"
                                     src="{{ $event->featured_image ? asset('storage/' . $event->featured_image) : $assetPath('images/blog/blog-thumb05.webp') }}"
                                     alt="{{ $event->title }}" width="856" height="460">
                            </div>
                            <div class="card-content">
                                <span class="category">{{ strtoupper($event->category?->name ?? 'EVENT') }}</span>
                                <h3 class="title">{{ $event->title }}</h3>
                                <div class="author-info">
                                    <div class="author">
                                        <span class="name"><i class="icon-calender"></i> {{ $event->start_date->format('F d, Y') }}</span>
                                        @if($event->start_date->format('H:i') !== '00:00')
                                            <span class="date ms-3">{{ $event->start_date->format('h:i A') }}</span>
                                        @endif
                                    </div>
                                    @if($event->location)
                                        <span class="date"><i class="fa-solid fa-location-dot"></i> {{ $event->location }}</span>
                                    @endif
                                </div>
                                <div class="pt-20 pb-25"><div class="border dark"></div></div>
                                @if($event->description)
                                    <p class="mb-25">{{ $event->description }}</p>
                                @endif
                                <div class="cms-event-body">{!! $event->content !!}</div>

                                <div class="mt-35 pt-25 border-top d-flex flex-wrap gap-3 align-items-center">
                                    @if($event->registration_required)
                                        @if($event->isRegistrationOpen() && $event->registration_url)
                                            <a href="{{ $event->registration_url }}" class="theme-btn br-30">Register now</a>
                                        @elseif($event->isFull())
                                            <span class="text-danger small">Event is full</span>
                                        @elseif($event->registration_deadline && now() > $event->registration_deadline)
                                            <span class="text-danger small">Registration closed</span>
                                        @elseif(!$event->isUpcoming())
                                            <span class="text-muted small">Registration not available</span>
                                        @elseif($event->registration_required && !$event->registration_link_active)
                                            <span class="text-muted small">Registration temporarily closed</span>
                                        @endif
                                    @endif

                                    <button type="button" class="theme-btn style2 br-30 bg-white text-dark" onclick="shareEvent()">Share</button>
                                    <button type="button" class="theme-btn style2 br-30 bg-white text-dark" onclick="addToCalendar()">Add to calendar</button>
                                </div>

                                @if($event->registration_required)
                                    <div class="mt-30 p-4 bg-light2 br-20">
                                        <h4 class="title mb-15"><i class="fa-solid fa-circle-info text-theme"></i> Registration</h4>
                                        <div class="text small">
                                            @if($event->max_attendees)
                                                <p class="mb-5">{{ $event->registered_count ?? 0 }} / {{ $event->max_attendees }} registered
                                                    @if($event->available_spots !== null && $event->available_spots > 0)
                                                        ({{ $event->available_spots }} spots left)
                                                    @endif
                                                </p>
                                            @endif
                                            @if($event->registration_deadline)
                                                <p class="mb-0">Deadline: {{ $event->registration_deadline->format('F j, Y \a\t g:i A') }}</p>
                                            @endif
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-4">
                    <div class="sidebar-widget blog-sidebar pl-15 lg-pl-0">
                        <div class="sidebar-category-list">
                            <h4 class="sidebar-title">Status</h4>
                            <div class="widget-box">
                                <p class="mb-10">
                                    @if($event->isUpcoming())
                                        <span class="text-success fw-semibold">Upcoming</span>
                                    @elseif($event->isOngoing())
                                        <span class="text-theme fw-semibold">Ongoing</span>
                                    @else
                                        <span class="text-muted fw-semibold">Past event</span>
                                    @endif
                                </p>
                                <p class="small text-muted mb-0"><i class="fa-regular fa-clock"></i> {{ $event->start_date->diffForHumans() }}</p>
                            </div>
                        </div>

                        @if($relatedEvents->count() > 0)
                            <div class="sidebar-latest-posts">
                                <h4 class="sidebar-title">Related events</h4>
                                <div class="widget-box">
                                    <div class="latest-posts">
                                        @foreach($relatedEvents as $relatedEvent)
                                            @php
                                                $related_image_url = $relatedEvent->featured_image
                                                    ? asset('storage/' . $relatedEvent->featured_image)
                                                    : $assetPath('images/blog/blog-thumb01.webp');
                                            @endphp
                                            <div class="post">
                                                <a href="{{ route('frontend.events.show', $relatedEvent->slug) }}">
                                                    <img class="cms-theme-footer-post-thumb" width="88" height="84"
                                                         src="{{ $related_image_url }}" alt="{{ $relatedEvent->title }}">
                                                </a>
                                                <div class="post-content">
                                                    <a href="{{ route('frontend.events.show', $relatedEvent->slug) }}">{{ \Illuminate\Support\Str::limit($relatedEvent->title, 48) }}</a>
                                                    <p>{{ $relatedEvent->start_date->format('M d, Y') }}</p>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if($eventCategories->count() > 0)
                            <div class="sidebar-category-list">
                                <h4 class="sidebar-title">Categories</h4>
                                <div class="widget-box">
                                    <ul class="categories">
                                        @foreach($eventCategories as $category)
                                            <li>
                                                <a href="{{ route('frontend.events.index', ['category' => $category->slug]) }}">
                                                    {{ $category->name }} <span>({{ $category->events_count }})</span>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('frontend.partials.newsletter')

    @push('scripts')
        <script>
            function shareEvent() {
                const shareUrl = @json($event->registration_required ? $event->registration_url : route('frontend.events.show', $event->slug));
                if (navigator.share) {
                    navigator.share({
                        title: @json($event->title),
                        text: @json($event->default_share_text),
                        url: shareUrl
                    });
                } else {
                    navigator.clipboard.writeText(shareUrl).then(function() {
                        alert('Link copied');
                    });
                }
            }

            function addToCalendar() {
                window.open(@json($calendarUrl ?? ''), '_blank');
            }
        </script>
    @endpush
@endsection