@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') }}">
    </div>
    <div class="breadcrumb">
      <a href="{{ route('site.home') }}">الرئيسية</a>
      <span class="separator">←</span>
      <a href="{{ route('site.services') }}">الخدمات</a>
      <span class="separator">←</span>
      <span>{{ $service->title }}</span>
    </div>
  </section>

  <!-- SERVICE DETAIL -->
  <section class="section">
    <div class="container">
      <div class="service-detail">
        <div class="service-detail-header">
          <h1>{{ $service->title }}</h1>
          @if($service->subtitle)
            <p class="service-subtitle">{{ $service->subtitle }}</p>
          @endif
        </div>

        <div class="service-detail-content">
          <div class="service-sidebar">
            <h3>الخدمات الأخرى</h3>
            <ul class="service-menu">
              @foreach($services as $sidebarService)
                <li>
                  <a href="{{ route('site.service-details', ['service' => $sidebarService->slug]) }}"
                    class="{{ $sidebarService->id === $service->id ? 'active' : '' }}">
                    {{ $sidebarService->title }}
                  </a>
                </li>
              @endforeach
            </ul>
          </div>

          <div class="service-main-content">
            <div class="service-detail-image">
              <img src="{{ $service->image ? asset('storage/'.$service->image) : asset('site/images/banner.jpg') }}" alt="{{ $service->title }}">
            </div>

            <div class="service-detail-text">
              @if($service->excerpt)
                <p>{{ $service->excerpt }}</p>
              @endif

              @if($service->description)
                <div>{!! nl2br(e($service->description)) !!}</div>
              @else
                <p>هذه الخدمة متاحة الآن ويمكن تعديل تفاصيلها من لوحة الإدارة.</p>
              @endif

              <div class="service-cta">
                <a href="{{ route('site.book-appointment') }}" class="btn">احجز موعد الآن <span class="arrow">←</span></a>
                <a href="{{ route('site.contact') }}" class="btn-outline">تواصل معنا</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection