@extends('layout.app')
@section('title')
    <title>{{$service->name}}</title>
@endsection
@section('content')
    <section class="service-detail-banner">
        <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('frontend/images/test-img.png')}}" class="w-100" alt="">
                </div>
            </div>
            <div class="col-md-6">
                <div class="service-primary-desc">
                    <h5><img src="{{url($service_sections->first()->image ?? '')}}" alt=""> Skill Assessment</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>
                        <!-- <li>Voluptas, eveniet consectetur blanditiis ut dolor officiis porro omnis! Maiores atque esse vero numquam quod.</li>
                        <li>Laudantium aperiam, ipsa odio repellendus libero cumque.</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="/">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><img src="{{url('frontend/icons/double-slash.svg')}}" alt=""> Skill Assessment</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