@extends('layouts.website')

@section('content')

<main>
    <section class="bs-banner type-overview typ-glob-accre typ-evt-banner typ-past-evt">
        <div class="swiper main">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="background-wrapper set-bg" data-img="{{ $selectedEvent && $selectedEvent->banner_image ? asset('storage/' . $selectedEvent->banner_image) : asset('assets/images/events/event-banner.webp') }}">
                    <div class="container">
                        <div class="hero-wrapper">
                            <h1 class="title">
                                    @if ($selectedEvent)
                                    {{ $selectedEvent->title }}
                                @else
                                    Holiest Morality: Derive Self <span>Pinnacle & Dead Contradict</span>
                                @endif
                            </h1>
                            <p class="subtitle marB42">
                            <div class="extra-details">
                                    @if ($selectedEvent)
                                    @php
                                        $eventDateTime = '';
                                        if ($selectedEvent->date) {
                                            $startDate = \Carbon\Carbon::parse($selectedEvent->date);
                                            if ($selectedEvent->time) {
                                                $startTime = \Carbon\Carbon::parse($selectedEvent->time);
                                                    $combinedDateTime = $startDate
                                                        ->copy()
                                                        ->setTime(
                                                    $startTime->hour, 
                                                    $startTime->minute, 
                                                            $startTime->second,
                                                );
                                                    $eventDateTime =
                                                        $combinedDateTime
                                                            ->timezone('Asia/Kolkata')
                                                            ->format('M d, Y - h:i A') . ' IST';
                                            } else {
                                                    $eventDateTime =
                                                        $startDate
                                                            ->timezone('Asia/Kolkata')
                                                            ->format('M d, Y - h:i A') . ' IST';
                                            }
                                        }
                                    @endphp
                                    <p>
                                        <img src="{{ asset('assets/images/certificate-list/time-white.svg') }}"
                                            class="event-icon">Date: {{ $eventDateTime }}
                                    </p>
                                    <p>
                                        <img src="{{ asset('assets/images/certificate-list/location-white.svg') }}"
                                            class="event-icon">{{ $selectedEvent->location }}
                                    </p>
                                    <p>
                                        <img src="{{ asset('assets/images/certificate-list/calender-white.svg') }}"
                                                class="event-icon">{{ $selectedEvent->category }}, Duration: {{ $selectedEvent->duration }}
                                    </p>
                                @else
                                    <p>
                                        <img src="{{ asset('assets/images/certificate-list/time-white.svg') }}"
                                            class="event-icon">Date: Oct 16, 2020 - 10:30AM IST
                                    </p>
                                    <p>
                                        <img src="{{ asset('assets/images/certificate-list/location-white.svg') }}"
                                            class="event-icon">IRCLASS Training Centre, Powai, Mumbai
                                    </p>
                                    <p>
                                        <img src="{{ asset('assets/images/certificate-list/calender-white.svg') }}"
                                            class="event-icon"> Basic Event Management , Duration: 30 Minutes
                                    </p>
                                @endif
                            </div>
                                </p>

                            </p>
                            <!-- <div class="custom-btn-group">
                                        <a href="#" class="bs-btn typ-fill">Get a Quote Now</a>

                                    </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="lyt-section bs-events">
        <div class="container typ-abt-events">

            <div class="row align-items-start">
                <div class="common-heading" data-aos="fade" data-aos-delay="300">
                    <div class="line">
                        <img src="{{ asset('assets/images/white-bg-line.svg') }}" class="img-fluid" alt="line-img">
                    </div>
                    <div class="bs-sub-heading">Overview</div>

                </div>
                <div class="col-md-5">

                    <h2 class="bs-heading" data-aos="fade" data-aos-delay="400">
                        About the <br>Event
                    </h2>
                </div>
                <div class="col-md-7 common-event">
                    <div class="event-desc bs-para">
                            Explore the inner dimensions of ethics, purpose, and leadership in this insightful 30-minute
                            learning session.<br>
                            "Holiest Morality: Deriving the Self to its Pinnacle Without Contradiction" dives into how
                            morality can shape decision-making in event and organizational management, focusing on
                            staying value-driven even in the face of practical contradictions.<br>
                            This event will also introduce foundational practices in Basic Event Management, offering
                            tips to structure, lead, and reflect with integrity. Whether you're new to event planning or
                            aiming to align professional roles with deeper values, this session provides practical
                            takeaways and food for thought.
                    </div>
                </div>
            </div>
                @if ($selectedEvent && $selectedEvent->speakers && $selectedEvent->speakers->count() > 0)
                    <div class="row speaker-section">
                        <div class="col-12">
                            <div class="common-heading pt-3" data-aos="fade" data-aos-delay="300">
                                <div class="line">
                                    <img src="{{ asset('assets/images/white-bg-line.svg') }}" class="img-fluid"
                                        alt="line-img">
                                </div>
                                <div class="bs-sub-heading text-uppercase">Meet Our Speakers</div>
                            </div>
                        </div>

                        @foreach ($selectedEvent->speakers as $speaker)
                            <div class="col-12 mb-4">
                                <div class="row speaker-item">
                                    <div class="col-md-5">
                                        @if ($speaker->image && \Storage::disk('public')->exists($speaker->image))
                                            <img src="{{ asset('storage/' . $speaker->image) }}" alt="{{ $speaker->name }}"
                                                class="speaker-img">
                                        @else
                                            <img src="{{ asset('assets/images/events/event-advisor.webp') }}"
                                                alt="{{ $speaker->name }}" class="speaker-img">
                                        @endif
                                    </div>
                                    <div class="col-md-7 common-event">
                                        <h2 class="bs-heading" data-aos="fade" data-aos-delay="400">
                                            {{ $speaker->prefix }} {{ $speaker->name }}
                                            @if ($speaker->linkedin)
                                                <a href="{{ $speaker->linkedin }}" target="_blank"
                                                    rel="noopener noreferrer">
                                                    <span class="linkedin-icon">in</span>
                                                </a>
                                            @endif
                                        </h2>
                                        <div class="bs-subheading speaker-role">{{ $speaker->designation }}</div>
                                        <div class="speaker-bio bs-para">
                                            {{ $speaker->description }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
        </div>
    </section>

    <section class="lyt-section bs-events typBlack">
        <div class="container position-relative typ-events">
            <h2 class="mb-4 bs-heading typWhite">Recent Events</h2>
            <div class="bs-swipper-icons">
                <div class="swiper-nav-btn certification-prev">
                    <span class="icon-link-arrow"></span>
                </div>
                <div class="swiper-nav-btn certification-next">
                    <span class="icon-link-arrow"></span>
                </div>
            </div>

            <div class="swiper mySwiperevent">
                <div class="swiper-wrapper">
                    @forelse($recentEvents as $event)
                        <div class="swiper-slide">
                            <div class="event-card" onclick="redirectToPastEvent({{ $event->id }})" style="cursor: pointer;">
                                <div class="online-tag bs-para">{{ $event->mode ?? 'Online' }}</div>
                                @if ($event->image)
                                    <img src="{{ asset($event->image) }}" alt="{{ $event->title }}"
                                        class="main-img">
                                @else
                                    <img src="{{ asset('assets/images/events/event-placeholder.jpg') }}" alt="{{ $event->title }}"
                                        class="main-img">
                                @endif
                                <div class="event-content">
                                    <div class="event-date">
                                        @php
                                            $recentEventDate = $event->date
                                                ? \Carbon\Carbon::parse($event->date)->format('M d, Y')
                                                : '';
                                        @endphp
                                        {{ $recentEventDate }}
                                    </div>
                                    <div class="event-title">{{ $event->title }}</div>
                                    <div class="extra-details">
                                        <p>
                                            <img src="{{ asset('assets/images/training/time.svg') }}" class="event-icon">
                                            @php
                                                $recentEventTime = $event->date
                                                    ? \Carbon\Carbon::parse($event->date)->format('M d, Y')
                                                    : '';
                                            @endphp
                                            {{ $recentEventTime }}
                                        </p>
                                        @if ($event->location)
                                            <p>
                                                <img src="{{ asset('assets/images/events/mp-pin.svg') }}" class="event-icon"> {{ $event->location }}
                                            </p>
                                        @endif
                                        <p>
                                            <img src="{{ asset('assets/images/training/calender.svg') }}" class="event-icon"> {{ $event->duration ?? 'Basic Event Management' }}.
                                        </p>
                                        <button class="learn-more" onclick="event.stopPropagation();">Learn More</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="swiper-slide">
                            <div class="event-card">
                                <div class="event-content text-center">
                                    <p class="bs-para">No recent events available.</p>
                                </div>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

    </section>
    <section class="lyt-section bs-events typ-evt-moments">
        <div class="container">
            <div class="row align-items-start">
                <div class="col-md-5">

                    <h2 class="bs-heading" data-aos="fade" data-aos-delay="400">
                        See Our Event Moments
                    </h2>
                </div>
            </div>
        </div>
        <div class="container slider-container">

            <div class="slider-header">
                <!-- navigation buttons side by side -->
                <div class="slider-controls">
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>

            <!-- Swiper -->
            <div class="swiper mySwiperPast">
                <div class="swiper-wrapper">
                    @if($selectedEvent && $selectedEvent->moments && $selectedEvent->moments->count() > 0)
                        @foreach($selectedEvent->moments as $moment)
                            <div class="swiper-slide">
                                <img src="{{ asset('storage/' . $moment->image) }}" 
                                     alt="{{ $moment->caption ?: 'Event Moment' }}"
                                     title="{{ $moment->caption }}">
                            </div>
                        @endforeach
                    @else
                        <!-- Fallback static images when no moments are available -->
                        <div class="swiper-slide">
                            <img src="{{ asset('assets/images/events/mom1.webp') }}" alt="Event Moment 1">
                        </div>
                        <div class="swiper-slide">
                            <img src="{{ asset('assets/images/events/mom2.webp') }}" alt="Event Moment 2">
                        </div>
                        <div class="swiper-slide">
                            <img src="{{ asset('assets/images/events/mom3.webp') }}" alt="Event Moment 3">
                        </div>
                        <div class="swiper-slide">
                            <img src="{{ asset('assets/images/events/mom4.webp') }}" alt="Event Moment 4">
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
    <section class="lyt-section typ-certified p-0">
        <div class="container-padding-left-create">
            <div class="certified-wrapper">
                <div class="leftBox lyt-section">
                    <div class="maxw400">
                        <h2 class="bs-heading mb-4" data-aos="fade" data-aos-delay="200">
                            Let's get you certified-Start your journey <span>today!</span>

                        </h2>
                        <p class="bs-para mb-4" data-aos="fade" data-aos-delay="300">
                            Connect with our experts for a seamless and hassle-free certification process.
                        </p>
                        <a href="#" class="bs-btn typ-yellow" data-aos="fade" data-aos-delay="400">Get Certified</a>
                    </div>
                </div>
                <div class="rightBox">
                    <div class="box-img" data-aos="fade" data-aos-delay="300">
                        <img src="{{ asset('assets/images/certified-bg.jpg') }}" class="img-fluid" alt="background-img">
                    </div>
                    <div class="middle-img" data-aos="fade" data-aos-delay="500">
                        <img src="{{ asset('assets/images/certified-img.png') }}" class="img-fluid" alt="man-img">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- back to top  -->
    <a href="#" class="back-to-top">
        <span class="icon icon-drop-icon"></span>
        <!-- <p class="back-text">Back to Top</p> -->
    </a>
    <div class="sticky-btn">
        <a href="">
            <img src="{{ asset('assets/images/btn.svg') }}" class="img-fluid" alt="button">
        </a>
    </div>
</main>

@endsection