@extends('layouts.website')

<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('storage/' . $event->image) }}">
                        <div class="container">
                            <div class="hero-wrapper">
                                <h1 class="title">{{ $event->title }}</h1>
                                <p class="subtitle marB42">{{ Str::limit($event->description, 200) }}</p>
                                <div class="custom-btn-group">
                                    <a href="#" class="bs-btn typ-fill" onclick="openPopupEvt()">Register 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">
                        {!! nl2br(e($event->description)) !!}
                    </div>
                </div>
            </div>
            
            @if($event->speakers && $event->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($event->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
            
            @if($event->moments && $event->moments->count() > 0)
            <div class="row event-moments-section mt-5">
                <div class="col-12">
                    <div class="common-heading text-center" data-aos="fade" data-aos-delay="300">
                        <div class="bs-sub-heading text-uppercase">Event Moments</div>
                    </div>
                    <h2 class="bs-heading text-center mb-5" data-aos="fade" data-aos-delay="400">
                        Capturing Memories from This Event
                    </h2>
                </div>
                
                @foreach($event->moments as $moment)
                <div class="col-md-4 col-lg-3 mb-4">
                    <div class="moment-card">
                        <img src="{{ asset('storage/' . $moment->image) }}" alt="Event Moment" class="moment-img">
                        @if($moment->caption)
                            <div class="moment-caption">
                                <p>{{ $moment->caption }}</p>
                            </div>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            @endif
            
            <div class="row event-details mt-5">
                <div class="col-md-6">
                    <div class="event-info-card">
                        <h3 class="bs-heading mb-4">Event Details</h3>
                        <div class="event-detail-item">
                            <span class="icon">
                                <img src="{{ asset('assets/images/training/time.svg') }}" alt="Time" class="event-icon">
                            </span>
                            <div class="detail-content">
                                <strong>Date & Time:</strong><br>
                                @php
                                    $showEventDate = $event->date ? \Carbon\Carbon::parse($event->date)->format('F d, Y') : '';
                                    $showEventTime = $event->time ? \Carbon\Carbon::parse($event->time)->format('h:i A') : '';
                                @endphp
                                {{ $showEventDate }} - {{ $showEventTime }}
                            </div>
                        </div>
                        <div class="event-detail-item">
                            <span class="icon">
                                <img src="{{ asset('assets/images/events/mp-pin.svg') }}" alt="Location" class="event-icon">
                            </span>
                            <div class="detail-content">
                                <strong>Location:</strong><br>
                                {{ $event->location }}
                            </div>
                        </div>
                        <div class="event-detail-item">
                            <span class="icon">
                                <img src="{{ asset('assets/images/training/calender.svg') }}" alt="Mode" class="event-icon">
                            </span>
                            <div class="detail-content">
                                <strong>Mode:</strong><br>
                                {{ $event->mode }}
                            </div>
                        </div>
                        @if($event->duration)
                        <div class="event-detail-item">
                            <span class="icon">
                                <img src="{{ asset('assets/images/training/time.svg') }}" alt="Duration" class="event-icon">
                            </span>
                            <div class="detail-content">
                                <strong>Duration:</strong><br>
                                {{ $event->duration }}
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="event-registration-card">
                        <h3 class="bs-heading mb-4">Register for this Event</h3>
                        <p class="bs-para mb-4">Secure your spot for this exclusive event. Limited seats available.</p>
                        <a href="#" class="bs-btn typ-fill" onclick="openPopupEvt()">Register Now</a>
                    </div>
                </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 <br>{{ $event->title }}
                                    </h2>
                                </div>
                            </div>
                            <form action="{{ route('events.register') }}" method="POST" id="eventRegistrationForm">
                                @csrf
                                <input type="hidden" name="event_type" value="{{ $event->title }}">
                                
                                <!-- Error Messages Display -->
                                @if ($errors->any())
                                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                        <ul class="mb-0">
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                    </div>
                                @endif

                                <!-- Success Message Display -->
                                @if (session('success'))
                                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                                        {{ session('success') }}
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                    </div>
                                @endif

                                <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" 
                                                        class="form-control @error('full_name') is-invalid @enderror"
                                                        name="full_name"
                                                        placeholder="Full Name *" 
                                                        value="{{ old('full_name') }}"
                                                        required>
                                                    @error('full_name')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="text" 
                                                        class="form-control @error('last_name') is-invalid @enderror"
                                                        name="last_name"
                                                        placeholder="Last Name *" 
                                                        value="{{ old('last_name') }}"
                                                        required>
                                                    @error('last_name')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="email" 
                                                        class="form-control @error('email') is-invalid @enderror"
                                                        name="email"
                                                        placeholder="Email *" 
                                                        value="{{ old('email') }}"
                                                        required>
                                                    @error('email')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="tel" 
                                                        class="form-control @error('phone') is-invalid @enderror"
                                                        name="phone"
                                                        placeholder="Phone Number *" 
                                                        value="{{ old('phone') }}"
                                                        required>
                                                    @error('phone')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <div class="col-12">
                                                    <input type="text" 
                                                        class="form-control @error('location') is-invalid @enderror"
                                                        name="location"
                                                        placeholder="Location *" 
                                                        value="{{ old('location') }}"
                                                        required>
                                                    @error('location')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <div class="col-12 position-relative">
                                                    <select class="form-select @error('event_type') is-invalid @enderror" name="event_type" required>
                                                        <option value="{{ $event->title }}" selected>
                                                            {{ $event->title }}
                                                        </option>
                                                    </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">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <div class="col-12 mt-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="marketing_consent" name="marketing_consent" value="1" {{ old('marketing_consent') ? 'checked' : '' }}>
                                                        <p class="form-check-label typWhite bs-subheading"
                                                            for="marketing_consent">
                                                            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="YOUR_SITE_KEY"></div>
                                                </div>
                                                <div class="col-md-6">
                                                    <button type="submit" class="btn btn-submit" id="submitBtn">
                                                        <span class="btn-text">Submit</span>
                                                        <span class="btn-spinner" style="display: none;">
                                                            <i class="fas fa-spinner fa-spin"></i> Submitting...
                                                        </span>
                                                    </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>
                    </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.footer')
@include('website.partials.include_js')

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

<script>
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("events.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.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                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);
    });

    // 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';
            }
        });
    }
});
</script>