@extends('layouts.website')

@section('content')

    <main>
        <section class="bs-banner type-overview bs-training-calender typ-glob-accre">
            <div class="swiper main">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="background-wrapper set-bg"
                            data-img="{{ asset('assets/images/training/banner-training.webp') }}">
                            <div class="container">
                                <div class="hero-wrapper">

                                    <h1 class="title">Plan, Learn, and Grow With<br> <span>IRCLASS Training</span></h1>
                                    <p class="subtitle marB42">Boost your knowledge and credentials with trusted
                                        courses.</p>
                                    <div class="custom-btn-group">
                                        <a href="#" class="bs-btn typ-fill">Get A Quote Now</a>
                                        <!-- <a href="#" class="bs-btn">Accreditations</a> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="lyt-section bs-training-calender typ-sec2">
            <div class="container">
                <div class="filters pb-4">
                    <div class="filter-icon">
                        <img src="{{ asset('assets/images/training/filter.svg') }}" alt="Filter icon" />
                        <div>
                            Fliter By
                        </div>
                    </div>
                    <div class="custom-select">

                        <select name="course_type" id="course_type">
                            <option value="">Training Type</option>
                            @foreach ($courseTypes as $courseType)
                                <option value="{{ $courseType }}"
                                    {{ request('course_type') == $courseType ? 'selected' : '' }}>
                                    {{ $courseType }}
                                </option>
                            @endforeach
                        </select>
                        <img src="{{ asset('assets/images/training/arrow.svg') }}" alt="Filter icon" class="select-icon" />
                    </div>
                    <div class="custom-select">

                        <select name="batch_type" id="batch_type">
                            <option value="">Training Mode</option>
                            @foreach ($batchTypes as $batchType)
                                <option value="{{ $batchType }}"
                                    {{ request('batch_type') == $batchType ? 'selected' : '' }}>
                                    {{ $batchType }}
                                </option>
                            @endforeach
                        </select>
                        <img src="{{ asset('assets/images/training/arrow.svg') }}" alt="Filter icon" class="select-icon" />
                    </div>
                    <div class="custom-select">

                        <select>
                            <option>Schedule Type</option>
                        </select>
                        <img src="{{ asset('assets/images/training/arrow.svg') }}" alt="Filter icon" class="select-icon" />
                    </div>
                    <div class="custom-select">

                        <select>
                            <option>Event Status</option>
                        </select>
                        <img src="{{ asset('assets/images/training/arrow.svg') }}" alt="Filter icon" class="select-icon" />
                    </div>
                    <button onclick="applyFilters()">
                        <img src="{{ asset('assets/images/training/search.svg') }}" alt="Search icon" />
                        Browse Now
                    </button>
                </div>

                <div class="cards">
                    @forelse($trainings as $training)
                        <article class="card">
                            <div class="media">
                                @if ($training->image_path)
                                    <img src="{{ asset('storage/' . $training->image_path) }}" alt="Training" />
                                @endif
                                <div class="badge">{{ $training->course_type }}</div>
                            </div>
                            <div class="info">
                                <h3 class="title">{{ $training->training_course }}</h3>
                                <div class="meta">
                                    <div class="d-flex align-items-center"><img src="{{ asset('assets/images/training/time.svg') }}"
                                            alt="time" />{{ $training->from_date->format('d M Y') }}-{{ $training->to_date->format('d M Y') }}
                                    </div>
                                    <div class="d-flex align-items-center"><img src="{{ asset('assets/images/training/calender.svg') }}"
                                            alt="calendar" />
                                        @if($training->from_date && $training->to_date)
                                            {{ $training->effective_duration }} Days (Effective) | 9:00 AM - 4:00 PM
                                            @if($training->holidays)
                                                <br><small class="text-muted">Holidays: {{ $training->holidays_display }}</small>
                                            @endif
                                        @else
                                            {{ $training->duration ?? 'TBD' }} | 9:00 AM - 4:00 PM
                                        @endif
                                    </div>
                                    <div class="d-flex1">{{ $training->note }}</div>
                                </div>
                                <div class="register">
                                    <a href="javascript:void(0)" onclick="openPopupTC()">Register</a>
                                    <div class="price">
                                        ₹{{ number_format($training->promotional_offer ?: $training->standard_price, 0) }}
                                    </div>
                                </div>
                            </div>
                        </article>
                    @empty
                        <article class="card">
                            <div class="media">
                                <img src="{{ asset('assets/images/training/2.jpg') }}" alt="Training" />
                                <div class="badge">ISO 9001:2015 QMS Courses</div>
                            </div>
                            <div class="info">
                                <h3 class="title">ISO 9001:2015 QMS Internal Auditor</h3>
                                <div class="meta">
                                    <div class="d-flex"><img src="{{ asset('assets/images/training/time.svg') }}"
                                            alt="time" />15-17 May 2024</div>
                                    <div class="d-flex"><img src="{{ asset('assets/images/training/calender.svg') }}"
                                            alt="calendar" />3 Days | 9:00 AM - 4:00 PM</div>
                                    <div class="d-flex">10% off for Early Bird</div>
                                </div>
                                <div class="register">
                                    <a href="javascript:void(0)" onclick="openPopupTC()">Register</a>
                                    <div class="price">$1200</div>
                                </div>
                            </div>
                        </article>
                    @endforelse
                </div>
                <div class="mt-5">
                    <h3 class="bs-para text-center pt-1">{{ $trainings->count() }} / {{ $trainings->count() }} Results
                    </h3>
                </div>
            </div>
        </section>
        
        <!-- Training Registration Popup -->
        <section class="bs-events">
            <div class="typ-evt-cont">
                <div class="popup-overlay" id="popuptc">
                    <div class="popup-box">
                        <span class="popup-close" onclick="closePopupTC()">✖ 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">
                                        Get in Touch With Us
                                    </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 maxw350">
                                            Tell us what you need? we'll take it from here.
                                        </h2>
                                    </div>
                                </div>

                                <form id="trainingRegistrationForm" action="{{ route('training.calendar.register') }}" method="POST">
                                    @csrf
                                    
                                    @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="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </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" name="first_name"
                                                            class="form-control @error('first_name') is-invalid @enderror"
                                                            placeholder="First Name *" value="{{ old('first_name') }}"
                                                            aria-describedby="first_name_error">
                                                    </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') }}"
                                                            aria-describedby="last_name_error">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="tel" name="phone_number"
                                                            class="form-control @error('phone_number') is-invalid @enderror"
                                                            placeholder="Phone Number *" value="{{ old('phone_number') }}"
                                                            aria-describedby="phone_number_error">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="email" name="business_email"
                                                            class="form-control @error('business_email') is-invalid @enderror"
                                                            placeholder="Business Email Address *" value="{{ old('business_email') }}"
                                                            aria-describedby="business_email_error">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="text" name="company"
                                                            class="form-control @error('company') is-invalid @enderror"
                                                            placeholder="Company Name *" value="{{ old('company') }}"
                                                            aria-describedby="company_error">
                                                    </div>
                                                    <div class="col-md-6 position-relative">
                                                        <select name="country"
                                                            class="form-select @error('country') is-invalid @enderror"
                                                            aria-describedby="country_error">
                                                            <option value="" selected disabled>Country *</option>
                                                            <option value="India" {{ old('country') == 'India' ? 'selected' : '' }}>India</option>
                                                            <option value="United States" {{ old('country') == 'United States' ? 'selected' : '' }}>United States</option>
                                                            <option value="United Kingdom" {{ old('country') == 'United Kingdom' ? 'selected' : '' }}>United Kingdom</option>
                                                            <option value="Canada" {{ old('country') == 'Canada' ? 'selected' : '' }}>Canada</option>
                                                            <option value="Australia" {{ old('country') == 'Australia' ? 'selected' : '' }}>Australia</option>
                                                            <option value="Germany" {{ old('country') == 'Germany' ? 'selected' : '' }}>Germany</option>
                                                            <option value="France" {{ old('country') == 'France' ? 'selected' : '' }}>France</option>
                                                            <option value="Japan" {{ old('country') == 'Japan' ? 'selected' : '' }}>Japan</option>
                                                            <option value="China" {{ old('country') == 'China' ? 'selected' : '' }}>China</option>
                                                            <option value="Other" {{ old('country') == 'Other' ? 'selected' : '' }}>Other</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>
                                                    </div>
                                                    <div class="col-md-6 position-relative">
                                                        <select name="state"
                                                            class="form-select @error('state') is-invalid @enderror"
                                                            aria-describedby="state_error">
                                                            <option value="" selected disabled>State *</option>
                                                            <option value="Maharashtra" {{ old('state') == 'Maharashtra' ? 'selected' : '' }}>Maharashtra</option>
                                                            <option value="Karnataka" {{ old('state') == 'Karnataka' ? 'selected' : '' }}>Karnataka</option>
                                                            <option value="Tamil Nadu" {{ old('state') == 'Tamil Nadu' ? 'selected' : '' }}>Tamil Nadu</option>
                                                            <option value="Delhi" {{ old('state') == 'Delhi' ? 'selected' : '' }}>Delhi</option>
                                                            <option value="Gujarat" {{ old('state') == 'Gujarat' ? 'selected' : '' }}>Gujarat</option>
                                                            <option value="West Bengal" {{ old('state') == 'West Bengal' ? 'selected' : '' }}>West Bengal</option>
                                                            <option value="Rajasthan" {{ old('state') == 'Rajasthan' ? 'selected' : '' }}>Rajasthan</option>
                                                            <option value="Uttar Pradesh" {{ old('state') == 'Uttar Pradesh' ? 'selected' : '' }}>Uttar Pradesh</option>
                                                            <option value="Other" {{ old('state') == 'Other' ? 'selected' : '' }}>Other</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>
                                                    </div>
                                                    <div class="col-md-6 position-relative">
                                                        <select name="city"
                                                            class="form-select @error('city') is-invalid @enderror"
                                                            aria-describedby="city_error">
                                                            <option value="" selected disabled>City *</option>
                                                            <option value="Mumbai" {{ old('city') == 'Mumbai' ? 'selected' : '' }}>Mumbai</option>
                                                            <option value="Delhi" {{ old('city') == 'Delhi' ? 'selected' : '' }}>Delhi</option>
                                                            <option value="Bangalore" {{ old('city') == 'Bangalore' ? 'selected' : '' }}>Bangalore</option>
                                                            <option value="Chennai" {{ old('city') == 'Chennai' ? 'selected' : '' }}>Chennai</option>
                                                            <option value="Kolkata" {{ old('city') == 'Kolkata' ? 'selected' : '' }}>Kolkata</option>
                                                            <option value="Hyderabad" {{ old('city') == 'Hyderabad' ? 'selected' : '' }}>Hyderabad</option>
                                                            <option value="Pune" {{ old('city') == 'Pune' ? 'selected' : '' }}>Pune</option>
                                                            <option value="Ahmedabad" {{ old('city') == 'Ahmedabad' ? 'selected' : '' }}>Ahmedabad</option>
                                                            <option value="Other" {{ old('city') == 'Other' ? 'selected' : '' }}>Other</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>
                                                    </div>
                                                    <div class="col-12">
                                                        <textarea name="remark" class="form-control @error('remark') is-invalid @enderror"
                                                            placeholder="Remark *" rows="4" aria-describedby="remark_error">{{ old('remark') }}</textarea>
                                                    </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 check-para"
                                                                for="agree">
                                                                I agree to receive marketing information via email from
                                                                IRCLASS and its affiliates relating to their products
                                                                and services. I may withdraw my consent at any time with
                                                                future effect. For further details, refer to the Privacy
                                                                Notice.
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="alert d-none mt-3" style="margin: 1rem 0; padding: 1rem; border-radius: 8px; font-weight: 500; color: white;"></div>
                                                <div class="row d-flex align-items-center my-4 gy-3">
                                                    <div class="col-md-6">
                                                        <div class="g-recaptcha"
                                                            data-sitekey="{{ env('RECAPTCHA_SITE_KEY', '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>
                        </div>
                    </div>
                </div>
            </div>
        </section>

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

    @include('website.partials.include_js')
    
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        // Popup functions
        function openPopupTC() {
            document.getElementById('popuptc').style.display = 'flex';
        }
        
        function closePopupTC() {
            document.getElementById('popuptc').style.display = 'none';
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('trainingRegistrationForm');

            if (!form) {
                return;
            }

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

            // Clear alert when user starts typing
            const inputs = form.querySelectorAll('input, select, textarea');
            inputs.forEach(input => {
                input.addEventListener('input', function() {
                    if (formMessage && !formMessage.classList.contains('d-none')) {
                        formMessage.classList.add('d-none');
                        formMessage.innerHTML = '';
                    }
                });
            });

            // Form validation function
            function validateForm() {
                let isValid = true;
                const errorMessages = [];

                // Validate first name
                const firstName = form.querySelector('input[name="first_name"]');
                if (firstName) {
                    if (!firstName.value.trim()) {
                        errorMessages.push('Please enter your first name.');
                    isValid = false;
                    } else if (firstName.value.trim().length < 2) {
                        errorMessages.push('First name must be at least 2 characters.');
                    isValid = false;
                    }
                }

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

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

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

                // Validate company name
                const companyName = form.querySelector('input[name="company"]');
                if (companyName) {
                    if (!companyName.value.trim()) {
                        errorMessages.push('Please enter your company name.');
                        isValid = false;
                    } else if (companyName.value.trim().length < 2) {
                        errorMessages.push('Company name must be at least 2 characters.');
                        isValid = false;
                    }
                }

                // Validate country
                const country = form.querySelector('select[name="country"]');
                if (country) {
                    if (!country.value || country.value === '') {
                        errorMessages.push('Please select your country.');
                    isValid = false;
                    }
                }

                // Validate state
                const state = form.querySelector('select[name="state"]');
                if (state) {
                    if (!state.value || state.value === '') {
                        errorMessages.push('Please select your state.');
                    isValid = false;
                    }
                }

                // Validate city
                const city = form.querySelector('select[name="city"]');
                if (city) {
                    if (!city.value || city.value === '') {
                        errorMessages.push('Please select your city.');
                    isValid = false;
                    }
                }

                // Validate remark
                const remark = form.querySelector('textarea[name="remark"]');
                if (remark) {
                if (!remark.value.trim()) {
                        errorMessages.push('Please enter a remark.');
                    isValid = false;
                    }
                }

                // Show all errors in alert div if validation fails
                if (!isValid) {
                    const formMessage = document.querySelector('.alert');
                    if (formMessage) {
                        formMessage.innerHTML = '<ul class="mb-0"><li>' + errorMessages.join('</li><li>') + '</li></ul>';
                        formMessage.className = 'alert alert-danger mt-3';
                        formMessage.style.display = 'block';
                        formMessage.style.color = 'white';
                        formMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }
                    return false;
                }

                return isValid;
            }

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

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

                if (!validationResult) {
                    return;
                }

                // Show spinner (same as webinar 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 webinar form)
                        submitBtn.innerHTML = originalContent;
                        submitBtn.disabled = false;

                        if (data.success) {
                            // Show success message (same style as webinar 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.style.color = 'white';
                            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');
                            formMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });

                            // 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(() => {
                                closePopupTC();
                            }, 3000);
                        } else {
                            // Show error message (same style as webinar 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');
                            formMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });

                            // 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="business_email"]');
                                if (emailField) {
                                    showValidationError(emailField, data.message);
                                }
                            }
                        }
                    })
                    .catch(error => {
                        // Hide spinner (same as webinar form)
                        submitBtn.innerHTML = originalContent;
                        submitBtn.disabled = false;

                        // Show error message (same style as webinar 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');
                        formMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });

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

            // Add global error handler
            window.addEventListener('error', function(e) {
                // Handle global errors
            });
        });
        
        // Helper function to show validation errors
        function showValidationError(input, message) {
            input.classList.add('is-invalid');
            const feedback = input.parentNode.querySelector('.invalid-feedback');
            if (feedback) {
                feedback.textContent = message;
                feedback.style.display = 'block';
            }
        }
        
        // Filter functions
        function applyFilters() {
            const courseType = document.getElementById('course_type').value;
            const batchType = document.getElementById('batch_type').value;
            
            const params = new URLSearchParams();
            if (courseType) params.append('course_type', courseType);
            if (batchType) params.append('batch_type', batchType);
            
            const url = '{{ route("training.calendar.index") }}' + (params.toString() ? '?' + params.toString() : '');
            window.location.href = url;
        }
    </script>
@endsection