@extends('layouts.app')

@section('content')
      <!-- Intro Banner
================================================== -->
      <!-- add class "disable-gradient" to enable consistent background overlay -->
      <div
        class="intro-banner"
        data-background-image="{{ asset('demo-2/images/business-women-with-laptop.jpg') }}"
      >
        <div class="container">
          <!-- Intro Headline -->
          <div class="row">
            <div class="col-md-12">
              <div class="banner-headline">
                <h3> 
                  <strong
                    >Find a local tradespeople and service providers.</strong
                  >
                  <br />
                  <span
                    ><strong class="color"><a
						href="#sign-in-dialog"
						class="popup-with-zoom-anim log-in-button"
						>Post your job for free.</a></strong>
                    Match to tradespeople, get quotes and read reviews.</span
                  >
                </h3>
              </div>
            </div>
          </div>

          <!-- Search Bar -->
          {{ Form::open(['url' => 'search-results', 'method' => 'POST']) }}
          <div class="row">
            <div class="col-md-12">
              <div class="intro-banner-search-form margin-top-95">
                <!-- Search Field -->
                <div class="intro-search-field with-autocomplete">
                  <label
                    for="autocomplete-input"
                    class="field-title ripple-effect"
                    >Where?</label
                  >
                  <div class="input-with-icon">
                    <input
                      id="autocomplete-input"
                      type="text"
                      placeholder="Cape Town"
                      list="service_areas"
                    />
                    <i class="icon-material-outline-location-on"></i>
                    <datalist id="service_areas">
                  @foreach($result['datalist_service_areas'] as $area)
                    <option value="{{$area->area}}"></option>
                  @endforeach
                  </datalist>
                  </div>
                </div>

                <!-- Search Field -->
                <div class="intro-search-field">
                  <label for="intro-keywords" class="field-title ripple-effect"
                    >Which service do you need?</label
                  >
                  <input
                    id="intro-keywords"
                    type="text"
                    placeholder="Plumbing"
                    list="services"
                  />

                  <datalist id="services">
                  @foreach($result['datalist_subservices'] as $service)
                    <option value="{{$service->service}}"></option>
                  @endforeach
                  </datalist>
                </div>

                <!-- Button -->
                <div class="intro-search-button">
                  <button
                    class="button ripple-effect"
                    type="submit"
                    aria-label="search"
                  >
                    Search
                  </button>
                </div>
              </div>
            </div>
          </div>
          {{ Form::close() }}
          <!-- Stats -->
          <div class="row">
            <div class="col-md-12">
              <ul class="intro-stats margin-top-45 hide-under-992px">
                <li>
                  <strong class="counter">{{ $jobsPosted }}</strong>
                  <span>Jobs Posted</span>
                </li>
                <li>
                  <strong class="counter">{{ $clients }}</strong>
                  <span>clients </span>
                </li>
                <li>
                  <strong class="counter">{{ $serviceProviders }}</strong>
                  <span>Service providers </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

            <!-- Content
