@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"
                  >
                    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"
                        >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>Intro video here</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">
                    <i class="icon-line-awesome-lock"></i>
                    <div class="icon-box-check">
                      <i class="icon-material-outline-check"></i>
                    </div>
                  </div>
                </div>
                <h3>Create an Account</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </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">
                    <i class="icon-line-awesome-legal"></i>
                    <div class="icon-box-check">
                      <i class="icon-material-outline-check"></i>
                    </div>
                  </div>
                </div>
                <h3>Post a Job</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </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">
                    <i class="icon-line-awesome-trophy"></i>
                    <div class="icon-box-check">
                      <i class="icon-material-outline-check"></i>
                    </div>
                  </div>
                </div>
                <h3>Choose a Service Provider</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </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>For Tradespeople
				</h3>
                  <ul>
                    <li>
                      <a href="{{ URL::to('job-list') }}"><span>Browse Jobs</span></a>
                    </li>
                    <li>
                      <a href="#"><span>Link 2</span></a>
                    </li>
                    <li>
                      <a href="#"><span>Link 3</span></a>
                    </li>
                    <li>
                      <a href="#"><span>Link 4</span></a>
                    </li>
                  </ul>
                </div>
              </div>

              <!-- Links -->
              <div class="col-xl-2 col-lg-2 col-md-3">
                <div class="footer-links">
                  <h3>For Employers</h3>
                  <ul>
                    <li>
                      <a href="{{ URL::to('post-job') }}"><span>Post a job</span></a>
                    </li>
                    <li>
                      <a href="#"><span>Link 2</span></a>
                    </li>
                    <li>
                      <a href="#"><span>Link 3</span></a>
                    </li>
                    <li>
                      <a href="#"><span>Link 4</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="{{ 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 Plas</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">
                    <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