@extends('frontend.layout')

@section('pageHeading')
    {{ __('Home') }}
@endsection
@section('metaKeywords')
    @if (!empty($seoInfo))
        {{ $seoInfo->meta_keyword_home }}
    @endif
@endsection

@section('metaDescription')
    @if (!empty($seoInfo))
        {{ $seoInfo->meta_description_home }}
    @endif
@endsection

@section('content')
    @php
        $position = $currencyInfo->base_currency_symbol_position;
        $symbol = $currencyInfo->base_currency_symbol;
    @endphp
    <!-- Home-area start-->
    <section class="hero-banner hero-banner_v7 pb-60 bg-img bg-cover"
        data-bg-img="{{ asset('assets/front/theme3456/images/banner/hero-banner-bg-5.jpg') }}" data-aos="fade-up">
        <div class="container">
            <div class="row align-items-center gx-xl-5">
                <div class="col-lg-6">
                    <div class="banner-content mb-30">
                        <h1 class="title mb-20">{{ $staticInfo->title }}</h1>
                        <p class="text">{{ $staticInfo->text }}</p>
                    </div>
                    <div class="banner-filter-form mw-100 mb-40" data-aos="fade-up" data-aos-delay="100">
                        <div class="form-wrapper rounded-pill">
                            <form action="{{ route('all_equipment') }}" method="GET">
                                <div class="grid">
                                    <div class="item">
                                        <div class="form-group">
                                            <div class="form-block">
                                                <div class="icon color-primary"><i class="far fa-search"></i></div>
                                                <input class="form-control" type="text" name="keyword"
                                                    placeholder="{{ __('Search title') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="form-group">
                                            <div class="form-block">
                                                <div class="icon color-primary"><i class="far fa-th-large"></i></div>
                                                <select class="niceselect" id="category" name="category">
                                                    <option selected value="">{{ __('Categories') }}</option>
                                                    @foreach ($equipCategories as $category)
                                                        <option value="{{ $category->slug }}">{{ $category->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <button class="btn btn-lg btn-primary w-100 rounded-pill" type="submit"
                                            aria-label="button">{{ __('Search') }}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="banner-img mb-40 text-center">
                        <img class="lazyload" src="{{ asset('assets/front/theme3456/images/placeholder.png') }}"
                            data-src="{{ asset('assets/img/hero/' . $heroSectionImage) }}"
                            alt="Image">
                    </div>
                </div>
            </div>
        </div>

        <!-- Shapes -->
        <div class="shape">
            <img class="lazyload shape-1" src="{{ asset('assets/front/theme3456/images/placeholder.png') }}"
                data-src="{{ asset('assets/front/theme3456/images/shape/shape-5.png') }}">
            <img class="lazyload shape-2" src="{{ asset('assets/front/theme3456/images/placeholder.png') }}"
                data-src="{{ asset('assets/front/theme3456/images/shape/shape-6.png') }}">
            <img class="lazyload shape-3" src="{{ asset('assets/front/theme3456/images/placeholder.png') }}"
                data-src="{{ asset('assets/front/theme3456/images/shape/shape-7.png') }}">
            <img class="lazyload shape-4" src="{{ asset('assets/front/theme3456/images/placeholder.png') }}"
                data-src="{{ asset('assets/front/theme3456/images/shape/shape-8.png') }}">
            <img class="lazyload shape-5" src="{{ asset('assets/front/theme3456/images/placeholder.png') }}"
                data-src="{{ asset('assets/front/theme3456/images/shape/shape-9.png') }}">
            <img class="lazyload shape-6" src="{{ asset('assets/front/theme3456/images/placeholder.png') }}"
                data-src="{{ asset('assets/front/theme3456/images/shape/shape-10.png') }}">
            <img class="lazyload shape-7" src="{{ asset('assets/front/theme3456/images/placeholder.png') }}"
                data-src="{{ asset('assets/front/theme3456/images/shape/shape-11.png') }}">
        </div>

    </section>
    <!-- Home-area end -->

    <!-- Category-area start-->
    <section class="category-area category-area_v2 pt-100 pb-70">
        <div class="container">
            <div class="section-title title-center mb-50">
                <span class="subtitle">{{ $equipmentCategorySection->subtitle ?? '' }}</span>
                <h2 class="title mt-0">{{ $equipmentCategorySection->title ?? '' }}</h2>
            </div>
            <div class="swiper category-slider" id="category-slider-2">
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    @foreach ($equipCategories as $category)
                        <div class="swiper-slide">
                            <div class="card text-center">
                                <div class="card_icon mx-auto mb-25">
                                    <img class="lazyload" src="{{ asset('assets/front/theme3456/images/placeholder.png') }}"
                                    @if (!empty($category->image))
                                        data-src="{{ asset('assets/img/equipments/category-images/' . $category->image) }}"
                                        @else
                                        data-src="{{ asset('assets/img/noimage.jpg') }}"
                                        @endif
                                        alt="Image">
                                </div>
                                <div class="card_content">
                                    <h5 class="card_title lc-1 mb-0">
                                        <a href="#" target="_blank" title="{{__('Link')}}">
                                            {{ $category->name }}
                                        </a>
                                    </h5>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination swiper-pagination_circle position-static mt-25 mb-30"
                    id="category-slider-2-pagination"></div>
            </div>
        </div>
    </section>
    <!-- Category-area end -->

    <!-- Product-feature start -->
    @if ($secInfo->featured_equipment_section_status == 1)
        <section class="product-area featured-product pb-75">
            <div class="container">
                <div class="row">
                    <div class="col-12" data-aos="fade-up">
                        <div class="section-title title-inline mb-30">
                            <div>
                                <span class="subtitle">
                                    {{ !empty($equipmentSecInfo->featured_section_subtitle) ? $equipmentSecInfo->featured_section_subtitle : '' }}
                                </span>
                                <h2 class="title mw-100 mt-0">
                                    {{ !empty($equipmentSecInfo->featured_section_title) ? $equipmentSecInfo->featured_section_title : '' }}</h2>
                            </div>
                            <a href="{{ route('all_equipment') }}" class="btn btn-lg btn-primary rounded-pill"
                                title="{{ __('View All') }}" target="_self">{{ __('View All') }}</a>
                        </div>
                    </div>
                    <div class="col-12" data-aos="fade-up">
                        <div class="swiper product-slider" id="product-slider-1">
                            @if (count($allEquipment) == 0)
                                <div class="row text-center">
                                    <div class="col">
                                        <h3>{{ __('No Equipment Found') . '!' }}</h3>
                                    </div>
                                </div>
                            @else
                                <div class="swiper-wrapper">
                                    @foreach ($allEquipment as $equipment)
                                        <div class="swiper-slide">
                                            <div class="product-default product-default-5 mb-25">
                                                <figure class="product_img bg-light radius-md">
                                                    <a href="{{ route('equipment_details', ['slug' => $equipment->slug]) }}"
                                                        target="_self" title="{{__('Link')}}"
                                                        class="lazy-container ratio ratio-5-3">
                                                        <img class="lazyload"
                                                            src="{{ asset('assets/front/theme3456/images/placeholder.png') }}"
                                                            data-src="{{ asset('assets/img/equipments/thumbnail-images/' . $equipment->thumbnail_image) }}"
                                                            alt="Product">
                                                    </a>
                                                </figure>
                                                <div class="product_details border radius-md">
                                                    <div class="product_price">
                                                        <div class="price radius-sm">
                                                            @if (!empty($equipment->lowest_price))
                                                                <span class="font-sm">{{ __('Starts From') }}</span>
                                                                <div class="h4 mb-0 lh-1">
                                                                    @if (!empty($equipment->lowest_price))
                                                                        {{ $position == 'left' ? $symbol : '' }}{{ $equipment->lowest_price }}{{ $position == 'right' ? $symbol : '' }}
                                                                    @endif
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="product_title text-center mt-20 pb-20">
                                                        <span class="product_tag lh-1 font-sm mb-10">
                                                            <a href="{{ route('equipment_details', ['slug' => $equipment->slug]) }}" target="_blank" class="category-search"
                                                                data-category_slug="{{ $equipment->categorySlug }}">
                                                                {{ $equipment->categoryName }}
                                                            </a>
                                                        </span>
                                                        <h4 class="title lc-1 mb-0"><a
                                                                href="{{ route('equipment_details', ['slug' => $equipment->slug]) }}"
                                                                target="_self"
                                                                title="{{__('Link')}}">{{ strlen($equipment->title) > 25 ? mb_substr($equipment->title, 0, 25, 'UTF-8') . '...' : $equipment->title }}</a>
                                                        </h4>
                                                    </div>
                                                    <div class="product_bottom p-20 border-top text-center">
                                                        <a href="{{ route('equipment_details', ['slug' => $equipment->slug]) }}"
                                                            class="btn btn-md btn-primary rounded-pill"
                                                            title="{{ __('View') }}"
                                                            target="_self">{{ __('View') }}</a>
                                                        <div class="ratings justify-content-center mt-20">
                                                            <div class="rate bg-img"
                                                                data-bg-img="{{ asset('assets/front/theme3456/images/rate-star.png') }}">
                                                                <div class="rating-icon bg-img" style="width: {{ $equipment->avgRating * 20 . '%;' }}"
                                                                    data-bg-img="{{ asset('assets/front/theme3456/images/rate-star.png') }}">
                                                                </div>
                                                            </div>
                                                            <span class="ratings-total font-sm">
                                                                {{ number_format($equipment->avgRating, 2) }}
                                                                ({{ $equipment->ratingCount . ' ' . __('rating') }})
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                            <div class="swiper-pagination swiper-pagination_circle position-static mt-15 mb-25"
                                id="product-slider-1-pagination"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <!-- Product-feature end -->

    <!-- Equipment area start -->
    @if ($secInfo->equipment_section_status == 1)
        <section class="product-area pb-75">
            <div class="container">
                <div class="row">
                    <div class="col-12" data-aos="fade-up">
                        <div class="section-title title-center pb-30">
                            <span class="subtitle">
                                {{ !empty($equipmentSecInfo->subtitle) ? $equipmentSecInfo->subtitle : '' }}
                            </span>
                            <h2 class="title mw-100 mt-0 mb-30">
                                {{ !empty($equipmentSecInfo->title) ? $equipmentSecInfo->title : '' }}</h2>
                            <div class="tabs-navigation mb-20">
                                <ul class="nav nav-tabs" data-hover="fancyHover">
                                    <li class="nav-item active">
                                        <button class="nav-link hover-effect active btn-md rounded-pill" data-bs-toggle="tab" data-bs-target="#tab1" type="button">{{ __('All') }}</button>
                                    </li>
                                    @foreach ($equipment_featured_Categories as $eq_cat)
                                        <li class="nav-item">
                                            <button class="nav-link hover-effect btn-md rounded-pill" data-bs-toggle="tab"
                                                data-bs-target="#tab{{ $eq_cat->slug }}"
                                                type="button">{{ $eq_cat->name }}</button>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="tab-content" data-aos="fade-up">
                            <div class="tab-pane fade show active" id="tab1">
                                <div class="row">
                                    @foreach (array_slice($cat_equipments, 0, 6) as $equipment)
                                        <div class="col-lg-4 col-md-6">
                                            <div class="product-default product-default-5 mb-25">
                                                <figure class="product_img bg-light radius-md">
                                                    <a href="{{ route('equipment_details', ['slug' => $equipment->slug]) }}"
                                                        target="_self" title="{{__('Link')}}"
                                                        class="lazy-container ratio ratio-5-3">
                                                        <img class="lazyload"
                                                            src="{{ asset('assets/front/theme3456/images/placeholder.png') }}"
                                                            data-src="{{ asset('assets/img/equipments/thumbnail-images/' . $equipment->equipment->thumbnail_image) }}"
                                                            alt="Product">
                                                    </a>
                                                </figure>
                                                <div class="product_details border radius-md">
                                                    <div class="product_price">
                                                        <div class="price radius-sm">
                                                            <span class="font-sm">{{__('Starts From')}}</span>
                                                            <div class="h4 mb-0 lh-1">
                                                                @if (!empty($equipment->equipment->lowest_price))
                                                                        {{ $position == 'left' ? $symbol : '' }}{{ $equipment->equipment->lowest_price }}{{ $position == 'right' ? $symbol : '' }}
                                                                    @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="product_title text-center mt-20 pb-20">
                                                        <span class="product_tag lh-1 font-sm mb-10">
                                                            <a href="{{ route('equipment_details', ['slug' => $equipment->slug]) }}" target="_blank"
                                                                title="{{__('Link')}}">{{ $equipment->category->name }}</a>
                                                        </span>
                                                        <h4 class="title lc-1 mb-0"><a
                                                                href="{{ route('equipment_details', ['slug' => $equipment->slug]) }}"
                                                                target="_self" title="{{__('Link')}}">{{ strlen($equipment->title) > 25 ? mb_substr($equipment->title, 0, 25, 'UTF-8') . '...' : $equipment->title }}</a>
                                                        </h4>
                                                    </div>
                                                    <div class="product_bottom p-20 border-top text-center">
                                                        <a href="{{ route('equipment_details', ['slug' => $equipment->slug]) }}"
                                                            class="btn btn-md btn-primary rounded-pill"
                                                            title="{{ __('View') }}"
                                                            target="_self">{{ __('View') }}</a>
                                                        <div class="ratings justify-content-center mt-20">
                                                            <div class="rate bg-img"
                                                                data-bg-img="{{ asset('assets/front/theme3456/images/rate-star.png') }}">
                                                                <div class="rating-icon bg-img" style="width: {{ $equipment->avgRating * 20 . '%;' }}"
                                                                    data-bg-img="{{ asset('assets/front/theme3456/images/rate-star.png') }}">
                                                                </div>
                                                            </div>
                                                            <span class="ratings-total font-sm">
                                                                {{ number_format($equipment->avgRating, 2) }} ({{ $equipment->ratingCount . ' ' . __('rating') }})
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- product-default -->
                                        </div>
                                    @endforeach
                                </div>
                                <div class="text-center mt-15 mb-25" data-aos="fade-up">
                                    <a href="{{ route('all_equipment') }}" class="btn btn-lg btn-primary rounded-pill"
                                        title="{{ __('View All') }}" target="_self">{{ __('View All') }}</a>
                                </div>
                            </div>
                            @foreach ($equipment_featured_Categories as $eq_cat)
                                <div class="tab-pane fade" id="tab{{ $eq_cat->slug }}">
                                    <div class="row">
                                        @foreach ($eq_cat->equipmentContent as $equipment)
                                        <div class="col-lg-4 col-md-6">
                                            <div class="product-default product-default-5 mb-25">
                                                <figure class="product_img bg-light radius-md">
                                                    <a href="{{ route('equipment_details', ['slug' => $equipment->slug]) }}"
                                                        target="_self" title="{{__('Link')}}"
                                                        class="lazy-container ratio ratio-5-3">
                                                        <img class="lazyload"
                                                            src="{{ asset('assets/front/theme3456/images/placeholder.png') }}"
                                                            data-src="{{ asset('assets/img/equipments/thumbnail-images/' . $equipment->equipment->thumbnail_image) }}"
                                                            alt="Product">
                                                    </a>
                                                </figure>
                                                <div class="product_details border radius-md">
                                                    <div class="product_price">
                                                        <div class="price radius-sm">
                                                            <span class="font-sm">{{__('Starts From')}}</span>
                                                            <div class="h4 mb-0 lh-1">
                                                                @if (!empty($equipment->equipment->lowest_price))
                                                                        {{ $position == 'left' ? $symbol : '' }}{{ $equipment->equipment->lowest_price }}{{ $position == 'right' ? $symbol : '' }}
                                                                    @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="product_title text-center mt-20 pb-20">
                                                        <span class="product_tag lh-1 font-sm mb-10">
                                                            <a href="{{ route('equipment_details', ['slug' => $equipment->slug]) }}" target="_blank"
                                                                title="{{__('Link')}}">{{ $equipment->category->name }}</a>
                                                        </span>
                                                        <h4 class="title lc-1 mb-0"><a
                                                                href="{{ route('equipment_details', ['slug' => $equipment->slug]) }}"
                                                                target="_self" title="{{__('Link')}}">{{ strlen($equipment->title) > 25 ? mb_substr($equipment->title, 0, 25, 'UTF-8') . '...' : $equipment->title }}</a>
                                                        </h4>
                                                    </div>
                                                    <div class="product_bottom p-20 border-top text-center">
                                                        <a href="{{ route('equipment_details', ['slug' => $equipment->slug]) }}"
                                                            class="btn btn-md btn-primary rounded-pill"
                                                            title="{{ __('View') }}"
                                                            target="_self">{{ __('View') }}</a>
                                                        <div class="ratings justify-content-center mt-20">
                                                            <div class="rate bg-img"
                                                                data-bg-img="{{ asset('assets/front/theme3456/images/rate-star.png') }}">
                                                                <div class="rating-icon bg-img" style="width: {{ $equipment->avgRating * 20 . '%;' }}"
                                                                    data-bg-img="{{ asset('assets/front/theme3456/images/rate-star.png') }}">
                                                                </div>
                                                            </div>
                                                            <span class="ratings-total font-sm">
                                                                {{ number_format($equipment->avgRating, 2) }} ({{ $equipment->ratingCount . ' ' . __('rating') }})
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- product-default -->
                                        </div>
                                        @endforeach
                                    </div>
                                    <div class="text-center mt-15 mb-25"  data-aos="fade-up">
                                        <a href="{{ route('all_equipment') . "?category=". $eq_cat->slug }}" class="btn btn-lg btn-primary rounded-pill"
                                            title="{{ __('View All') }}" target="_self">{{ __('View All') }}</a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <!-- Product-area end -->

    <!-- Testimonial-area start -->
    @if ($secInfo->testimonial_section_status == 1)
        <section class="testimonial-area testimonial-area_v5 pb-100" data-aos="fade-up">
            <div class="container">
                <div class="section-title title-center mb-50">
                    <span class="subtitle">
                        {{ !empty($testimonialSecInfo->subtitle) ? $testimonialSecInfo->subtitle : '' }}
                    </span>
                    <h2 class="title mt-0">{{ !empty($testimonialSecInfo->title) ? $testimonialSecInfo->title : '' }}
                    </h2>
                </div>
                <div class="swiper" id="testimonial-slider-3">
                    @if (count($testimonials) == 0)
                        <div class="row text-center">
                            <div class="col">
                                <h3>{{ __('No Testimonial Found') . '!' }}</h3>
                            </div>
                        </div>
                    @else
                        <div class="swiper-wrapper">
                            @foreach ($testimonials as $testimonial)
                                <div class="swiper-slide">
                                    <div class="slider-item radius-md">
                                        <div class="client mb-25">
                                            <div class="client-info d-flex align-items-center">
                                                <div class="client-img">
                                                    <div class="lazy-container ratio ratio-1-1 rounded-pill">
                                                        @if (is_null($testimonial->image))
                                                            <img class="lazyload"
                                                                src="{{ asset('assets/front/theme3456/images/placeholder.png') }}"
                                                                data-src="{{ asset('assets/img/profile.jpg') }}"
                                                                alt="Person Image">
                                                        @else
                                                            <img class="lazyload"
                                                                src="{{ asset('assets/front/theme3456/images/placeholder.png') }}"
                                                                data-src="{{ asset('assets/img/clients/' . $testimonial->image) }}"
                                                                alt="Person Image">
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="content">
                                                    <h6 class="name">{{ $testimonial->name }}</h6>
                                                    <span class="designation">{{ $testimonial->occupation }}</span>
                                                </div>
                                            </div>
                                            <span class="icon"><i class="fal fa-quote-right"></i></span>
                                        </div>
                                        <div class="quote">
                                            <p class="text mb-0">
                                                {{ $testimonial->comment }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                    <div class="swiper-pagination swiper-pagination_circle position-static mt-20" id="testimonial-slider-3-pagination"></div>
                </div>
            </div>
        </section>
    @endif
    <!-- Testimonial-area end -->

@endsection

@section('script')
  <script type="text/javascript" src="{{ asset('assets/js/equipment.js') }}"></script>
  <script type="text/javascript" src="{{ asset('assets/js/product.js') }}"></script>
@endsection