{{-- resources/views/website/training/calendar_modal.blade.php --}}
{{-- Extracted modal from training calendar page for reuse --}}

<!-- 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 ">
                                    Tell us what you need? we'll take it from here.
                                </h2>
                            </div>
                        </div>

                        @php
                            $currentFormType = $formType ?? 'enquiry';
                            $isTrainingRegistration = $currentFormType === 'training-calendar';
                            $globalEnquiryAction = route('global.enquiry.store');
                            $trainingEnquiryAction = route('training.enquiry.store');
                        @endphp

                        <form
                            id="trainingRegistrationForm"
                            action="{{ $isTrainingRegistration ? $trainingEnquiryAction : $globalEnquiryAction }}"
                            method="POST"
                            data-global-action="{{ $globalEnquiryAction }}"
                            data-training-action="{{ $trainingEnquiryAction }}"
                        >
                            @csrf
                            
                            {{-- Hidden fields for page tracking --}}
                            <input type="hidden" name="page_source" value="{{ $pageSource ?? 'global-enquiry' }}">
                            <input type="hidden" name="form_type" value="{{ $currentFormType }}">
                            
                            @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">
                                                @error('first_name')
                                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                @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') }}"
                                                    aria-describedby="last_name_error">
                                                @error('last_name')
                                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                @enderror
                                            </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">
                                                @error('phone_number')
                                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                @enderror
                                            </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">
                                                @error('business_email')
                                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                @enderror
                                            </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">
                                                @error('company')
                                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                @enderror
                                            </div>
                                            <div class="col-md-6 position-relative">
                                                <select name="country" id="enquiry_country"
                                                    class="form-select @error('country') is-invalid @enderror"
                                                    aria-describedby="country_error">
                                                    <option value="" selected disabled>Country</option>
                                                    {{-- Countries loaded dynamically via JavaScript --}}
                                                </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('country')
                                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                @enderror
                                            </div>
                                            <div class="col-md-6 position-relative">
                                                <select name="state" id="enquiry_state"
                                                    class="form-select @error('state') is-invalid @enderror"
                                                    aria-describedby="state_error" disabled>
                                                    <option value="" selected disabled>State</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('state')
                                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                @enderror
                                            </div>
                                            <div class="col-md-6 position-relative">
                                                <select name="city" id="enquiry_city"
                                                    class="form-select @error('city') is-invalid @enderror"
                                                    aria-describedby="city_error" disabled>
                                                    <option value="" selected disabled>City</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('city')
                                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                @enderror
                                            </div>
                                            <div class="col-12">
                                                <textarea name="remark" class="form-control @error('remark') is-invalid @enderror"
                                                    placeholder="Remark" rows="2" aria-describedby="remark_error">{{ old('remark') }}</textarea>
                                                @error('remark')
                                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                @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 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>
                                        <!-- Alert container for submit response messages - positioned before CAPTCHA and submit button -->
                                        <div id="form-message" class="alert-container d-none" 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="{{ config('services.recaptcha.site_key') }}"
                                                    data-callback="onRecaptchaCallback"></div>
                                                @error('g-recaptcha-response')
                                                    <span class="invalid-feedback d-block" role="alert"><strong>{{ $message }}</strong></span>
                                                @enderror
                                            </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>

{{-- Include reCAPTCHA script for this modal --}}
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

{{-- Dynamic Country/State/City Dropdowns for Global Enquiry Form (Frontend JSON) --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const countrySelect = document.getElementById('enquiry_country');
    const stateSelect = document.getElementById('enquiry_state');
    const citySelect = document.getElementById('enquiry_city');

    if (!countrySelect || !stateSelect || !citySelect) return;

    let locationsData = {};

    // Load location data from JSON file
    fetch('/data/locations.json')
        .then(response => response.json())
        .then(data => {
            locationsData = data.dropdowns; // Access dropdowns object
            populateCountries();
        })
        .catch(error => {
            console.error('Error loading locations data:', error);
            countrySelect.innerHTML = '<option value="" selected disabled>Error loading countries</option>';
        });

    // Populate countries dropdown
    function populateCountries() {
        countrySelect.innerHTML = '<option value="" selected disabled>Country</option>';
        locationsData.countries.forEach(country => {
            const option = document.createElement('option');
            option.value = country.name; // Store country name as value
            option.setAttribute('data-id', country.id); // Store ID for filtering
            option.textContent = country.name;
            countrySelect.appendChild(option);
        });
    }

    // When country changes, populate states
    countrySelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const countryId = selectedOption ? selectedOption.getAttribute('data-id') : null;
        
        // Reset dependent dropdowns
        stateSelect.innerHTML = '<option value="" selected disabled>State</option>';
        stateSelect.disabled = true;
        citySelect.innerHTML = '<option value="" selected disabled>City</option>';
        citySelect.disabled = true;

        if (countryId && locationsData.states[countryId]) {
            locationsData.states[countryId].forEach(state => {
                const option = document.createElement('option');
                option.value = state.name; // Store state name as value
                option.setAttribute('data-id', state.id); // Store ID for filtering
                option.textContent = state.name;
                stateSelect.appendChild(option);
            });
            stateSelect.disabled = false;
        }
        // Keep "State" placeholder even if no states available
    });

    // When state changes, populate cities
    stateSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const stateId = selectedOption ? selectedOption.getAttribute('data-id') : null;
        
        // Reset city dropdown
        citySelect.innerHTML = '<option value="" selected disabled>City</option>';
        citySelect.disabled = true;

        if (stateId && locationsData.cities[stateId]) {
            locationsData.cities[stateId].forEach(city => {
                const option = document.createElement('option');
                option.value = city; // Store city name as value
                option.textContent = city;
                citySelect.appendChild(option);
            });
            citySelect.disabled = false;
        }
        // Keep "City" placeholder even if no cities available
    });
});