================================================== -->
      <!-- Popular Job Categories -->
      <div class="section margin-top-65 margin-bottom-30">
        <div class="container">
          <div class="row">
            <!-- Section Headline -->
            <div class="col-xl-12">
              <div
                class="section-headline centered margin-top-0 margin-bottom-45"
              >
                <h3>Featured tradespeople and service providers</h3>
              </div>
            </div>

              @foreach($result['subservices'] as $subservice)
            <div class="col-xl-3 col-md-6">
              <a
                href="{{ URL::to('job-list/service/'.$subservice->id) }}"
                class="photo-box small"
                data-background-image="{{ asset('demo-2/images/job-category-01.jpg') }}"
              >
                <div class="photo-box-content">
                  <h3>{{ $subservice->service }}</h3>
                  <span>{{ $subservice->listings_count }}</span>
                </div>
              </a>
            </div>
            @endforeach
            
          </div>
        </div>
      </div>
      <!-- Features Cities / End -->

      <!-- Features Jobs -->
      <div class="section gray margin-top-45 padding-top-65 padding-bottom-75">
        <div class="container">
          <div class="row">
            <div class="col-xl-12">
              <!-- Section Headline -->
              <div class="section-headline margin-top-0 margin-bottom-35">
                <h3>Recent job cards</h3>
                <a href="{{ URL::to('job-list') }}" class="headline-link"
                  >Browse All Job cards</a
                >
              </div>

              
              <div class="tasks-list-container compact-list margin-top-35">
                @foreach($result['jobcards'] as $jobcard)  
                <a href="#sign-in-dialog" class="popup-with-zoom-anim log-in-butto task-listing">
                  <!-- Job Listing Details -->
                  <div class="task-listing-details">
                    <!-- Details -->
                    <div class="task-listing-description">
                      <h3 class="task-listing-title">{{ $jobcard->job_title }}</h3>
                      <ul class="task-icons">
                        <li>
                          <i class="icon-material-outline-location-on"></i> Cape
                          Town
                        </li>
                        <li>
                          <i class="icon-material-outline-access-time"></i> 
                          {{ \Carbon\Carbon::parse($jobcard->created_at)->diffForHumans() }}
                        </li>
                      </ul>
                      <div class="task-tags margin-top-15">
                        <span>{{ isset($jobcard->service->service)?$jobcard->service->service:'Other' }}</span>
                      </div>
                    </div>
                  </div>

                  <div class="task-listing-bid">
                    <div class="task-listing-bid-inner">
                      <div class="task-offers">
                        <strong>R{{ $jobcard->price_min }} -  R{{ $jobcard->price_max }}</strong>
                        <span>Fixed Price</span>
                      </div>
                      <span class="button button-sliding-icon ripple-effect" aria-label="Apply"
                        >Apply
                        <i class="icon-material-outline-arrow-right-alt"></i
                      ></span>
                    </div>
                  </div>
                </a>
                @endforeach
              </div>
              <!-- Jobs Container / End -->
            </div>
          </div>
        </div>
      </div>
      <!-- Featured Jobs / End -->

      <!-- Icon Boxes -->
       <div class="section padding-top-65 padding-bottom-65">
        <div class="container">
          <div class="row">
            <div class="col-xl-12">
              <!-- Section Headline -->
              <div
                class="section-headline centered margin-top-0 margin-bottom-5"
              >
                <h3>How It Works?</h3>
                <p>
                  Whatever your services need, Quicker Easier Cheaper.com can
                  connect <br>you to trustworthy service providers, any time of the
                  day.
                </p>

              </div>
            </div>

            <div class="col-xl-4 col-md-4">
              <!-- Icon Box -->
              <div class="icon-box with-line">
                <!-- Icon -->
                <div class="icon-box-circle">
                  <div class="icon-box-circle-inner">
                    <div class="icon-box-check">
                      <i class="icon-material-outline-check"></i>
                    </div>
                  </div>
                </div>
                <h3>Something goes wrong</h3>
                <p>
                  You’re at home or work and something goes wrong. Something you
                  need to fix now, a service-related emergency.
                </p>
              </div>
            </div>

            <div class="col-xl-4 col-md-4">
              <!-- Icon Box -->
              <div class="icon-box with-line">
                <!-- Icon -->
                <div class="icon-box-circle">
                  <div class="icon-box-circle-inner">
                    <div class="icon-box-check">
                      <i class="icon-material-outline-check"></i>
                    </div>
                  </div>
                </div>
                <h3>You visit Quicker Easier Cheaper.com</h3>
                <p>
                  At Quicker Easier Cheaper.com you can look for solutions to
                  your problem in our resources centre, Speak to other members
                  and service providers in the discussion boards and if you
                  still need help…
                </p>
                <a href="{{ route('how_it_works') }}">More Information</a>
                
              </div>
              
            </div>

            <div class="col-xl-4 col-md-4">
              <!-- Icon Box -->
              <div class="icon-box">
                <!-- Icon -->
                <div class="icon-box-circle">
                  <div class="icon-box-circle-inner">
                    <div class="icon-box-check">
                      <i class="icon-material-outline-check"></i>
                    </div>
                  </div>
                </div>
                <h3>Create a job card.</h3>
                <p>
                  Select the category of your service needs upload photos,
                  videos and voice notes Indicate your time frame and proximity
                </p>
              </div>
            </div>
            
          </div>
        </div>

      </div>
      <!-- Icon Boxes / End -->

      <!-- Features Cities -->
      <div class="section gray padding-top-65 padding-bottom-65">
        <div class="container">
          <div class="row">
            <!-- Section Headline -->
            <div class="col-xl-12">
              <div
                class="section-headline centered margin-top-0 margin-bottom-45"
              >
                <h3>Service areas</h3>
              </div>
            </div>

            @foreach($result['service_areas'] as $area)
            <div class="col-xl-3 col-md-6">
              
              <a
                href="{{ URL::to('job-list/area/'.$area->id) }}"
                class="photo-box"
                data-background-image="{{ asset('demo-2/images/featured-city-01.jpg') }}"
              >
                <div class="photo-box-content">
                  <h3>{{ $area->area }}</h3>
                  <span>{{ $area->listings_count }} Jobs</span>
                </div>
              </a>
            </div>
          @endforeach

                      </div>
        </div>
      </div>
      <!-- Features Cities / End -->

      <!-- Counters -->
      <div class="section padding-top-70 padding-bottom-75">
        <div class="container">
          <div class="row">
            <div class="col-xl-12">
              <div class="counters-container">
                <!-- Counter -->
                <div class="single-counter">
                  <i class="icon-line-awesome-suitcase"></i>
                  <div class="counter-inner">
                    <h3><span class="counter">{{ $jobsPosted }}</span></h3>
                    <span class="counter-title">Jobs Posted</span>
                  </div>
                </div>

                <!-- Counter -->
                <div class="single-counter">
                  <i class="icon-line-awesome-legal"></i>
                  <div class="counter-inner">
                    <h3><span class="counter">{{ $clients }}</span></h3>
                    <span class="counter-title">Clients</span>
                  </div>
                </div>

                <!-- Counter -->
                <div class="single-counter">
                  <i class="icon-line-awesome-user"></i>
                  <div class="counter-inner">
                    <h3><span class="counter">{{ $activeMembers }}</span></h3>
                    <span class="counter-title">Active Members</span>
                  </div>
                </div>

                <!-- Counter -->
                <div class="single-counter">
                  <i class="icon-line-awesome-trophy"></i>
                  <div class="counter-inner">
                    <h3><span class="counter">{{ $satisfactionRate }}</span>%</h3>
                    <span class="counter-title">Satisfaction Rate</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Counters / End -->

      <!-- Footer
