@extends('frontend.layouts.app')
@php
    $excludeBreadcrumb = true; // Set to true to exclude the breadcrumb
@endphp
@section('content')
<style>
    #select2-state_id-y9-container{
        padding-right: 20px !important;
    }

</style>
  <div class="banner">
    <div class="bannerUper">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-7">
            <div class="bannerUperInfo">
              @if(auth()->guard('job_seeker')->check())
              <h1>Job Search Assistance For <br>
                Your Career & Professional Growth</h1>
                @else
                <h1>Professional Services For <br>
                  Your Home & Commercial</h1>
                @endif
                <form action="{{auth()->guard('job_seeker')->check()? route('job.listing'):route('employer.service.list')}}">
                  <div class="search-block d-md-flex justify-content-between">
                    <div class="search-inner-block d-md-flex justify-content-between">
                      <div class="search-field small-search d-flex align-items-center">
                        <i class="img-sec"><img src="{{asset('frontend/images/job-category-icon.png')}}" alt="job-category-icon"></i>
                        <div class="search-box">
                          @if(auth()->guard('job_seeker')->check())
                          <label>Job Category</label>
                          <select class="location" name="category_id">
                            <option value="">All</option>
                            @foreach ($categories as $cat => $category)
                              <option value="{{$cat}}">{{$category}}</option>
                            @endforeach
                          </select>
                          @else
                          <label>Service Category</label>
                          <select class="location" name="category_id">
                            <option value="">All</option>
                            @foreach ($serviceCategoriesPluck as $cat => $category)
                              <option value="{{$cat}}">{{$category}}</option>
                            @endforeach
                          </select>
                          @endif
                        </div>
                      </div>
                      <div class="search-field big-search d-flex align-items-center">
                        <i class="img-sec"><img src="{{asset('frontend/images/location-icon.png')}}" alt="location-icon"></i>
                        <div class="search-box">
                          <label>Location</label>
                          <select class="search-services" name="state_id">
                            {{-- @foreach ($states as $sta => $state)
                              <option value="{{$sta}}">{{$state}}</option>
                            @endforeach --}}
                          </select>
                        </div>
                      </div>
                    </div>
                    <button class="btn-custom" type="submit">Search</button>
                  </div>
              </form>
            </div>
          </div>
          <div class="col-md-5 banner-mob">
            <div class=""> <img src="{{asset('frontend/images/banner.png')}}" alt="banner"></div>

          </div>
        </div>


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

  <div class="categoriesBlock">
    <div class="container">
      <div class="headingBlock">
        @if(auth()->guard('employer')->check())
        <h4>Service</h4>
        @elseif(auth()->guard('service_provider')->check())
        <h4>Job</h4>
        @elseif(auth()->guard('job_seeker')->check())
        <h4>Job</h4>
        @else
        <h4>Service</h4>
        @endif
      </div>
      <div class="categoriesBlockSlider owl-carousel owl-theme">

@if(auth()->guard('employer')->check())
@php
$allServiceCategories = $serviceCategories;
@endphp
@elseif(auth()->guard('service_provider')->check())
@php
$alljobCategories = $jobCategories
@endphp
@elseif(auth()->guard('job_seeker')->check())
@php
$alljobCategories = $jobCategories
@endphp

@else
@php
$allServiceCategories = $serviceCategories;
@endphp
@endif


$count = \App\Models\Service::where('service_category_id',$category->id)->where('status',1)->count();
@endphp
@endif

        @if ($count!=0)


        <div class="item">
            <a href="{{route('employer.service.list').'?category_id='.$category->id}}" class="categoriesCard eme-bg d-flex flex-column justify-content-center align-items-center">
              <figure class="text-center">
                <img style=" transform-style: preserve-3d;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-height: 75px;
    object-fit: contain;" src="{{asset('backend/category/'.$category->image)}}" alt="service-img"></figure>
              <div class="categoriesCardInfo text-center">
                <div class="categoriesTitle">{{$category->title}}</div>
                <span>{{$count}}+ Services</span>
              </div>
            </a>
          </div>
          @endif
        @endforeach
        @endif


        @if(isset($alljobCategories))
