@extends('out.pages_master')

@section('styles')

@section('content')
<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>
        @isset($category)
        <li>{{ $category->section->name ?? "" }} </li>
        <li> {{ $category->category_name ?? "" }} </li>
        @endisset
      </ul>
    </div>
  </nav>
  <!-- End of Breadcrumb -->
  <!-- Start of Page Content -->
  @if($products->count() > 0)
  <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>



            <div class="toolbox-right">
              <div class="toolbox-item toolbox-show select-box" style="visibility: hidden">
                <select name="count" class="form-control">
                  <option value="condition" selected="selected">Condition</option>
                  <option value="Brand new">Brand new</option>
                  <option value="Foreign used">Foreign used</option>
                  <option value="Nigerian used">Nigerian used</option>
                </select>
              </div>
              <div class="toolbox-item toolbox-layout" style="visibility: hidden">
                <div
                  onclick="setShopDisplay('grid')"
                  class="icon-mode-grid btn-layout active"
                  style="cursor: pointer">
                  <i class="w-icon-grid"></i>
                </div>
                <div
                  onclick="setShopDisplay('list')"
                  class="icon-mode-list btn-layout"
                  style="cursor: pointer">
                  <i class="w-icon-list"></i>
                </div>
              </div>
            </div>
          </nav>

          <!-- Grid mode products -->
          <div
            class="product-wrapper masonry-grid grid-mode row cols-xl-6 cols-lg-5 cols-md-4 cols-sm-3 cols-2 appear-animate">
            @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>

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

          <!-- 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 -->
              <div class="widget widget-collapsible">
                <h3 class="widget-title"><span> Categories</span></h3>
                <ul class="widget-body filter-items search-ul">
                  @foreach ($categos as $section)
                  <li><a href="{{ route('category-products', $section->id) }}">{{ $section->category_name }}</a></li>
                  @endforeach
                </ul>
              </div>
              <!-- 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>
                  {{-- <form class="price-range">
                        <input
                          type="number"
                          name="min_price"
                          class="min_price text-center"
                          placeholder="$min"
                        /><span class="delimiter">-</span
                        ><input
                          type="number"
                          name="max_price"
                          class="max_price text-center"
                          placeholder="$max"
                        /><a href="#" class="btn btn-primary btn-rounded">Go</a>
                      </form> --}}
                </div>
              </div>
              <!-- End of Collapsible Widget -->

              <!-- Start of Collapsible Widget -->
              {{-- @foreach ($variables as $variableKey => $variable)
                    <div class="widget widget-collapsible">
                      <h3 class="widget-title"><span>{{ $variable['name'] }}</span></h3>
              <ul class="widget-body filter-items item-check mt-1">
                @foreach ($variable['values'] as $index => $value)
                <li @if (request()->input($variable['name']) == $value) class="active" @endif onclick="updateUrl(this, '{{ $variableKey }}', '{{ $value }}')"><a href="{{ request()->fullUrlWithQuery([$variableKey =>  $value]) }}">{{ $value }}</a></li>
                @endforeach
              </ul>
            </div>
            @endforeach --}}
            @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>
  @else
  <h4 style="text-align: center">Oops... we do not have what you're searching for. Please search for something else </h4>
  @endif
  <!-- End of Page Content -->
</main>
@endsection
@section('js')
@include('location')

<!-- 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