@extends('web_site.layouts.master')

@section('content')

    <section class="breadcumb-wrapper" data-bg-src="{{ asset('assets_web/img/breadcurmb1.webp') }}">
        <div class="container">
            <h1 class="breadcumb-title">{{ $service->title }}</h1>
        </div>
    </section>

    <section class="vs-blog-wrapper blog-details space-top space-md-bottom">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="vs-blog blog-single">
                        <div class="blog-img">
                            <img src="{{ $service->image_path }}" loading="lazy" alt="{{ $service->title }}">
                        </div>
                        <div class="blog-content mt-4">
                            <h2 class="blog-title h3">{{ $service->title }}</h2>
                            @if ($service->description)
                                <p>{!! nl2br(e($service->description)) !!}</p>
                            @endif
                        </div>
                    </div>

                    @if ($doctors->isNotEmpty())
                        <div class="mt-5">
                            <h3 class="h4 mb-4">{{ trans('site.services.doctors_title', ['specialty' => $service->specialty?->name]) }}</h3>
                            <div class="row">
                                @foreach ($doctors as $doctor)
                                    <div class="col-md-6 mb-4">
                                        @include('web_site.partials.doctor-card', ['doctor' => $doctor])
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <a href="{{ route('appointment') }}" class="vs-btn style2 mt-2">{{ trans('site.nav.appointment') }}<i class="fas fa-chevron-{{ app()->getLocale() === 'ar' ? 'left' : 'right' }}"></i></a>
                </div>

                <div class="col-lg-4">
                    <aside class="sidebar-area pt-30 pt-lg-0 pl-30">
                        <div class="widget widget_categories">
                            <h3 class="widget_title">{{ trans('site.services.our_services') }}</h3>
                            <ul>
                                @foreach ($otherServices as $otherService)
                                    <li>
                                        <a href="{{ route('service-details', $otherService) }}" class="{{ $otherService->is($service) ? 'text-theme1' : '' }}">{{ $otherService->title }}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </section>

@endsection