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

                        <form id="trainingRegistrationForm" action="{{ route('training.enquiry.store') }}" method="POST">
                            @csrf
                            
                            {{-- Hidden fields for page tracking --}}
                            <input type="hidden" name="page_source" value="{{ $pageSource ?? 'home' }}">
                            <input type="hidden" name="form_type" value="{{ $formType ?? 'enquiry' }}">
                            
                            @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"
                                                    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>
                                                @error('country')
                                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                @enderror
                                            </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>
                                                @error('state')
                                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                @enderror
                                            </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>
                                                @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="4" 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="{{ env('RECAPTCHA_SITE_KEY', '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI') }}"
                                                    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>