@extends('layouts.site')

@section('title', 'تواصل معنا — OMA Business Hub')
@section('description', 'تواصل مع OMA Business Hub — اتصل، راسلنا عبر البريد الإلكتروني، أو أرسل استفسارك لبدء الفصل التالي من قصة شركتك.')
@section('body_class', 'interior')

@php
  $mailtoHref = 'mailto:support@omabh.com?subject='.rawurlencode('استفسار عن الأعمال').'&body='.rawurlencode(
    "فريق OMA Business Hub المحترم،\r\n\r\nأتمنى أن تكونوا بخير.\r\n\r\nأرغب في معرفة المزيد عن خدماتكم. سأكون ممتنًا لو تكرمتم بتزويدي بمزيد من المعلومات حول حلولكم وأسعاركم وطريقة البدء.\r\n\r\nيرجى التواصل معي في أقرب وقت ممكن.\r\n\r\nشكرًا لكم، وأتطلع لسماع ردكم.\r\n\r\nمع خالص التحية،\r\n[اسمك]\r\n[اسم الشركة]\r\n[رقم الهاتف]"
  );
@endphp

@section('content')

<section id="contact" class="tight">
  <div class="wrap">
    <div class="contact-grid reveal">
      <div class="contact-info">
        <div class="eyebrow">تواصل معنا</div>
        <h3>لنبدأ الفصل التالي من قصة شركتك.</h3>
        <p class="lead">نتطلع لسماعك ومساعدتك في احتياجات عملك.</p>

        <a class="cinfo-row" href="tel:+971521785323">
          <span class="ic"><svg viewBox="0 0 24 24"><path d="M4 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L14 13l5 2v4a2 2 0 0 1-2 2A15 15 0 0 1 4 6a2 2 0 0 1 0-2z"/></svg></span>
          <div><b>الهاتف</b><span><bdi dir="ltr">{{ arabic_digits('+971521785323') }}</bdi></span></div>
        </a>
        <a class="cinfo-row" href="{{ $mailtoHref }}">
          <span class="ic"><svg viewBox="0 0 24 24"><path d="M3 5h18v14H3z"/><path d="M3 6l9 7 9-7"/></svg></span>
          <div><b>البريد الإلكتروني</b><span>support@omabh.com</span></div>
        </a>
        <a class="cinfo-row" href="https://www.google.com/maps/search/?api=1&query=Al+Wahda+Commercial+Tower%2C+M+floor%2C+Office+M03%2C+Abu+Dhabi%2C+UAE" target="_blank" rel="noopener noreferrer">
          <span class="ic"><svg viewBox="0 0 24 24"><path d="M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z"/><circle cx="12" cy="9" r="2.4"/></svg></span>
          <div><b>المكتب</b><span>برج الوحدة التجاري، الطابق M، مكتب M03، أبوظبي، الإمارات</span></div>
        </a>
      </div>

      <div class="contact-form">
        <div class="eyebrow">أرسل استفسارًا</div>
        <h3 style="font-size:1.8rem; margin-bottom:30px;">أخبرنا عن نشاطك التجاري</h3>

        <form id="omaContactForm" method="POST" action="{{ route('ar.contact.store') }}" novalidate>
          @csrf
          <div class="form-row">
            <div class="field">
              <label for="name">الاسم الكامل</label>
              <input type="text" id="name" name="name" placeholder="أدخل اسمك" required>
            </div>
            <div class="field">
              <label for="phone">الهاتف</label>
              <input type="tel" id="phone" name="phone" dir="ltr" placeholder="{{ arabic_digits('+9715xx xxx xxx') }}">
            </div>
          </div>
          <div class="form-row">
            <div class="field full">
              <label for="email">البريد الإلكتروني</label>
              <input type="email" id="email" name="email" placeholder="you@company.com" required>
            </div>
          </div>
          <div class="form-row">
            <div class="field full">
              <label for="service">الخدمة المطلوبة</label>
              <select id="service" name="service">
                <option>تأسيس الشركات</option>
                <option>التراخيص</option>
                <option>التأشيرات والإقامة</option>
                <option>التصفية / إعادة الهيكلة</option>
                <option>خدمات العلاقات الحكومية</option>
                <option>أخرى</option>
              </select>
            </div>
          </div>
          <div class="form-row">
            <div class="field full">
              <label for="message">الرسالة</label>
              <textarea id="message" name="message" rows="3" placeholder="كيف يمكننا مساعدتك؟"></textarea>
            </div>
          </div>

          <button class="btn gold" type="submit" id="omaSubmitBtn" style="border:none; cursor:pointer;"><span>إرسال الاستفسار</span></button>

          <p class="confirm" id="omaConfirm" style="display:none; margin-top:16px; font-size:0.85rem;"></p>
        </form>
      </div>
    </div>
  </div>
</section>

@endsection

@push('scripts')
<script>
  $(function(){
    var $form = $('#omaContactForm');
    if (!$form.length) return;
    var $btn = $('#omaSubmitBtn');
    var $confirm = $('#omaConfirm');

    $form.on('submit', function(e){
      e.preventDefault();

      var originalHtml = $btn.html();
      $btn.prop('disabled', true).html('<span>جارٍ الإرسال…</span>');
      $confirm.hide();

      $.ajax({
        url: $form.attr('action'),
        method: 'POST',
        dataType: 'json',
        data: $form.serialize()
      }).done(function(data){
        $confirm.css('color', 'var(--gold)')
          .text(data.message || 'شكرًا لك — تم استلام طلبك. سيتواصل معك فريقنا قريبًا.')
          .show();
        $form.trigger('reset');
      }).fail(function(xhr){
        var message = 'حدث خطأ ما. يرجى المحاولة مرة أخرى أو مراسلتنا مباشرة.';
        if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
          message = Object.values(xhr.responseJSON.errors).map(function(e){ return e[0]; }).join(' ');
        } else if (xhr.responseJSON && xhr.responseJSON.message) {
          message = xhr.responseJSON.message;
        }
        $confirm.css('color', '#a94444').text(message).show();
      }).always(function(){
        $btn.prop('disabled', false).html(originalHtml);
      });
    });
  });
</script>
@endpush