@extends('layouts.app')

@section('title', 'Contact Us')

@php
  $tel = '+88' . preg_replace('/\D/', '', $s['hotline']);
  $sent = session('contact_name') !== null;
  $err = fn (string $f) => $errors->has($f) ? 'error' : '';
  $locations = [
      ['tab' => 'Office', 'title' => 'Office', 'addr' => $s['office'], 'q' => $s['map_office'] ?: $s['office']],
      ['tab' => 'Head Office', 'title' => 'Head Office', 'addr' => $s['head_office'], 'q' => $s['map_head_office'] ?: $s['head_office']],
  ];
  // Admin > Settings e pin deya thakle "lat,lng": aro kache zoom
  $mapSrc = fn ($q) => 'https://maps.google.com/maps?q=' . rawurlencode($q) . '&z=' . (preg_match('/^-?[\d.]+,-?[\d.]+$/', $q) ? 17 : 16) . '&output=embed';
  $dirUrl = fn ($q) => 'https://www.google.com/maps/dir/?api=1&destination=' . rawurlencode($q);
@endphp

@section('content')
  @include('partials.page-head', [
    'title' => 'Contact Us',
    'subtitle' => 'যেকোনো প্রশ্ন, অভিযোগ বা পরামর্শ — আমরা শুনতে প্রস্তুত',
    'crumbs' => ['Contact Us' => null],
  ])

  {{-- ================= INFO CARDS ================= --}}
  <section class="container section info-cards">
    <div class="info-card">
      <span class="ii"><svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C18 14.8 11 21 11 21z"/><circle cx="11" cy="9.5" r="2.5"/></svg></span>
      <div><h4>Office Address</h4><p>{{ $s['office'] }}</p></div>
    </div>
    <div class="info-card">
      <span class="ii"><svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 15.5v3a2 2 0 0 1-2.2 2A18 18 0 0 1 1.5 4.2 2 2 0 0 1 3.5 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L7.5 9.8a16 16 0 0 0 4.7 4.7l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"/></svg></span>
      <div><h4>Hotline</h4><a href="tel:{{ $tel }}">{{ $s['hotline'] }}</a>@if ($s['hotline_hours'])<p>{{ $s['hotline_hours'] }}</p>@endif</div>
    </div>
    <div class="info-card">
      <span class="ii"><svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="18" height="14" rx="2"/><path d="m2 6 9 6 9-6"/></svg></span>
      <div><h4>Email</h4><a href="mailto:{{ $s['email'] }}">{{ $s['email'] }}</a><p>২৪ ঘণ্টার মধ্যে উত্তর</p></div>
    </div>
    <div class="info-card">
      <span class="ii"><svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="9"/><path d="M11 6v5l3 2"/></svg></span>
      {{-- "|" diye alada line --}}
      <div><h4>Working Hours</h4><p>{!! collect(explode('|', $s['working_hours']))->map(fn ($l) => e(trim($l)))->implode('<br>') !!}</p></div>
    </div>
  </section>

  {{-- ================= INTRO + FORM ================= --}}
  <section class="container section contact-wrap">
    <div class="contact-intro">
      <h2>আমাদের সাথে কথা বলুন</h2>
      <p>We are committed to providing reliable support and ensuring a smooth experience for every customer, vendor, and partner. Please use any of the channels below to reach our team.</p>

      <div class="c-line">
        <span class="cl-ic">🏢</span>
        <div><b>Head Office</b><span>{{ $s['head_office'] }}</span></div>
      </div>
      <div class="c-line">
        <span class="cl-ic">📍</span>
        <div><b>Office</b><span>{{ $s['office'] }}</span></div>
      </div>
      <div class="c-line">
        <span class="cl-ic">💬</span>
        <div><b>Live Chat</b><span>নিচের ডান কোণের চ্যাট বাটনে ক্লিক করুন</span></div>
      </div>

      <div class="socials">
        <a href="{{ $s['facebook'] ?: '#' }}" target="_blank" rel="noopener" aria-label="Facebook">f</a>
        <a href="{{ $s['twitter'] ?: '#' }}" target="_blank" rel="noopener" aria-label="Twitter">𝕏</a>
        <a href="{{ $s['instagram'] ?: '#' }}" target="_blank" rel="noopener" aria-label="Instagram">ig</a>
        <a href="{{ $s['youtube'] ?: '#' }}" target="_blank" rel="noopener" aria-label="YouTube">▶</a>
      </div>
    </div>

    <div class="contact-form {{ $sent ? 'sent' : '' }}" id="contactBox">
      <h3>মেসেজ পাঠান</h3>
      <p>নিচের ফর্মটি পূরণ করুন, আমাদের টিম শীঘ্রই যোগাযোগ করবে।</p>
      <form id="contactForm" method="POST" action="{{ route('contact.store') }}" novalidate>
        @csrf
        <div class="f-row">
          <div class="f-group {{ $err('name') }}">
            <label for="cName">Name</label>
            <input id="cName" name="name" type="text" value="{{ old('name') }}" placeholder="Enter Name" maxlength="100" autocomplete="name">
            <div class="f-err">{{ $errors->first('name') ?: 'নাম লিখুন' }}</div>
          </div>
          <div class="f-group {{ $err('email') }}">
            <label for="cEmail">Email</label>
            <input id="cEmail" name="email" type="email" value="{{ old('email') }}" placeholder="Enter Email" maxlength="150" autocomplete="email">
            <div class="f-err">{{ $errors->first('email') ?: 'সঠিক ইমেইল লিখুন' }}</div>
          </div>
        </div>
        <div class="f-row">
          <div class="f-group {{ $err('phone') }}">
            <label for="cPhone">Phone no. <small>(optional)</small></label>
            <input id="cPhone" name="phone" type="tel" value="{{ old('phone') }}" placeholder="01XXXXXXXXX" autocomplete="tel">
            <div class="f-err">{{ $errors->first('phone') ?: 'সঠিক মোবাইল নম্বর লিখুন (01XXXXXXXXX)' }}</div>
          </div>
          <div class="f-group {{ $err('subject') }}">
            <label for="cTopic">Subject</label>
            <select id="cTopic" name="subject">
              @foreach ($subjects as $sub)
                <option value="{{ $sub }}" @selected(old('subject') === $sub)>{{ $sub }}</option>
              @endforeach
            </select>
            <div class="f-err">{{ $errors->first('subject') }}</div>
          </div>
        </div>
        <div class="f-group {{ $err('message') }}">
          <label for="cMsg">Tell us about your query <span class="char-count"><span id="charNow">{{ mb_strlen(old('message', '')) }}</span>/500</span></label>
          <textarea id="cMsg" name="message" maxlength="500" placeholder="Type here...">{{ old('message') }}</textarea>
          <div class="f-err">{{ $errors->first('message') ?: 'অন্তত ১০ অক্ষরের মেসেজ লিখুন' }}</div>
        </div>
        <button type="submit" class="btn btn-primary">Submit →</button>
      </form>
      <div class="form-success">
        <div class="ok">✓</div>
        <h3>ধন্যবাদ, <span id="okName">{{ session('contact_name') }}</span>!</h3>
        <p>আপনার মেসেজ পেয়েছি। ২৪ ঘণ্টার মধ্যে আমরা যোগাযোগ করব।</p>
        <button type="button" class="btn btn-outline" id="sendAnother">আরেকটি মেসেজ পাঠান</button>
      </div>
    </div>
  </section>

  {{-- ================= GOOGLE MAP ================= --}}
  <section class="container section">
    <div class="map-card">
      <div class="map-top">
        <div>
          <h3>📍 আমাদের খুঁজে নিন</h3>
          <p>সরাসরি এসে দেখা করতে চাইলে নিচের ম্যাপ দেখুন</p>
        </div>
        <div class="tabs" id="mapTabs">
          @foreach ($locations as $i => $l)
            <button type="button" class="{{ $i === 0 ? 'active' : '' }}"
              data-src="{{ $mapSrc($l['q']) }}" data-dir="{{ $dirUrl($l['q']) }}"
              data-title="{{ $l['title'] }}" data-addr="{{ $l['addr'] }}">{{ $l['tab'] }}</button>
          @endforeach
        </div>
      </div>
      <div class="map-frame">
        <iframe id="mapFrame" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="{{ \App\Models\Setting::siteName() }} office location"
          src="{{ $mapSrc($locations[0]['q']) }}"></iframe>
        <div class="map-pin-card">
          <span class="ii"><svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M10 19s-6-5.4-6-10a6 6 0 0 1 12 0c0 4.6-6 10-6 10z"/><circle cx="10" cy="9" r="2"/></svg></span>
          <div>
            <b id="pinTitle">{{ $locations[0]['title'] }}</b>
            <span id="pinAddr">{{ $locations[0]['addr'] }}</span>
            <a id="pinDir" href="{{ $dirUrl($locations[0]['q']) }}" target="_blank" rel="noopener">Get Directions →</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  {{-- ================= FAQ ================= --}}
  <section class="container section">
    <div class="sec-head"><h2>সাধারণ জিজ্ঞাসা</h2></div>
    <div class="faq">
      <details><summary>ডেলিভারি পেতে কতদিন লাগে?</summary><p>ঢাকার ভেতরে ১-২ দিন এবং ঢাকার বাইরে ৩-৫ দিনের মধ্যে ডেলিভারি দেওয়া হয়।</p></details>
      <details><summary>ক্যাশ অন ডেলিভারি আছে কি?</summary><p>হ্যাঁ, সারা দেশে ক্যাশ অন ডেলিভারি সুবিধা আছে। bKash, Nagad, Rocket ও কার্ডেও পেমেন্ট করা যায়।</p></details>
      <details><summary>পণ্য ফেরত দিতে চাইলে কী করব?</summary><p>পণ্য হাতে পাওয়ার ৭ দিনের মধ্যে হটলাইনে কল করুন অথবা উপরের ফর্মে "Return / Refund" সিলেক্ট করে মেসেজ দিন।</p></details>
      <details><summary>কিভাবে সেলার হতে পারি?</summary><p>ফুটারের "Become A Seller" লিংকে গিয়ে আবেদন করুন। আমাদের টিম যাচাই করে ২-৩ কার্যদিবসে যোগাযোগ করবে।</p></details>
    </div>
  </section>
