@extends('layouts.site')
@push('styles')
    @if ($serviceCategory->seo_other != null)
        {!! $serviceCategory->seo_other !!}
    @endif
@endpush

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

@section('seo_description')
    {{ $serviceCategory->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="{{ $serviceCategory->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">{{ $serviceCategory->title }}</h1>
                    <p class="pagetitle__desc">{{ $serviceCategory->short_desc }}
                    </p>
                </div><!-- /.col-xl-6 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.page-title -->

    @foreach ($serviceCategory->contents->sortBy('display_order') as $content)
        @if ($content->type == 1)
            <section id="about" class="about-layout1 ms-pb">
                <div class="container">
                    <div class="row rw-align">
                        <div class="col-sm-12 col-md-12 col-lg-6">
                            <div class="about__img mb-10">
                                <div class="abtImg">
                                    <img src="{{ $content->mainSection->getFirstMediaUrl('service_category_section_image') }}"
                                        alt="about">
                                </div>


                            </div>
                        </div>

                        <div class="col-sm-12 col-md-12 col-lg-6">
                            @if ($content->mainSection->hasMedia('service_category_brand_logo'))
                                <img src="{{ $content->mainSection->getFirstMediaUrl('service_category_brand_logo') }}"
                                    style="width: 100px;
                                    height: 100px;  object-fit:cover;"
                                    alt="singnture">
                            @endif
                            <div class="heading mb-10">
                                <h3 class="heading__title mb-10">{{ $content->mainSection->title }}</h3>
                            </div>
                            <div class="position-relative">

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


                            </div>
                            @if ($content->mainSection->contact_type == 'contact')
                                <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>
                            @else
                                <a href="{{ $content->mainSection->contact_value }}" target="_blank"
                                    class="btn btn__primary btn__icon mt-20">
                                    <span>{{ $content->mainSection->button_text ?? 'View Website' }}</span>
                                    <i class="icon-arrow-right"></i>
                                </a>
                            @endif

                        </div>

                    </div>
                </div>
            </section>
        @elseif ($content->type == 2)
            <section id="about" class="about-layout1 bg-gray ms-pb">
                <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">{{ $content->secondarySection->title }}</h3>
                            </div>
                            <div class="position-relative">

                                <p>{{ $content->secondarySection->description }}</p>
                            </div>
                            @if ($content->secondarySection->contact_type == 'contact')
                                <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>
                            @else
                                <a href="{{ $content->secondarySection->contact_value }}" target="_blank"
                                    class="btn btn__primary btn__icon mt-20">
                                    <span>{{ $content->secondarySection->button_text ?? 'View Website' }}</span>
                                    <i class="icon-arrow-right"></i>
                                </a>
                            @endif
                        </div>

                        <div class="col-sm-12 col-md-12 col-lg-6">
                            <div class="about__img mb-10">
                                <div class="abtImg">
                                    <img src="{{ $content->secondarySection->getFirstMediaUrl('service_category_section_image') }}"
                                        alt="about">
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </section>
        @elseif ($content->type == 3)
            <section class="team-layout1 text-center pb-40 ms-pb">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-6 offset-lg-3">
                            <div class="heading text-center mb-50">

                                <h3 class="heading__title">{{ $content->title }}</h3>
                                <h2 class="heading__subtitle">{{ $content->short_description }}</h2>
                            </div><!-- /.heading -->
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">

                        @foreach ($content->products as $product)
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="member">
                                    <a @isset($product->product_link) href="{{ $product->product_link }}" @endisset>
                                        <div class="member__img">
                                            <img src="{{ $product->getFirstMediaUrl('service_category_product_image') }}"
                                                alt="product img">
                                        </div><!-- /.member-img -->
                                        <div class="member__info">
                                            <h5 class="member__name">{{ $product->name }}</h5>
                                        </div><!-- /.member-info -->
                                    </a>
                                </div><!-- /.member -->
                            </div><!-- /.col-lg-3 -->
                        @endforeach

                    </div> <!-- /.row -->
                    <div class="w-100 text-center">
                        <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>
                </div><!-- /.container -->
            </section><!-- /.Team layout 1  -->
        @endif
    @endforeach

    @include('layouts.components.contact')
@endsection