@extends('site.layouts.app')
@section('content')
  <!-- PAGE HERO -->
  <section class="page-hero">
    <div class="page-hero-bg">
      <img src="{{ asset('site/images/page-hider.png') }}" alt="اتصل بنا">
    </div>
    <div class="breadcrumb">
      <a href="{{ route('site.home') }}">الرئيسية</a>
      <span class="separator">←</span>
      <span>اتصل بنا</span>
    </div>
  </section>

  <!-- CONTACT CONTENT -->
  <section class="section">
    <div class="container">
      @if(session('success'))
        <div class="alert alert-success" style="background: #d4edda; color: #155724; padding: 15px; border-radius: 5px; margin-bottom: 20px; text-align: center;">
          {{ session('success') }}
        </div>
      @endif

      <div style="display:grid;grid-template-columns:1fr 1.5fr;gap:40px;">

        <!-- Contact Info Card -->
        <div class="contact-info-card fade-in-right">
          <h2>بيانات التواصل</h2>
          <p class="subtitle">سنتواصل معك في أسرع وقت</p>

          @if($settings->cairo_clinic_name || $settings->cairo_clinic_address)
            <div class="contact-info-item">
              <div class="icon">🏥</div>
              <div>
                <div class="label">{{ $settings->cairo_clinic_name ?? 'عيادة القاهرة' }}</div>
                <div class="value">
                  {!! nl2br(e($settings->cairo_clinic_address)) !!}<br>
                  @if($settings->cairo_clinic_phone)
                    تليفون - واتس: <a href="tel:{{ $settings->cairo_clinic_phone }}">{{ $settings->cairo_clinic_phone }}</a><br>
                  @endif
                  @if($settings->cairo_clinic_day)
                    مواعيد عيادة القاهرة:<br>
                    {{ $settings->cairo_clinic_day }}: {{ $settings->cairo_clinic_time }}<br>
                  @endif
                  @if($settings->cairo_clinic_map_link)
                    <a href="{{ $settings->cairo_clinic_map_link }}" target="_blank">موقع عيادة القاهرة علي خرائط جوجل</a><br>
                  @endif
                </div>
              </div>
            </div>
          @endif

          @if($settings->tanta_clinic_name || $settings->tanta_clinic_address)
            <div class="contact-info-item">
              <div class="icon">🏥</div>
              <div>
                <div class="label">{{ $settings->tanta_clinic_name ?? 'عيادة طنطا' }}</div>
                <div class="value">
                  {!! nl2br(e($settings->tanta_clinic_address)) !!}<br>
                  @if($settings->tanta_clinic_phone)
                    تليفون - واتس: <a href="tel:{{ $settings->tanta_clinic_phone }}">{{ $settings->tanta_clinic_phone }}</a>
                  @endif
                  @if($settings->tanta_clinic_phone_2)
                    / <a href="tel:{{ $settings->tanta_clinic_phone_2 }}">{{ $settings->tanta_clinic_phone_2 }}</a>
                  @endif
                  <br>
                  @if($settings->tanta_clinic_days)
                    مواعيد عيادة طنطا:<br>
                    {{ $settings->tanta_clinic_days }}: {{ $settings->tanta_clinic_time }}<br>
                  @endif
                  @if($settings->tanta_clinic_map_link)
                    <a href="{{ $settings->tanta_clinic_map_link }}" target="_blank">موقع عيادة طنطا علي خرائط جوجل</a>
                  @endif
                </div>
              </div>
            </div>
          @endif

          <div style="display:flex;gap:12px;margin-top:25px;">
            @if($settings->facebook_link)
              <a href="{{ $settings->facebook_link }}" target="_blank"
                style="width:40px;height:40px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);"><i
                  class="fab fa-facebook-f"></i></a>
            @endif
            @if($settings->youtube_link)
              <a href="{{ $settings->youtube_link }}" target="_blank"
                style="width:40px;height:40px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);"><i
                  class="fab fa-youtube"></i></a>
            @endif
            @if($settings->instagram_link)
              <a href="{{ $settings->instagram_link }}" target="_blank"
                style="width:40px;height:40px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);"><i
                  class="fab fa-instagram"></i></a>
            @endif
            @if($settings->twitter_link)
              <a href="{{ $settings->twitter_link }}" target="_blank"
                style="width:40px;height:40px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);"><i
                  class="fab fa-tiktok"></i></a>
            @endif
            @if($settings->linkedin_link)
              <a href="{{ $settings->linkedin_link }}" target="_blank"
                style="width:40px;height:40px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);"><i
                  class="fab fa-linkedin-in"></i></a>
            @endif
          </div>
        </div>

        <!-- Contact Form -->
        <div class="contact-form fade-in-left">
          <h2>اتصل بنا</h2>
          <form action="{{ route('site.contact.submit') }}" method="POST">
            @csrf
            <div class="form-group">
              <label>الاسم الكامل <span class="required">*</span></label>
              <input type="text" name="name" placeholder="أدخل اسمك الكامل" required value="{{ old('name') }}">
              @error('name')
                <span style="color: red; font-size: 12px;">{{ $message }}</span>
              @enderror
            </div>
            <div class="form-group">
              <label>الهاتف <span class="required">*</span></label>
              <input type="tel" name="phone" placeholder="رقم الهاتف" required value="{{ old('phone') }}">
              @error('phone')
                <span style="color: red; font-size: 12px;">{{ $message }}</span>
              @enderror
            </div>
            <div class="form-group">
              <label>الرسالة</label>
              <textarea name="message" placeholder="اكتب رسالتك هنا...">{{ old('message') }}</textarea>
              @error('message')
                <span style="color: red; font-size: 12px;">{{ $message }}</span>
              @enderror
            </div>
            <button type="submit" class="btn btn-gold" style="width:100%;justify-content:center;">إرسال</button>
          </form>
        </div>
      </div>
    </div>
  </section>
@endsection