@extends('layouts.website')

@section('content')


<main>
    <section class="bs-banner type-overview 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/career/life-banner.webp') }}">
                        <div class="container">
                            <div class="hero-wrapper">

                                <h1 class="title" data-aos="fade" data-aos-delay="500">Shape the Future.<br><span> Build Yours .</span>
                                </h1>
                                <p class="subtitle marB42" data-aos="fade" data-aos-delay="500">Join IRQS to grow your career while making a real impact. Shape a smarter, safer future—starting with yours.</p>
                                <div class="custom-btn-group" data-aos="fade" data-aos-delay="500">
                                        <a href="javascript:void(0)" class="bs-btn typ-fill"
                                            onclick="scrollToJobOpenings()">View Open Positions</a>
                                    <!-- <a href="#" class="bs-btn">Accreditations</a> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="lyt-section typUpskill p-0 typBlack typ-accre-recog typ-member-slide typ-mission-sec2">
        <div class="container">
            <div class="row">
  <div class="common-heading" data-aos="fade" data-aos-duration="500"
                                                    data-aos-offset="0" data-aos-delay="100">
                        <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">Our Employment Philosophy</div>
                    </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                  
                    <div class="row mb-lg-5 mb-4" >
                        <div class="col-12">
                            <h2 class="bs-heading typWhite maxw600" data-aos="fade" data-aos-duration="500"
                                                    data-aos-offset="0" data-aos-delay="100">
                                Empowering People, <br>Driving Progress
                            </h2>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 d-flex flex-column align-items-center" >
                    <p class="bs-para typ-member-para pb-3" style="color:#fff;" data-aos="fade" data-aos-duration="500"
                                                    data-aos-offset="0" data-aos-delay="100">At IRCLASS - IRQS, we see our people as the driving force
                        behind our success. We foster a workplace where learning is constant, creativity is
                        encouraged, and every role contributes to a larger purpose. By nurturing talent and
                        promoting growth, we empower individuals to lead with confidence and impact.
                    </p>
                    <p class="bs-para typ-member-para py-2" style="color:#fff;" data-aos="fade" data-aos-duration="500"
                                                    data-aos-offset="0" data-aos-delay="100">Here, your ideas matter and your journey is valued.
                        Together, we build a culture of trust, respect, and excellence.
                    </p>
                </div>
            </div>
        </div>
    </section>
    <section class="lyt-section typUpskill p-0  typ-accre-recog typ-member-slide typ-mission-sec2 typ-career-sec3">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="common-heading" data-aos="fade" data-aos-delay="300">
                        <div class="line">
                            <img src="{{ asset('assets/images/contact/arr1.svg') }}" class="img-fluid" alt="line-img">
                        </div>
                        <div class="bs-sub-heading typBlack text-uppercase">Life @ IRCLASS - IRQS</div>
                    </div>

                </div>

                <div class="col-lg-8 d-flex flex-column align-items-center">
                    <div class="row  mb-4" data-aos="fade" data-aos-delay="400">
                        <div class="col-12">
                            <h2 class="bs-heading typBlack">
                                Working here isn’t just about the job—it’s about purpose.
                            </h2>
                        </div>
                    </div>
                    <p class="bs-para py-2 typBlack typ-member-para" data-aos="fade" data-aos-delay="500">Join a culture built on collaboration, continuous learning, and
                        shared success. We take pride in empowering employees through meaningful work, team
                        camaraderie, and a workplace that values every voice.
                    </p>
                </div>
            </div>
            <div class="row g-3 mt-5">

                <div class="col-md-4 col-sm-6 col-12" data-aos="fade" data-aos-delay="500">
                    <div class="square mb-gap">
                        <img src="{{ asset('assets/images/career/life1.webp') }}" alt="Square" class="gallery-img">
                    </div>
                    <div class="square">
                        <img src="{{ asset('assets/images/career/life2.webp') }}" alt="Square" class="gallery-img">
                    </div>
                </div>


                <div class="col-md-4 col-sm-6 col-12" data-aos="fade" data-aos-delay="500">
                    <div class="portrait mb-gap">
                        <img src="{{ asset('assets/images/career/life3.webp') }}" alt="Portrait" class="gallery-img">
                    </div>
                    <div class="landscape">
                        <img src="{{ asset('assets/images/career/life4.webp') }}" alt="Landscape" class="gallery-img">
                    </div>
                </div>


                <div class="col-md-4 col-sm-6 col-12" data-aos="fade" data-aos-delay="500">
                    <div class="square mb-gap">
                        <img src="{{ asset('assets/images/career/life5.webp') }}" alt="Square" class="gallery-img">
                    </div>
                    <div class="square">
                        <img src="{{ asset('assets/images/career/life6.webp') }}" alt="Square" class="gallery-img">
                    </div>
                </div>

            </div>
        </div>
    </section>
    <section class="lyt-section  typBlack typ-sec3">
        <div class="container">
            <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">VOICES OF IRCLASS - IRQS <span class="ms-1"></span></div>
            </div>
            <div class="row mb-4 align-items-end">
                <div class="col-lg-6 col-12">
                    <h2 class="bs-heading typWhite" data-aos="fade" data-aos-delay="400">
                        Team voices. Growth,<br> purpose, and pride.
                    </h2>
                </div>
                <div class="col-lg-6 col-12 mt-lg-0 mt-3 mt-lg-4">
                    <div class="d-flex align-items-center justify-content-lg-end justify-content-md-end justify-content-end gap-4 "
                        data-aos="fade" data-aos-delay="400">
                        <div class="bs-swipper-icons">
                            <div class="swiper-button-prev certification-prev">
                                <span class="icon typ-black icon-link-arrow"></span>
                            </div>
                            <div class="swiper-button-next certification-next">
                                <span class="icon typ-black icon-link-arrow"></span>
                            </div>
                        </div>
                    </div>

                </div>
                
            </div>


            <div class="swiper certifications-slider pt-3 pt-lg-5" data-aos="fade" data-aos-delay="500">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="bs-certification-box-wrapper" data-aos="fade" data-aos-delay="500">
                            <div class="card typBlack">
                                <img class="quote-icon" src="{{ asset('assets/images/career/quote.svg') }}" alt="Quote Icon">
                                <div class="card-align">
                                    <div class="text">
                                        IRCLASS has given me the space to grow professionally and personally.
                                        I've worked on diverse projects and learned something new every day.
                                    </div>
                                    <!-- <div class="profile">
                                        <img src="{{ asset('assets/images/career/priya2.webp') }}" alt="Priya">
                                        <div class="profile-info">
                                            <div class="name">Priya</div>
                                            <div class="role">Project Engineer</div>
                                        </div>
                                    </div> -->
                                </div>
                            </div>
                            <div class="card typBlack">
                                <img class="quote-icon" src="{{ asset('assets/images/career/quote.svg') }}" alt="Quote Icon">
                                <div class="card-align">
                                    <div class="text">
                                        The culture here is inclusive and empowering. I've always felt heard and
                                        supported.
                                    </div>
                                    <!-- <div class="profile">
                                        <img src="{{ asset('assets/images/career/rahul.webp') }}" alt="Rahul">
                                        <div class="profile-info">
                                            <div class="name">Rahul</div>
                                            <div class="role">Technical Analyst</div>
                                        </div>
                                    </div> -->
                                </div>


                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="bs-certification-box-wrapper" data-aos="fade" data-aos-delay="500">
                            <div class="card typBlack">
                                <img class="quote-icon" src="{{ asset('assets/images/career/quote.svg') }}" alt="Quote Icon">
                                <div class="card-align">
                                    <div class="text">
                                        IRCLASS has given me the space to grow professionally and personally.
                                        I've worked on diverse projects and learned something new every day.
                                    </div>
                                    <!-- <div class="profile">
                                        <img src="{{ asset('assets/images/career/priya2.webp') }}" alt="Priya">
                                        <div class="profile-info">
                                            <div class="name">Priya</div>
                                            <div class="role">Project Engineer</div>
                                        </div>
                                    </div> -->
                                </div>
                            </div>
                            <div class="card typBlack">
                                <img class="quote-icon" src="{{ asset('assets/images/career/quote.svg') }}" alt="Quote Icon">
                                <div class="card-align">
                                    <div class="text">
                                        The culture here is inclusive and empowering. I've always felt heard and
                                        supported.
                                    </div>
                                    <!-- <div class="profile">
                                        <img src="{{ asset('assets/images/career/rahul.webp') }}" alt="Rahul">
                                        <div class="profile-info">
                                            <div class="name">Rahul</div>
                                            <div class="role">Technical Analyst</div>
                                        </div>
                                    </div> -->
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @if(isset($jobOpenings) && $jobOpenings->count() > 0)
        <section id="current-openings" class="lyt-section typUpskill p-0  typ-accre-recog typ-member-slide typ-mission-sec5">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="col-lg-12">
                        <div class="common-heading" data-aos="fade" data-aos-delay="300">
                            <div class="line">
                                <img src="{{ asset('assets/images/contact/arr1.svg') }}" class="img-fluid" alt="line-img">
                            </div>
                            <div class="bs-sub-heading typBlack text-uppercase">Current Openings</div>
                        </div>

                    </div>
                    <div class="row mb-4" data-aos="fade" data-aos-delay="400">
                        <div class="col-12">
                            <h2 class="bs-heading">
                                Find the role that <br>fits you.
                            </h2>

                        </div>
                    </div>
                </div>
                <div class="col-lg-7 d-flex  align-items-center">
                    <p class="bs-para py-2 typ-member-para" data-aos="fade" data-aos-delay="500">Explore exciting opportunities across departments and locations. Whether you're starting out or looking to advance, IRQS offers roles that challenge, inspire and reward.
                    </p>
                </div>
            </div>
                <div class="row align-items-center mt-4 g-4">


                <div class="col-lg-5 col-md-6">
                    <img src="{{ asset('assets/images/career/priya3.webp') }}" class="op-c"
                        alt="Professional woman representing job opportunities" data-aos="fade" data-aos-delay="500">
                </div>


                <div class="col-lg-7 col-md-6">
                        <!-- <a href="marine-surveyor.html" class="job-item">
                            <div>
                                <span class="job-title">Marine Surveyor</span>
                                <span class="job-meta">Mumbai | 5+ Years</span>
                            </div>
                            <span class="arrow-icon">→</span>
                        </a>

                        <a href="qa-auditor.html" class="job-item">
                            <div>
                                <span class="job-title">QA Auditor</span>
                                <span class="job-meta">Chennai | 3+ Years</span>
                            </div>
                            <span class="arrow-icon">→</span>
                        </a>

                        <a href="structural-engineer.html" class="job-item">
                            <div>
                                <span class="job-title">Structural Engineer</span>
                                <span class="job-meta">Hyderabad | 2–4 Years</span>
                            </div>
                            <span class="arrow-icon">→</span>
                        </a>

                        <a href="it-support-executive.html" class="job-item">
                            <div>
                                <span class="job-title">IT Support Executive</span>
                                <span class="job-meta">Remote | 1–3 Years</span>
                            </div>
                            <span class="arrow-icon">→</span>
                        </a> -->
 <div class="job-scroll">
      @foreach($jobOpenings as $job)
                   
                            <div class="job-item">
                            <div>
                                    <div><span class="job-title">{{ $job->title }}</span>
                                <span class="job-meta">{{ $job->location }} | {{ $job->experience_required }}</span>
                            </div>
                                    <div>
                            <span class="arrow-icon">→</span>
                                    </div>
                                    <div class="job-details">
                                        <div class="job-desc">
                                            @if($job->short_description)
                                                <p>{{ $job->short_description }}</p>
                                            @endif
                                            
                                            @if($job->requirement)
                                                <strong>Requirement</strong>
                                                <ul>
                                                    @foreach(explode("\n", $job->requirement) as $req)
                                                        @if(trim($req))
                                                            <li>{{ trim($req) }}</li>
                                                        @endif
                    @endforeach
                                                </ul>
                                            @endif
                                            
                                            <!-- <p>Grow your expertise with a trusted global leader in maritime safety.</p> -->
                </div>

                                        <div class="">
                                            <a href="javascript:void(0)" class="apply-btn" onclick="scrollToForm('{{ $job->title }}')">Apply Now</a>
            </div>

        </div>
                                </div>
                            </div>
                        @endforeach
 </div>
              

                    </div>

                </div>
        </div>
    </section>
    @endif
        @if (isset($jobOpenings) && $jobOpenings->count() > 0)
            <section id="job-application-form"
                class="lyt-section typUpskill p-0 typ-accre-recog typ-member-slide typ-mission-sec6 set-bg"
                data-img="{{ asset('assets/images/career/career-form-bg.webp') }}">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">

                    <div class="row my-4" data-aos="fade" data-aos-delay="400">
                        <div class="col-12">
                            <div class="common-heading" data-aos="fade" data-aos-delay="300">
                                <div class="line">
                                    <img src="{{ asset('assets/images/contact/arr1.svg') }}" class="img-fluid" alt="line-img">
                                </div>
                                <div class="bs-sub-heading typBlack text-uppercase">Upload Your Resume</div>
                            </div>
                            <h2 class="bs-heading maxw600" data-aos="fade" data-aos-delay="500">
                                Share Your, <br>Profile With Us
                            </h2>
                            <p class="bs-para py-2 typ-member-para typ-career-form" data-aos="fade" data-aos-delay="500">We're always open to great talent. Upload your resume and we'll
                                be in touch when a suitable role becomes available.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 d-flex flex-column align-items-center">
                    <div class="form-section">
                        <h4 class="mb-4" data-aos="fade" data-aos-delay="500">Fill the form</h4>

                        <!-- Professional Form Pattern - Same as Home Hero Banner Admin Form -->
                        <form action="{{ route('career.apply') }}" method="POST" enctype="multipart/form-data" 
                              id="jobApplicationForm">
                            @csrf

                                    <!-- Dynamic Alert Container for JavaScript -->
                                    <div class="alert-container d-none"></div>

                            <!-- Server-side validation errors display -->
                            @if ($errors->any())
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <i class="fas fa-exclamation-circle mr-2"></i>
                                    <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

                            <!-- Success Message Display -->
                            @if (session('success'))
                                        <div class="alert alert-success alert-dismissible fade show" role="alert"
                                            id="careerSuccessAlert">
                                    <i class="fas fa-check-circle mr-2"></i>
                                    <strong>Success!</strong> {{ session('success') }}
                                            <button type="button" class="close" data-dismiss="alert"
                                                aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            @endif

                                    <!-- First Name and Last Name Fields -->
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="">
                                                <label for="first_name" class="form-label">First Name *</label>
                                <input type="text" 
                                    class="form-control @error('first_name') is-invalid @enderror" 
                                                    id="first_name" name="first_name" value="{{ old('first_name') }}">
                                @error('first_name')
                                                    <span class="invalid-feedback"
                                                        role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="">
                                                <label for="last_name" class="form-label">Last Name *</label>
                                <input type="text" 
                                    class="form-control @error('last_name') is-invalid @enderror" 
                                                    id="last_name" name="last_name" value="{{ old('last_name') }}">
                                @error('last_name')
                                                    <span class="invalid-feedback"
                                                        role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                                            </div>
                                        </div>
                            </div>

                            <!-- Email Field -->
                                    <div class="mb-3">
                                        <label for="email" class="form-label">Business Email Address *</label>
                                        <input type="email" class="form-control @error('email') is-invalid @enderror"
                                            id="email" name="email" value="{{ old('email') }}">
                                @error('email')
                                            <span class="invalid-feedback"
                                                role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>

                            <!-- Phone Field -->
                            <div class="my-3">
                                        <label for="phone" class="form-label">Phone Number *</label>
                                        <input type="tel" class="form-control @error('phone') is-invalid @enderror"
                                            id="phone" name="phone" value="{{ old('phone') }}">
                                @error('phone')
                                            <span class="invalid-feedback"
                                                role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>

                            <!-- Job Interest Field -->
                            <div class="my-3">
                                        <label for="what_youre_looking_for" class="form-label">What you're looking
                                            for?</label>
                                        <textarea class="form-control @error('what_youre_looking_for') is-invalid @enderror" id="what_youre_looking_for"
                                            name="what_youre_looking_for" rows="1">{{ old('what_youre_looking_for') }}</textarea>
                                @error('what_youre_looking_for')
                                            <span class="invalid-feedback"
                                                role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>

                            <!-- Resume Upload Field -->
                            <div class="my-3">
                                <label for="resume" class="upload-resume">
                                            Upload Resume *
                                            <img src="{{ asset('assets/images/career/upload.svg') }}" alt="Upload Icon">
                                </label>
                                        <input type="file" class="@error('resume') is-invalid @enderror"
                                            id="resume" name="resume" accept=".pdf,.doc,.docx">
                                <div id="file-info" class="mt-2" style="display: none;">
                                            <small class="text-muted"><span id="file-name"></span> (<span
                                                    id="file-size"></span>)</small>
                                </div>
                                @error('resume')
                                            <span class="invalid-feedback" role="alert"
                                                style="display:block;"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>

                            <!-- Marketing Consent Checkbox -->
                            <div class="form-check my-3">
                                        <input class="form-check-input" type="checkbox" id="marketing_consent"
                                            name="marketing_consent" value="1"
                                        {{ old('marketing_consent') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="marketing_consent">
                                        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.
                                    </label>
                                </div>

                            <!-- Submit Section -->
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                                <!-- Google reCAPTCHA -->
                                        <div class="g-recaptcha"
                                            data-sitekey="{{ config('services.recaptcha.site_key') }}">
                                        </div>

                                <button type="submit" class="btn-submit">Submit</button>
                                  <!-- <a type="submit" class="bs-btn typ-yellow btn-submit">Submit</a> -->
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>

        </div>
    </section>
    @endif

        <a href="javascript:void(0)" class="back-to-top">
        <span class="icon icon-drop-icon"></span>
        <!-- <p class="back-text">Back to Top</p> -->
    </a>
    @include('components.request-quote-button')

    {{-- Include enquiry form modal for Career page --}}
    @include('components.enquiry-form-wrapper', ['pageSource' => 'career', 'formType' => 'enquiry'])

    <!-- Career Form Validation Script - Embedded -->
    
    
    <!-- Career Form Validation Script -->
    <script>
        // Career Form Validation - Independent Implementation
        class CareerFormValidator {
            constructor() {
                this.form = document.getElementById('jobApplicationForm');
                this.submitBtn = this.form ? this.form.querySelector('button[type="submit"]') : null;
                this.alertContainer = this.form ? this.form.querySelector('.alert-container') : null;
                this.originalSubmitContent = this.submitBtn ? this.submitBtn.innerHTML : '';
                
                if (this.form) {
                    this.init();
                }
            }
            
            init() {
                this.setupEventListeners();
                this.setupFileInputs();
            }
            
            setupEventListeners() {
                // Form submission
                this.form.addEventListener('submit', (e) => this.handleSubmit(e));
                
                // Real-time validation and alert clearing (matches Global Enquiry Form)
                const inputs = this.form.querySelectorAll('input, select, textarea');
                
                inputs.forEach(input => {
                    // Focus - clear existing error
                    input.addEventListener('focus', () => {
                        this.clearFieldError(input);
                    });
                    
                    // Input - real-time validation when value exists
                    input.addEventListener('input', () => {
                        const value = input.value.trim();
                        if (value.length > 0) {
                            const fieldErrors = this.validateField(input);
                            if (fieldErrors.length > 0) {
                                this.showFieldError(input, fieldErrors[0]);
                            } else {
                                this.clearFieldError(input);
                            }
                        }
                    });
                    
                    // Keyup - real-time validation when value exists
                    input.addEventListener('keyup', () => {
                        const value = input.value.trim();
                        if (value.length > 0) {
                            const fieldErrors = this.validateField(input);
                            if (fieldErrors.length > 0) {
                                this.showFieldError(input, fieldErrors[0]);
                            } else {
                                this.clearFieldError(input);
                            }
                        }
                    });
                    
                    // Change - validate dropdowns and selects
                    input.addEventListener('change', () => {
                        const fieldErrors = this.validateField(input);
                        if (fieldErrors.length > 0) {
                            this.showFieldError(input, fieldErrors[0]);
                        } else {
                            this.clearFieldError(input);
                        }
                    });
                    
                    // Blur - full validation
                    input.addEventListener('blur', () => {
                        const fieldErrors = this.validateField(input);
                        if (fieldErrors.length > 0) {
                            this.showFieldError(input, fieldErrors[0]);
                        } else {
                            this.clearFieldError(input);
                        }
                    });
                });
            }
            
            setupFileInputs() {
                const fileInputs = this.form.querySelectorAll('input[type="file"]');
                fileInputs.forEach(input => {
                        // Handle file selection
                    input.addEventListener('change', (e) => {
                        this.handleFileInputChange(e);
                        const fieldErrors = this.validateField(input);
                        if (fieldErrors.length > 0) {
                            this.showFieldError(input, fieldErrors[0]);
                    } else {
                            this.clearFieldError(input);
                        }
                    });

                        // Handle focus event for file inputs
                        input.addEventListener('focus', () => {
                            this.clearFieldError(input);
                        });

                        // Handle blur event for file inputs (this should work)
                        input.addEventListener('blur', () => {
                            // Use setTimeout to ensure the blur event is processed
                            setTimeout(() => {
                                const fieldErrors = this.validateField(input);
                                if (fieldErrors.length > 0) {
                                    this.showFieldError(input, fieldErrors[0]);
                                } else {
                                    this.clearFieldError(input);
                                }
                            }, 100);
                        });
                });
            }
            
            handleSubmit(e) {
                e.preventDefault();
                
                if (!this.validateForm()) {
                    return;
                }
                
                this.submitForm();
            }
            
            validateForm() {
                const errors = [];
                const inputs = this.form.querySelectorAll('input, select, textarea');
                
                // Clear all previous errors first
                inputs.forEach(input => {
                    this.clearFieldError(input);
                });
                
                // Validate each field
                inputs.forEach(input => {
                    const fieldErrors = this.validateField(input);
                    if (fieldErrors.length > 0) {
                        errors.push(...fieldErrors);
                        this.showFieldError(input, fieldErrors[0]);
                    }
                });
                
                return errors.length === 0;
            }
            
            validateField(input) {
                const errors = [];
                const value = input.value.trim();
                const type = input.type;
                const name = input.name;
                
                // Check if field is required
                const isRequired = this.isFieldRequired(input);
                
                // Required field validation
                if (isRequired && !value) {
                    errors.push(`${this.getFieldLabel(input)} is required.`);
                    return errors;
                }
                
                if (!value) return errors; // Skip other validations if field is empty and not required
                
                // Email validation (RFC compliant)
                if (type === 'email' || name === 'email') {
                    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (!emailRegex.test(value)) {
                        errors.push('Please enter a valid email address.');
                    }
                }
                
                // Phone validation - numeric only, 10-25 digits (matches server-side)
                if (name === 'phone') {
                    const cleanPhone = value.replace(/[\s\-\(\)\+]/g, '');
                    const phoneRegex = /^[0-9]+$/;
                    
                    if (!phoneRegex.test(cleanPhone)) {
                        errors.push('Enter a valid phone number.');
                    } else if (cleanPhone.length < 10) {
                        errors.push('Phone number must be at least 10 digits.');
                    } else if (cleanPhone.length > 25) {
                        errors.push('Phone number cannot exceed 25 digits.');
                    }
                }
                
                // Name validation - alphabets and spaces only
                if (name === 'first_name' || name === 'last_name') {
                    const nameRegex = /^[A-Za-z ]+$/;
                    if (!nameRegex.test(value)) {
                        errors.push(`${this.getFieldLabel(input)} must contain only alphabets and spaces.`);
                    } else if (value.length < 2) {
                        errors.push(`${this.getFieldLabel(input)} must be at least 2 characters.`);
                    } else if (value.length > 50) {
                        errors.push(`${this.getFieldLabel(input)} cannot exceed 50 characters.`);
                    }
                }
                
                // What you're looking for validation
                if (input.tagName === 'TEXTAREA' && name === 'what_youre_looking_for') {
                    if (isRequired && value.length < 5) {
                        errors.push('Description must be at least 5 characters.');
                    } else if (value.length > 255) {
                        errors.push('Description cannot exceed 255 characters.');
                    }
                }
                
                // File validation - pdf/doc/docx only, max 5MB
                if (type === 'file' && input.files && input.files.length > 0) {
                    const file = input.files[0];
                    const allowedTypes = ['application/pdf', 'application/msword',
                        'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
                    const allowedExtensions = ['.pdf', '.doc', '.docx'];
                    const fileExtension = file.name.toLowerCase().substring(file.name.lastIndexOf('.'));
                    
                    if (!allowedTypes.includes(file.type) && !allowedExtensions.includes(fileExtension)) {
                        errors.push('Only pdf, doc, or docx files are allowed.');
                    } else if (file.size > 5 * 1024 * 1024) { // 5MB
                        errors.push('File size exceeds 5 MB.');
                    }
                }
                
                return errors;
            }
            
            getFieldLabel(input) {
                const label = this.form.querySelector(`label[for="${input.id}"]`);
                if (label) {
                    return label.textContent.replace('*', '').trim();
                }
                
                const name = input.name;
                return name.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
            }
            
            isFieldRequired(input) {
                if (input.hasAttribute('required')) {
                    return true;
                }
                
                const requiredFields = this.getRequiredFields();
                return requiredFields.includes(input.name);
            }
            
            getRequiredFields() {
                const requiredFields = [];
                const inputs = this.form.querySelectorAll('input, select, textarea');
                
        inputs.forEach(input => {
                    const label = this.form.querySelector(`label[for="${input.id}"]`);
                    if (label && label.textContent.includes('*')) {
                        requiredFields.push(input.name);
                    }
                });
                
                return requiredFields;
            }
            
            showFieldError(input, message) {
                // Add red border class and remove valid class (matches Enquiry Form pattern)
                input.classList.add('is-invalid');
                input.classList.remove('is-valid');
                
                // Find or create feedback element
                let feedback = input.parentNode.querySelector('.invalid-feedback');
                
                if (!feedback) {
                    // Create feedback element if it doesn't exist
                    feedback = document.createElement('span');
                    feedback.className = 'invalid-feedback';
                    feedback.setAttribute('role', 'alert');
                    input.parentNode.appendChild(feedback);
                }
                
                // Update feedback element with message
                feedback.innerHTML = message;
                feedback.style.display = 'block';
            }
            
            clearFieldError(input) {
                // Remove red border class
                input.classList.remove('is-invalid');
                input.classList.remove('is-valid');
                
                // Hide feedback element
                const feedback = input.parentNode.querySelector('.invalid-feedback');
                if (feedback) {
                    feedback.style.display = 'none';
                    feedback.innerHTML = '';
                }
            }
            
            showAlert(message, type = 'success') {
                if (this.alertContainer) {
                    this.alertContainer.innerHTML = `
                        <div class="alert alert-${type} alert-dismissible fade show" role="alert" id="dynamicCareerSuccessAlert">
                            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} mr-2"></i>
                            ${message}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    `;
                    this.alertContainer.classList.remove('d-none');
                        this.alertContainer.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                    
                    // Auto-close success messages after 3 seconds
                    if (type === 'success') {
                        setTimeout(() => {
                            const alert = document.getElementById('dynamicCareerSuccessAlert');
                            if (alert) {
                                alert.classList.remove('show');
                                alert.classList.add('fade');
                                setTimeout(() => {
                                    alert.style.display = 'none';
                                }, 150);
                            }
                        }, 3000);
                    }
                }
            }
            
            handleFileInputChange(e) {
                const input = e.target;
                
                if (input.files && input.files.length > 0) {
                    const file = input.files[0];
                    const fileName = file.name;
                    const fileSize = this.formatFileSize(file.size);
                    
                    // Show file info if elements exist
                    const fileInfo = document.getElementById('file-info');
                    const fileNameSpan = document.getElementById('file-name');
                    const fileSizeSpan = document.getElementById('file-size');
                    
                    if (fileInfo && fileNameSpan && fileSizeSpan) {
                        fileNameSpan.textContent = fileName;
                        fileSizeSpan.textContent = fileSize;
                        fileInfo.style.display = 'block';
                    }
                } else {
                    // Hide file info
                    const fileInfo = document.getElementById('file-info');
                    if (fileInfo) {
                        fileInfo.style.display = 'none';
                    }
                }
            }
            
            formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }
            
            async submitForm() {
                // Use shared helper to start submit state
                FormResponseHelper.startSubmitState(this.submitBtn);
                
                // Attach timeout protection (aligned with Global Enquiry - 60 seconds)
                FormResponseHelper.attachDefaultTimeout(this.form, this.submitBtn, 60000);
                
                try {
                    const formData = new FormData(this.form);
                    
                    // Add reCAPTCHA response if available
                    try {
                        if (typeof grecaptcha !== 'undefined') {
                            const recaptchaResponse = grecaptcha.getResponse();
                            if (recaptchaResponse) {
                                formData.append('g-recaptcha-response', recaptchaResponse);
                            }
                        }
                    } catch (error) {
                        // reCAPTCHA not available - continue without it
                    }

                    const response = await fetch(this.form.action, {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    });
                    
                    const status = response.status;
                    const data = await response.json();

                    // Clear timeout protection
                    FormResponseHelper.clearDefaultTimeout(this.form);
                    
                    // Clear submit state
                    FormResponseHelper.clearSubmitState(this.submitBtn);

                    // Handle success response (200 or 201)
                    if (status === 200 || status === 201) {
                        // Use shared helper for success flow (matches Global Enquiry behavior)
                        FormResponseHelper.handleSuccessFlow(this.form, data);
                    }
                    // Handle validation errors (422)
                    else if (status === 422) {
                        // Use shared helper for error flow
                        FormResponseHelper.handleErrorFlow(this.form, data);
                        
                        // Show field-specific errors
                        if (data.errors) {
                            Object.keys(data.errors).forEach(field => {
                                const input = this.form.querySelector(`[name="${field}"]`);
                                if (input) {
                                    this.showFieldError(input, data.errors[field][0]);
                                }
                            });
                        }
                    }
                    // Handle other server errors
                    else {
                        // Use shared helper for error flow
                        FormResponseHelper.handleErrorFlow(this.form, {
                            message: data.message || 'An unexpected error occurred. Please try again later.'
                        });
                    }
                } catch (error) {
                    // Network error - handled by FormResponseHelper
                    
                    // Clear timeout protection
                    FormResponseHelper.clearDefaultTimeout(this.form);
                    
                    // Clear submit state
                    FormResponseHelper.clearSubmitState(this.submitBtn);
                    
                    // Use shared helper for error flow
                    FormResponseHelper.handleErrorFlow(this.form, {
                        message: 'Unable to reach the server. Please check your internet connection and try again.'
                    });
                }
            }
            
            clearAllFieldErrors() {
                const inputs = this.form.querySelectorAll('input, select, textarea');
                inputs.forEach(input => {
                    this.clearFieldError(input);
                });
            }
        }
        
        // Initialize Career Form Validator when DOM is loaded
        document.addEventListener('DOMContentLoaded', function() {
            new CareerFormValidator();
        });
    </script>
    
    <script>
        // Career form utility functions

        function scrollToForm(jobTitle) {
            // Smooth scroll to the form
            const formSection = document.getElementById('job-application-form');
            if (formSection) {
                formSection.scrollIntoView({ 
                    behavior: 'smooth',
                    block: 'start'
                });
                
                // Pre-fill the "What you're looking for" field with the job title
                setTimeout(() => {
                    const lookingForField = document.getElementById('what_youre_looking_for');
                    if (lookingForField) {
                        lookingForField.value = 'Interested in ' + jobTitle + ' position';
                        lookingForField.focus();
                        // Trigger validation by dispatching input event
                            lookingForField.dispatchEvent(new Event('input', {
                                bubbles: true
                            }));
                    }
                }, 500);
            }
        }

        // reCAPTCHA debugging and initialization
        window.addEventListener('load', function() {
            setTimeout(function() {
                const recaptchaElement = document.querySelector('.g-recaptcha');
                if (recaptchaElement) {
                    if (recaptchaElement.children.length === 0) {
                        grecaptcha.render(recaptchaElement, {
                            'sitekey': '{{ config('services.recaptcha.site_key') }}'
                        });
                    }
                }
            }, 2000);
        });

        // Form validation is automatically initialized by the CareerFormValidator class

        // Auto-close success message after 3 seconds
        document.addEventListener('DOMContentLoaded', function() {
            const successAlert = document.getElementById('careerSuccessAlert');
            if (successAlert) {
                setTimeout(function() {
                    successAlert.classList.remove('show');
                    successAlert.classList.add('fade');
                    setTimeout(function() {
                        successAlert.style.display = 'none';
                    }, 150); // Wait for fade animation to complete
                }, 3000); // 3 seconds
            }
        });

        // Smooth scroll to job openings section
        function scrollToJobOpenings() {
            const targetSection = document.getElementById('current-openings');
            
            if (targetSection) {
                // Method 1: Try scrollIntoView first
                try {
                    targetSection.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                } catch (error) {
                    // Method 2: Fallback to window.scrollTo
                    const headerHeight = document.querySelector('.main-header') ? document.querySelector('.main-header').offsetHeight : 0;
                    const targetPosition = targetSection.offsetTop - headerHeight - 20;
                    
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                }
            } else {
                // Show user-friendly message instead of alert
                const formMessage = document.querySelector('.alert-container');
                if (formMessage) {
                    formMessage.innerHTML = `
                        <div class="alert alert-info alert-dismissible fade show" role="alert">
                            <i class="fas fa-info-circle mr-2"></i>
                            <strong>Info:</strong> No job openings are currently available. Please check back later or contact us directly.
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    `;
                    formMessage.classList.remove('d-none');
                    formMessage.style.display = 'block';
                }
                
                // Fallback: scroll to bottom of page to show contact form
                const formSection = document.getElementById('job-application-form');
                if (formSection) {
                    formSection.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                } else {
                    window.scrollTo({
                        top: document.body.scrollHeight,
                        behavior: 'smooth'
                    });
                }
            }
        }
        
        // Make function globally available
        window.scrollToJobOpenings = scrollToJobOpenings;
        
        // Ensure function is available when DOM is ready
        document.addEventListener('DOMContentLoaded', function() {
            window.scrollToJobOpenings = scrollToJobOpenings;
        });
    </script>

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script src="{{ asset('js/form-response-helper.js') }}"></script>
</main>

@endsection