@extends('frontend::layouts.app')
@section('title', $metaTags['metaTitle'])
@section('description', $metaTags['metaDescription'])
@section('keywords', $metaTags['metaKeywords'])
@section('other_meta_tags')
    {!! $metaTags['otherMetaTags'] !!}
@endsection
@section('content')
    <div id="pageWrapper" class="AmcPage InnerPage">
        <!-- AMC -->
        <section id="Contract">
            <div class="CustomeContainer">
                <div class="tleWrap wow animate__fadeInUp" data-wow-duration="1s">
                    <h2 class="mTle">{{ $cms->section_title }}</h2>
                </div>
                <div class="dFlx">
                    <div class="lfSd">
                        <div class="cntWrap wow animate__fadeIn" data-wow-duration="1s">
                            <div class="ttl">{!! $cms->sub_title !!}</div>
                            <div class="smtl">{{ $cms->title_part_one }}</div>
                            <div class="bigtl">{{ $cms->title_part_two }}</div>
                            <div class="ttl">{{ $cms->sub_description }}</div>
                        </div>
                    </div>
                    <div class="ritSd">
                        <div class="slde">
                            @if ($cms->images_value)
                                <div class="ContractSec owl-carousel wow animate__fadeIn" data-wow-duration="1.2s">
                                    @foreach ($cms->images_value as $image)
                                        <div class="item">
                                            <div class="backImg">
                                                <img src="{{ $image['url'] }}" width="792" height="600"
                                                    alt="Contract {{ $loop->iteration }}">
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="navBtn">
                                    <button class="OwlNext customSlideNav" type="button" aria-label="Next Slide">
                                        <div class="icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="13.723" height="28.231"
                                                viewBox="0 0 13.723 28.231">
                                                <g id="chairs" transform="translate(0)">
                                                    <g id="Group_20867" data-name="Group 20867" transform="translate(0)">
                                                        <path id="Path_101737" data-name="Path 101737"
                                                            d="M146.382,208.269l-.908.827-.646.585-.787.706a5.881,5.881,0,0,0-1.756,2.987,1.239,1.239,0,0,1-1.271.969,1.2,1.2,0,0,1-1.191-1.07,3.982,3.982,0,0,1,1.009-3.37l6.458-7.043a5.079,5.079,0,0,0,.383-6.357l-4.4-6.175a5.084,5.084,0,0,1-.928-2.987,1.236,1.236,0,0,1,1.07-1.211,1.213,1.213,0,0,1,1.372.827,8.915,8.915,0,0,0,2.079,3.39l5.166,5.348a5.422,5.422,0,0,1,1.332,2.341.428.428,0,1,1-.827.222,4.626,4.626,0,0,0-1.11-1.958l-5.186-5.328a9.9,9.9,0,0,1-2.26-3.713.365.365,0,0,0-.444-.262.4.4,0,0,0-.343.383,4.2,4.2,0,0,0,.767,2.482l4.4,6.175a5.922,5.922,0,0,1-.444,7.427l-6.458,7.043a3.1,3.1,0,0,0-.787,2.644.38.38,0,0,0,.383.343.387.387,0,0,0,.4-.3,6.725,6.725,0,0,1,2.018-3.411l1.15-1.029.02-.02,6.579-6.054A4.488,4.488,0,0,0,152.638,200a.428.428,0,1,1,.848.121,4.926,4.926,0,0,1-.4,1.413l-.4.747a4.523,4.523,0,0,1-.545.686,2.308,2.308,0,0,1-.222.222m-.686.646-4.2,3.834Z"
                                                            transform="translate(-139.769 -186.113)" />
                                                    </g>
                                                </g>
                                            </svg>
                                        </div>
                                    </button>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Labour -->
        <section id="Labour">
            <div class="CustomeContainer">
                <div class="dFlx">
                    <div class="lftSd">
                        <div class="cnt-Wrapper wow animate__fadeInUp" data-wow-duration="1s">
                            <div class="rotateTxt">{{ $cms->section_two_title_part_one }}
                                <span class="rotate"></span>
                            </div>
                        </div>
                    </div>
                    <div class="ritSd wow animate__fadeInRight" data-wow-duration="1s">
                        <div class="wrapper">
                            <div class="imgWrap">
                                <img src="{{ $cms->section_two_image_value }}" loading="lazy" width="948" height="500"
                                    alt="{{ $cms->section_two_title_part_one }}">
                            </div>
                            <div class="inCnt">
                                <div class="flx">
                                    <div class="bgtl">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="104.245" height="142.445"
                                            viewBox="0 0 104.245 142.445">
                                            <path id="Path_105854" data-name="Path 105854"
                                                d="M52.752,0C20.214,0,0,27.371,0,71.436c.242,44.462,19.57,71.008,51.7,71.008,33.391,0,52.542-26.19,52.542-71.851C104.245,26.39,85,0,52.752,0m-.211,116.907a12.862,12.862,0,0,1-9.4-3.994c-6.435-6.479-9.764-20.822-9.625-41.485-.139-20.849,3.268-35.371,9.851-42a12.321,12.321,0,0,1,8.969-3.895c12.175,0,18.61,15.726,18.61,45.476,0,30.024-6.363,45.894-18.4,45.894"
                                                transform="translate(0)" />
                                        </svg>
                                    </div>
                                    <div class="sbttl">{{ $cms->counter_title }} <br>
                                        <span>{{ $cms->counter_subtitle }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Services -->
        <section id="Services">
            <div class="container">
                <div class="dFlx">
                    <div class="lFtsd wow animate__fadeInLeft" data-wow-duration="1s">
                        <div class="bgImg">
                            <img src="{{ $cms->section_three_image_value }}"  width="927" height="600"
                                alt="{{ $cms->section_three_bg_title }}">
                        </div>
                    </div>
                    <div class="ritSd wow animate__fadeInUp" data-wow-duration="1s">
                        <div class="tleWrap">
                            <div class="sTle">{{ $cms->section_three_bg_title }}</div>
                            <h2 class="mTle">{{ $cms->section_three_title }}</h2>
                        </div>
                        <div class="listing">
                            <ul>
                                @foreach ((is_string($cms->section_three_lists) ? json_decode($cms->section_three_lists, true) : $cms->section_three_lists) ?? [] as $list)
                                    <li>{{ $list }}</li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="txt listing">{!! $cms->section_three_sub_description !!} </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Dealer -->
        <section id="Dealers">
            <div class="CustomeContainer">
                <div class="dFlx">
                    <div class="lftSd">
                        <div class="cntSec">
                            <div class="maintl  wow animate__fadeInUp" data-wow-duration="1s">
                                {{ $cms->section_four_title }}</div>
                            <a class="link cta-button  wow animate__fadeInUp" data-wow-duration="1.1s"
                                href="{{ route('contact') }}" aria-label="Contact us page" data-label="Contact us">
                                <span>Contact us</span></a>
                        </div>
                    </div>
                    <div class="ritSec  wow animate__fadeInRight" data-wow-duration="1s">
                        <div class="bgImg">
                            <img src="{{ $cms->section_four_image_value }}" loading="lazy" width="841"
                                height="545" alt="Dealer">
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('js')
    <!-- owl carousel  -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <!-- Type Speed  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"
        integrity="sha512-BdHyGtczsUoFcEma+MfXc71KJLv/cd+sUsUaYYf2mXpfG/PtBjNXsPo78+rxWjscxUYN2Qr2+DbeGGiJx81ifg=="
        crossorigin="anonymous"></script>
    <script>
        // ContractSec
        $(document).ready(function() {
            $('.ContractSec').owlCarousel({
                loop: true,
                nav: false,
                dots: false,
                items: 1.2,
                margin: 10,
                responsive: {
                    576: {
                        items: 1.5,
                        margin: 30,
                    }
                }
            });
            var contractCarousel = $('.ContractSec');
            $('.customSlideNav.OwlNext').click(function() {
                contractCarousel.trigger('next.owl.carousel');
            });
        });

        // Rotating-Words
        window.addEventListener("load", function() {
            var sectionTwoTitles = @json($cms->section_two_titles ?? []);

            // Ensure sectionTwoTitles is an array, handling JSON decoding if necessary
            sectionTwoTitles = Array.isArray(sectionTwoTitles) ? sectionTwoTitles : [];

            // Replace empty string with default text if the first element is empty
            if (sectionTwoTitles.length > 0 && sectionTwoTitles[0] === '') {
                sectionTwoTitles[0] = ''; // Replace with your default text if needed
            }

            // Initialize Typed.js with sectionTwoTitles as strings
            var typing = new Typed(".rotate", {
                strings: sectionTwoTitles,
                typeSpeed: 100,
                backSpeed: 40,
                loop: true,
            });
        });
    </script>
@endpush