@extends('front.master')

@section('body')
@php
$totalItems = \App\Models\Product::where('status', 1)->where('category_id', $category->id)->count();
$shownItems = $products->currentPage() * $products->perPage();
$shownItems = $shownItems > $totalItems ? $totalItems : $shownItems;
$progressPercentage = ($shownItems / $totalItems) * 100;
@endphp
<main class="main">
    <div class="section-box">
        <div class="breadcrumbs-div">
            <div class="container">
                <ul class="breadcrumb">
                    <li><a class="font-xs color-gray-1000" href="#" style="color:#000000">Home</a></li>
                    <li><a class="font-xs color-gray-500" href="#">{{ $category->section->name ?? "" }}</a></li>
                    <li><a class="font-xs color-gray-500" href="#">{{ $category->category_name }}</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="section-box shop-template mt-30">
        <div class="container">
            <div class="row">
                <div class="order-last col-lg-9 order-lg-last">

                    <div class="pb-5 mt-0 box-filters border-bottom">
                        <div class="row">
                            <div class="mb-10 text-center col-xl-2 col-lg-3 text-lg-start"><a class="font-medium btn btn-filter font-sm color-brand-3" href="#ModalFiltersForm" data-bs-toggle="modal">All Fillters</a></div>
                            <div class="mb-10 text-center col-xl-10 col-lg-9 text-lg-end"><span class="font-medium font-sm color-gray-900 border-1-right span" style="color:#000000">SHOWING {{ $shownItems }} of {{ $totalItems }} results</span>
                                <div style="visibility: hidden" class="d-inline-block"><span class="font-medium font-sm color-gray-500">Sort by:</span>
                                    <div class="dropdown dropdown-sort border-1-right">
                                        <button class="font-medium btn dropdown-toggle font-sm color-gray-900" id="dropdownSort" type="button" data-bs-toggle="dropdown" aria-expanded="false">Latest products</button>
                                        <ul class="dropdown-menu dropdown-menu-light" aria-labelledby="dropdownSort" style="margin: 0px;">
                                            <li><a class="dropdown-item active" href="#">Latest products</a></li>
                                            <li><a class="dropdown-item" href="#">Oldest products</a></li>
                                            <li><a class="dropdown-item" href="#">Comments products</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div style="visibility: hidden" class="d-inline-block"><span class="font-medium font-sm color-gray-500">Show</span>
                                    <div class="dropdown dropdown-sort border-1-right">
                                        <button class="font-medium btn dropdown-toggle font-sm color-gray-900" id="dropdownSort2" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static"><span>30
                                                items</span></button>
                                        <ul class="dropdown-menu dropdown-menu-light" aria-labelledby="dropdownSort2">
                                            <li><a class="dropdown-item active" href="#">30 items</a></li>
                                            <li><a class="dropdown-item" href="#">50 items</a></li>
                                            <li><a class="dropdown-item" href="#">100 items</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div style="visibility: hidden" class="d-inline-block"><a class="mr-5 view-type-grid active" href="shop-grid.html"></a><a class="view-type-list" href="shop-list.html"></a></div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-20 row">
                        @foreach ($products as $product)
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12">
                            <div class="card-grid-style-3">
                                <div class="card-grid-inner">
                                    <div class="tools" style="visibility: hidden"><a class="mb-10 btn btn-wishlist btn-tooltip" href="#" aria-label="Add To Wishlist"></a></div>
                                    <div class="image-box"><a href="{{ route('view-product', empty($product->slug) ? $product->id : $product->slug) }}"><img src="{{ $product->product_image }}" alt="Vintage"></a>
                                    </div>
                                    <div class="info-right" id="infoRight">
                                        
                                        <a class="color-brand-3 font-sm-bold" href="{{ route('view-product', empty($product->slug) ? $product->id : $product->slug) }}">{!! Str::limit($product->title ,18, ' ...') !!}</a>
                                        {{-- <div style="visibility: hidden" class="rating"><img src="assets/imgs/template/icons/star.svg" alt="Ecom"><img src="assets/imgs/template/icons/star.svg" alt="Ecom"><img src="assets/imgs/template/icons/star.svg" alt="Ecom"><img src="assets/imgs/template/icons/star.svg" alt="Ecom"><img src="assets/imgs/template/icons/star.svg" alt="Ecom"><span class="font-xs color-gray-500">(65)</span></div> --}}
                                        <div class="price-info"><strong class="font-sm-bold price-main" style="color: #f08237;">₦{{ number_format($product->price, 2) }}</strong></div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @if($products->count() > 20)
                    <nav>
                        <ul class="pagination">
                            {{-- Previous Page Link --}}
                            @if ($products->onFirstPage())
                            <li class="page-item disabled"><span class="page-link page-prev">Previous</span></li>
                            @else
                            <li class="page-item"><a class="page-link page-prev" href="{{ $products->previousPageUrl() }}">Previous</a></li>
                            @endif

                            {{-- Pagination Elements --}}
                            @foreach ($products->links()->elements as $element)
                            {{-- "Three Dots" Separator --}}
                            @if (is_string($element))
                            <li class="page-item disabled"><span class="page-link">{{ $element }}</span></li>
                            @endif

                            {{-- Array Of Links --}}
                            @if (is_array($element))
                            @foreach ($element as $page => $url)
                            @if ($page == $products->currentPage())
                            <li class="page-item active"><span class="page-link">{{ $page }}</span></li>
                            @else
                            <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
                            @endif
                            @endforeach
                            @endif
                            @endforeach

                            {{-- Next Page Link --}}
                            @if ($products->hasMorePages())
                            <li class="page-item"><a class="page-link page-next" href="{{ $products->nextPageUrl() }}">Next</a></li>
                            @else
                            <li class="page-item disabled"><span class="page-link page-next">Next</span></li>
                            @endif
                        </ul>
                    </nav>
                    @endif
                       {{-- <div class="text-center">
                        @if ($products->onFirstPage())
                            <span class="btn-link btn-link_lg text-uppercase fw-medium disabled">Previous</span>
                        @else
                            <a class="btn-link btn-link_lg text-uppercase fw-medium" href="{{ $products->previousPageUrl() }}">Previous</a>
                         @endif

                        @if ($products->hasMorePages())
                            <a class="btn-link btn-link_lg text-uppercase fw-medium" href="{{ $products->nextPageUrl() }}">Next</a>
                        @else
                        <span class="btn-link btn-link_lg text-uppercase fw-medium disabled">Next</span>
                        @endif
                        </div> --}}
                </div>
            <div class="order-first col-lg-3 order-lg-first">
                <div class="mb-40 sidebar-border">
                    <div class="sidebar-head">
                        <h6 class="color-gray-900" style="color:#000000">Products Filter</h6>
                    </div>
                    <div class="sidebar-content">
                        @foreach ($variables as $variableKey => $variable)
                            <h6 class="mt-10 mb-10 color-gray-900" style="color:#000000">{{ $variable['name'] }}</h6>
                            <ul class="list-checkbox">
                                @foreach ($variable['values'] as $index => $value)
                                <a href="{{ request()->fullUrlWithQuery([$variableKey =>  $value]) }}">
                                    <li>
                                        <label class="cb-container">
                                            <input type="checkbox" @if (request()->input($variableKey) == $value)
                                        checked="checked"
                                    @endif
                                                @if (request()->input($variable['name']) === $value) checked="checked" @endif
                                                name="{{ $variableKey }}"
                                                value="{{ $value }}"
                                                onclick="updateUrl(this, '{{ $variableKey }}', '{{ $value }}')">
                                            <span class="text-small">{{ $value }}</span>
                                            <span class="checkmark"></span>
                                        </label>
                                        <span class="number-item">{{ $variable['total'][$index] }}</span>
                                    </li>
                                </a>
                                @endforeach
                            </ul>
                        @endforeach
                        @foreach ($params as $param)
                        <h6 class="mt-20 mb-10 color-gray-900" style="color:#000000">{{ $param->label }}</h6>
                        <ul class="list-checkbox">
                            {{-- {{  dd($param->postings[0]['values']) }} --}}
                            @foreach ($param->postings['values'] as $key => $single)
                            <a href="{{ request()->fullUrlWithQuery([$param->name => $single]) }}">
                                <li>
                                    <label class="cb-container">
                                        <input type="checkbox"  @if (request()->input($param->name) == $single)
                                        checked="checked"
                                    @endif  name="{{ $param->name }}" value="{{ $single }}" onclick="updateUrl(this, '{{ $param->name }}', '{{ $single }}')"><span class="text-small">{{ $single }}</span><span class="checkmark"></span>
                                    </label><span class="number-item">{{ $param->postings['total'][$key] }}</span>
                                </li>
                            </a>
                            @endforeach
                        </ul>
                        @endforeach

                        <a class="btn btn-filter font-sm color-brand-3 font-medium mt-10" href="#ModalFiltersForm" data-bs-toggle="modal">More Filters</a>
                    </div>
                </div>


                <!-- <div class="text-center banner-right h-500 mb-30"><span class="text-no font-11">No.9</span>
                <h5 class="mt-20 font-23">Sensitive Touch<br class="d-none d-lg-block">without fingerprint</h5>
                <p class="text-desc font-16 mt-15">Smooth handle and accurate click</p><a href="shop-single-product-2.html">View Details</a>
              </div> -->
            </div>
        </div>
    </div>
    <div class="modal fade" id="ModalFiltersForm" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
          <div class="modal-content apply-job-form">
            <div class="modal-header">
              <h5 class="modal-title color-gray-1000 filters-icon">Advance Filters</h5>
              <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-30">
              <div class="row">
                <div class="col-w-1">
                  <h6 class="color-gray-900 mb-0">Brands</h6>
                  <ul class="list-checkbox">
                    <li>
                      <label class="cb-container">
                        <input type="checkbox" checked="checked"><span class="text-small">Apple</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Samsung</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Baseus</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Remax</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Handtown</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Elecom</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Razer</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Auto Focus</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Nillkin</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Logitech</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">ChromeBook</span><span class="checkmark"></span>
                      </label>
                    </li>
                  </ul>
                </div>
                <div class="col-w-1">
                  <h6 class="color-gray-900 mb-0">Special offers</h6>
                  <ul class="list-checkbox">
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">On sale</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox" checked="checked"><span class="text-small">FREE shipping</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Big deals</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Shop Mall</span><span class="checkmark"></span>
                      </label>
                    </li>
                  </ul>
                  <h6 class="color-gray-900 mb-0 mt-40">Ready to ship in</h6>
                  <ul class="list-checkbox">
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">1 business day</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox" checked="checked"><span class="text-small">1&ndash;3 business days</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">in 1 week</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Shipping now</span><span class="checkmark"></span>
                      </label>
                    </li>
                  </ul>
                </div>
                <div class="col-w-1">
                  <h6 class="color-gray-900 mb-0">Ordering options</h6>
                  <ul class="list-checkbox">
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Accepts gift cards</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Customizable</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox" checked="checked"><span class="text-small">Can be gift-wrapped</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Installment 0%</span><span class="checkmark"></span>
                      </label>
                    </li>
                  </ul>
                  <h6 class="color-gray-900 mb-0 mt-40">Some Options</h6>
                  <ul class="list-checkbox">
                      <li>
                        <label class="cb-container">
                          <input type="checkbox"><span class="text-small">Accepts gift cards</span><span class="checkmark"></span>
                        </label>
                      </li>
                      <li>
                        <label class="cb-container">
                          <input type="checkbox"><span class="text-small">Customizable</span><span class="checkmark"></span>
                        </label>
                      </li>
                      <li>
                        <label class="cb-container">
                          <input type="checkbox" checked="checked"><span class="text-small">Can be gift-wrapped</span><span class="checkmark"></span>
                        </label>
                      </li>
                      <li>
                        <label class="cb-container">
                          <input type="checkbox"><span class="text-small">Installment 0%</span><span class="checkmark"></span>
                        </label>
                      </li>
                  </ul>
                </div>
                <div class="col-w-2">
                  <h6 class="color-gray-900 mb-0">Material</h6>
                  <ul class="list-checkbox">
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Nylon (8)</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Tempered Glass (5)</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox" checked="checked"><span class="text-small">Liquid Silicone Rubber (5)</span><span class="checkmark"></span>
                      </label>
                    </li>
                    <li>
                      <label class="cb-container">
                        <input type="checkbox"><span class="text-small">Aluminium Alloy (3)</span><span class="checkmark"></span>
                      </label>
                    </li>
                  </ul>
                  <h6 class="color-gray-900 mb-20 mt-40">Product tags</h6>
                  <div><a class="btn btn-border mr-5" href="#">Games</a><a class="btn btn-border mr-5" href="#">Electronics</a><a class="btn btn-border mr-5" href="#">Video</a><a class="btn btn-border mr-5" href="#">Cellphone</a><a class="btn btn-border mr-5" href="#">Indoor</a><a class="btn btn-border mr-5" href="#">VGA Card</a><a class="btn btn-border mr-5" href="#">USB</a><a class="btn btn-border mr-5" href="#">Lightning</a><a class="btn btn-border mr-5" href="#">Camera</a></div>
                </div>
              </div>
            </div>
            <div class="modal-footer justify-content-start pl-30"><a class="btn btn-buy w-auto" href="#">Apply Fillter</a><a class="btn font-sm-bold color-gray-500" href="#">Reset Fillter</a></div>
          </div>
        </div>
    </div>
    </div>
</main>
@endsection