@foreach ($alljobCategories as $category)
@if(auth()->guard('employer')->check())
@php
$count = \App\Models\Service::where('service_category_id',$category->id)->where('status',1)->count();
@endphp
@elseif(auth()->guard('service_provider')->check())
@php
$count = \App\Models\Job::where('category_id',$category->id)->where('status',1)->count();
@endphp
@elseif(auth()->guard('job_seeker')->check())
@php
$count = \App\Models\Job::where('category_id',$category->id)->where('status',1)->count();
@endphp
@else
@php
$count = \App\Models\Service::where('service_category_id',$category->id)->where('status',1)->count();
@endphp
@endif

        @if ($count!=0)


        <div class="item">
            <a href="{{route('job.listing').'?category_id='.$category->id}}" class="categoriesCard eme-bg d-flex flex-column justify-content-center align-items-center">
              <figure class="text-center">
                <img style=" transform-style: preserve-3d;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-height: 75px;
    object-fit: contain;" src="{{asset('backend/category/'.$category->image)}}" alt="service-img"></figure>
              <div class="categoriesCardInfo text-center">
                <div class="categoriesTitle">{{$category->title}}</div>
                <span>{{$count}}+ Jobs</span>
              </div>
            </a>
          </div>
          @endif
        @endforeach
        @endif
      </div>
    </div>
  </div>

  {{-- <div class="servicesBlock">
    <div class="container">
      <div class="servicesList">
        <div class="headingBlock d-flex align-items-center justify-content-between">
          <h4>House & Home</h4>
          <a href="#!" class="ex-btn">View All
            <i><img src="{{asset('frontend/images/right-arrow.png')}}" alt="explore-right-arrow"></i></a>
        </div>
        <div class="row">
          <div class="col-lg-3 col-sm-6">
            <div class="services-card">
              <span class="availableTag">Available online</span>
              <div class="services-img"> <a href="#!"><img src="{{asset('frontend/images/services-img.png')}}" alt="services-img"></a> </div>
              <div class="services-info-txt">
                <h6 class="mb-0"><a href="#!">Gardening</a></h6>

              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-6">
            <div class="services-card">
              <span class="availableTag">Available online</span>
              <div class="services-img"> <a href="#!"><img src="{{asset('frontend/images/services-img1.png')}}" alt="services-img"></a>
              </div>
              <div class="services-info-txt">
                <h6 class="mb-0"><a href="#!">House Cleaning</a></h6>

              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-6">
            <div class="services-card">

              <div class="services-img"> <a href="#!"><img src="{{asset('frontend/images/services-img2.png')}}" alt="services-img"></a>
              </div>
              <div class="services-info-txt">
                <h6 class="mb-0"><a href="#!">Painting Services</a></h6>

              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-6">
            <div class="services-card">
              <span class="availableTag">Available online</span>
              <div class="services-img"> <a href="#!"><img src="{{asset('frontend/images/services-img3.png')}}" alt="services-img"></a>
              </div>
              <div class="services-info-txt">
                <h6 class="mb-0"><a href="#!">Solar Panel Installation</a></h6>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="servicesList pb-0">
        <div class="headingBlock d-flex align-items-center justify-content-between">
          <h4>Health & Wellbeing</h4>
          <a href="#!" class="ex-btn">View All
            <i><img src="{{asset('frontend/images/right-arrow.png')}}" alt="explore-right-arrow"></i></a>
        </div>
        <div class="row">
          <div class="col-lg-3 col-sm-6">
            <div class="services-card">
              <span class="availableTag">Available online</span>
              <div class="services-img"> <a href="#!"><img src="{{asset('frontend/images/services-img4.png')}}" alt="services-img"></a>
              </div>
              <div class="services-info-txt">
                <h6 class="mb-0"><a href="#!">Personal Trainers</a></h6>

              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-6">
            <div class="services-card">

              <div class="services-img"> <a href="#!"><img src="{{asset('frontend/images/services-img5.png')}}" alt="services-img"></a>
              </div>
              <div class="services-info-txt">
                <h6 class="mb-0"><a href="#!">Counselling</a></h6>

              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-6">
            <div class="services-card">
              <span class="availableTag">Available online</span>
              <div class="services-img"> <a href="#!"><img src="{{asset('frontend/images/services-img6.png')}}" alt="services-img"></a>
              </div>
              <div class="services-info-txt">
                <h6 class="mb-0"><a href="#!">Massage Therapy</a></h6>

              </div>
            </div>
          </div>
          <div class="col-lg-3 col-sm-6">
            <div class="services-card">

              <div class="services-img"> <a href="#!"><img src="{{asset('frontend/images/services-img7.png')}}" alt="services-img"></a>
              </div>
              <div class="services-info-txt">
                <h6 class="mb-0"><a href="#!">Life Coaching</a></h6>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> --}}

  @if(!auth()->guard('job_seeker')->check())

