@extends('theme.spade.layouts.main')

@section('title') {{ $service->title }} @endsection

@section('meta')
<meta name="title" content="{{ optional($service->serviceMeta)->meta_title ?? $seoSetting['meta_title'] }}" />
    <meta name="description" content="{{ optional($service->serviceMeta)->meta_description ?? $seoSetting['meta_detail'] }}">
    <meta name="keywords" content="{{ optional($service->serviceMeta)->meta_keywords ?? $seoSetting['meta_keywords'] }}" />
@endsection

@section('content')

    @php
          $breadcrumbData = array(
               [
                    'title' => 'Services',
                    'link' => 'javascript:;'
               ],
               [
                    'title' => $service->title,
                    'link' => null
               ]
          );
    @endphp
    @include('theme.spade.layouts.includes.breadcrumb', $breadcrumbData)

     <div class="auto-container">
          <div class="grid-container">
               <div class="grid-item">
                    <div class="start-sidebar mt-60">
                         <div class="primary-title">
                              <h2 class="uppercase">
                                   Our Services
                              </h2>
                         </div>
                         <div class="right-sidebar">
                              <ul class="link-list">
                                   @if(count($otherServices) > 0)
                                        @foreach ($otherServices as $otherService)
                                             <li>
                                                  <a href="{{ route('service', $otherService->slug) }}">{{ $otherService->title }}</a>
                                                  <hr style="margin: 10px 0">
                                             </li>
                                        @endforeach
                                   @endif
                              </ul>
                         </div>
                    </div>
               </div>
               <div class="grid-item">
                    <div class="mt-60" style="padding: 0 30px 30px 30px">
                         <h2 style="font-size: 24px; color:#22ad4b; padding-bottom: 12px;">{{ $service->title }}</h2>
                         {!! $service->detail !!}
                    </div>
               </div>
               <div class="grid-item">
                    <div class="top-services" style="padding: 60px 0 10px">
                         <article class="post wow fadeInUp slide-item" data-wow-delay="0ms" data-wow-duration="1000ms">
                              <div class="post-inner">
                                   <figure class="image">
                                        <img class="img-responsive" src="{{ $service->full_image }}" alt="Image" />
                                        <span class="curve"></span>
                                   </figure>
                                   <div class="content">
                                        <div class="inner-box">
                                             <h3 style="font-family: 'Sintony', sans-serif;">{{ $service->title }}</h3>
                                             <div class="text">
                                                  <p>{!! $service->summary !!}</p>
                                             </div>
                                        </div>
                                   </div>
                              </div>
                         </article>
                    </div>
               </div>
          </div>
     </div>

@endsection