@extends('layouts.site')
@push('styles')
    <link href="{{ asset('site1/assets/css/membership.css') }}" rel="stylesheet" />
    @if ($service->seo_other != null)
        {!! $service->seo_other !!}
    @endif
@endpush

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

@section('seo_description')
    {{ $service->seo_description }}
@endsection
@section('content')
    <div class="container">
        <a class="btn book-now" data-toggle="modal" data-target="#exampleModal" title="Quick Contact">Quick Contact</a>
    </div>

    <section class="text-center bg-parallax">
        <div class="bg-img"><img src="{{ $service->getFirstMediaUrl('banner_image') }}" alt="background"></div>
        <div class="container">
            <div class="row">
                <div class="col-8 offset-2 custom-heading__wrapper">
                    <h1 class="pagetitle__heading mb-10">{{ $service->title }}</h1>
                    <p class="pagetitle__desc">{{ $service->title_desc }}
                    </p>
                </div><!-- /.col-xl-6 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.page-title -->

    <section id="about" class="about-layout1 bg-gray">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-6">
                    <div class="heading mb-10">
                        <h3 class="heading__title mb-10"><span
                                style="text-transform: lowercase !important"></span>{{ $service->short_title }}</h3>
                    </div>
                    <div class="position-relative text-justify">
                        <br>
                        <p>{!!$service->description !!}</p>
                    </div>

                    <a href="tel:{{ $service->call_number }}" class="btn btn__secondary center-contact-button">
                        <span>Call us</span>
                    </a>
                </div>

                <div class="col-sm-12 col-md-12 col-lg-6 m-auto">
                    <div class="about__img mb-10 text-center">
                        <iframe class="iframe-video" src="{{ $service->youtube_link }}">
                        </iframe>
                    </div>
                </div>

            </div>
        </div>
    </section>

    @if ($service->has_brochure)
        <section class="our-team-layout1 maccess-custom-outer">
            <div class="container custom-container">
                <div class="about__img mb-10 text-center maccess-flow-outer">
                    <img src="{{ $service->brochure->getFirstMediaUrl('image') }}" alt="about">
                </div>
            </div>
            <div class="text-center mb-30">
                <a href="/service-brochure/{{ $service->slug }}" class="btn btn__secondary">
                    <span>Get Brochure</span>
                </a>
            </div>
        </section>
    @endif

    @foreach ($service->contents->sortBy('display_order') as $content)
        @if ($content->type == 1)
            <section class="our-team-layout1">
                <div class="container">
                    <div class="heading mb-30">
                        <h3 class="heading__title mb-40" data-aos="fade-right" data-aos-duration="1000">
                            {{ $content->heading }}
                        </h3>
                    </div>
                    <div class="row" style="justify-content: space-between">
                        @foreach ($content->steps as $step)
                            @if ($step->points->isNotEmpty())
                                <div class="col-sm-12 col-md-12 col-lg-4 custom-card-1 custom-card-2" data-aos="zoom-in"
                                    data-aos-duration="1000">
                                    <div class="team__desc team__desc-1">
                                        <img class="app-works-img-1" src="{{ $step->getFirstMediaUrl('service_step') }}"
                                            alt="singnture" />
                                        <h4>{{ $step->title }}</h4>
                                        <p>
                                            {{ $step->description }}
                                        </p>
                                        <ul>
                                            @foreach ($step->points as $point)
                                                <li>{{ $point->points }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            @else
                                <div class="col-sm-12 col-md-12 col-lg-6  custom-card-1" data-aos="zoom-in"
                                    data-aos-duration="1000">
                                    <div class="team__desc">
                                        <img class="app-works-img-1" class="app-works-img class=" app-works-img-1"-1"
                                            src="{{ $step->getFirstMediaUrl('service_step') }}" alt="singnture" />
                                        <br><br>
                                        <center>
                                            <h6>{{ $step->title }} </h6>
                                            <p>
                                                {{ $step->description }}
                                            </p>
                                        </center>
                                    </div>
                                </div>
                            @endif
                        @endforeach



                        <a class="btn sticky-btn btn__primary btn__icon mt-30 center-contact-button">
                            <span>Contact Us</span>
                            <i class="icon-arrow-right"></i>
                        </a>
                    </div>
            </section>
        @elseif ($content->type == 2)
            <section class="our-team-layout1">
                <div class="container">
                    <div class="heading mb-30">
                        <h3 class="heading__title mb-40">
                            {{ $content->heading }}
                        </h3>
                    </div>
                    @foreach ($content->benefits->chunk(3) as $benefits)
                        <div class="row team__group__2" style="justify-content: space-between">
                            @foreach ($benefits as $benefit)
                                <div class="col-sm-12 col-md-12 col-lg-4 d-flex custom-card-2" data-aos="zoom-in"
                                    data-aos-duration="1000">

                                    <div class="team__desc">
                                        <img src="{{ $benefit->getFirstMediaUrl('benefit_icon') }}" alt="Icon" />
                                        <br><br>
                                        <h6>{{ $benefit->title }}</h6>
                                        <p>
                                            {{ $benefit->description }}
                                        </p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach

                </div>
            </section>
        @elseif ($content->type == 3)
            <section class="about-layout1 bg-gray">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-6">
                            <div class="about__img mb-10">
                                <img src="{{ $content->imageContent->getFirstMediaUrl('service_image_content') }}"
                                    alt="about">
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-6">
                            <div class="heading mb-10">
                                <h3 class="heading__title mb-10">{{ $content->imageContent->title }}</h3>
                            </div>
                            <div class="position-relative">

                                <p>{{ $content->imageContent->description }}</p>

                                @if ($content->imageContent->contact_type == 'phone')
                                    <a href="tel:{{ $content->imageContent->contact_value }}"
                                        class="btn btn__secondary center-contact-button">
                                        <span>Call us</span>
                                    </a>
                                @elseif($content->imageContent->contact_type == 'whatsapp')
                                    <a href="https://wa.me/{{ $content->imageContent->contact_value }}" target="_blank"
                                        class="btn btn__primary btn__icon mt-20">
                                        <span>Whatsapp Us</span>
                                        <i class="icon-arrow-right"></i>
                                    </a>
                                @elseif($content->imageContent->contact_type == 'email')
                                    <a href="mailto:{{ $content->imageContent->contact_value }}"
                                        class="btn btn__secondary center-contact-button">
                                        <span>Email Us</span>
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
    @endforeach
    @if ($service->has_brochure)
        <div class="text-center">
            <a href="/service-brochure/{{ $service->slug }}"
                class="btn sticky-btn btn__primary btn__icon mt-30 center-contact-button mb-30">
                <span>Get A Quote</span>
                <i class="icon-arrow-right"></i>
            </a>
        </div>
    @endif
    @if ($service->questionnaire_id != null)
        @include('layouts.components.questionnaire_start')
    @endif
    @include('layouts.components.contact')
@endsection