@extends('frontend.layouts.app')
@section('content')
    <!-- Hero Slider Area Start -->
    <section class="hero-slider-area">
        <div class="hero-slider">
            <div class="hero-slider-inner owl-carousel">
                @foreach ($sliders as $slider)
                    <div class="hero-slider-item" style="background-image: url('/{{ $slider->image }}');">
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!-- End Hero Slider Area -->

    <!-- About Section -->
    <section class="choose-section relative">
        <div class="container">
            <div class="row justify-content-center pt-2">
                <div class="col-md-4 pb-2">
                    <div class="choose-box text-center">
                        <img src="/icon1.png">
                        <h5>Property Inspection</h5>
                        <p>We inspect your property with much concentration.</p>
                    </div>
                </div>
                <div class="col-md-4 pb-2">
                    <div class="choose-box text-center">
                        <img src="/icon2.png">
                        <h5>Expert Workers</h5>
                        <p>Our workers are expert in their own workspace.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="choose-box text-center">
                        <img src="/icon3.png">
                        <h5>Quality Services</h5>
                        <p>Our quality services are top priority to us.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End About Section -->

    <!-- Service Section -->
    <section class="service-section relative" id="service">
        <div class="container">
            <div class="about-title text-center pb-2">
                <h2 class="pb-2"><span>Our</span> Services</h2>
                <p>{!! $information->service_details !!}</p>
            </div>
            <div class="row justify-content-center pt-2">
                @foreach ($home_services as $service)
                    <div class="col-md-6 col-12 pb-4">
                        <div class="service-block relative">
                            <div class="inner-box relative cmn-transition">
                                <div class="row">
                                    <div class="col-12 m-auto">
                                        <img class="inner-image" src="/{{ $service->image }}" alt="" width="100%">
                                    </div>
                                    <div class="col-12">
                                        <h4>
                                            <a href="/service/{{ $service->slug }}">{{ $service->title }}</a>
                                        </h4>
                                        <span>{{ $service->short_details }}</span>
                                        <div class="service-link mt-3">
                                            <a href="/service/{{ $service->slug }}">View Service</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!-- End Service Section -->
    <!-- ======= Gallery Section ======= -->
    <section class="gallery-section text-center relative p-4" id="portfolio">
        <div class="container">
            <div class="about-title pb-2">
                <h2 class="pb-2"> <span>Some of our </span>Amazing Works</h2>
            </div>
            <div class="row awesome-project-content portfolio-container">
                <div class="tz-gallery">
                    <div class="row">
                        @foreach ($galleries as $gallery)
                            <div class="col-sm-12 col-md-4">
                                <a class="lightbox" href="/{{ $gallery->image }}">
                                    <img src="/{{ $gallery->image }}" alt="{{ $gallery->title }}">
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Counter Section Area -->
    <section id="counter-section" class="counter-section bg-overlay"
        style="background-image: url('https://studiodhakaltd.com/wp-content/uploads/2019/06/Facts-Background-Image.jpg');">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="about-title">
                        <h2 class="pb-2"><span>Some Interesting</span><br>Facts</h2>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="about-title">
                        <p>{!! $information->counter_details !!}</p>
                    </div>
                    <div class="row text-center">
                        <div class="col-md-4">
                            <div class="counterup">
                                <h2 class="counter-text" data-number="{{ $information->counter_number_1 }}"></h2>
                                <p>Work order Completed</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="counterup">
                                <h2 class="counter-text" data-number="{{ $information->counter_number_2 }}"></h2>
                                <p>Total Vendor</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="counterup border-none">
                                <h2 class="counter-text" data-number="{{ $information->counter_number_3 }}"></h2>
                                <p>Total states covered</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Counter Section Area -->

    <!-- Client Section -->
    <section class="client-section text-center relative p-4">
        <div class="container">
            <div class="about-title pb-2">
                <h2 class="pb-2"> <span>Our</span> Partners</h2>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="client-sliders">
                        <div class="client-slide-inner client-slider-arrow owl-carousel">
                            @foreach ($clients as $client)
                                <div class="client-slide-item centered p-2">
                                    <div class="client-top">
                                        <img src="/{{ $client->image }}"
                                            style="height: 120px;
                                        object-fit: contain;"
                                            alt="client">
                                        <h4 class="client_name">{{ $client->name }}</h4>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Client Section -->

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3058.5327452974984!2d-75.29844779999999!3d39.9518402!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c6c19e9c43b5d5%3A0x5276411e602330cb!2s643%20Turner%20Ave%2C%20Drexel%20Hill%2C%20PA%2019026%2C%20USA!5e0!3m2!1sen!2sbd!4v1711517257324!5m2!1sen!2sbd" width="100%" height="500" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
@endsection

@section('js')
    {{-- <script type="text/javascript">
        $(document).ready(function() {
            if ($(this).scrollTop() < 10) {
                $('.main-nav').addClass('active-bg');
                $('.menu-link').addClass('menu-link-black');
            }
            $(window).scroll(function() {
                if ($(this).scrollTop() < 10) {
                    $('.main-nav').addClass('active-bg');
                    $('.menu-link').addClass('menu-link-black');
                } else {
                    $('.main-nav').removeClass('active-bg');
                    $('.menu-link').removeClass('menu-link-black');
                }
            })
        });
    </script> --}}
@endsection