================================================== -->
      <div id="footer">
        <!-- Footer Middle Section -->
        <div class="footer-middle-section">
          <div class="container">
            <div class="row">
              <!-- Links -->
              <div class="col-xl-2 col-lg-2 col-md-3">
                <div class="footer-links">
                  <h3>The Company
				</h3>
                  <ul>
                    <li>
                      <a href="{{ route('about_us') }}"><span>About Us</span></a>
                    </li>
                    <li>
                      <a href="{{ route('what_we_do') }}"><span>What we do</span></a>
                    </li>
                    <li>
                      <a href="{{ route('who_we_cater_for') }}"><span>Who we cater to</span></a>
                    </li>
                    <li>
                      <a href="{{ route('contact_us') }}"><span>Contact us</span></a>
                    </li>
                  </ul>
                </div>
              </div>

              <!-- Links -->
              <div class="col-xl-2 col-lg-2 col-md-3">
                <div class="footer-links">
                  <h3>For Users and Service Providers</h3>
                  <ul>
                    <li>
                        <a href="{{ route('how_it_works') }}"><span>How it works</span></a>
                    </li>
                    <li>
                      <a href="{{ URL::to('post-job') }}"><span>Post a job</span></a>
                    </li>
                    <li>
                      <a href="#"><span>Browse Service Providers</span></a>
                    </li>
                    <li>
                      <a href="#"><span>Browse Job Cards</span></a>
                    </li>
                  </ul>
                </div>
              </div>

              <!-- Links -->
              <div class="col-xl-2 col-lg-2 col-md-3">
                <div class="footer-links">
                  <h3>Helpful Links</h3>
                  <ul>
                     <li>
                      <a href="#"><span>FAQ</span></a>
                    </li>
                    <li>
                      <a href="{{ URL::to('contact-us') }}"><span>Contact Us</span></a>
                    </li>
                    <li>
                      <a href="{{ URL::to('customer-service-policies') }}">
                          <span>Customer Service Policies</span></a>
                    </li>
                    <li>
                      <a href="{{ URL::to('terms-and-conditions') }}">
                          <span>Terms Of Service</span></a>
                    </li>
                    <li>
                      <a href="{{ URL::to('membership-plans') }}"><span>Pricing Plans</span></a>
                    </li>
                  </ul>
                </div>
              </div>

              <!-- Links -->
              <div class="col-xl-2 col-lg-2 col-md-3">
                <div class="footer-links">
                  <h3>Account</h3>
                  <ul>
                    <li>
                      <a href="#sign-in-dialog" class="popup-with-zoom-anim log-in-button"><span>Log In</span></a>
                    </li>
                    <li>
                      <a href="#sign-in-dialog" class="popup-with-zoom-anim log-in-button"><span>Register</span></a>
                    </li>
                  </ul>
                </div>
              </div>

              <!-- Newsletter -->
              <div class="col-xl-4 col-lg-4 col-md-12">
                <h3>
                  <i class="icon-feather-mail"></i> Sign Up For a Newsletter
                </h3>
                <p>
                  Weekly breaking news, analysis and cutting edge advices on job
                  searching.
                </p>
                <form action="{{ route('newsletter_signup') }}" method="post" class="newsletter">
                @csrf
                  <input
                    type="text"
                    name="email"
                    placeholder="Enter your email address"
                  />
                  <button type="submit" aria-label="signup to newsletter">
                    <i class="icon-feather-arrow-right"></i>
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
        <!-- Footer Middle Section / End -->

        <!-- Footer Copyrights -->
        <div class="footer-bottom-section">
          <div class="container">
            <div class="row">
              <div class="col-xl-12">
                © 2026 <strong>QEC</strong>. All Rights Reserved.
              </div>
            </div>
          </div>
        </div>
        <!-- Footer Copyrights / End -->
      </div>


   @endsection
   @section('scripts')
   <script src="{{ asset('demo-2/js/infobox.min.js') }}"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgB8MPFZiDcl5ydGMjPd7DRJtPMQDvOzE&libraries=places"></script>
    <script src="{{ asset('demo-2/js/markerclusterer.js') }}"></script>
    <script src="{{ asset('demo-2/js/maps.js') }}"></script>
  @endsection