@extends('layouts.site')

@section('title', 'Contact Us — OMA Business Hub')
@section('description', "Get in touch with OMA Business Hub — call, email, or send an inquiry to start your company's next chapter.")
@section('body_class', 'interior')

@php
  $mailtoHref = 'mailto:support@omabh.com?subject='.rawurlencode('Business Inquiry').'&body='.rawurlencode(
    "Dear OMA Business Hub Team,\r\n\r\nI hope you are doing well.\r\n\r\nI am interested in learning more about your business services. I would appreciate it if you could provide me with more information regarding your solutions, pricing, and the process to get started.\r\n\r\nPlease feel free to contact me at your earliest convenience.\r\n\r\nThank you, and I look forward to hearing from you.\r\n\r\nKind Regards,\r\n[Your Name]\r\n[Company Name]\r\n[Phone Number]"
  );
@endphp

@section('content')

<section id="contact" class="tight">
  <div class="wrap">
    <div class="contact-grid reveal">
      <div class="contact-info">
        <div class="eyebrow">Get In Touch</div>
        <h3>Let's start your company's next chapter.</h3>
        <p class="lead">We look forward to hearing from you and assisting with your business needs.</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>Phone</b><span>+971521785323</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>Email</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>Office</b><span>Al Wahda Commercial Tower, M floor, Office M03, Abu Dhabi, UAE</span></div>
        </a>
      </div>

      <div class="contact-form">
        <div class="eyebrow">Send An Inquiry</div>
        <h3 style="font-size:1.8rem; margin-bottom:30px;">Tell us about your business</h3>

        <form id="omaContactForm" method="POST" action="{{ route('contact.store') }}" novalidate>
          @csrf
          <div class="form-row">
            <div class="field">
              <label for="name">Full Name</label>
              <input type="text" id="name" name="name" placeholder="Enter your name" required>
            </div>
            <div class="field">
              <label for="phone">Phone</label>
              <input type="tel" id="phone" name="phone" placeholder="+971 5xx xxx xxx">
            </div>
          </div>
          <div class="form-row">
            <div class="field full">
              <label for="email">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">Service Needed</label>
              <select id="service" name="service">
                <option>Company Formation</option>
                <option>Licensing</option>
                <option>Visas &amp; Residence</option>
                <option>Liquidation / Restructuring</option>
                <option>PRO &amp; Government Liaison</option>
                <option>Other</option>
              </select>
            </div>
          </div>
          <div class="form-row">
            <div class="field full">
              <label for="message">Message</label>
              <textarea id="message" name="message" rows="3" placeholder="How can we help?"></textarea>
            </div>
          </div>

          <button class="btn gold" type="submit" id="omaSubmitBtn" style="border:none; cursor:pointer;"><span>Send Inquiry</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>Sending…</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 || "Thank you — your inquiry has been noted. Our team will reach out shortly.")
          .show();
        $form.trigger('reset');
      }).fail(function(xhr){
        var message = 'Something went wrong. Please try again or email us directly.';
        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