@extends('frontend.layouts.app')

@section('title')
    {{ app_name() }}
@endsection

@section('content')
    <!-- Start slider section -->
    <section class="hero__slider--section">
        <div class="hero__slider--inner hero__slider--activation swiper position-relative">
            <div class="hero__slider--wrapper swiper-wrapper">
                @foreach ($slider as $home_slider)
                    <div class="swiper-slide ">
                        <div class="hero__slider--items style4" style="background-image:url({{ $home_slider->image }})">
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-12 col-md-12">
                                        <div class="slider__content">
                                            <h2 class="slider__maintitle style4 h1 text-center"
                                                style="color: {{ $home_slider->font_color }}">
                                                {{ $home_slider->title }}
                                            </h2>
                                            <div class="row">
                                                <div class="col"></div>
                                                <div class="col-lg-5">
                                                    <p class="slider__desc style4 text-center"
                                                        style="color: {{ $home_slider->font_color }}">
                                                        {{ $home_slider->description }}
                                                    </p>
                                                </div>
                                                <div class="col"></div>
                                            </div>

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

                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </section>
    <section class="search__filter--section section--padding">
        <div class="container">

            <div class="section__heading style2 text-center mb-50">
                <h2 class="section__heading--maintitle">Search by Products</h2>
                <div class="row">
                    <div class="col"></div>
                    <div class="col-md-4">
                        <p class="section__heading--desc">Filter your results by entering your home to ensure
                            you find the parts that fit.</p>
                    </div>
                    <div class="col"></div>
                </div>
            </div>
            <div class="section__heading style2 text-center mb-60 category-search">

                <form class="search__filter--form__style2 d-flex home-filter" action="{{ route('frontend.product') }}"
                    method="GET">
                    <div class="search__filter--select select search__filter--width category">
                        <select name="category" class="search__filter--select__field">
                            <option value="0">Select Category</option>
                            @foreach ($category as $c)
                                <option value="{{ $c->slug_name }}">{{ $c->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="search__filter--select search__filter--width all-btn  keyword-search">
                        <input type="text" class="search__filter--select__field" name="keyword"
                            placeholder="What are you looking for ?...">
                        <div class="all-btn" style="position: absolute;right: 0px;">
                            <button class="search__filter--btn primary__btn float-left" type="submit" id="product_filter">
                                <span>Search</span>
                                <i class="fa fa-search icon"></i></button>
                        </div>
                    </div>
                    {{-- <div class="search__filter--select search__filter--width all-btn">
                        <input type="text" class="search__filter--select__field" name="keyword"
                            placeholder="Search Keywords...">
                    </div>
                    <div class="all-btn">
                        <button class="search__filter--btn primary__btn float-left" type="submit" id="product_filter">
                            <span>Search</span>
                            <i class="fa fa-search icon"></i></button>
                    </div> --}}

                </form>
            </div>

            <div class="section__heading style2 text-center mb-50">
                <h2 class="section__heading--maintitle">Our Featured Service</h2>
                <div class="row">
                    <div class="col"></div>
                    <div class="col-md-4">
                        <p class="section__heading--desc">Filter your results by entering your home to ensure you find the
                            parts that fit.</p>
                    </div>
                    <div class="col"></div>
                </div>
            </div>

            <div class="row  mb-10">
                @php $i = 0; @endphp
                @foreach ($package as $featured_package)
                    <div class="col-lg-{{ $i == 0 ? '12' : '6' }} col-md-6 pr-7">
                        <a href="{{ $featured_package->slug_name }}">
                            <div class="banner__items position__relative">
                                <img class="banner__thumbnail--img img-index-home" src="{{ $featured_package->image }}"
                                    alt="banner-img" style="height:auto;">
                                <div class="img-div home-package head-h2">
                                    <h2 class="banner__content--style4__title font__style mt-15 mb-10">
                                        {{ $featured_package->package_name }}
                                    </h2>
                                    <div class="row">
                                        <div class="col"></div>
                                        <div class="col-md-9">
                                            {!! \Illuminate\Support\Str::limit($featured_package->package_description, 150, $end = '...') !!}
                                        </div>
                                        <div class="col"></div>
                                    </div>
                                </div>

                            </div>
                        </a>
                    </div>

                    @php $i++; @endphp
                    @if ($i == 3)
                    @break
                @endif
            @endforeach
            @if (count($package) > 3)
                <div class="text-center">
                    <a href={{ route('frontend.package') }}?is_feature=1><button
                            class="contact__form--btn primary__btn" type="submit">
                            <span>View all package</span></button></a>
                </div>
            @endif
        </div>
    </div>
</section>
@if ($section3)
    @if ($section3->section_type == 2)
        <section class="about__section section--padding"
            style="background:url({{ $section3->background_image }}); background-size: cover;">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="about__thumb d-flex">
                            <div class=" mt-35 mb-35">
                                <img class="about__thumb--img border-radius-5 sec3-img-left"
                                    src="{{ $section3->featured_image }}" alt="about-thumb">
                            </div>

                        </div>
                    </div>
                    <div class="col-md-6 position-relative">
                        <div class="about__content absolute-vertical-middle sec3-section">
                            {!! $section3->name !!}
                            <a href="{{ url('product') }}">
                                <div class="all-btn">
                                    <div class="product__card--btn primary__btn">

                                        <span class="sec3-text">Learn More</span>
                                        <img class="sec3-img" src="assets/img/right-arrow.png">
                                    </div>
                                </div>

                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @else
        <section class="about__section section--padding mb-95"
            style="background:url({{ $section3->background_image }});background-size: cover;">
            <div class="container">
                <div class="row">

                    <div class="col-md-6 position-relative">
                        <div class="about__content absolute-vertical-middle sec3-section">
                            {!! $section3->name !!}

                            <a href="{{ url('product') }}">
                                <div class="all-btn">
                                    <div class="product__card--btn primary__btn">

                                        <span class="sec3-text">Learn More</span>
                                        <img class="sec3-img" src="assets/img/right-arrow.png">
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="about__thumb d-flex">
                            <div class=" mt-35 mb-35">
                                <img class="about__thumb--img border-radius-5 sec3-img-right"
                                    src="{{ $section3->featured_image }}" alt="about-thumb">
                            </div>

                        </div>
                    </div>


                </div>
            </div>
        </section>
    @endif
@endif


<div class="product__section--inner software">
    <div class="row">
        <div class="col-lg-12">
            <div class="single__product--wrapper app-link">
                <div class="single__product--topbar d-flex align-items-center">
                    <div class="col-lg-6 col-md-6 home-software">
                        <div class="single__product--thumbnail__preview swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="single__product--thumbnail">
                                        <a class="single__product--thumbnail__link display-block">
                                            <img class="single__product--thumbnail__img"
                                                src="assets/img/home/ravoz-smarthome-app.png" alt="software-img">
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="head-h2">
                            <h2 class="single__product--title h2">Smart App</h2>
                            <div class="product__card--price">
                                <p class="software-text">Smart app users can automate and control their smart home
                                    systems and appliances, such as lights, thermostats, and security systems.Users can
                                    connect with their devices and access information and services using voicce
                                    commands, utilising virtual assistant apps like Google assistant and Amazon Alexa.
                                </p>
                            </div>
                            <br>
                            <div class="product__card--price mb-30">
                                <span class="current__price"><a
                                        href="https://play.google.com/store/apps/details?id=com.pradoapp.bundle&pcampaignid=web_share&pli=1"
                                        target="_blank"><img src="assets/img/home/play-store.svg" alt="icon-img"
                                            width="104" height="41"></a></span>
                                <span class="current__price"><a
                                        href="https://apps.apple.com/ae/app/ravoz/id1620492298" target="_blank"><img
                                            src="assets/img/home/play-store1.svg" alt="icon-img" width="104"
                                            height="41"></a></span>

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

                </div>
            </div>

        </div>
    </div>
</div>
<!-- Start product section -->
@if ($products)
    @if ($products->status == 1)
        <section class="product__section section--padding"
            style="background-color:{{ $products->background_color }};">
            <div class="container">

                <div class="section__heading mb-30 text-white mt-50 mmt-0 get-smart">
                    <h2 class="section__heading--maintitle">GET SMART SAVE BIG</h2>
                </div>
                <div class="product__section--inner mb-50">
                    <div class="row">
                        <div class="col-12">
                            <div class="single__product--wrapper">
                                <div class="single__product--topbar d-flex align-items-center">

                                    <div
                                        class="single__product--preview single__product--thumbnail__preview swiper swiper-initialized swiper-horizontal swiper-pointer-events">


                                        <div class="swiper-wrapper">

                                            @foreach ($productimages as $img)
                                                <div class="swiper-slide">
                                                    <div class="product__media--preview__items">
                                                        <a class="product__media--preview__items--link glightbox"
                                                            data-gallery="product-media-preview"
                                                            href="{{ $img->featured_image }}"><img
                                                                class="product__media--preview__items--img"
                                                                src="{{ $img->featured_image }}"
                                                                alt="product-media-img"></a>
                                                    </div>
                                                </div>
                                            @endforeach

                                        </div>

                                    </div>

                                    <div class="single__product--content">

                                        <h3 class="single__product--title h2 second-last-head">
                                            {{ $products->product_name }}</h3>
                                        {!! $products->product_description !!}

                                        <ul class="single__product--action d-flex align-items-center">
                                            <li class="single__product--action__list">
                                                <a href="{{ $products->slug_name }}">
                                                    <div class="all-btn">
                                                        <div class="product__card--btn primary__btn">

                                                            <span class="sec3-text">Learn More</span>
                                                            <img class="sec3-img" src="assets/img/right-arrow.png">
                                                        </div>
                                                    </div>
                                                </a>
                                            </li>

                                        </ul>
                                    </div>


                                </div>

                                <div class="single__product--nav gallery-thumbs swiper">


                                    <div class="swiper-wrapper">
                                        @foreach ($productimages as $img)
                                            <div class="swiper-slide">
                                                <div class="product__media--nav__items">
                                                    <img class="product__media--nav__items--img"
                                                        src="{{ $img->featured_image }}" alt="product-nav-img">
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="swiper__nav--btn swiper-button-next">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            class=" -chevron-right">
                                            <polyline points="9 18 15 12 9 6"></polyline>
                                        </svg>
                                    </div>
                                    <div class="swiper__nav--btn swiper-button-prev">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            class=" -chevron-left">
                                            <polyline points="15 18 9 12 15 6"></polyline>
                                        </svg>
                                    </div>



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

                    </div>
                </div>
                <!-- </div> -->
            </div>
        </section>
    @endif
@endif
@if ($iconsection)
    @if ($iconsection->section_type == 3)
        <section class="product__section section--padding bg-dark homebottom">
            <div class="container">
                <div class="row row-cols-1">
                    <div class="col">
                        <div class="error__content text-center home-last-bottom head-h2 mb-30">
                            <img class="error__content--img display-block mb-50"
                                src="{{ $iconsection->background_image }}" alt="error-img">
                            <!-- <h2 class="single__product--title h1">Program installation</h2> -->
                            {!! $iconsection->name !!}
                        </div>

                        <div class="row justify-content-center mt-20 details  last-section-width">
                            @foreach ($iconimages as $img)
                                <div class="col-lg-3 col-md-4 col-sm-6 col-6 mb-30 text-center">
                                    <div class="categories__card style2">
                                        <a class="categories__card--link__style2 align-items-center">
                                            <div class="categories__thumbnail text-center">
                                                <img class="categories__thumbnail--img text-center"
                                                    src="{{ $img->image }}" alt="categories-img">
                                            </div>
                                        </a>
                                    </div>
                                    <h2 class="categories__content--title">{{ $img->icon_title }}</h2>
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>
        </section>
    @elseif($iconsection->section_type == 2)
        <section class="product__section section--padding bg-dark homebottom">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <img class="error__content--img display-block mb-50"
                            src="{{ $iconsection->background_image }}" alt="error-img">
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="error__content text-center home-last-bottom head-h2">
                            {!! $iconsection->name !!}
                        </div>

                        <div class="row  justify-content-center mt-20">
                            @foreach ($iconimages as $img)
                                <div class="col-lg-3 col-md-4 col-sm-6 col-6 text-center">
                                    <div class="categories__card style2">
                                        <a class="categories__card--link__style2 align-items-center">
                                            <div class="categories__thumbnail text-center">
                                                <img class="categories__thumbnail--img text-center"
                                                    src="{{ $img->image }}" alt="categories-img">
                                            </div>
                                        </a>
                                    </div>
                                    <h2 class="categories__content--title">{{ $img->icon_title }}</h2>
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
        </section>
    @elseif($iconsection->section_type == 1)
        <section class="product__section section--padding bg-dark homebottom">
            <div class="container">
                <div class="row">

                    <div class="col-lg-6 col-md-6">
                        <div class="error__content text-center home-last-bottom head-h2">
                            {!! $iconsection->name !!}
                        </div>

                        <div class="row  justify-content-center mt-20">
                            @foreach ($iconimages as $img)
                                <div class="col-lg-3 col-md-4 col-sm-6 col-6 text-center">
                                    <div class="categories__card style2">
                                        <a class="categories__card--link__style2 align-items-center">
                                            <div class="categories__thumbnail text-center">
                                                <img class="categories__thumbnail--img text-center"
                                                    src="{{ $img->image }}" alt="categories-img">
                                            </div>
                                        </a>
                                    </div>
                                    <h2 class="categories__content--title">{{ $img->icon_title }}</h2>
                                </div>
                            @endforeach
                        </div>

                    </div>
                    <div class="col-lg-6 col-md-6">
                        <img class="error__content--img display-block mb-50"
                            src="{{ $iconsection->background_image }}" alt="error-img">
                    </div>
                </div>
            </div>
        </section>
    @endif
@endif
@endsection






@section('pagescript')
<script>
    $("#product_filter").click(function() {
        var category = $('select[name=category]').find(':selected').val();
        var keyword = $("input[name='keyword']").val();
        if (category == 0 && keyword == '') {
            return false;
        } else {
            return true
        }
    });
</script>
@endsection