// ========================================
// ENHANCED CLIENT-SIDE VALIDATION SYSTEM
// ========================================
(function() {
    'use strict';
    
    // Validation patterns
    const VALIDATION_PATTERNS = {
        name: /^[a-zA-Z\s\'-]+$/,  // Letters, spaces, hyphens, apostrophes
        phone: /^[\+]?[0-9\s\-\(\)]{8,15}$/,  // International phone format
        email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,  // RFC-compliant email
    };
    
    // Validation error messages
    const ERROR_MESSAGES = {
        firstName: {
            required: 'Please enter your first name.',
            pattern: 'First name may only contain letters, spaces, apostrophes, or hyphens.',
            minLength: 'First name must be at least 2 characters.',
        },
        lastName: {
            required: 'Please enter your last name.',
            pattern: 'Last name may only contain letters, spaces, apostrophes, or hyphens.',
            minLength: 'Last name must be at least 2 characters.',
        },
        phone: {
            required: 'Please enter your phone number.',
            pattern: 'Please enter a valid phone number (8-15 digits, may include +, -, or spaces).',
        },
        email: {
            required: 'Please enter your business email address.',
            pattern: 'Please enter a valid email address.',
        },
    };
    
    // Validate single field
    function validateField(field, showError = true) {
        const fieldName = field.name;
        const value = field.value.trim();
        let isValid = true;
        let errorMessage = '';
        
        // Clear previous errors
        field.classList.remove('is-invalid', 'is-valid');
        const existingError = field.parentElement.querySelector('.invalid-feedback');
        if (existingError) {
            existingError.remove();
        }
        
        switch(fieldName) {
            case 'first_name':
                if (!value) {
                    isValid = false;
                    errorMessage = ERROR_MESSAGES.firstName.required;
                } else if (value.length < 2) {
                    isValid = false;
                    errorMessage = ERROR_MESSAGES.firstName.minLength;
                } else if (!VALIDATION_PATTERNS.name.test(value)) {
                    isValid = false;
                    errorMessage = ERROR_MESSAGES.firstName.pattern;
                }
                break;
                
            case 'last_name':
                if (!value) {
                    isValid = false;
                    errorMessage = ERROR_MESSAGES.lastName.required;
                } else if (value.length < 2) {
                    isValid = false;
                    errorMessage = ERROR_MESSAGES.lastName.minLength;
                } else if (!VALIDATION_PATTERNS.name.test(value)) {
                    isValid = false;
                    errorMessage = ERROR_MESSAGES.lastName.pattern;
                }
                break;
                
            case 'phone_number':
                if (!value) {
                    isValid = false;
                    errorMessage = ERROR_MESSAGES.phone.required;
                } else if (!VALIDATION_PATTERNS.phone.test(value)) {
                    isValid = false;
                    errorMessage = ERROR_MESSAGES.phone.pattern;
                }
                break;
                
            case 'business_email':
                if (!value) {
                    isValid = false;
                    errorMessage = ERROR_MESSAGES.email.required;
                } else if (!VALIDATION_PATTERNS.email.test(value)) {
                    isValid = false;
                    errorMessage = ERROR_MESSAGES.email.pattern;
                }
                break;
        }
        
        // Show validation feedback
        if (showError) {
            if (isValid) {
                field.classList.add('is-valid');
            } else {
                field.classList.add('is-invalid');
                const errorDiv = document.createElement('span');
                errorDiv.className = 'invalid-feedback';
                errorDiv.setAttribute('role', 'alert');
                errorDiv.innerHTML = '<strong>' + errorMessage + '</strong>';
                field.parentElement.appendChild(errorDiv);
            }
        }
        
        return isValid;
    }
    
    // Validate entire form
    function validateForm(form) {
        let isFormValid = true;
        
        const requiredFields = [
            'first_name',
            'last_name',
            'phone_number',
            'business_email'
        ];
        
        requiredFields.forEach(fieldName => {
            const field = form.querySelector(`[name="${fieldName}"]`);
            if (field && !validateField(field, true)) {
                isFormValid = false;
            }
        });
        
        return isFormValid;
    }
    
    // Initialize validation when DOM is ready
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('trainingRegistrationForm');
        if (!form) return;
        
        // Add blur validation to all validated fields
        const validatedFields = ['first_name', 'last_name', 'phone_number', 'business_email'];
        
        validatedFields.forEach(fieldName => {
            const field = form.querySelector(`[name="${fieldName}"]`);
            if (field) {
                // Validate on blur
                field.addEventListener('blur', function() {
                    validateField(this, true);
                });
                
                // Clear error on input (but don't validate until blur)
                field.addEventListener('input', function() {
                    this.classList.remove('is-invalid', 'is-valid');
                    const existingError = this.parentElement.querySelector('.invalid-feedback');
                    if (existingError && !existingError.hasAttribute('data-server-error')) {
                        existingError.remove();
                    }
                });
            }
        });
        
        // Intercept form submission for validation
        form.addEventListener('submit', function(e) {
            // Validate form before submission
            if (!validateForm(form)) {
                e.preventDefault();
                e.stopPropagation();
                
                // Scroll to first error
                const firstError = form.querySelector('.is-invalid');
                if (firstError) {
                    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    firstError.focus();
                }
                
                return false;
            }
            
            // If validation passes, let the existing AJAX logic handle submission
            // Don't modify the submit flow - just validate before it runs
        });
    });
})();
</script>