@extends('layouts.app')

@php
    $isAr = app()->getLocale() === 'ar';
    $metaTitle = $isAr ? 'اطلب عرض سعرك المجاني | Smart Pool & Pergola' : 'Get Your Free Quote | Smart Pool & Pergola';
@endphp

@section('content')
<section class="section">
  <div class="container">
    <div class="grid grid-2" style="gap:64px; align-items:flex-start">

      <div>
        <h1>{{ $isAr ? 'احصل على عرض سعرك المخصص' : 'Get Your Tailored Quote' }}</h1>
      </div>

      <div class="form-card">
        @if (session('success'))
          <div class="form-success is-visible">
            <h3>{{ $isAr ? 'تم استلام طلبك بنجاح' : 'Your Request Has Been Received' }}</h3>
            <p>{{ $isAr ? 'سيتواصل معك فريقنا خلال ساعات العمل.' : 'Our team will reach out during business hours.' }}</p>
          </div>
        @else
          {{-- Same multi-step UX/JS behaviour as the prototype
               (assets/js/main.js#initMultiStepForm) — only the action/
               CSRF/validation-error wiring below is new for Laravel. --}}
          <form id="quoteForm" method="POST" action="{{ route('quote.store.' . app()->getLocale()) }}" novalidate>
            @csrf

            <div class="form-step is-active">
              <h3 class="mb-3">1 — {{ $isAr ? 'نوع الخدمة' : 'Service Type' }}</h3>
              <div class="field">
                <label>{{ $isAr ? 'ما الذي تبحث عنه؟' : 'What are you looking for?' }}</label>
                <select name="service" required>
                  @foreach (\App\Models\Product::published()->get() as $p)
                    <option value="{{ $p->slug() }}" @selected(request('product') === $p->slug())>{{ $p->name() }}</option>
                  @endforeach
                </select>
              </div>
              <div class="field">
                <label>{{ $isAr ? 'نوع العقار' : 'Property Type' }}</label>
                <select name="property_type" required>
                  <option value="villa">{{ $isAr ? 'فيلا خاصة' : 'Private Villa' }}</option>
                  <option value="hotel">{{ $isAr ? 'فندق / منتجع' : 'Hotel / Resort' }}</option>
                  <option value="commercial">{{ $isAr ? 'مشروع تجاري' : 'Commercial Project' }}</option>
                </select>
              </div>
              <button type="button" class="btn btn-primary" style="width:100%" data-step-next>{{ $isAr ? 'التالي' : 'Next' }}</button>
            </div>

            <div class="form-step">
              <h3 class="mb-3">2 — {{ $isAr ? 'تفاصيل المسبح' : 'Pool Details' }}</h3>
              <div class="field">
                <label>{{ $isAr ? 'المساحة التقريبية (م²)' : 'Approximate area (m²)' }}</label>
                <input type="number" name="pool_size" required>
                @error('pool_size') <span class="field-error" style="display:block">{{ $message }}</span> @enderror
              </div>
              <div class="field">
                <label>{{ $isAr ? 'المدينة' : 'City' }}</label>
                <input type="text" name="city" value="{{ request('city') }}" required>
              </div>
              <div class="btn-row">
                <button type="button" class="btn btn-outline" data-step-prev>{{ $isAr ? 'السابق' : 'Back' }}</button>
                <button type="button" class="btn btn-primary" style="flex:1" data-step-next>{{ $isAr ? 'التالي' : 'Next' }}</button>
              </div>
            </div>

            <div class="form-step">
              <h3 class="mb-3">3 — {{ $isAr ? 'بيانات التواصل' : 'Contact Details' }}</h3>
              <div class="field">
                <label>{{ $isAr ? 'الاسم الكامل' : 'Full Name' }}</label>
                <input type="text" name="name" required>
                @error('name') <span class="field-error" style="display:block">{{ $message }}</span> @enderror
              </div>
              <div class="field-row">
                <div class="field">
                  <label>{{ $isAr ? 'رقم الجوال' : 'Phone' }}</label>
                  <input type="tel" name="phone" required>
                </div>
                <div class="field">
                  <label>{{ $isAr ? 'البريد الإلكتروني' : 'Email' }}</label>
                  <input type="email" name="email">
                </div>
              </div>
              <button type="submit" class="btn btn-primary" style="width:100%">{{ $isAr ? 'إرسال الطلب' : 'Submit Request' }}</button>
            </div>
          </form>
        @endif
      </div>
    </div>
  </div>
</section>
@endsection