@extends('frontend.layouts.master')

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

@section('contents') 
<!-- breadcrumb-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="{{ asset('frontend/img/complaint1.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">{{ __('Customer Complaint Process') }}</li>
          </ol>
        </nav>
        <h1 class="fw-bold hero-title fs-1">{{ __('Customer Complaint Process') }}</h1>
      </div>
    </div>
    <!-- End Carousel Item --> 
  </div>
</section>
<section id="comp-form" class="comp-form px-3 px-md-0">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="text-center pe-4 py-md-3  border-bottom mb-5" data-aos="fade-left" data-aos-delay="200">
          <h2 class=" mb-3  fw-bold">{{ getSessionLanguage() == 'en'?'Customer Complaint/Suggestion Process – BSI-UAE':'عملية الشكاوى/ المقترحات للعملاء – بنك صادرات ايران – الإمارات'; }} </h2>
          <p>{{ getSessionLanguage() == 'en'?'Bank Saderat Iran always makes every effort to provide all its customers with excellent customer service. In the rare cases that we might not get things right, let us know what happened so we can resolve it.':'يحرص بنك صادرات ايران – الامارات دائمًا على تقديم خدمة عملاء ممتازة لجميع عملائه. في الحالات النادرة إذا لم نتمكن من تقديم الخدمة بشكل صحيح، يرجى إعلامنا بما حدث حتى نتمكن من حل المشكلة.'; }}</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container container-md bg-smlight rounded-4">
    <div class="row my-4 gx-4">
      <div class="complaint-wrapper px-0">
        <div class="row g-0">
          <div class="col-md-5">
            <div class="contact-info h-100">
              <h4 class="mb-4">{{ getSessionLanguage() == 'en'?'Complaint/Suggestions':'الشكاوى / المقترحات'; }}</h4>
              <p class="mb-3">{{ getSessionLanguage() == 'en'?'In order to file a complaint with any of our Products or Services, please follow these steps:':'لتقديم الشكوى بخصوص أي من منتجاتنا أو خدماتنا، يرجى اتباع الخطوات التالية:'; }}</p>
              <ul class="list-hero">
                <li>{{ getSessionLanguage() == 'en'?'Approach your branch in writing to resolve your complaint stating in the letter that you intend to refer the grievance.':'توجه إلى فرعك لتقديم شكواك بالشكل المكتوب، مع ذكر في الرسالة أنك تنوي إحالة الشكوى.'; }}</li>
                <li>{{ getSessionLanguage() == 'en'?'Raise your complaint through the dedicated email system:':'يمكنك رفع شكواك من خلال نظام البريد الإلكتروني المخصص'; }} <a href="mailto:businesscare@bsi.co.ae" target="_blank" class="text-dblue">businesscare@bsi.co.ae</a> {{ getSessionLanguage() == 'en'?'with relevant details such as name & address, Account No. and the details of your concerns.':'مع التفاصيل ذات الصلة مثل الاسم والعنوان ورقم الحساب وتفاصيل مخاوفك.'; }} </li>
                <li>{{ getSessionLanguage() == 'en'?'Complaints / Suggestions can be sent to the following address with relevant details.':'يمكن إرسال الشكاوى / المقترحات إلى العنوان التالي مع التفاصيل ذات الصلة.'; }}</li>
              </ul>
              <div class="contact-item align-items-start justify-content-start mt-4 border-top pt-4">
                <div class="contact-icon"> <i class="bi bi-geo-alt icon text-dark fs-3 {{ getSessionLanguage() == 'en'?'mr-10':'ml-10'; }}"></i> </div>
                <div>
                  <h6 class="mb-0">{{ getSessionLanguage() == 'en'?'Address':'العنوان'; }}</h6>
                  <p class="mb-0">{{ getSessionLanguage() == 'en'?'Complaint Management, Bank Saderat Iran, Al Maktoum Road, Dubai UAE.':'إدارة الشكاوى، بنك صادرات ايران، شارع المكتوم، دبي، الإمارات العربية المتحدة.'; }}</p>
                </div>
              </div>
              <div class="contact-item  align-items-start justify-content-start">
                <div class="contact-icon"> <i class="bi bi-telephone-outbound icon  text-dark fs-3 {{ getSessionLanguage() == 'en'?'mr-10':'ml-10'; }}"></i> </div>
                <div>
                  <h6 class="mb-0">{{ getSessionLanguage() == 'en'?'Phone:':'رقم الهاتف:'; }} </h6>
                  <p class="mb-0 ar-ltr"><a class="" href="tel:+97146035267">{{ getSessionLanguage() == 'en'?'+971 4 6035267':'+٩٧١ ٤ ٦٠٣٥٢٦٧'; }}</a></p>
                </div>
              </div>
              <div class="contact-item  align-items-start justify-content-start">
                <div class="contact-icon"> <i class="bi bi-envelope-at  text-dark fs-3 {{ getSessionLanguage() == 'en'?'mr-10':'ml-10'; }}"></i> </div>
                <div>
                  <h6 class="mb-0">{{ getSessionLanguage() == 'en'?'Email':'البريد الإلكتروني'; }}</h6>
                  <p class="mb-0"><a href="mailto:businesscare@bsi.co.ae" target="_blank" class="text-dblue">businesscare@bsi.co.ae</a></p>
                </div>
              </div>
              <div class="mb-3 border-bottom border-1 pb-4">
                <h4 class="mb-4">{{ getSessionLanguage() == 'en'?'Acknowledgement':'إقرار'; }}</h4>
                <p>{{ getSessionLanguage() == 'en'?'Within 2 business days of the receipt':'في غضون يومين عمل من الاستلام'; }}</p>
              </div>
            </div>
          </div>
          <div class="col-md-7">
            <div class="contact-form">
              <form id="cccForm" action="{{ route('send-complain-message') }}" method="post" class="php-email-form">
                @csrf
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div class="row">
                  <div class="col-12 mb-3">
                    <h2>{{ getSessionLanguage() == 'en'?'Submit Your Complaint':'قدّم شكواك'; }}</h2>
                    <div class="mb-3">
                      <label for="showInputSelect" class="form-label">{{ getSessionLanguage() == 'en'?'Are you a BSI Customer?':'هل أنت عميل لدى بنك صادرات إيران؟'; }}</label>
                      <select name="customer" class="form-select" id="showInputSelect">
                        <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="mb-3">
                      <label for="showInputSelect" class="form-label">{{ getSessionLanguage() == 'en'?'People of Determination?':'أصحاب الهمم'; }}</label>
                      <select name="determination" class="form-select" id="showInputSelect">
                        <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="mb-3" id="nameField" style="display: none;">
                      <label for="nameInput" class="form-label">{{ getSessionLanguage() == 'en'?'Enter your account number':'أدخل رقم حسابك'; }} <span class="text-danger">*</span></label>
                      <input type="text" class="form-control" id="nameInput" name="account" maxlength="13" placeholder="Enter your account number">
                    </div>
                    <script>
						const selectBox = document.getElementById('showInputSelect');
						const nameField = document.getElementById('nameField');

						selectBox.addEventListener('change', function () {
						  nameField.style.display = (this.value === 'yes') ? 'block' : 'none';
						});
					  </script> 
                  </div>
                  <div class="col-12 mb-3">
                    <label class="form-label">{{ getSessionLanguage() == 'en'?'Name':'الاسم'; }} <span class="text-danger">*</span></label>
                    <input required type="text" class="form-control" name="name">
                  </div>
                  <div class="col-12 mb-3">
                    <label class="form-label">{{ getSessionLanguage() == 'en'?'Mobile Number':'رقم الهاتف المحمول'; }} <span class="text-danger">*</span></label>
                    <div class="input-group mb-3"> <span class="input-group-text" id="basic-addon1">{{ getSessionLanguage() == 'en'?'+971':'+٩٧١'; }}</span>
                      <input required name="mobile" type="text" maxlength="9" class="form-control" placeholder="" aria-label="Username" aria-describedby="basic-addon1">
                    </div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="mb-3">
                    <label class="form-label">{{ getSessionLanguage() == 'en'?'Email':'البريد الإلكتروني'; }} <span class="text-danger">*</span></label>
                    <input required name="email" type="email" class="form-control" >
                  </div>
                  <div class="mb-3">
                    <label class="form-label">{{ getSessionLanguage() == 'en'?'Request type':'نوع الطلب'; }} <span class="text-danger">*</span></label>
                    <select name="subject" class="form-select py-3 " aria-label="select">
                      <option value="Complaint" selected>{{ getSessionLanguage() == 'en'?'Complaint':'شكوى'; }}</option>
                      <option value="Suggestion">{{ getSessionLanguage() == 'en'?'Suggestion':'اقتراح'; }} </option>
                    </select>
                  </div>
                </div>
                <div class="col-12">
                  <div class="mb-4">
                    <label class="form-label">{{ getSessionLanguage() == 'en'?'Please explain your request in detail so we can help you faster':'يرجى شرح طلبك بالتفصيل حتى نتمكن من مساعدتك بشكل أسرع'; }} <span class="text-danger">*</span></label>
                    <textarea required name="message" class="form-control" rows="4" placeholder="{{ getSessionLanguage() == 'en'?'Your message here...':'رسالتك هنا...'; }}"></textarea>
                  </div>
                </div>
                <div class="col-12">
                  <div class="g-recaptcha mb-4" data-sitekey="6LcAAK0UAAAAAEXGDM-XP8xV7fFlf-lsp1nqDhyE"></div>
                </div>
                <div class="col-12">
                <div class="error-message"></div>
                  <button type="submit" class=" btn btn-lg btn-blue fs-6 mb-3 text-white me-2">{{ getSessionLanguage() == 'en'?'Submit':'إرسال'; }}</button>
                  <button type="reset" class="btn btn-lg btn-org fs-6 mb-3 me-4 text-white">{{ getSessionLanguage() == 'en'?'Clear':'مسح'; }}</button>
                </div>
              </form>
              <div class="my-4">
                <p class="alert alert-primary py-2"><small>{{ getSessionLanguage() == 'en'?'BSI-UAE Is committed to responding to your concern within 2 business days.':'تلتزم بنك صادرات ايران في الامارات العربية المتحدة بالرد على استفسارك خلال يومي عمل.'; }}</small></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container container-md mt-5 pt-3">
    <div class="row my-4 gx-4">
      <div class="col-12">
        <div class=" alert alert-info">
          <p class="mb-0"> <b>{{ getSessionLanguage() == 'en'?'Note :':'ملاحظة:'; }}</b> {{ getSessionLanguage() == 'en'?'The complaint shall be managed within 2 weeks if the it is of minor nature and does not require detailed investigation. However, final reply must be issued within 30 complete business days from the lodgment of the complaint.':'قد تستغرق معالجة الشكوى أسبوعين إذا كانت من طبيعة بسيطة ولا تتطلب تحقيقًا مفصلاً. ومع ذلك، يجب إصدار الرد النهائي في غضون 30 يوم عمل كامل من تاريخ تقديم الشكوى.'; }}</p>
        </div>
      </div>
    </div>
  </div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('cccForm');
    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 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);
    });
    messageInput.addEventListener('input', function () {
        this.value = cleanInput(this.value);
    });
    form.addEventListener('submit', function (e) {
        let hasError = false;
        errorDiv.innerHTML = ''; // Clear previous messages
			

        // Required fields
        const customer = form.querySelector('select[name="customer"]');
        const account = form.querySelector('input[name="account"]');

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