@extends('frontend.layouts.master')

@section('header')
    @include('frontend.layouts.header-layout.three')
@endsection

@section('contents') 
<!-- breadcrumb-area -->
<style>
.btn:disabled {
  color: #000 !important;
  opacity: 0.4;
}
</style>
<section id="hero" class="hero section dark-background">
  <div id="hero-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
    <div class="carousel-item active"> <img src="{{ asset('frontend/img/hero-carousel/career-page-banner.jpg') }}" alt="">
      <div class="carousel-container">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb text-white">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('Home') }}</a></li>
            <li class="breadcrumb-item active  text-white" aria-current="page">Career</li>
          </ol>
        </nav>
        <h1 class="fw-bold hero-title fs-1">Career</h1>
      </div>
    </div>
    <!-- End Carousel Item --> 
  </div>
</section>
<section id="about-info" class="about-info px-3 pb-0">
  <div class="container-md" >
    <div class="row mb-4 gx-5">
      <div class="col-md-12">
        <div class="mb-4 text-justify"> {!! replaceImageSources($career?->description) !!} </div>
        <div>
        </div>
      </div>
      
    </div>
  </div>
</section>
<section id="career-page" class="career-page">
  <!-- <div class="map-img"> <img src="{{ asset('frontend/img/hero-carousel/career-page-banner.jpg') }}" alt="" class="map-img"> </div>-->
  <div class="border-0 p-3 contact-form career-form bg-smlight rounded-4" style="max-width: 500px;">
    <div class="job-form p-4">
      <h4 class=" mb-4 fw-bold mb-3 aos-init aos-animate" data-aos="fade-right" data-aos-delay="500">{{ getSessionLanguage() == 'en'?'Send your CV':'أرسل سيرتك الذاتية'; }}</h4>
      <form id="careerForm" action="{{ route('send-career-message') }}" enctype="multipart/form-data" method="post" class="php-email-form aos-init aos-animate">
      @csrf
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <div class="row gy-4">
          <div class="col-md-12">
            <input type="text" name="name" class="form-control" placeholder="{{ getSessionLanguage() == 'en'?'Name':'اسمك'; }}" required>
          </div>
          <div class="col-md-12 ">
            <input type="email" class="form-control" name="email" placeholder="{{ getSessionLanguage() == 'en'?'Email':'بريدك الإلكتروني'; }}" required>
          </div>
          <div class="col-md-12 ">
            <div class="input-group "> <span class="input-group-text bg-white border-0 " id="basic-addon1">{{ getSessionLanguage() == 'en'?'+971':'+٩٧١'; }}</span>
              <input type="text" name="mobile" maxlength="9" class="form-control" placeholder="" required>
            </div>
          </div>
          <div class="col-md-12">
            <input type="text" class="form-control" name="subject" placeholder="{{ getSessionLanguage() == 'en'?'Subject':'موضوع'; }}" required>
          </div>
          <div class="col-md-12">
            <textarea class="form-control" name="message" rows="2" placeholder="{{ getSessionLanguage() == 'en'?'Cover letter':'غطاء الرسالة'; }}" required></textarea>
          </div>
          <div class="col-md-12">
            <div class="input-group">
              <input name="cv" type="file" class="form-control bg-white" required>
            </div>
          </div>
          <div class="col-md-12">
            @if ($setting?->recaptcha_status == 'active')
                <div class="form-group mb-0 col-12">
                    <div class="g-recaptcha" data-sitekey="{{ $setting?->recaptcha_site_key }}"></div>
                </div>
            @endif
          </div>
          <div class="col-md-12 ">
            <div class="error-message" ></div>
            <button type="submit"  class="btn btn-org px-3 py-2 text-white">{{ getSessionLanguage() == 'en'?'Submit':'يُقدِّم'; }}</button> 
                        	<!-- <div class="cv-error-message"><p>{{ getSessionLanguage() == 'en'?'You already sent your CV. Thanks.':'لقد أرسلت سيرتك الذاتية بالفعل. شكرًا لك.'; }}</p></div> -->
                      </div>
        </div>
      </form>
    </div>
  </div>
  
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('careerForm');
    const errorDiv = document.querySelector('.error-message');

    // Allow only letters, numbers, spaces, and dashes
    const cleanInput = (value) => value.replace(/[^a-zA-Z0-9 @.+-]/g, '');

    const nameInput = form.querySelector('input[name="name"]');
    const emailInput = form.querySelector('input[name="email"]');
    const mobileInput = form.querySelector('input[name="mobile"]');
    const subjectInput = form.querySelector('input[name="subject"]');
    const messageInput = form.querySelector('textarea[name="message"]');

    nameInput.addEventListener('input', function () {
        this.value = cleanInput(this.value);
    });
    emailInput.addEventListener('input', function () {
        this.value = cleanInput(this.value);
    });
    mobileInput.addEventListener('input', function () {
        this.value = cleanInput(this.value);
    });
    subjectInput.addEventListener('input', function () {
        this.value = cleanInput(this.value);
    });
    messageInput.addEventListener('input', function () {
        this.value = cleanInput(this.value);
    });

    // Existing form validation logic
    form.addEventListener('submit', function (e) {
        let hasError = false;
        errorDiv.innerHTML = ''; // Clear previous messages

        const name = nameInput;
        const email = emailInput;
        const mobile = mobileInput;
        const subject = subjectInput;
        const message = messageInput;

        // Basic empty field validation
        if (!name.value.trim() || !email.value.trim() || !mobile.value.trim() || !subject.value.trim() || !message.value.trim()) {
            hasError = true;
        }

        // Validate reCAPTCHA
        const recaptcha = document.querySelector('.g-recaptcha');
        if (recaptcha) {
            const response = grecaptcha.getResponse();
            if (!response) {
                hasError = true;
                errorDiv.innerHTML = "{{ getSessionLanguage() == 'en'?'Please complete the reCAPTCHA.':'يرجى التحقق من reCAPTCHA.' }}";
            }
        }

        if (hasError) {
            e.preventDefault();
            errorDiv.style.display = 'block';
            if (!errorDiv.innerHTML) {
                errorDiv.innerHTML = "{{ getSessionLanguage() == 'en'?'Please fill all required fields.':'يرجى ملء جميع الحقول المطلوبة.' }}";
            }
        }
    });
});
</script>

<!--  Marquee Area --> 
@include('frontend.partials.marquee')
@endsection
@section('footer')
    @include('frontend.layouts.footer-layout.two')
@endsection