<div class="recentBlock ">
    <div class="container">
      <h2 class="text-center">Recent Services</h2>
      <p class="text-center mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        incididunt
        ut labore et dolore magna aliqua. Quis ipsum<br>suspendisse ultrices gravida. Risus commodo viverra maecenas
        accumsan lacus vel facilisis. </p>
      <div class="recentSlider owl-carousel owl-theme">


        @foreach ($services as $service)
        <div class="item">
            <div class="recent-card">
                <div class="recent-img">
                  <div class="recent-tp-tag">
                    <span class="businessTag">{{$service->category?->title}}</span>
                    {{-- <span class="availTag"></span> --}}
                  </div>

                  @if($service->category?->image)
                  <img src="{{asset('backend/category/'.$service->category?->image)}}" alt="recent-img01">
                  @else
                  <img src="{{ asset('frontend/images/recent-img04.jpg') }}" alt="recent-img01">

                  @endif

                </div>
                <div class="recent-info">
                  <h4 class="mb-2"> <a href="{{route('employer.service.detail',$service->id)}}">{{$service->title}}</a> </h4>
                  <div class="location-text mb-2"> <i><img src="{{asset('frontend/images/recent-location.png')}}" alt="recent-location"></i>
                    {{$service->city?->name.', '.$service->state?->name.', '.$service->country?->name}}</div>
                  <p>{!! strlen($service->description) > 100 ? substr($service->description, 0, 100) . '...' : $service->description !!}</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="recentprice">
                      <span> Per Hour Rate </span>
                      @if(floatval($service->discounted_amount==0))
                      <strong> ${{$service->pricing}}</strong>
                      @else
                      <strong> <del>${{$service->pricing}}</del> ${{$service->discounted_amount}}</strong>
                      @endif
                    </div>
                    @if(auth()->guard('user')->check() && auth()->guard('user')->user()->role == 1)
                    <a href="{{route('employer.service.book',$service->id)}}" class="btn-custom"> Book Now</a>
                      @elseif(auth()->guard('user')->check() && auth()->guard('user')->user()->role != 1)
                      @else

                      {{-- check user is not service provider --}}
                      @if(!auth()->guard('service_provider')->check())
                        <a href="{{ route('users.login').'?serviceid='.$service->id }}" class="btn-custom">Book Now</a>
                      @endif


                      @endif
                  </div>
                </div>
              </div>
        </div>
@endforeach

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

