@extends('layout.app')
@section('title')
    <title>{{$service->name}}</title>
    <meta name="description" content="{!! strip_tags($service->service_sections()->first()->description)!!}"/>
    <meta name="og:title" content={{$service->name}}/>
    <meta name="og:image" content="{{url($service->banner_image)}}"/>
@endsection
@section('content')
    <section class="service-detail-banner" style="background: url({{url($service->banner_image)}})">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="/">Home</a></li>
              <li class="breadcrumb-item active" aria-current="page">{{$service->name}}</li>
            </ol>
        </nav>
        <div class="service-detail-desc">
            <h2>{{$service->name}}</h2>
        </div>
    </section>
    @php $service_sections = $service->service_sections()->orderby('order_by','asc')->get(); @endphp
    @if($service_sections->count() > 0)
    <section class="service-primary">
        <div class="row">
            <div class="col-md-6">
                <div class="service-primary-img">
                    <img src="{{url($service_sections->first()->image ?? '')}}" class="w-100" alt="">
                </div>
            </div>
            <div class="col-md-6">
                <div class="service-primary-desc">
                    <h5>{{$service->name}} <hr></h5>
                    <h3>{{$service_sections->first()->title}}</h3>
                    <p>{{$service_sections->first()->description}}</p>
                    <ul>
                        @foreach($service_sections->first()->service_section_point as $service_section_point)
                        <li>{{$service_section_point->point}}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </section>
    @if($service_sections->count() > 1)
    @php $second_service = $service_sections[1];@endphp
    <section class="service-secondary">
        <div class="row">
            <div class="col-md-6">
                <div class="service-secondary-img">
                    <img src="{{url($second_service->image ?? '')}}" class="w-100" alt="">
                </div>
            </div>
            <div class="col-md-6">
                <div class="service-secondary-desc">
                    <h5><hr> {{$service->name}}</h5>
                    <h3>{{$second_service->title}}</h3>
                    <p>{{$second_service->description}}</p>
                    <a href="/contact">Book An Appointment</a>
                </div>
            </div>
        </div>
    </section>
    @endif
    @if($service_sections->count() > 2)
    @php $third_service = $service_sections[2];@endphp
    <section class="service-view-last">
        <div class="row">
            <div class="col-md-6">
                <div class="service-primary-desc">
                    <h5>{{$service->name}}<hr></h5>
                    <h3>{{$third_service->title}}</h3>
                    <p>{{$third_service->description}}</p>
                    <ul>
                    @foreach($third_service->service_section_point as $section_point)
                        <li>{{$section_point->point}}</li>
                    @endforeach
                    </ul>
                </div>
            </div>
            <div class="col-md-6">
                <div class="service-last-img">
                    <img src="{{url($third_service->image)}}" class="w-100" alt="">
                </div>
            </div>
        </div>
    </section>
    @endif
    @endif
@endsection