@extends('layouts.app')

@section('content')
    @include('includes.sub_header', [
        'page_name' => $service->name,
        'page_title' => $service->name,
        'second_page_title' => 'SERVICES',
        'route' => route('services.index'),
    ])

    <div id="content">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row">
                        <div class="col-md-6 wow fadeInUp pe-lg-5" data-wow-delay=".3s">
                            {!! $service->description !!}
                        </div>
                        <div class="col-md-6 pic-services wow fadeInUp" data-wow-delay=".6s">
                            <img src="{{ $service->image }}" class="img-responsive" alt="KB" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <section style="padding-top: 60px; padding-bottom: 60px">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 offset-md-3 text-center wow fadeInUp">
                        <h1>SERVICE <span class="id-color">GALLERY</span></h1>
                        <div class="separator">
                            <span><i class="fa fa-dot-circle-o"></i></span>
                        </div>
                        <div class="spacer-single"></div>
                    </div>
                    @forelse($service->gallery as $image)
                        <div class="col-md-4 wow fadeInLeft">
                            <a class="image-popup-no-margins" href="{{ $image->image }}">
                                <img src="{{ $image->image }}" class="img-responsive" alt="{{ $service->slug }}" />
                            </a>
                        </div>
                    @empty
                        <div class="col-md-4 wow fadeInLeft">
                            <a class="image-popup-no-margins" href="./projects/fleurelle-01/1_10 - Photo.jpg">
                                <img src="./projects/fleurelle-01/1_10 - Photo.jpg" class="img-responsive" alt="KB" />
                            </a>
                        </div>
                        <div class="col-md-4 wow fadeInLeft">
                            <a class="image-popup-no-margins" href="./projects/fleurelle-01/1_2 - Ext Main View.jpg">
                                <img src="./projects/fleurelle-01/1_2 - Ext Main View.jpg" class="img-responsive"
                                    alt="KB" />
                            </a>
                        </div>
                        <div class="col-md-4 wow fadeInLeft">
                            <a class="image-popup-no-margins" href="./projects/fleurelle-01/1_6 - Ext Detail.jpg">
                                <img src="./projects/fleurelle-01/1_6 - Ext Detail.jpg" class="img-responsive"
                                    alt="KB" />
                            </a>
                        </div>
                    @endforelse
                </div>
            </div>
        </section>
        <section id="view-all-projects" class="call-to-action bg-color text-center mt-5" data-speed="5"
            data-type="background" aria-label="view-all-projects">
            <a href="{{ route('contact.index') }}" class="btn btn-line black btn-big">Get Quotation</a>
        </section>
    @endsection

    @section('scripts')
    @endsection