@extends('layouts.website')

@section('content')
    <main>
        <section class="bs-banner type-overview typ-glob-accre typ-evt-banner">
            <div class="swiper main">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="background-wrapper set-bg"
                            data-img="{{ asset('assets/images/events/event-banner.webp') }}">
                            <div class="container">
                                <div class="hero-wrapper">
                                    <h1 class="title">Your Path to Certification Starts Here: <span>IRCLASS
                                            Events</span>
                                    </h1>
                                    <p class="subtitle marB42">Explore upcoming online and offline events designed to
                                        elevate your expertise—whether you're aiming to become a Lead Auditor, Internal
                                        Auditor, or expand your industry knowledge.</p>
                                    <div class="custom-btn-group">
                                        <a href="javascript:void(0)" class="bs-btn typ-fill" onclick="openPopupTC()" data-page-source="events">Get a Quote Now</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @if($upcomingEvents->count() > 0)
        <section
            class="bs-training-calender lyt-section typ-mission-sec5 typ-member-sec3 background-wrapper set-bg typ-contact-sec4 typ-event">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-12 mt-lg-0 mt-4">
                        <div class="content ps-lg-5 p-0 text-center" data-aos="fade" data-aos-delay="400">
                            <div class="common-heading d-flex justify-content-center" data-aos="fade" data-aos-delay="300">
                                <div class="bs-sub-heading  text-uppercase">Explore Upcoming Events & Learning <span
                                        class="ms-1">Opportunities</span></div>
                            </div>
                            <h2 class="bs-heading typ-bs-margin" data-aos="fade" data-aos-delay="400">
                                IRCLASS Training Events –<br> Engage, Elevate & Excel
                            </h2>
                            <!-- <p class="bs-para pb-4">Our core committee members are integral to IRQS's operations,
                                ensuring<br>that our services meet the highest standards of quality and efficiency.</p> -->
                        </div>
                    </div>

                </div>

            </div>
            <div class="container event-training">
                <div class="row g-0">
                    @php $initial = 6; @endphp
                    @foreach($upcomingEvents as $index => $event)
                        @php
                            // FIXED: Proper date-time parsing without concatenation errors
                            $dateTimeText = '';

                            if ($event->date) {
                                $startDate = \Carbon\Carbon::parse($event->date);

                                if ($event->time) {
                                    // Parse date and time separately, then combine
                                    $startTime = \Carbon\Carbon::parse($event->time);
                                    $combinedDateTime = $startDate
                                        ->copy()
                                        ->setTime($startTime->hour, $startTime->minute, $startTime->second);
                                    $dateTimeText =
                                        $combinedDateTime->timezone('Asia/Kolkata')->format('M d, Y - h:i A') . ' IST';
                                } else {
                                    // Only date available
                                    $dateTimeText =
                                        $startDate->timezone('Asia/Kolkata')->format('M d, Y - h:i A') . ' IST';
                                }
                            }

                            // Values only - no labels as per static markup
                            $location = $event->location ?: $event->title;
                            $duration = $event->duration ?: '30 Minutes';
                        @endphp
                        <div class="col-12 col-md-4 {{ $index === 1 || $index === 4 ? 'middle-col' : '' }}">
                            <div class="team-card {{ $index >= $initial ? 'is-hidden' : '' }}"
                                data-idx="{{ $index }}" onclick="redirectToUpcomingEvent({{ $event->id }})"
                                style="cursor: pointer;">
                                <div class="image-container">
                                    @if($event->image_url)
                                        <img src="{{ $event->image_url }}" alt="{{ $event->title }}"
                                            class="team-img" />
                                    @endif
                                    <div class="online-evt">
                                        <p class="bs-para">{{ $event->mode }}</p>
                                    </div>
                                </div>
                                <div class="team-content d-flex align-items-end justify-content-between">
                                    <div>
                                        <h5 class="pb-3 training-head">{{ $event->title }}</h5>
                                        <div class="team-role pb-5">
                                            <span class="inner1">
                                                <img src="{{ asset('assets/images/training/time.svg') }}" alt="icon-clock"
                                                    class="" />
                                                <span>{{ $dateTimeText }}</span>
                                            </span>
                                            <span class="inner1">
                                                <img src="{{ asset('assets/images/training/calender.svg') }}"
                                                    alt="icon-calender" class="" />
                                                <span>{{ $location }} , Duration: {{ $duration }}</span>
                                            </span>
                                        </div>
                                        <div class="team-role pb-2">
                                            <a href="{{ route('webinars.upcoming.show', $event->id) }}" class="event-reg" onclick="event.stopPropagation();">Register</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                @if (($upcomingEvents->count() ?? count($upcomingEvents ?? [])) > $initial)
                    <div class="custom-btn-group d-flex justify-content-center mt-4">
                        <a href="#" class="bs-btn my-3" id="viewAllBtn">View all</a>
                    </div>
                @endif
            </div>
        </section>
        @endif

        @if($pastEvents->count() > 0)
        <section class="lyt-section bs-events typBlack">
            <div class="container position-relative typ-events">
                <h2 class="mb-4 bs-heading typWhite">Past 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">
                        @foreach($pastEvents as $event)
                            <div class="swiper-slide">
                                <a href="{{ route('webinars.past.show', $event->id) }}" class="event-card" style="text-decoration: none; display: block;">
                                    <div class="online-tag bs-para">{{ $event->mode }}</div>
                                    @if($event->image_url)
                                        <img src="{{ $event->image_url }}" alt="{{ $event->title }}"
                                            class="main-img">
                                    @endif
                                    <div class="event-content">
                                        <div class="event-date">
                                            @php
                                                $eventDate = $event->date
                                                    ? \Carbon\Carbon::parse($event->date)->format('M d, Y')
                                                    : '';
                                            @endphp
                                            {{ $eventDate }}
                                        </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
                                                    $pastEventDate = $event->date
                                                        ? \Carbon\Carbon::parse($event->date)->format('M d, Y')
                                                        : '';
                                                @endphp
                                                {{ $pastEventDate }}
                                            </p>
                                            <p>
                                                <img src="{{ asset('assets/images/events/mp-pin.svg') }}"
                                                    class="event-icon"> {{ $event->location }}
                                            </p>
                                            <p>
                                                <img src="{{ asset('assets/images/training/calender.svg') }}"
                                                    class="event-icon"> {{ $event->duration ?? 'Event Management' }}.
                                            </p>
                                            <button class="learn-more">Learn More</button>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
        @endif
      <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="maxw500o">
                            <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="javascript:void(0)" class="bs-btn typ-yellow" data-aos="fade" data-aos-delay="400"
                                onclick="openPopupTC()" data-page-source="events">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>
        @include('components.request-quote-button')
    </main>

