@extends('frontend.layouts.master')

@section('meta_title', $seo_setting['contact_page']['seo_title'])
@section('meta_description', $seo_setting['contact_page']['seo_description'])

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

@section('contents') 
<!-- Breadcumb Area -->
<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="{{ $setting?->contact_page_breadcrumb_image }}" 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">{{ __('Contact Us') }}</li>
          </ol>
        </nav>
        <h1 class="fw-bold hero-title fs-1">{{ __('Contact Us') }}</h1>
      </div>
    </div>
    <!-- End Carousel Item --> 
  </div>
</section>
<section id="contact-form" class="contact-form px-3 px-md-0">
<div class="container container-sm rounded-4" style="background: #fff" >
<div class="row">
  <div class="col-12">
    <div class="text-center">
      <h4 class="fw-bold mb-4 p-3" data-aos="fade-right" data-aos-delay="500">{{ getSessionLanguage() == 'en'?'Submit your enquiry':'أرسل استفسارك'; }}</h4>
    </div>
  </div>
</div>
<div class="container container-sm rounded-4" >
  <div class="row gx-4 align-items-center">
    <div class="col-md-6 d-none d-md-block"> <img src="{{ asset('frontend/img/cus-care1.jpg') }}" alt="" class="img-fluid rounded-4"> </div>
    <div class="col-md-6">
      <div class="p-4"> 
        
        <!--<p class="text-white aos-init aos-animate mt-2" data-aos="fade-right" data-aos-delay="700">A question? An issue? Drop us a line and we'll see how we can help.</p>                -->
        
        <form id="contactForm" action="{{ route('send-contact-message') }}" method="post" class="php-email-form contact-form">
        @csrf
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
          <div class="row gy-4">
            <div class="col-12 ">
              <div class="">
                <label for="showInputSelect1" class="form-label">{{ getSessionLanguage() == 'en'?'Are you a BSI Customer?':'هل أنت عميل؟'; }}</label>
                <select class="form-select form-control" id="showInputSelect1" name="customer">
                  <option value="">{{ getSessionLanguage() == 'en'?'-- Please choose --':'-- الرجاء الاختيار --'; }}</option>
                  <option value="yes">{{ getSessionLanguage() == 'en'?'Yes':'نعم'; }}</option>
                  <option value="no">{{ getSessionLanguage() == 'en'?'No':'لا'; }}</option>
                </select>
              </div>
              <div class="mt-3" id="nameField1" style="display: none;">
                <label for="nameInput" class="form-label">{{ getSessionLanguage() == 'en'?'Enter your account number':'أدخل رقم حسابك'; }} <span class="text-danger">*</span></label>
                <input name="account" maxlength="13" type="text" class="form-control" id="nameInput1" placeholder="{{ getSessionLanguage() == 'en'?'Enter your account number':'أدخل رقم حسابك'; }}">
              </div>
              <script>
				const selectBox = document.getElementById('showInputSelect1');
				const nameField = document.getElementById('nameField1');

				selectBox.addEventListener('change', function () {
				  nameField.style.display = (this.value === 'yes') ? 'block' : 'none';
				});
			  </script> 
            </div>
            <div class="col-md-12">
              <label class="form-label">{{ getSessionLanguage() == 'en'?'Name':'أدخل اسمك'; }} <span class="text-danger">*</span></label>
              <input name="name" type="text" class="form-control" required>
            </div>
            <div class="col-md-12">
              <label class="form-label">{{ getSessionLanguage() == 'en'?'Email':'بريد إلكتروني'; }} <span class="text-danger">*</span></label>
              <input type="email" class="form-control" name="email" placeholder="{{ getSessionLanguage() == 'en'?'Your Email':'بريدك الإلكتروني'; }}" required>
            </div>
            <div class="col-md-12">
              <label class="form-label">{{ getSessionLanguage() == 'en'?'Mobile Number':'رقم هاتفك المحمول'; }} <span class="text-danger">*</span></label>
              <input type="text" class="form-control" maxlength="13" name="mobile" placeholder="{{ getSessionLanguage() == 'en'?'Subject':'موضوع'; }}" required>
            </div>
            <div class="col-md-12">
              <label class="form-label">{{ getSessionLanguage() == 'en'?'Subject':'موضوع'; }} <span class="text-danger">*</span></label>
              <input type="text" class="form-control" name="subject" placeholder="{{ getSessionLanguage() == 'en'?'Subject':'موضوع'; }}" required>
            </div>
            <div class="col-md-12">
              <label class="form-label">{{ getSessionLanguage() == 'en'?'Write to us':'اكتب لنا'; }} <span class="text-danger">*</span></label>
              <textarea class="form-control" name="message" rows="5" placeholder="{{ getSessionLanguage() == 'en'?'Message':'رسالة'; }}" required></textarea>
            </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>
              <div class="sent-message">{{ getSessionLanguage() == 'en'?'Your message has been sent. Thank you!':'تم إرسال رسالتك. شكرًا لك!'; }}</div>
              <button type="submit" class="btn btn-blue px-3 py-2 text-white me-2"> {{ getSessionLanguage() == 'en'?'Submit':'إرسال'; }}</button>
			  <button type="reset" class="btn btn-lg btn-org fs-6 my-3 me-4 text-white">{{ getSessionLanguage() == 'en'?'Clear':'واضح'; }}</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</div>
