@extends('site.layouts.app')
@section('content')
  <!-- ======== BANNER SECTION ======== -->
  <section class="banner-intro">
    <div class="banner-bg-overlay"></div>
    <div class="banner-container">
      <div class="banner-card">
        <div class="banner-line"></div>
        <h2 class="banner-doctor-name">دكتور<span>أحمـــد رشـــدي</span></h2>
        <div class="banner-credentials">
          <p>دكتوراة طب وجراحة العيون</p>
          <p>إستشاري أمراض و جراحات الشبكية والجسم الزجاجي والمياة البيضاء</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ======== HERO SECTION ======== -->
  <section class="hero">
    <div class="hero-bg">
      <div style="width:100%;height:100%;background:linear-gradient(135deg,#000 0%,#0d0a00 50%,#000 100%);"></div>
    </div>
    <div class="hero-content">
      <div class="hero-text fade-in-right">
        <p class="subtitle">دكتور</p>
        <h1>أحمـــد رشـــدي</h1>
        <p class="degree">{{ $about->about_text }}</p>
        @if($about && $about->role)
        <ul class="hero-credentials">
          @foreach(explode("\n", $about->role) as $item)
            @if(trim($item))
              <li>{{ trim($item) }}</li>
            @endif
          @endforeach
        </ul>
        @endif
        <p class="hero-signature">Dr. Ahmed Roshdy</p>
        <a href="{{ route('site.about') }}" class="btn" style="margin-top:25px;">اعرف المزيد <span class="arrow">←</span></a>
      </div>
      <div class="hero-image fade-in-left">
        @if($about && $about->youtube_video)
          <iframe width="560" height="315" src="{{ $about->youtube_video }}"
            title="YouTube video player" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        @endif
      </div>
    </div>
  </section>

  <!-- ======== MULTIFOCAL LENS SECTION ======== -->
  <section class="multifocal-section">
    <div class="container">
      <div class="multifocal-inner">
        @if($servicesFirst)
          
        <div class="multifocal-text fade-in-right">
          <h2>{{ $servicesFirst->title }}</h2>
          <p>{{ $servicesFirst->excerpt ?? Str::limit($servicesFirst->description, 140, '...') }}</p>
            <a href="{{ route('site.services') }}" class="btn">اعرف المزيد <span class="arrow">←</span></a>
          </div>
          <div class="multifocal-image fade-in-left">
            <img src="{{ $servicesFirst->image ? asset('storage/'.$servicesFirst->image) : asset('site/images/eye-closeup.png') }}" alt="{{ $servicesFirst->title }}">
          </div>
        @else
          <div class="multifocal-image fade-in-left">
            <p class="text-center" style="color: var(--text-secondary);">لا توجد خدمات متاحة حالياً</p>
          </div>
        @endif
      </div>
    </div>
  </section>

  <!-- ======== NEWS SECTION ======== -->
  <section class="news-section">
    <div class="container">
      <div class="section-title-wrapper">
        <h2 class="section-title fade-in">اخر الاخبار</h2>
      </div>
      <div class="news-card fade-in">
        @if($articles->count() > 0)
          <div class="news-card-image">
            <img src="{{ $articles->first()->image ? asset('storage/' . $articles->first()->image) : asset('site/images/doctor-portrait.png') }}" alt="د. أحمد رشدي">
          </div>
          <div class="news-card-content">
            <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:20px;">
              <div style="flex:1;">
                <h3>{{ $articles->first()->title }}</h3>
                <p>{{ $articles->first()->excerpt }}</p>
                <a href="{{ route('site.article-details', $articles->first()) }}" class="btn">اعرف المزيد <span class="arrow">←</span></a>
              </div>
              <div class="news-date">
                <div class="month">{{ $articles->first()->created_at->format('F') }}</div>
                <div class="day">{{ $articles->first()->created_at->format('d') }}</div>
              </div>
            </div>
          </div>
        @endif
      </div>
    </div>
  </section>

  <!-- ======== video info ======== -->
  <section class="tv-section" id="tv">
    <div class="container">
      <div class="section-title-wrapper">
        <h2 class="section-title fade-in">معلومه فى فيديو</h2>
      </div>
      <div class="tv-grid">
        @forelse($videoInfos as $videoInfo)
        <div class="tv-card fade-in">
          <div class="tv-card-image">
            <iframe width="100%" height="100%" src="{{ $videoInfo->embed_url }}"
              title="YouTube video player" frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            <div class="tv-card-play"></div>
          </div>
          <div class="tv-card-title">{{ $videoInfo->title }}</div>
        </div>
        @empty
          <p class="text-center" style="color: var(--text-secondary);">لا توجد معلومات في فيديو حتى الآن.</p>
        @endforelse
      </div>
      <div style="text-align:center;">
        <a href="{{ route('site.video-info') }}" class="btn">اعرف المزيد <span class="arrow">←</span></a>
      </div>
    </div>
  </section>

  <!-- ======== Operations ======== -->
  <section class="tv-section" id="tv">
    <div class="container">
      <div class="section-title-wrapper">
        <h2 class="section-title fade-in">مرضانا بعد العمليات</h2>
      </div>
      <div class="tv-grid">
        @forelse($operations as $operation)
        <div class="tv-card fade-in">
          <div class="tv-card-image">
            <iframe width="100%" height="100%" src="{{ $operation->embed_url }}"
              title="YouTube video player" frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            <div class="tv-card-play"></div>
          </div>
          <div class="tv-card-title">{{ $operation->title }}</div>
        </div>
        @empty
          <p class="text-center" style="color: var(--text-secondary);">لا توجد مقابلات مع المرضي حتى الآن.</p>
        @endforelse
      </div>
      <div style="text-align:center;">
        <a href="{{ route('site.operations') }}" class="btn">اعرف المزيد <span class="arrow">←</span></a>
      </div>
    </div>
  </section>

  <!-- ======== SERVICES ACCORDION ======== -->
  <section class="services-section">
    <div class="container">
      <div class="section-title-wrapper">
        <h2 class="section-title fade-in">الخدمات</h2>
      </div>
    </div>
    <div class="services-accordion fade-in">
      @forelse($services as $service)
      <div class="accordion-item {{ $loop->first ? 'active' : '' }}">
        <img src="{{ $service->image ? asset('storage/' . $service->image) : asset('site/images/eye-surgery.png') }}" alt="{{ $service->title }}">
        <div class="accordion-label">{{ $service->title }}</div>
      </div>
      @empty
        <h3>لا توجد خدمات متاحة حالياً</h3>
        <p>سيتم إضافة الخدمات في لوحة التحكم. الرجاء العودة لاحقاً.</p>
      @endforelse
    </div>
    <div style="text-align:center;padding:40px 0;">
      <a href="{{ route('site.services') }}" class="btn">اعرف المزيد <span class="arrow">←</span></a>
    </div>
  </section>

  <!-- ======== ARTICLES ======== -->
  <section class="articles-section">
    <div class="container">
      <div class="section-title-wrapper">
        <h2 class="section-title fade-in">المقالات</h2>
      </div>
      <div class="articles-grid">
        @forelse($articles as $article)
        <div class="article-card fade-in">
          <div class="article-card-image">
            <img src="{{ $article->image ? asset('storage/' . $article->image) : asset('site/images/eye-closeup.png') }}" alt="{{ $article->title }}">
          </div>
          <div class="article-card-content">
            <h3>{{ $article->title }}</h3>
            <p>{{ $article->excerpt }}</p>
            <a href="{{ route('site.article-details', $article) }}" class="btn">اعرف اكتر <span class="arrow">←</span></a>
          </div>
        </div>
        @empty
          <h3>لا توجد مقالات متاحة حالياً</h3>
          <p>سيتم إضافة المقالات في لوحة التحكم. الرجاء العودة لاحقاً.</p>
        @endforelse
      </div>
      <div style="text-align:center;margin-top:40px;">
        <a href="{{ route('site.articles') }}" class="btn">اعرف المزيد <span class="arrow">←</span></a>
      </div>
    </div>
  </section>

  <!-- ======== REVIEWS ======== -->
  <section class="reviews-section" id="reviews">
    <div class="container">
      <div class="section-title-wrapper">
        <h2 class="section-title fade-in">آراء العملاء</h2>
      </div>
      <div class="reviews-slider">
        @forelse($reviews as $review)
          <div class="review-card">
            <div class="review-image-placeholder">
              <img src="{{ asset('storage/' . $review->image) }}" alt="{{ $review->title }}">
            </div>
          </div>
        @empty
          <h3>لا توجد آراء عملاء متاحة حالياً</h3>
          <p>سيتم إضافة آراء العملاء في لوحة التحكم. الرجاء العودة لاحقاً.</p>
        @endforelse
      </div>
    </div>
  </section>

  <!-- ======== LOCATIONS ======== -->
  <section class="locations-section">
    <div class="container">
      <div class="section-title-wrapper">
        <h2 class="section-title fade-in">مواقع العيادات</h2>
      </div>
      <div class="locations-grid">
        <div class="location-card fade-in">
          <h3>{{ $contactSettings->cairo_clinic_name ?? 'عيادة القاهرة' }}</h3>
          <p>{{ $contactSettings->cairo_clinic_address ?? 'القاهره الجديدة - القاهرة' }}</p>
          <div class="map-embed">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3454.597594786412!2d31.435925599999997!3d30.019709!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14583df976c543e9%3A0x58c5ce02f45427fe!2z2K8v2KPYrdmF2K8g2LHYtNiv2Yog2KfYs9iq2LTYp9ix2Yog2KfZhNi52YrZiNmGINmI2KfZhNi02KjZg9mK2KkgLSDYudmK2KfYr9ipINin2YTZgtin2YfYsdip!5e0!3m2!1sen!2seg!4v1768469261661!5m2!1sen!2seg"
              style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
            </iframe>
          </div>
        </div>
        <div class="location-card fade-in">
          <h3>{{ $contactSettings->tanta_clinic_name ?? 'عيادة طنطا' }}</h3>
          <p>{{ $contactSettings->tanta_clinic_address ?? 'شارع البحر مع شارع أحمد ماهر - أعلي توكيل سامسونج' }}</p>
          <div class="map-embed">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3427.486553215544!2d30.9993125!3d30.788987000000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14f7c90b0a264167%3A0xb2c217bf74cf2fc3!2z2K8v2KPYrdmF2K8g2LHYtNiv2Yog2KfYs9iq2LTYp9ix2Yog2KfZhNi52YrZiNmGINmI2KfZhNi02KjZg9mK2KkgLSDYudmK2KfYr9ipINi32YbYt9in!5e0!3m2!1sen!2seg!4v1768469347703!5m2!1sen!2seg"
              style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
            </iframe>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection