@extends('layouts.app')

@section('content')
<!-- Banner -->
  <section class="page-banner" style="background-image: url('images/hero_flooring.png');">
    <div class="container page-banner-content">
      <h1>Contact Us & Branch Locator</h1>
      <p>Get in touch with our head office or visit one of our 150+ showrooms across Sri Lanka for direct material inspection and instant quotations.</p>
    </div>
  </section>

  <!-- Content grid -->
  <section class="section-padding container">
    @if(session('success'))
    <div class="alert-message success-banner glass mb-4" style="padding:1.5rem;border-radius:12px;text-align:center;border-left:4px solid #22c55e;">
      <svg style="width:40px;height:40px;color:#22c55e;margin-bottom:.5rem;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
      <h4 style="color:var(--text-dark);">Inquiry Received!</h4>
      <p style="color:var(--text-muted);">{{ session('success') }}</p>
    </div>
    @endif

    @if(session('error'))
    <div class="alert-message error-banner glass mb-4" style="padding:1rem;border-radius:12px;text-align:center;border-left:4px solid #ef4444;color:#ef4444;">
      {{ session('error') }}
    </div>
    @endif

    <div class="grid-2">
      <!-- Central hotline & Branch Locator -->
      <div class="contact-left-col">
        <div class="central-hotline-box glass">
          <svg class="hotline-icon" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92Z"/></svg>
          <div>
            <span class="hotline-lbl">Islandwide Hotline</span>
            <h3>94718463919</h3>
            <p>Call our design engineers for general inquiries, calculations, and deliveries.</p>
          </div>
        </div>

        <div class="branch-locator-panel">
          <h3>Find a Local Showroom</h3>
          <p class="locator-subtitle">Select a showroom location to view address details and telephone contacts.</p>

          <div class="branch-selector-layout">
            <div class="branch-buttons-list">
              @foreach($branches as $i => $branch)
              <button class="branch-select-btn @if($i === 0) active @endif" data-branch="{{ $i }}">
                <span>{{ $branch->name }}</span>
                <svg class="chevron" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
              </button>
              @endforeach
            </div>

            @foreach($branches as $i => $branch)
            <div class="branch-details-card glass animate-fade-in" data-branch="{{ $i }}" style="@if($i > 0) display:none; @endif">
              <div class="branch-card-header">
                <svg class="branch-pin-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                <h4>{{ $branch->name }} Showroom</h4>
              </div>
              <div class="branch-details-body">
                <div class="branch-detail-row">
                  <span class="det-label">Address:</span>
                  <p class="det-val">{{ $branch->address }}</p>
                </div>
                <div class="branch-detail-row">
                  <span class="det-label">Telephone:</span>
                  <p class="det-val"><strong>{{ $branch->phone }}</strong></p>
                </div>
                <div class="branch-detail-row">
                  <span class="det-label">Opening Hours:</span>
                  <p class="det-val">{{ $branch->hours }}</p>
                </div>

                @if($branch->map_embed)
                <div class="map-container">
                  <iframe src="{{ $branch->map_embed }}" width="100%" height="250" style="border:0; border-radius: 12px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
                @else
                <div class="map-placeholder">
                  <svg class="map-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"/></svg>
                  <span>Google Map Navigation Route Available</span>
                </div>
                @endif
              </div>
            </div>
            @endforeach
          </div>
        </div>
      </div>

      <!-- General Inquiry form -->
      <div class="contact-right-col">
        <div class="contact-form-box glass">
          <form class="main-contact-form" method="POST" action="{{ route('contact.submit') }}">
            @csrf
            <h3>Submit a Direct Inquiry</h3>
            <p class="form-helper">Interested in ceilings, roofs, or flooring? Drop your phone number and requirements, and we will get back with prices.</p>

            <div class="form-group">
              <label for="name">Your Name *</label>
              <input type="text" id="name" name="name" placeholder="e.g. Asanka Perera" value="{{ old('name') }}" required />
              @error('name') <small style="color:#ef4444;">{{ $message }}</small> @enderror
            </div>

            <div class="form-row-2">
              <div class="form-group">
                <label for="phone">Contact Number *</label>
                <input type="tel" id="phone" name="phone" placeholder="e.g. 077 789 4561" value="{{ old('phone') }}" required />
                @error('phone') <small style="color:#ef4444;">{{ $message }}</small> @enderror
              </div>
              <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" placeholder="e.g. asanka@example.com" value="{{ old('email') }}" />
                @error('email') <small style="color:#ef4444;">{{ $message }}</small> @enderror
              </div>
            </div>

            <div class="form-group">
              <label for="interest">Product Category of Interest</label>
              <select id="interest" name="interest">
                <option value="Ceiling Solutions">i-Panel PVC Ceilings</option>
                <option value="Roofing Solutions">i-Roof ASA Roofing</option>
                <option value="Flooring Solutions">GoFloor Vinyl Flooring</option>
                <option value="Wall Claddings">3D Fluted Wall Claddings</option>
                <option value="General Inquiry">General Construction consultation</option>
              </select>
            </div>

            <div class="form-group">
              <label for="message">Message / Custom Requirements *</label>
              <textarea id="message" name="message" rows="4" placeholder="Detail your requirements here (e.g. dimensions, color choice)..." required>{{ old('message') }}</textarea>
              @error('message') <small style="color:#ef4444;">{{ $message }}</small> @enderror
            </div>

            <!-- Cloudflare Turnstile -->
            @php $turnstileKey = \App\Models\SiteSetting::getValue('turnstile_site_key'); @endphp
            @if($turnstileKey)
            <div class="cf-turnstile" data-sitekey="{{ $turnstileKey }}" data-theme="light" style="margin-bottom:1rem;"></div>
            @endif
            @error('cf-turnstile-response') <small style="color:#ef4444;">Please complete the security check.</small> @enderror

            <button type="submit" class="btn btn-primary w-full send-btn">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" x2="11" y1="2" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg> Send Direct Message
            </button>
          </form>
        </div>
      </div>
    </div>
  </section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  var btns = document.querySelectorAll('.branch-select-btn');
  var cards = document.querySelectorAll('.branch-details-card');
  btns.forEach(function(btn) {
    btn.addEventListener('click', function() {
      btns.forEach(function(b) { b.classList.remove('active'); });
      btn.classList.add('active');
      var idx = btn.getAttribute('data-branch');
      cards.forEach(function(c) {
        c.style.display = c.getAttribute('data-branch') === idx ? '' : 'none';
      });
    });
  });
});
</script>
@endpush