</section>
<section id="open-peronalacc" class="open-peronalacc pt-0">
  <div class="container">
    <div class="row mb-4">
      <div class="col-12">
        <div class="text-center px-lg-5 mb-5">
          <p><small class="text-primary">{{ getSessionLanguage() == 'en'?'Need any help/information':'هل تحتاج إلى أي مساعدة/معلومات'; }}</small></p>
          <h2 class="mb-3">{{ getSessionLanguage() == 'en'?'Connect with Team':'تواصل مع الفريق'; }}</h2>
          <p>{{ getSessionLanguage() == 'en'?'You may contact us using the details below or submit your enquiry through the form. Our support team will get back to you shortly.':'يمكنكم التواصل معنا عبر البيانات أدناه أو إرسال استفساراتكم عبر النموذج. سيتواصل فريق الدعم معكم قريبًا.'; }}</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 col-lg-4">
        <div class=" text-center mb-5 mb-md-0"> <i class="bi bi-geo-alt fs-1 text-dark-warning"></i>
          <h5 class=" my-3">{{ getSessionLanguage() == 'en'?'Address':'عنوان'; }}</h5>
          <p>{{ getSessionLanguage() == 'en'?'Dubai, Deira, Al Maktoum':'دبي، ديرة، آل مكتوم'; }} </p>
        </div>
      </div>
      <div class="col-md-6 col-lg-4">
        <div class=" text-center  mb-5 mb-md-0"> <i class="bi bi-telephone-outbound fs-1 text-dark-warning"></i>
          <h5 class=" my-3">{{ getSessionLanguage() == 'en'?'Contact BSI':'اتصل بـ بنك صادرات ايران'; }}</h5>
          <p class="ar-ltr"> {{ getSessionLanguage() == 'en'?'+971 4603-5555':'+٩٧١ ٤٦٠٣-٥٥٥٥'; }} </p>
        </div>
      </div>
      <div class="col-md-6 col-lg-3  mb-5 mb-md-0 d-none">
        <div class=" text-center"> <i class="bi bi-printer fs-1 text-dark-warning"></i>
          <h5 class=" my-3">{{ getSessionLanguage() == 'en'?'Fax':'فاكس'; }}</h5>
          <p class="ar-ltr">{{ getSessionLanguage() == 'en'?'+971 4227-0593':'+٩٧١ ٤٢٢٧-٠٥٩٣'; }} </p>
        </div>
      </div>
      <div class="col-md-6 col-lg-4">
        <div class=" text-center  mb-5 mb-md-0"> <i class="bi bi-envelope-at fs-1 text-dark-warning"></i>
          <h5 class=" my-3">{{ getSessionLanguage() == 'en'?'Email':'بريد إلكتروني'; }}</h5>
          <p><a href="mailto:enquiry@bsi.co.ae" target="_blank">enquiry@bsi.co.ae</a></p>
        </div>
      </div>
    </div>
  </div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('contactForm');
    const errorDiv = document.querySelector('.error-message');

    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);
    });
	
    form.addEventListener('submit', function (e) {
        let hasError = false;
        errorDiv.innerHTML = ''; // Clear previous messages

     // Allow only letters, numbers, spaces, and dashes
       // Required fields
        const name = nameInput;
        const email = emailInput;
        const mobile = mobileInput;
        const subject = subjectInput;
        const message = messageInput;
        const customer = form.querySelector('select[name="customer"]');
        const account = form.querySelector('input[name="account"]');

        // Validate standard fields
        if (!name.value.trim() || !email.value.trim() || !mobile.value.trim() || !subject.value.trim() || !message.value.trim()) {
            hasError = true;
        }

        // Validate account number if customer is "yes"
        if (customer && customer.value === 'yes') {
            if (!account.value.trim()) {
                hasError = true;
                errorDiv.innerHTML = "{{ getSessionLanguage() == 'en'?'Please enter your account number.':'الرجاء إدخال رقم حسابك.' }}";
            }
        }

        // 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