@endsection

@push('head')
  <link rel="stylesheet" href="{{ asset('assets/css/pages.css') }}?v={{ filemtime(public_path('assets/css/pages.css')) }}">
@endpush

@push('scripts')
<script>
(() => {
  /* ---------- map tabs ---------- */
  $("#mapTabs").addEventListener("click", e => {
    const b = e.target.closest("button");
    if (!b) return;
    $$("#mapTabs button").forEach(x => x.classList.toggle("active", x === b));
    $("#mapFrame").src = b.dataset.src;
    $("#pinTitle").textContent = b.dataset.title;
    $("#pinAddr").textContent = b.dataset.addr;
    $("#pinDir").href = b.dataset.dir;
  });

  /* ---------- client validation (server-o validate kore) ---------- */
  const form = $("#contactForm");
  const rules = {
    cName: v => v.trim().length >= 2,
    cEmail: v => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim()),
    cPhone: v => !v.trim() || /^01[3-9]\d{8}$/.test(v.replace(/[\s-]/g, "")),
    cMsg: v => v.trim().length >= 10,
  };
  function check(id) {
    const ok = rules[id]($("#" + id).value);
    $("#" + id).closest(".f-group").classList.toggle("error", !ok);
    return ok;
  }

  Object.keys(rules).forEach(id => {
    $("#" + id).addEventListener("blur", () => check(id));
    $("#" + id).addEventListener("input", () => {
      if ($("#" + id).closest(".f-group").classList.contains("error")) check(id);
    });
  });

  $("#cMsg").addEventListener("input", e => ($("#charNow").textContent = e.target.value.length));

  form.addEventListener("submit", e => {
    const allOk = Object.keys(rules).map(check).every(Boolean);
    if (!allOk) {
      e.preventDefault();
      $(".f-group.error input, .f-group.error textarea")?.focus();
      return;
    }
    const btn = $("button[type=submit]", form);
    btn.textContent = "পাঠানো হচ্ছে...";
    btn.disabled = true;
  });

  $("#sendAnother").addEventListener("click", () => {
    form.reset();
    $$(".f-group.error", form).forEach(g => g.classList.remove("error"));
    $("#charNow").textContent = 0;
    $("#contactBox").classList.remove("sent");
  });

  // server error thakle form-e scroll
  const firstErr = $(".f-group.error", form);
  if (firstErr) firstErr.scrollIntoView({ block: "center" });
})();
</script>
@endpush