@extends('out.pages_master')

@section('title')
{{ $category->meta_title }}
@endsection

@section('description')
{{ $category->meta_description }}
@endsection

@section('keywords')
{{ $category->meta_keywords }}
@endsection


@section('content')

<style>
  .pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }

  .custom-pagination {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 10px;
    flex-wrap: wrap;
  }

  .custom-pagination li {
    padding: 8px 14px;
    background-color: #ffece0;
    border: 1px solid #ff9a5b;
    border-radius: 6px;
    color: #ff7a00;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.3s ease, color 0.3s ease;
  }

  .custom-pagination li:hover {
    background-color: #ff9a5b;
    color: #fff;
  }

  .custom-pagination li a {
    text-decoration: none;
    color: inherit;
    display: block;
  }

  .custom-pagination li.active {
    background-color: #ff7a00;
    color: #fff;
    font-weight: bold;
    border-color: #ff7a00;
  }

  .custom-pagination li.disabled {
    pointer-events: none;
    opacity: 0.4;
  }
</style>

<main class="main">
  <!-- Start of Breadcrumb -->
  <nav class="breadcrumb-nav">
    <div class="container">
      <ul class="breadcrumb bb-no">
        <li><a href="/">Home</a></li>
        <li>Shop</li>
        <li>{{ $category->section->name ?? "" }}</li>
        <li>{{ $category->category_name }}</li>
      </ul>
    </div>
  </nav>
  <!-- End of Breadcrumb -->

  <!-- Start of Page Content -->
  <div class="page-content mb-10">

    <div class="shop-default-banner shop-boxed-banner banner d-flex align-items-center mb-6"
      style="background-color: #272625;">
      <div class="container banner-content">
        <h4 class="banner-subtitle font-weight-bold text-white" style="color: #fff;">{{ $category->section->name ?? "" }}</h4>
        <h3 class="banner-title text-uppercase font-weight-bolder ls-10" style="color: #ffc74e;">{{ $category->category_name }}</h3>
        <a href="shop-banner-sidebar.html" class="btn btn-dark btn-rounded btn-icon-right" style="visibility: hidden;">Discover
          Now<i class="w-icon-long-arrow-right"></i></a>
      </div>
    </div>

    @include('out.promo-banner')
    <!-- End of Shop Banner -->
    <div class="container-fluid">
      <!-- Start of Shop Content -->
      <div class="shop-content">
        <!-- Start of Shop Main Content -->
        <div class="main-content">
          <nav class="toolbox sticky-toolbox sticky-content fix-top">
            <div class="toolbox-left">
              <a
                href="#"
                class="btn btn-primary btn-outline btn-rounded left-sidebar-toggle btn-icon-left"><i class="w-icon-category"></i><span>Filters</span></a>
              <div class=" region-toggle-container">
                <label>Sort By :</label>
                <a href="#"
                  class="btn region-toggle btn-primary btn-outline btn-rounded  openLocationSelector btn-icon-left ">
                  <span>Region</span></a>

                </a>
              </div>

            </div>

          </nav>

          <!-- Grid mode products -->
          <div class="product-wrapper grid-mode row masonry-grid cols-xl-6 cols-lg-5 cols-md-4 cols-sm-3 cols-2">
            @foreach ($products as $product)
            <div class="product-wrap grid-item">
              <div class="product text-center" id="product" style="margin-bottom: 20px">
                <figure class="product-media">
                  <a href="{{ route('view-product', empty($product->slug) ? $product->id : $product->slug) }}">
                    <img
                      src="{{ $product->product_image }}"
                      alt="Product"
                      width="300"
                      height="338" />
                  </a>
                  <div class="product-action-vertical">
                    <a
                      href="{{ route('view-product', empty($product->slug) ? $product->id : $product->slug) }}"
                      @if (Auth::guard('admin')->check()) data-url="{{ route('add-to-wish-list') }}" data-id="{{ $product->id }}" class="btn-product-icon btn-wishlist @if(in_array($product->id,Auth::guard('admin')->user()->wish() ))added w-icon-heart-full @else w-icon-heart @endif" @else class="btn-product-icon w-icon-heart openSignInModal" @endif
                      title="Add to wishlist"
                      ></a>
                  </div>
                </figure>
                <div class="product-details">
                  <h4 class="product-name">
                    <a href="{{ route('view-product', empty($product->slug) ? $product->id : $product->slug) }}" style="font-size: 15px">{{ $product->title }}</a>
                  </h4>
                  <p>
                    <a
                      href="{{ route('view-product', empty($product->slug) ? $product->id : $product->slug) }}"
                      style="padding-left: 10px; font-size: 13px; color: gray;">{!! Str::limit($product->description ,60, ' ...') !!}</a>
                  </p>
                  <span>
                    <i class="w-icon-map-marker" style="font-size: 16px; margin-right: 5px;"></i>
                    <span style="font-size: 14px;"> {{ $product->area.', '.$product->state }}</span>
                  </span><br>
                  <div class="product-price">
                    <span class="price" style="color: #f08237;">₦{{ number_format($product->price, 2) }}</span>
                  </div>
                </div>
              </div>
            </div>
            @endforeach
          </div>

          <!-- PAGINATION -->
          @if ($products->hasPages())
          <div class="pagination-wrapper">
            <ul class="custom-pagination">
              {{-- Previous Page Link --}}
              @if ($products->onFirstPage())
              <li class="disabled">&laquo;</li>
              @else
              <li><a href="{{ $products->previousPageUrl() }}">&laquo;</a></li>
              @endif

              {{-- Pagination Elements --}}
              @foreach ($products->links()->elements[0] as $page => $url)
              @if ($page == $products->currentPage())
              <li class="active">{{ $page }}</li>
              @else
              <li><a href="{{ $url }}">{{ $page }}</a></li>
              @endif
              @endforeach

              {{-- Next Page Link --}}
              @if ($products->hasMorePages())
              <li><a href="{{ $products->nextPageUrl() }}">&raquo;</a></li>
              @else
              <li class="disabled">&raquo;</li>
              @endif
            </ul>
          </div>
          @endif

          <!-- List mode products -->
          <!-- List mode products -->

          <hr style="height: 1px; background-color: #000; border: none;">
          {!! $category->description !!}

          <!-- End of Shop Main Content -->

          <!-- Start of Sidebar, Shop Sidebar -->
          <aside
            class="sidebar shop-sidebar left-sidebar sticky-sidebar-wrapper">
            <!-- Start of Sidebar Overlay -->
            <div class="sidebar-overlay"></div>
            <a class="sidebar-close" href="#"><i class="close-icon"></i></a>

            <!-- Start of Sidebar Content -->
            <div class="sidebar-content scrollable">
              <div class="filter-actions">
                <label>Filter :</label>
                {{-- <a href="#" class="btn btn-dark btn-link filter-clean"
                  >Clean All</a
                > --}}
              </div>
              <!-- Start of Collapsible widget -->

              <!-- End of Collapsible Widget -->

              <!-- Start of Collapsible Widget -->
              <div class="widget widget-collapsible">
                <h3 class="widget-title"><span>Price</span></h3>
                <div class="widget-body">
                  <ul class="filter-items search-ul">
                    @foreach ($ranges as $key => $single)
                    <li><a href="{{ request()->fullUrlWithQuery(["price" => $single->id]) }}">{{ $single->name }}</a></li>
                    @endforeach
                  </ul>
                  @if($category->id == 6 || $category->section_id != 1)
                  <form class="price-range saveRangeInput" method="GET" action="{{ request()->url() }}">
                    <input
                      type="number"
                      name="min_price"
                      class="min_price text-center"
                      placeholder="₦min"
                      required /><span class="delimiter">-</span><input
                      type="number"
                      name="max_price"
                      class="max_price text-center"
                      placeholder="₦max"
                      required /><a href="#" class="btn btn-primary btn-rounded rangeButton">Go</a>
                  </form>
                  @endif
                </div>
              </div>
              <!-- End of Collapsible Widget -->

              <!-- Start of Collapsible Widget -->
              @foreach ($params as $param)
              @if(count($param->postings['values']) > 0)
              <div class="widget widget-collapsible">
                <h3 class="widget-title"><span>{{ $param->label }}</span></h3>
                <ul class="widget-body filter-items item-check mt-1">
                  @foreach ($param->postings['values'] as $key => $single)
                  @if($single != "" || $single != NULL)
                  <li onclick="updateUrl(this, '{{ $param->name }}', '{{ $single }}')" @if (request()->input($param->name) == $single) class="active" @endif ><a href="{{ request()->fullUrlWithQuery([$param->name => $single]) }}">{{ $single }}</a></li>
                  @endif
                  @endforeach
                </ul>
              </div>
              @endif
              @endforeach
              <!-- End of Collapsible Widget -->

            </div>
            <!-- End of Sidebar Content -->
          </aside>
          <!-- End of Shop Sidebar -->
        </div>
        <!-- End of Shop Content -->
      </div>
    </div>
    <!-- End of Page Content -->
</main>

@endsection

@section('js')
@include('location')
<script>
  $(document).ready(function() {
    $('.rangeButton').click(function(event) {
      event.preventDefault(); // Prevent the default anchor behavior
      $('.saveRangeInput').submit(); // Submit the form
    });
  });
</script>



<!-- Load Masonry Layout -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<!-- Load imagesLoaded (vanilla JavaScript version) -->
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>


<script>
  document.addEventListener("DOMContentLoaded", function() {
    var masonryGrid = document.querySelector('.masonry-grid');

    if (masonryGrid) {
      imagesLoaded(masonryGrid, function() {
        var msnry = new Masonry(masonryGrid, {
          itemSelector: '.grid-item',
          columnWidth: '.grid-item',
          percentPosition: true
        });

        // Optional: re-layout after a short delay (helps in slow networks)
        setTimeout(() => msnry.layout(), 500);
      });

      // Re-layout Masonry on window resize
      window.addEventListener('resize', function() {
        if (masonryGrid._masonry) {
          masonryGrid._masonry.layout();
        }
      });
    }
  });
</script>



@endsection