@extends('frontend.layouts.app')

@section('title') {{ __($module_title) }} @endsection

@section('content')

 <style>
.pagination .page-link {
    border-radius: 50%;
    margin: 0 3px;
}
</style>
<!-- ================================
    START BREADCRUMB AREA
================================= -->
<section class="breadcrumb-area bread-bg">
   <div class="overlay"></div>
   <div class="container">
      <div class="breadcrumb-content text-center">
         <h2 class="sec__title text-white mb-3">Listing</h2>
         <ul class="bread-list">
            <li><a href="{{ url('/') }}">Home</a></li>
            <li>Listing</li>
         </ul>
      </div>
   </div>
</section>

<!-- ================================
    START SEARCH AREA
================================= -->
<section class="card-area padding-bottom-30px pt-4">
   <div class="container">
      <div class="card">
         <div class="card-body">

            <form method="GET" action="{{ url('business-category') }}">
               <div class="row">

                  <div class="col-lg-6">
                     <input type="text" name="search"
                        value="{{ request('search') }}"
                        class="form-control"
                        placeholder="Search business...">
                  </div>

                  <div class="col-lg-3">
                     <select name="sort" class="form-control">
                        <option value="">Sort By</option>
                        <option value="newest" {{ request('sort')=='newest'?'selected':'' }}>Newest</option>
                        <option value="oldest" {{ request('sort')=='oldest'?'selected':'' }}>Oldest</option>
                     </select>
                  </div>

                  <div class="col-lg-3">
                     <button class="theme-btn w-100">Search</button>
                  </div>

               </div>
            </form>

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

<!-- ================================
    START LISTING AREA
================================= -->
<section class="card-area padding-bottom-90px">
   <div class="container">

      <div class="row">
         <div class="col-lg-12">

            <div class="listing-wrapper">
               <div class="row">

                  @forelse($listings as $item)
                  <div class="col-lg-6">
                     <div class="card card-flex">
                      <a href="{{ url(
                          Str::slug($city) . '/' .
                          Str::slug(optional($item->category)->name) . '/' .
                          Str::slug(optional($item->subCategory)->name) . '/' .
                          Str::slug($item->business_name)
                      ) }}" class="card-image">
                           <img src="{{ asset('business_images/'.$item->business_logo) }}"
                              class="card-img-top"
                              alt="{{ $item->business_name }}">
                        </a>

                        <div class="card-body">

                           <h4 class="card-title mb-2">
                              {{ $item->business_name }}
                           </h4>

                           <ul class="info-list mt-3">
                              <li>
                                 <span class="fa fa-map-marker icon"></span>
                                 {{ $item->address }}
                              </li>
                              <li>
                                <span class="fal fa-phone icon"></span>
                                <a href="tel:{{ preg_replace('/[^0-9+]/', '', $item->business_phone) }}">
                                    {{ $item->business_phone }}
                                </a>
                              </li>
                           </ul>

                           <div class="mt-3">
                              <a href="https://wa.me/{{ $item->business_phone }}"
                                 class="btn btn-success btn-sm text-white">
                                 <i class="fab fa-whatsapp"></i> Whatsapp
                              </a>

                              <a href="mailto:{{ $item->business_email }}?subject=Business Enquiry&body=Hello, I want to know more about your service."
                              class="btn btn-danger btn-sm text-white">
                              Send Enquiry
                            </a>
                           </div>

                        </div>

                     </div>
                  </div>
                  @empty
                  <div class="col-12 text-center">
                     <p>No listings found</p>
                  </div>
                  @endforelse

               </div>
            </div>

            <!-- Pagination -->
            <div class="mt-4 text-center">
                {{ $listings->links('pagination::bootstrap-5') }}
            </div>

         </div>
      </div>

   </div>
</section>
@endsection