@extends('customer.header')
@section('customerContent')
  <!-- wrapper  -->
  <div id="wrapper">
    <!-- content -->
    <div class="content">
      <!--  section  -->
      <section class="hero-section gray-bg">
        <div class="bg-wrap">
          <div class="half-hero-bg-media full-height">
            <div class="slider-progress-bar">
              <span>
                <svg class="circ" width="30" height="30">
                  <circle class="circ2" cx="15" cy="15" r="13" stroke="rgba(255,255,255,0.4)" stroke-width="1"
                    fill="none" />
                  <circle class="circ1" cx="15" cy="15" r="13" stroke="#fff" stroke-width="2" fill="none" />
                </svg>
              </span>
            </div>
            <div class="slideshow-container">
              <!-- slideshow-item -->
              @foreach ($mainSlider as $slider)
                <div class="slideshow-item">
                  <div class="bg"
                    data-bg="{{ asset('/consultant/public/uploads/sliders') }}/{{ $slider->slider_image }}"></div>
                </div>
              @endforeach
              <!--  slideshow-item end  -->
            </div>
          </div>
        </div>
        <div class="container">
          <div class="hero-title hero-title_small">
            <h4>FIND MY CONSULTANT</h4>
            <h2>
              Accountants, CA, Legal,<br />
              Advisors and More...
            </h2>
          </div>
          {{-- <div class="main-search-input-wrap shadow_msiw">
            <div class="main-search-input fl-wrap">
              <div class="main-search-input-item">
                <input type="text" placeholder="What are you looking for?" value="" />
              </div>
              <div class="main-search-input-item">
                <select data-placeholder="All Categories" class="chosen-select no-search-select">
                  <option>All Category</option>
                  <option>CA</option>
                  <option>Accountant</option>
                  <option>Lawyer</option>
                  <option>Financial Advisor</option>
                  <option>Legal Advisor</option>
                  <option>Loan Consultants</option>
                </select>
              </div>
              <div class="main-search-input-item">
                <select data-placeholder="All Categories" class="chosen-select">
                  <option>All Cities</option>
                  <option>Noida</option>
                  <option>Delhi</option>
                  <option>Gurgaon</option>
                  <option>Greater Noida</option>
                  <option>Others</option>
                </select>
              </div>
              <button class="main-search-button color-bg" onclick="window.location.href='listing.html'">
                Search <i class="far fa-search"></i>
              </button>
            </div>
          </div> --}}
        </div>
      </section>
      <!--  section  end-->

      <!-- section -->
      <section class="gray-bg small-padding">
        <div class="container">
          <div class="row">
            <div class="col-md-4">
              <div class="section-title fl-wrap">
                <h4>Browse Hot Offers</h4>
                <h2>Top Consultants</h2>
              </div>
            </div>
            <div class="col-md-8">
              <div class="listing-filters gallery-filters">
                <a href="#" class="gallery-filter gallery-filter-active" data-filter="*">
                  <span>Sponsored</span></a>
                <a href="#" class="gallery-filter" data-filter=".for_sale">
                  <span>New Registered</span></a>
                <a href="#" class="gallery-filter" data-filter=".for_rent">
                  <span>Top Consultants</span></a>
              </div>
            </div>
          </div>
          <div class="clearfix"></div>
          <!-- grid-item-holder-->
          <div class="grid-item-holder gallery-items gisp fl-wrap">
            <!-- gallery-item-->
            @foreach ($consultants as $consultant)
              <div
                class="gallery-item @if ($consultant->view_count > 5) for_rent @endif @if ($consultant->created_at->isToday()) for_sale @endif">
                <!-- listing-item -->
                <div class="listing-item">
                  <article class="geodir-category-listing fl-wrap">
                    <div class="geodir-category-img fl-wrap">
                      <a href="{{ route('customer.consultant-detail', $consultant->slug) }}"
                        class="geodir-category-img_item">
                        <img
                          src="@if (isset($consultant->company_logo)) {{ asset('consultant/public/uploads/buyer') . '/' . $consultant->company_logo }} @else {{ asset('allUsers/customer/images/all/3.jpg') }} @endif"
                          alt="" />
                        <div class="overlay"></div>
                      </a>
                      <div class="geodir-category-location">
                        <a href="javascript:;" class="single-map-item"><i class="fas fa-map-marker-alt"></i>
                          <span>{{ @$consultant->stateName->name }}
                            {{ @$consultant->cityName->name }}</span></a>
                      </div>

                      @if (Auth::guard('buyer')->check() && Auth::guard('buyer')->user()->id != $consultant->id)
                        @if ($consultant->IsInMyWishlist)
                          <a href="{{ route('buyer.remove-from-wishlist', $consultant->id) }}"
                            class="geodir_save-btn tolt" data-microtip-position="left" data-tooltip="Remove">
                            <span><i class="fal fa-heart-broken"></i></span>
                          </a>
                        @else
                          <a href="{{ route('buyer.add-to-wishlist', $consultant->id) }}" class="geodir_save-btn tolt"
                            data-microtip-position="left" data-tooltip="Save">
                            <span><i class="fal fa-heart"></i></span>
                          </a>
                        @endif
                      @endif

                      <div class="geodir-category-listing_media-list">
                        {{-- <span><i class="fas fa-camera"></i> 8</span> --}}
                      </div>
                    </div>
                    <div class="geodir-category-content fl-wrap">
                      <h3 class="title-sin_item">
                        <a
                          href="{{ route('customer.consultant-detail', $consultant->slug) }}">{{ ucwords($consultant->company_name) }}</a>
                      </h3>
                      <div class="geodir-category-content_price">{{ @$consultant->subCategory->category_name }}</div>
                      {{-- <h6 style="text-align: left">
                        Type : {{ $consultant->type_of_company }}
                      </h6> --}}
                      <a href="{{ route('customer.consultant-detail', [$consultant->slug, '#sec4']) }}">
                        <h6 style="text-align: left">
                          Listed Services ({{ isset($consultant->services) ? $consultant->services->count() : 0 }})
                      </a>
                      </h6>
                      <div class="clearfix"></div>

                      <p>
                        {{ Str::limit($consultant->company_description, 100) }}
                      </p>

                      <div class="geodir-category-footer fl-wrap">
                        <a href="agent-single.html" class="gcf-company"><img
                            src="@if (isset($consultant->photo)) {{ asset('consultant/public/uploads/buyer') . '/' . $consultant->photo }} @else {{ asset('allUsers/customer/images/avatar/2.jpg') }} @endif"
                            alt="" /><span>By
                            {{ ucwords($consultant->name) }}</span></a>
                        <div class="listing-rating card-popup-rainingvis tolt" data-microtip-position="top"
                          data-tooltip="Good"
                          data-starrating2="{{ isset($consultant->ratings) ? $consultant->ratings->avg('star') : 0 }}">
                        </div>
                      </div>
                    </div>
                  </article>
                </div>
              </div>
            @endforeach
            <!-- listing-item end-->
            <!-- gallery-item end-->
          </div>
          <!-- grid-item-holder-->
          {{-- <a href="listing.html" class="btn float-btn small-btn color-bg">View All Listing</a> --}}
        </div>
      </section>
      <!-- section end-->
      <!-- section -->
      <section>
        <div class="container">
          <!--about-wrap -->
          <div class="about-wrap">
            <div class="row">
              <div class="col-md-5">
                <div class="about-title ab-hero fl-wrap">
                  <h2>Why So Listing On FindMyConsultant.com</h2>
                  <h4>
                    Check video presentation to find out more about us .
                  </h4>
                </div>
                <div class="services-opions fl-wrap">
                  <ul>
                    <li>
                      <i class="fal fa-headset"></i>
                      <h4>24 Hours Support</h4>
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua.
                      </p>
                    </li>
                    <li>
                      <i class="fal fa-users-cog"></i>
                      <h4>User Admin Panel</h4>
                      <p>
                        Nulla posuere sapien vitae lectus suscipit, et
                        pulvinar nisi tincidunt. Curabitur convallis
                        fringilla diam sed aliquam.
                      </p>
                    </li>
                    <li>
                      <i class="fal fa-phone-laptop"></i>
                      <h4>Mobile Friendly</h4>
                      <p>
                        Curabitur convallis fringilla diam sed aliquam. Sed
                        tempor iaculis massa faucibus feugiat. In fermentum
                        facilisis massa.
                      </p>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-md-1"></div>
              <div class="col-md-6">
                <div class="about-img fl-wrap">
                  <img src="{{ asset('allUsers/customer/images/all/27.jpg') }}" class="respimg" alt="" />
                  <div class="about-img-hotifer color-bg">
                    <p>
                      Your website is fully responsive so visitors can view
                      your content from their choice of device.
                    </p>
                    <h4>Mark Antony</h4>
                    <h5>{{ env('APP_NAME') }} CEO</h5>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- about-wrap end  -->
        </div>
      </section>
      <!-- section end-->
      <section class="hidden-section no-padding-section">
        <div class="half-carousel-wrap">
          {{-- <div class="half-carousel-title color-bg">
            <div class="half-carousel-title-item fl-wrap">
              <h2>Explore Consultant Categories</h2>
              <h5>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                do eiusmod tempor incididunt ut labore et dolore magna
                aliqua.
              </h5>
            </div>
            <div class="pwh_bg"></div>
          </div> --}}
          <div class="half-carousel-conatiner">
            <div class="half-carousel fl-wrap full-height">
              <!--slick-item -->
              @foreach ($featuredCategories as $key => $category)
                <div class="slick-item">
                  <div class="half-carousel-item fl-wrap">
                    <div class="bg-wrap bg-parallax-wrap-gradien">
                      <div class="bg"
                        data-bg="{{ isset($category->featured_banner)? asset('consultant/public/uploads/category') . '/' . $category->featured_banner: asset('allUsers/customer/images/bg/long/1.jpg') }}">
                      </div>
                    </div>
                    <div class="half-carousel-content">
                      <div class="hc-counter color-bg">{{ $category->mappedBuyers->count() }} Consultants</div>
                      <h3><a
                          href="{{ route('customer.get-consultants', [$category->category_slug]) }}">{{ ucwords($category->category_name) }}
                        </a></h3>
                      <p>{{ Str::limit($category->description, 100) }}</p>
                    </div>
                  </div>
                </div>
              @endforeach

              <!--slick-item end -->
            </div>
          </div>
        </div>
      </section>
      <!--section end-->
      <!-- section -->
      <section>
        <div class="container">
          <!-- section-title -->
          <div class="section-title st-center fl-wrap">
            <h4>The Best Agents</h4>
            <h2>Meet Our Agents</h2>
          </div>
          <!-- section-title end -->
          <div class="clearfix"></div>
          <div class="listing-carousel-wrapper lc_hero carousel-wrap fl-wrap">
            <div class="listing-carousel carousel">
              <!-- slick-slide-item -->
              @foreach ($consultants as $consultant)
                <div
                  class="gallery-item @if ($consultant->view_count > 5) for_rent @endif @if ($consultant->created_at->isToday()) for_sale @endif">
                  <!-- listing-item -->
                  <div class="listing-item">
                    <article class="geodir-category-listing fl-wrap">
                      <div class="geodir-category-img fl-wrap">
                        <a href="{{ route('customer.consultant-detail', $consultant->slug) }}"
                          class="geodir-category-img_item">
                          <img
                            src="@if (isset($consultant->company_logo)) {{ asset('consultant/public/uploads/buyer') . '/' . $consultant->company_logo }} @else {{ asset('allUsers/customer/images/all/3.jpg') }} @endif"
                            alt="" />
                          <div class="overlay"></div>
                        </a>
                        <div class="geodir-category-location">
                          <a href="javascript:;" class="single-map-item"><i class="fas fa-map-marker-alt"></i>
                            <span>{{ @$consultant->stateName->name }}
                              {{ @$consultant->cityName->name }}</span></a>
                        </div>

                        @if (Auth::guard('buyer')->check() && Auth::guard('buyer')->user()->id != $consultant->id)
                          @if ($consultant->IsInMyWishlist)
                            <a href="{{ route('buyer.remove-from-wishlist', $consultant->id) }}"
                              class="geodir_save-btn tolt" data-microtip-position="left" data-tooltip="Remove">
                              <span><i class="fal fa-heart-broken"></i></span>
                            </a>
                          @else
                            <a href="{{ route('buyer.add-to-wishlist', $consultant->id) }}"
                              class="geodir_save-btn tolt" data-microtip-position="left" data-tooltip="Save">
                              <span><i class="fal fa-heart"></i></span>
                            </a>
                          @endif
                        @endif

                        <div class="geodir-category-listing_media-list">
                          {{-- <span><i class="fas fa-camera"></i> 8</span> --}}
                        </div>
                      </div>
                      <div class="geodir-category-content fl-wrap">
                        <h3 class="title-sin_item">
                          <a
                            href="{{ route('customer.consultant-detail', $consultant->slug) }}">{{ ucwords($consultant->company_name) }}</a>
                        </h3>
                        <div class="geodir-category-content_price">{{ @$consultant->subCategory->category_name }}</div>
                        {{-- <h6 style="text-align: left">
                        Type : {{ $consultant->type_of_company }}
                      </h6> --}}
                        <a href="{{ route('customer.consultant-detail', [$consultant->slug, '#sec4']) }}">
                          <h6 style="text-align: left">
                            Listed Services ({{ isset($consultant->services) ? $consultant->services->count() : 0 }})
                        </a>
                        </h6>
                        <div class="clearfix"></div>

                        <p>
                          {{ Str::limit($consultant->company_description, 100) }}
                        </p>

                        <div class="geodir-category-footer fl-wrap">
                          <a href="agent-single.html" class="gcf-company"><img
                              src="@if (isset($consultant->photo)) {{ asset('consultant/public/uploads/buyer') . '/' . $consultant->photo }} @else {{ asset('allUsers/customer/images/avatar/2.jpg') }} @endif"
                              alt="" /><span>By
                              {{ ucwords($consultant->name) }}</span></a>
                          <div class="listing-rating card-popup-rainingvis tolt" data-microtip-position="top"
                            data-tooltip="Good"
                            data-starrating2="{{ isset($consultant->ratings) ? $consultant->ratings->avg('star') : 0 }}">
                          </div>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>
              @endforeach
              <!-- slick-slide-item end-->
            </div>
            <div class="swiper-button-prev lc-wbtn lc-wbtn_prev">
              <i class="far fa-angle-left"></i>
            </div>
            <div class="swiper-button-next lc-wbtn lc-wbtn_next">
              <i class="far fa-angle-right"></i>
            </div>
          </div>
        </div>
      </section>
      <!-- section end-->
      <!-- section -->
      {{-- <section class="color-bg small-padding">
        <div class="container">
          <div class="main-facts fl-wrap">
            <!-- inline-facts  -->
            <div class="inline-facts-wrap">
              <div class="inline-facts">
                <div class="milestone-counter">
                  <div class="stats animaper">
                    <div class="num" data-content="0" data-num="578">0</div>
                  </div>
                </div>
                <h6>Agents and Agencys</h6>
              </div>
            </div>
            <!-- inline-facts end -->
            <!-- inline-facts  -->
            <div class="inline-facts-wrap">
              <div class="inline-facts">
                <div class="milestone-counter">
                  <div class="stats animaper">
                    <div class="num" data-content="0" data-num="12168">
                      0
                    </div>
                  </div>
                </div>
                <h6>Happy Customers Every Year</h6>
              </div>
            </div>
            <!-- inline-facts end -->
            <!-- inline-facts  -->
            <div class="inline-facts-wrap">
              <div class="inline-facts">
                <div class="milestone-counter">
                  <div class="stats animaper">
                    <div class="num" data-content="0" data-num="2172">
                      0
                    </div>
                  </div>
                </div>
                <h6>Won Awards</h6>
              </div>
            </div>
            <!-- inline-facts end -->
            <!-- inline-facts  -->
            <div class="inline-facts-wrap">
              <div class="inline-facts">
                <div class="milestone-counter">
                  <div class="stats animaper">
                    <div class="num" data-content="0" data-num="732">0</div>
                  </div>
                </div>
                <h6>New Listing Every Week</h6>
              </div>
            </div>
            <!-- inline-facts end -->
          </div>
        </div>
        <div class="svg-bg">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            width="100%" height="100%" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMax slice">
            <defs>
              <lineargradient id="bg">
                <stop offset="0%" style="stop-color: rgba(255, 255, 255, 0.6)"></stop>
                <stop offset="50%" style="stop-color: rgba(255, 255, 255, 0.1)"></stop>
                <stop offset="100%" style="stop-color: rgba(255, 255, 255, 0.6)"></stop>
              </lineargradient>
              <path id="wave" stroke="url(#bg)" fill="none"
                d="M-363.852,502.589c0,0,236.988-41.997,505.475,0
                                                                                        s371.981,38.998,575.971,0s293.985-39.278,505.474,5.859s493.475,48.368,716.963-4.995v560.106H-363.852V502.589z" />
            </defs>
            <g>
              <use xlink:href="#wave">
                <animatetransform attributeName="transform" attributeType="XML" type="translate" dur="10s"
                  calcMode="spline" values="270 230; -334 180; 270 230" keyTimes="0; .5; 1"
                  keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" />
              </use>
              <use xlink:href="#wave">
                <animatetransform attributeName="transform" attributeType="XML" type="translate" dur="8s"
                  calcMode="spline" values="-270 230;243 220;-270 230" keyTimes="0; .6; 1"
                  keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" />
              </use>
              <use xlink:href="#wave">
                <animatetransform attributeName="transform" attributeType="XML" type="translate" dur="6s"
                  calcMode="spline" values="0 230;-140 200;0 230" keyTimes="0; .4; 1"
                  keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" />
              </use>
              <use xlink:href="#wave">
                <animatetransform attributeName="transform" attributeType="XML" type="translate" dur="12s"
                  calcMode="spline" values="0 240;140 200;0 230" keyTimes="0; .4; 1"
                  keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" />
              </use>
            </g>
          </svg>
        </div>
      </section> --}}
      <!-- section end-->
      <!-- section -->
      <section class="gray-bg">
        <div class="container">
          <div class="section-title st-center fl-wrap">
            <h4>Testimonilas</h4>
            <h2>What Our Clients Say</h2>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="testimonials-slider-wrap">
          <div class="testimonials-slider">
            <!--slick-item -->
            @foreach ($testimonials as $key => $testimonial)
              <div class="slick-item">
                <div class="text-carousel-item fl-wrap">
                  <div class="text-carousel-item-header fl-wrap">
                    <div class="popup-avatar">
                      <img
                        src="{{ isset($testimonial->icon)? asset('consultant/public/uploads/testimonials') . '/' . $testimonial->icon: asset('allUsers/icon-thumb.png') }}"
                        alt="{{ $testimonial->icon }}" />
                    </div>
                    <div class="review-owner fl-wrap">{{ $testimonial->name }}</div>
                    <div class="listing-rating card-popup-rainingvis" data-starrating2="$testimonial->rating"></div>
                  </div>
                  <div class="text-carousel-content fl-wrap">
                    <p>
                      "{{ $testimonial->content }}"
                    </p>
                    <a href="javascript:;" class="testim-link color-bg">Via {{ $testimonial->country }}</a>
                  </div>
                </div>
              </div>
            @endforeach

            <!--slick-item end -->
          </div>
        </div>
      </section>
      <!-- section end-->
    </div>
    <!-- content end -->
    <!-- subscribe-wrap -->
    <div class="subscribe-wrap fl-wrap">
      <div class="container">
        <div class="subscribe-container fl-wrap color-bg">
          <div class="pwh_bg"></div>
          <div class="mrb_dec mrb_dec3"></div>
          <div class="row">
            <div class="col-md-6">
              <div class="subscribe-header">
                <h4>newsletter</h4>
                <h3>
                  Sign up for newsletter and get latest news and update
                </h3>
              </div>
            </div>
            <div class="col-md-1"></div>
            <div class="col-md-5">
              <div class="footer-widget fl-wrap">
                <div class="subscribe-widget fl-wrap">
                  <div class="subcribe-form">
                    <form id="subscribe">
                      <input class="enteremail fl-wrap" name="email" id="subscribe-email" placeholder="Enter Your Email"
                        spellcheck="false" type="text" />
                      <button type="submit" id="subscribe-button" class="subscribe-button color-bg">
                        Subscribe
                      </button>
                      <label for="subscribe-email" class="subscribe-message"></label>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- subscribe-wrap end -->
  @endsection