@endif

  <div class="recentjobBlock ">
    <div class="container">
      <h2 class="text-center">Recent Job</h2>
      <p class="text-center mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        incididunt
        ut labore et dolore magna aliqua. Quis ipsum<br>suspendisse ultrices gravida. Risus commodo viverra maecenas
        accumsan lacus vel facilisis. </p>
      <div class="recentSlider owl-carousel owl-theme ">
        @foreach ($jobs as $job)
        <div class="item">
          <div class="recent-card">


            <div class="recent-img">
              <div class="recent-tp-tag">
                <span class="businessTag">{{$job->category ? $job->category->title : '-'}}</span>
                <span class="availTag">{{ $job->employmentType ? $job->employmentType->title : '-' }}</span>
              </div>
              @if ($job->category && $job->category?->image)
              <img src="{{ asset('backend/category/'.$job->category?->image) }}" alt="recent-img01">
              @else

              <img src="{{ asset('frontend/images/recent-img04.jpg') }}" alt="recent-img01">
              @endif
            </div>
            <div class="recent-info">
                <h4 class="mb-2"> <a
                        href="{{ route('job.detail', $job->id) }}">{{ $job->title }}</a> </h4>
                <div class="location-text mb-2"> <i><img
                            src="{{ asset('frontend/images/recent-location.png') }}"
                            alt="recent-location"></i>{{
                                ($job->address ?? '') . ',' .
                                ($job->city?->name ?? '') . ',' .
                                ($job->state?->name ?? '') . ',' .
                                ($job->country?->name ?? '')
                            }}
                </div>
                <p style="word-wrap: break-word;">
                    {!! Str::limit(strip_tags($job->description), 200, '...') !!}
                </p>
                @php
                $min = 0;
            $max = 0;
            if ($job->salary_range) {
                list($min, $max) = explode('-', $job->salary_range);
            }

            @endphp
                <div class="d-flex justify-content-between align-items-center">
                    <div class="recentprice">
                        <span> Starting at </span>
                        <strong>${{ number_format($min) }} - ${{ number_format($max) }}</strong>
                    </div>
                    @if (auth()->guard('user')->check() && auth()->guard('user')->user()->role==3)
                    <a href="{{route('jobSeeker.job.apply',$job->id)}}" class="btn-custom">Apply Now</a>
                    @endif
                </div>
            </div>
          </div>
        </div>
        @endforeach

        {{-- <div class="item">
          <div class="recent-card">
            <div class="recent-img">
              <div class="recent-tp-tag">
                <span class="businessTag">House & Home</span>
                <span class="availTag">Part Time</span>
              </div>
              <img src="{{asset('frontend/images/recent-img05.jpg')}}" alt="recent-img">
            </div>
            <div class="recent-info">
              <h4 class="mb-2"> <a href="#!">Painter </a> </h4>
              <div class="location-text mb-2"> <i><img src="{{asset('frontend/images/recent-location.png')}}" alt="recent-location"></i>
                Brooklyn, NY, USA</div>
              <p>Lorem Ipsum is simply dummy text of the printing <br>
                and typesetting industry</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="recentprice">
                  <span> Starting at </span>
                  <strong>$35k - $45k</strong>
                </div>
                <a href="javascript:void(0)" class="btn-custom">Apply Now</a>
              </div>
            </div>
          </div>
        </div> --}}

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



  @if($blogs->count()>0)
  <!--Blog section-->
  <div class="blog-section">
    <div class="container">
      <div class="blog-top text-center">
        <h2>News & Article From the Blog</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel
          facilisis. </p>
      </div>
      <div class="row">
        @foreach ($blogs as $blog)
        <div class="col-md-4">
            <div class="blogcard" style="margin-bottom:20px;">
              <div class="cardImg mb-4">
                <a href="#!">
                    @if($blog->cover_letter)
                    <img style="height:290px"  src="{{asset('images/blogs/coverletter/'.$blog->cover_letter)}}" alt="blog-img">
                    @else
                    <img style="height:290px" src="{{asset('images/blogs/default.jpg')}}" alt="blog-img">
                    @endif
                </a>
              </div>
              <div class="cardInfo">
                <ul class="d-flex mb-3">
                  <li><i class="far fa-calendar" style="margin-right: 5px;"></i> {{$blog->created_at->format('M d Y')}}</li>
                  <li><i class="far fa-user"></i> Post by: <strong> {{$blog->name}} </strong></li>
                </ul>
                <h4> <a href="#!">{{$blog->title}}</a></h4>

                <a href="{{route('blog.detail',$blog->slug)}}" class="btn btn-orange-outline">Read More <i class="ml-2"><img
                      src="{{asset('frontend/images/read-arrow.png')}}" alt="read-arrow"></i></a>
              </div>
            </div>
          </div>
        @endforeach

      </div>
      <div class="text-center mt-3  mt-md-4 mt-lg-">
        <a href="{{route('blog.listing')}}" class="btn btn-custom btn-orange">Read All Blogs <i class="ml-2"><img
              src="{{asset('frontend/images/read-arrow-white.png')}}" alt="read-arrow"></i></a>
      </div>
    </div>
  </div>
  <!--Blog section-->
  @endif



  <div class="testimonialBlock">
    <div class="container">
      <div class="headingBlock">
        <h4>Testimonial</h4>
      </div>
      <div class="testimonialSlider owl-carousel owl-theme">
        @foreach ($testimonials as $testimonial)
                        <div class="item">
                            <div class="testimonialCard">
                                <div class="userImg">
                                    @if ($testimonial->user_image)
                                        <img src="{{ asset('uploads/testimonials/' . $testimonial->user_image) }}"
                                            alt="">
                                    @else
                                        <img src="{{ asset('frontend/images/userImg.jpg') }}" alt="Stacy Hog">
                                    @endif
                                </div>
                                <div class="testimonialHeading d-flex align-items-center justify-content-between">
                                    <div class="testimonialLeft">
                                        <span>{{ $testimonial->name }}</span>
                                    </div>
                                    <div class="starRating" data-rating="{{ $testimonial->rating }}"></div>
                                </div>
                                <p>{{ $testimonial->description }}</p>
                            </div>
                        </div>
                    @endforeach
      </div>
    </div>
  </div>
  @push('front-script')
      <script>
      $(document).ready(function() {
        var csrfToken = $('meta[name="csrf-token"]').attr('content');

    $('.search-services').select2({
      minimumInputLength: 4, // Minimum input length to trigger AJAX
      ajax: {
        url: '{{ route("search.location") }}', // Replace with your route
        dataType: 'json',
        delay: 250, // Delay for AJAX request
        method:'post',
        data: function (params) {
          return {
            query: params.term, // The user's input
            _token: csrfToken  // The user's input
          };
        },
        processResults: function (data) {
          // Map the response to the format expected by select2
          $('.search-services').attr('name', data.searchby);
          return {
            results: $.map(data.list, function (state, id) {
              return { id: id, text: state };
            })
          };
        },
        cache: true
      },
      placeholder: 'Location',
      minimumResultsForSearch: Infinity // Hide search box for Select2 dropdown
    });
  });
  </script>
@endpush
@endsection