{{-- Include enquiry form modal for Events page --}}
@include('components.enquiry-form-wrapper', ['pageSource' => 'events', 'formType' => 'enquiry'])

    <script>
        (function() {
            // ROOT CAUSE FIX: View More functionality now works because controller passes ALL upcoming events
            var btn = document.getElementById('viewAllBtn');
            if (!btn) return;
            var batch = 3; // reveal one row per click (3 cards)
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                var hidden = document.querySelectorAll('.team-card.is-hidden');
                for (var i = 0; i < Math.min(batch, hidden.length); i++) {
                    hidden[i].classList.remove('is-hidden');
                }
                if (document.querySelectorAll('.team-card.is-hidden').length === 0) {
                    btn.style.display = 'none';
                }
            });
        })();


        function redirectToUpcomingEvent(eventId) {
            window.location.href = '{{ url('events/upcoming') }}/' + eventId;
        }

        // Form submission handling
        document.addEventListener('DOMContentLoaded', function() {
            const eventRegistrationForm = document.getElementById('eventRegistrationForm');
            const submitBtn = document.getElementById('submitBtn');
            const btnText = submitBtn.querySelector('.btn-text');
            const btnSpinner = submitBtn.querySelector('.btn-spinner');

            if (eventRegistrationForm) {
                eventRegistrationForm.addEventListener('submit', function(e) {
                    e.preventDefault(); // Prevent default form submission

                    // Show loading state
                    btnText.style.display = 'none';
                    btnSpinner.style.display = 'inline-block';
                    submitBtn.disabled = true;

                    // Clear previous error states
                    clearFormErrors();

                    // Get form data
                    const formData = new FormData(this);

                    // Add CSRF token
                    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute(
                        'content');
                    formData.append('_token', csrfToken);

                    // Submit form via AJAX
                    fetch('{{ route('webinars.register') }}', {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'Accept': 'application/json'
                            }
                        })
                        .then(response => {
                            if (!response.ok) {
                                return response.json().then(data => {
                                    throw new Error(JSON.stringify(data));
                                });
                            }
                            return response.json();
                        })
                        .then(data => {
                            if (data.success) {
                                // Success - show success message and reset form
                                showSuccessMessage(data.message);
                                eventRegistrationForm.reset();
                                clearFormErrors();
                            } else {
                                // Error - show error message
                                showErrorMessage(data.message ||
                                'An error occurred. Please try again.');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);

                            // Try to parse validation errors
                            try {
                                const errorData = JSON.parse(error.message);
                                if (errorData.errors) {
                                    // Handle validation errors
                                    showValidationErrors(errorData.errors);
                                } else {
                                    showErrorMessage(errorData.message ||
                                        'An error occurred. Please try again.');
                                }
                            } catch (parseError) {
                                showErrorMessage('An error occurred. Please try again.');
                            }
                        })
                        .finally(() => {
                            // Reset button state
                            btnText.style.display = 'inline-block';
                            btnSpinner.style.display = 'none';
                            submitBtn.disabled = false;
                        });
                });
            }

            // Auto-hide success messages after 5 seconds
            const successAlerts = document.querySelectorAll('.alert-success');
            successAlerts.forEach(alert => {
                setTimeout(() => {
                    alert.style.display = 'none';
                }, 5000);
            });

            // Auto-hide error messages after 8 seconds
            const errorAlerts = document.querySelectorAll('.alert-danger');
            errorAlerts.forEach(alert => {
                setTimeout(() => {
                    alert.style.display = 'none';
                }, 8000);
            });

            // Handle event type selection change
            const eventTypeSelect = document.getElementById('eventTypeSelect');
            if (eventTypeSelect) {
                eventTypeSelect.addEventListener('change', function() {
                    const selectedEvent = this.value;
                    document.getElementById('selectedEventTitle').textContent = selectedEvent;
                    document.getElementById('selectedEventType').value = selectedEvent;
                });
            }

            // Utility functions
            function clearFormErrors() {
                const errorElements = eventRegistrationForm.querySelectorAll('.is-invalid');
                errorElements.forEach(el => el.classList.remove('is-invalid'));

                const feedbackElements = eventRegistrationForm.querySelectorAll('.invalid-feedback');
                feedbackElements.forEach(el => el.style.display = 'none');

                // Clear any existing alert messages
                const existingAlerts = eventRegistrationForm.querySelectorAll('.alert');
                existingAlerts.forEach(alert => alert.remove());
            }

            function showSuccessMessage(message) {
                // Remove any existing alerts
                const existingAlerts = eventRegistrationForm.querySelectorAll('.alert');
                existingAlerts.forEach(alert => alert.remove());

                // Create success alert
                const alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-success alert-dismissible fade show';
                alertDiv.style.color = 'white';
                alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="color: white; opacity: 1; filter: invert(1);">
                <span aria-hidden="true">&times;</span>
            </button>
        `;

                // Insert at the top of the form
                eventRegistrationForm.insertBefore(alertDiv, eventRegistrationForm.firstChild);

                // Auto-hide after 5 seconds
                setTimeout(() => {
                    alertDiv.style.display = 'none';
                }, 5000);
            }

            function showErrorMessage(message) {
                // Remove any existing alerts
                const existingAlerts = eventRegistrationForm.querySelectorAll('.alert');
                existingAlerts.forEach(alert => alert.remove());

                // Create error alert
                const alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-danger alert-dismissible fade show';
                alertDiv.style.color = 'white';
                alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="color: white; opacity: 1; filter: invert(1);">
                <span aria-hidden="true">&times;</span>
            </button>
        `;

                // Insert at the top of the form
                eventRegistrationForm.insertBefore(alertDiv, eventRegistrationForm.firstChild);

                // Auto-hide after 8 seconds
                setTimeout(() => {
                    alertDiv.style.display = 'none';
                }, 8000);
            }

            function showValidationErrors(errors) {
                // Clear previous errors
                clearFormErrors();

                // Show general error message
                showErrorMessage('Please correct the errors below.');

                // Map validation errors to form fields
                Object.keys(errors).forEach(fieldName => {
                    const field = eventRegistrationForm.querySelector(`[name="${fieldName}"]`);
                    if (field) {
                        // Add invalid class to field
                        field.classList.add('is-invalid');

                        // Create or update error message
                        let errorDiv = field.parentNode.querySelector('.invalid-feedback');
                        if (!errorDiv) {
                            errorDiv = document.createElement('div');
                            errorDiv.className = 'invalid-feedback';
                            field.parentNode.appendChild(errorDiv);
                        }

                        // Set error message
                        errorDiv.textContent = errors[fieldName][0];
                        errorDiv.style.display = 'block';
                    }
                });
            }

            // Redirect function for event cards (upcoming events only - past events use anchor tags)
            function redirectToUpcomingEvent(eventId) {
                window.location.href = '{{ url('events/upcoming') }}/' + eventId;
            }
        });
    </script>

    @include('website.partials.include_js')

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endsection