@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="{{ asset('assets/images/events/event-banner.webp') }}">
                            <div class="container">
                                <div class="hero-wrapper">
                                    <h1 class="title">
                                        @if ($selectedEvent)
                                            {{ $selectedEvent->title }}
                                        @else
                                            Your Path to Certification Starts Here: <span>IRCLASS Events</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/calender-white.svg') }}"
                                                    class="event-icon">{{ $selectedEvent->category ?? 'Event Management' }}, Duration: {{ $selectedEvent->duration ?? '30 Minutes' }}
                                            </p>
                                        @else
                                            <p>
                                                <img src="{{ asset('assets/images/certificate-list/time-white.svg') }}"
                                                    class="event-icon">Date: Coming Soon
                                            </p>
                                            <p>
                                                <img src="{{ asset('assets/images/certificate-list/calender-white.svg') }}"
                                                    class="event-icon">Event Management, Duration: 30 Minutes
                                            </p>
                                        @endif
                                    </div>
                                    </p>
                                    <div class="custom-btn-group">
                                        <a href="#" class="bs-btn typ-fill" onclick="openPopupEvt()">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>

        <!-- Related Events Section (renamed from Past Events) -->
        <section class="lyt-section bs-events typBlack">
            <div class="container position-relative typ-events">
                <h2 class="mb-4 bs-heading typWhite">Related 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($relatedEvents as $event)
                            <div class="swiper-slide">
                                <div class="event-card">
                                    <div class="online-tag bs-para">{{ $event->mode ?? 'Online' }}</div>
                                    @if ($event->image)
                                        <img src="{{ asset('storage/' . $event->image) }}" alt="{{ $event->title }}"
                                            class="main-img">
                                    @endif
                                    <div class="event-content">
                                        <div class="event-date">
                                            @php
                                                $upcomingEventDate = $event->date
                                                    ? \Carbon\Carbon::parse($event->date)->format('M d, Y')
                                                    : '';
                                            @endphp
                                            {{ $upcomingEventDate }}
                                        </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
                                                    $upcomingEventTime = $event->date
                                                        ? \Carbon\Carbon::parse($event->date)->format('M d, Y')
                                                        : '';
                                                @endphp
                                                {{ $upcomingEventTime }}
                                            </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">Learn More</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="swiper-slide">
                                <div class="event-card">
                                    <div class="online-tag bs-para">Online</div>
                                    <div class="event-content">
                                        <div class="event-date">No Related Events</div>
                                        <div class="event-title">No related events available at the moment</div>
                                        <div class="extra-details">
                                            <p>
                                                <img src="{{ asset('assets/images/training/time.svg') }}"
                                                    class="event-icon"> Check back later for updates
                                            </p>
                                            <button class="learn-more">Learn More</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforelse
                    </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>

        <!-- Registration Popup -->
        <section class="lyt-section bs-events">
            <div class="typ-evt-cont">
                <div class="popup-overlay" id="popup">
                    <div class="popup-box">
                        <span class="popup-close" onclick="closePopupEvt()">✖ CLOSE</span>
                        <div class="row g-4 align-items-center">
                            <div class="col-lg-12">
                                <div class="common-heading" data-aos="fade" data-aos-delay="300">
                                    <div class="line">
                                        <img src="{{ asset('assets/images/blue-bg-line.svg') }}" class="img-fluid"
                                            alt="line-img">
                                    </div>
                                    <div class="bs-sub-heading typWhite text-uppercase">
                                        You're One Step Away from the Event!
                                    </div>
                                </div>
                                <div class="row mb-lg-5 mb-1" data-aos="fade" data-aos-delay="400">
                                    <div class="col-12">
                                        <h2 class="bs-heading typWhite maxw600">
                                            Register for the <br>Upcoming Event
                                        </h2>
                                    </div>
                                </div>
                                <form id="eventRegistrationForm" action="{{ route('events.register') }}" method="POST">
                                    @csrf
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-lg-9">
                                                <div class="row g-3">
                                                    <div class="col-md-6">
                                                        <input type="text" name="full_name"
                                                            class="form-control @error('full_name') is-invalid @enderror"
                                                            placeholder="Full Name *" value="{{ old('full_name') }}"
                                                            required aria-describedby="full_name_error">
                                                        @error('full_name')
                                                            <div class="invalid-feedback" id="full_name_error">
                                                                {{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="text" name="last_name"
                                                            class="form-control @error('last_name') is-invalid @enderror"
                                                            placeholder="Last Name *" value="{{ old('last_name') }}"
                                                            required aria-describedby="last_name_error">
                                                        @error('last_name')
                                                            <div class="invalid-feedback" id="last_name_error">
                                                                {{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="email" name="email"
                                                            class="form-control @error('email') is-invalid @enderror"
                                                            placeholder="Email *" value="{{ old('email') }}" required
                                                            aria-describedby="email_error">
                                                        @error('email')
                                                            <div class="invalid-feedback" id="email_error">
                                                                {{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="tel" name="phone"
                                                            class="form-control @error('phone') is-invalid @enderror"
                                                            placeholder="Phone Number *" value="{{ old('phone') }}"
                                                            required aria-describedby="phone_error">
                                                        @error('phone')
                                                            <div class="invalid-feedback" id="phone_error">
                                                                {{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                    <div class="col-12">
                                                        <input type="text" name="location"
                                                            class="form-control @error('location') is-invalid @enderror"
                                                            placeholder="Location *" value="{{ old('location') }}"
                                                            required aria-describedby="location_error">
                                                        @error('location')
                                                            <div class="invalid-feedback" id="location_error">
                                                                {{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                    <div class="col-12 position-relative">
                                                        <select name="event_type"
                                                            class="form-select @error('event_type') is-invalid @enderror"
                                                            required aria-describedby="event_type_error">
                                                            <option value="" selected disabled>Holiest Morality –
                                                                Event Ethics, AYUSH Certification</option>
                                                            @foreach ($events as $event)
                                                                <option value="{{ $event->title }}"
                                                                    {{ old('event_type') == $event->title ? 'selected' : '' }}>
                                                                    {{ $event->title }} -
                                                                    @php
                                                                        $eventOptionDate = $event->date
                                                                            ? \Carbon\Carbon::parse(
                                                                                $event->date,
                                                                            )->format('M d, Y')
                                                                            : '';
                                                                    @endphp
                                                                    {{ $eventOptionDate }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <span class="dropdown-angle">
                                                            <svg width="20" height="20" viewBox="0 0 24 24"
                                                                fill="none" stroke="#b0b8c1" stroke-width="2.5"
                                                                stroke-linecap="round" stroke-linejoin="round">
                                                                <polyline points="6 9 12 15 18 9"></polyline>
                                                            </svg>
                                                        </span>
                                                        @error('event_type')
                                                            <div class="invalid-feedback" id="event_type_error">
                                                                {{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                    <div class="col-12 mt-4">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox"
                                                                name="marketing_consent" id="agree" value="1"
                                                                {{ old('marketing_consent') ? 'checked' : '' }}>
                                                            <p class="form-check-label typWhite bs-subheading"
                                                                for="agree">
                                                                I agree to receive marketing information via email from
                                                                IRCLASS and its affiliates...
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row d-flex align-items-center my-4 gy-3">
                                                    <div class="col-md-6">
                                                        <div class="g-recaptcha"
                                                            data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <button type="submit" class="btn btn-submit">
                                                            Submit
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 text-center">
                                                <div class="orange-frame">
                                                    <img src="{{ asset('assets/images/certified-img.png') }}"
                                                        alt="Event Person" class="img-fluid">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <div class="alert d-none mt-3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

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

    @include('website.partials.include_js')

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

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('eventRegistrationForm');

            if (!form) {
                return;
            }

            const submitBtn = form.querySelector('button[type="submit"]');
            const formMessage = document.querySelector('.alert');

            // Clear validation errors when user starts typing (only if field becomes valid)
            const inputs = form.querySelectorAll('input, select');
            inputs.forEach(input => {
                input.addEventListener('input', function() {
                    // Only clear error if the field is now valid
                    if (this.classList.contains('is-invalid')) {
                        let isValid = true;

                        // Check if this specific field is now valid
                        if (this.name === 'full_name' || this.name === 'last_name') {
                            isValid = this.value.trim().length >= 2;
                        } else if (this.name === 'email') {
                            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                            isValid = emailRegex.test(this.value.trim());
                        } else if (this.name === 'phone') {
                            const phoneRegex = /^[\+]?[0-9]{1}[0-9\s\-\(\)]{8,16}$/;
                            isValid = phoneRegex.test(this.value.trim());
                        } else if (this.name === 'location') {
                            isValid = this.value.trim().length >= 2;
                        } else if (this.name === 'event_type') {
                            isValid = this.value && this.value !== '';
                        }

                        if (isValid) {
                            clearValidationError(this);
                        }
                    }
                });
            });

            // Helper function to show validation error
            function showValidationError(field, message) {
                field.classList.add('is-invalid');
                const feedback = field.parentNode.querySelector('.invalid-feedback');
                if (feedback) {
                    feedback.textContent = message;
                    feedback.style.display = 'block';
                    feedback.style.color = '#dc3545';
                    feedback.style.fontSize = '0.875em';
                    feedback.style.marginTop = '0.25rem';
                }
            }

            // Helper function to clear validation error
            function clearValidationError(field) {
                field.classList.remove('is-invalid');
                const feedback = field.parentNode.querySelector('.invalid-feedback');
                if (feedback) {
                    feedback.style.display = 'none';
                }
            }

            // Form validation function
            function validateForm() {
                let isValid = true;

                // Validate full name
                const fullName = form.querySelector('input[name="full_name"]');
                if (!fullName.value.trim()) {
                    showValidationError(fullName, 'Please enter your full name.');
                    isValid = false;
                } else if (fullName.value.trim().length < 2) {
                    showValidationError(fullName, 'Full name must be at least 2 characters.');
                    isValid = false;
                } else {
                    clearValidationError(fullName);
                }

                // Validate last name
                const lastName = form.querySelector('input[name="last_name"]');
                if (!lastName.value.trim()) {
                    showValidationError(lastName, 'Please enter your last name.');
                    isValid = false;
                } else if (lastName.value.trim().length < 2) {
                    showValidationError(lastName, 'Last name must be at least 2 characters.');
                    isValid = false;
                } else {
                    clearValidationError(lastName);
                }

                // Validate email
                const email = form.querySelector('input[name="email"]');
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!email.value.trim()) {
                    showValidationError(email, 'Please enter your email address.');
                    isValid = false;
                } else if (!emailRegex.test(email.value.trim())) {
                    showValidationError(email, 'Please enter a valid email address.');
                    isValid = false;
                } else {
                    clearValidationError(email);
                }

                // Validate phone
                const phone = form.querySelector('input[name="phone"]');
                const phoneRegex = /^[\+]?[0-9]{1}[0-9\s\-\(\)]{8,16}$/;
                if (!phone.value.trim()) {
                    showValidationError(phone, 'Please enter your phone number.');
                    isValid = false;
                } else if (!phoneRegex.test(phone.value.trim())) {
                    showValidationError(phone, 'Please enter a valid phone number.');
                    isValid = false;
                } else {
                    clearValidationError(phone);
                }

                // Validate location
                const location = form.querySelector('input[name="location"]');
                if (!location.value.trim()) {
                    showValidationError(location, 'Please enter your location.');
                    isValid = false;
                } else if (location.value.trim().length < 2) {
                    showValidationError(location, 'Location must be at least 2 characters.');
                    isValid = false;
                } else {
                    clearValidationError(location);
                }

                // Validate event type
                const eventType = form.querySelector('select[name="event_type"]');
                if (!eventType.value || eventType.value === '') {
                    showValidationError(eventType, 'Please select an event type.');
                    isValid = false;
                } else {
                    clearValidationError(eventType);
                }

                // Validate reCAPTCHA (optional for now)
                try {
                    const recaptchaResponse = grecaptcha.getResponse();
                    if (!recaptchaResponse) {
                        const recaptchaElement = form.querySelector('.g-recaptcha');
                        if (recaptchaElement) {
                            recaptchaElement.style.border = '2px solid #dc3545';
                            recaptchaElement.style.borderRadius = '4px';
                        }
                        // Don't block submission for now, just warn
                    } else {
                        const recaptchaElement = form.querySelector('.g-recaptcha');
                        if (recaptchaElement) {
                            recaptchaElement.style.border = 'none';
                        }
                    }
                } catch (error) {
                    // reCAPTCHA not loaded
                }

                return isValid;
            }

            form.addEventListener('submit', function(e) {
                e.preventDefault();

                // Validate form first
                const validationResult = validateForm();

                if (!validationResult) {
                    return;
                }

                // Show spinner (same as Contact Us form)
                const originalContent = submitBtn.innerHTML;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>' + originalContent;
                submitBtn.disabled = true;

                // Hide any previous messages
                formMessage.classList.add('d-none');

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

                // Add reCAPTCHA response
                try {
                    const recaptchaResponse = grecaptcha.getResponse();
                    if (recaptchaResponse) {
                        formData.append('g-recaptcha-response', recaptchaResponse);
                    }
                } catch (error) {
                    // reCAPTCHA not available, continue without it
                }

                // Submit via AJAX
                fetch(form.action, {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => {
                        return response.json();
                    })
                    .then(data => {
                        // Hide spinner (same as Contact Us form)
                        submitBtn.innerHTML = originalContent;
                        submitBtn.disabled = false;

                        if (data.success) {
                            // Show success message (same style as Contact Us form)
                            formMessage.className = 'alert alert-success alert-dismissible fade show';
                            formMessage.setAttribute('role', 'alert');
                            formMessage.style.borderRadius = '10px';
                            formMessage.style.borderLeft = '4px solid #28a745';
                            formMessage.innerHTML = `
                    <div class="d-flex align-items-center">
                        <i class="fas fa-check-circle me-2" style="color: #28a745; font-size: 1.2em;"></i>
                        <div>
                            <strong>Success!</strong>
                            <p class="mb-0 mt-1">${data.message}</p>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                `;
                            formMessage.classList.remove('d-none');

                            // Clear form
                            form.reset();

                            // Clear validation states
                            form.querySelectorAll('.is-invalid').forEach(field => {
                                field.classList.remove('is-invalid');
                            });
                            form.querySelectorAll('.invalid-feedback').forEach(feedback => {
                                feedback.style.display = 'none';
                            });

                            // Reset reCAPTCHA
                            try {
                                grecaptcha.reset();
                            } catch (error) {
                                // reCAPTCHA reset failed, continue
                            }

                            // Close popup after 3 seconds
                            setTimeout(() => {
                                closePopupEvt();
                            }, 3000);
                        } else {
                            // Show error message (same style as Contact Us form)
                            formMessage.className = 'alert alert-danger alert-dismissible fade show';
                            formMessage.setAttribute('role', 'alert');
                            formMessage.style.borderRadius = '10px';
                            formMessage.style.borderLeft = '4px solid #dc3545';
                            formMessage.style.color = 'white';
                            formMessage.innerHTML = `
                    <div class="d-flex align-items-center">
                        <i class="fas fa-exclamation-circle me-2" style="color: #dc3545; font-size: 1.2em;"></i>
                        <div>
                            <strong style="color: white;">Error!</strong>
                            <p class="mb-0 mt-1" style="color: white;">${data.message || 'An error occurred. Please try again.'}</p>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                `;
                            formMessage.classList.remove('d-none');

                            // Handle server-side validation errors
                            if (data.errors) {
                                Object.keys(data.errors).forEach(field => {
                                    const input = form.querySelector(`[name="${field}"]`);
                                    if (input) {
                                        showValidationError(input, data.errors[field][0]);
                                    }
                                });
                            }

                            // For duplicate registration error, highlight email field
                            if (data.message && data.message.includes('already registered')) {
                                const emailField = form.querySelector('[name="email"]');
                                if (emailField) {
                                    showValidationError(emailField, data.message);
                                }
                            }
                        }
                    })
                    .catch(error => {
                        // Hide spinner (same as Contact Us form)
                        submitBtn.innerHTML = originalContent;
                        submitBtn.disabled = false;

                        // Show error message (same style as Contact Us form)
                        formMessage.className = 'alert alert-danger alert-dismissible fade show';
                        formMessage.setAttribute('role', 'alert');
                        formMessage.style.borderRadius = '10px';
                        formMessage.style.borderLeft = '4px solid #dc3545';
                        formMessage.style.color = 'white';
                        formMessage.innerHTML = `
                <div class="d-flex align-items-center">
                    <i class="fas fa-exclamation-circle me-2" style="color: #dc3545; font-size: 1.2em;"></i>
                    <div>
                        <strong style="color: white;">Error!</strong>
                        <p class="mb-0 mt-1" style="color: white;">An error occurred. Please try again.</p>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            `;
                        formMessage.classList.remove('d-none');

                        // Log error for debugging
                    });
            });

            // Add global error handler
            window.addEventListener('error', function(e) {
                // Handle global errors
            });
        });
    </script>
@endsection