@extends('layouts.public.app')

@section('title', 'Search | Chemical Wholesale')
@section('description', 'Search chemicals, raw materials, from verified suppliers on ChemicalWholesale. Find exactly what you need for manufacturing, research, or distribution.')
@section('keywords', 'chemical search, buy bulk chemicals, chemical suppliers, chemical distributor, industrial chemicals, chemical marketplace')

@section('content')
    <div class="greybg">
        <div class="search-keywords">
            <div class="container-fluid">
                <div class="top-filter border-0 ps-0">
                    <p class="search-keywords-text">
                        @if ($products->count() > 0)
                            {{ $products->count() }} of {{ $products->total() }} results for
                            "<a href="#!">{{ @$keyword['keyword'] != '' ? $keyword['keyword'] : 'All Products' }}</a>"
                            @if (count($filters) > 0)
                                with Filters
                            @endif
                        @else
                            No Products to show.
                        @endif
                    </p>
                    <div class="view-container">
                        <a class="icon {{ $requestView == 'public.search.list' ? 'active' : '' }}"
                            onclick="submitSearchFilterForm(event, 'list')"><i class="bi bi-list-task"></i></a>
                        <a class="icon {{ $requestView == 'public.search.card' ? 'active' : '' }}"
                            onclick="submitSearchFilterForm(event, 'card')"><i class="bi bi-grid"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="search-filter-results mt-3">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-3">
                        <form action="{{ route('public.searchcard') }}" method="post" id="searchFilterForm">
                            @csrf
                            <input type="text" name="view" id="viewInput"
                                value="{{ $requestView == 'public.search.list' ? 'list' : 'card' }}" hidden>
                            <input type="text" name="page" value="{{ $request->page ?: 1 }}" hidden>

                            <div class="filter-card mb-lg-0 border-bottom-0">
                                <div class="filter-card-title">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>Filters</span>
                                        <div>
                                            @if (count($filters) > 0)
                                                <a href="{{ route('public.search_keyword', 'all') }}"
                                                    class="small">Reset</a>
                                            @endif
                                            <a onclick="toggleFilter()" class="text-dark ms-2 d-lg-none"><i
                                                    class="bi bi-sort-down fs-5"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-card border-top-0 filter-id" id="filterId">
                                @if (count($filters) > 0)
                                    <div class="px-3 py-2">
                                        @foreach ($filters as $filter)
                                            <span class="blog-tags d-block">
                                                <span class="small fw-bold">{{ ucfirst($filter['type']) }}</span>
                                                @foreach ($filter['name'] as $name)
                                                    <span class="blog-tag">{{ $name }}</span>
                                                @endforeach
                                            </span>
                                        @endforeach
                                    </div>
                                @endif
                                {{--
                                <div class="trade-assurance">
                                    <div class="trade-input">
                                        <input type="checkbox" class="form-check">
                                        <div class="ms-2">
                                            <div class="trade-title">
                                                <img src="/assets/img/icons/safety.png" alt="safety" style="height: 20px">
                                                Trade Assurance
                                            </div>
                                            <p class="trade-p text-grey">
                                                Protects your orders on Chemical
                                                Wholesale
                                            </p>
                                        </div>
                                    </div>
                                </div> --}}
                                <div class="accordion">
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#supplier" aria-expanded="true" aria-controls="supplier">
                                                Suppliers
                                            </button>
                                        </h2>
                                        <div id="supplier" class="accordion-collapse collapse show">
                                            <div class="accordion-body">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="supplier_type"
                                                        value="all" onchange="this.form.submit()"
                                                        {{ @$request['supplier_type'] == 'all' ? 'checked' : '' }} checked>
                                                    <label class="form-check-label">
                                                        All Suppliers
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="supplier_type"
                                                        value="verified" onchange="this.form.submit()"
                                                        {{ @$request['supplier_type'] == 'verified' ? 'checked' : '' }}>
                                                    <label class="form-check-label">
                                                        <img src="/assets/img/icons/verified.png" alt="verified"
                                                            style="height:20px" class="ms-1 me-1">
                                                        Suppliers
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#price" aria-expanded="true" aria-controls="price">
                                                Price
                                            </button>
                                        </h2>
                                        <div id="price" class="accordion-collapse collapse show">
                                            <div class="accordion-body">
                                                <div class="">
                                                    <select name="price" class="form-control form-select cw-input"
                                                        onchange="this.form.submit()">
                                                        <option value="lowhigh"
                                                            {{ @$request['price'] == 'lowhigh' ? 'selected' : '' }}>
                                                            Low to High
                                                        </option>
                                                        <option value="highlow"
                                                            {{ @$request['price'] == 'highlow' ? 'selected' : '' }}>
                                                            High to Low
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="accordion-item">
                                        @php
                                            $selectedCategory = @$request->input('category', []);
                                        @endphp
                                        <h2 class="accordion-header">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#category" aria-expanded="true" aria-controls="category">
                                                Categories
                                            </button>
                                        </h2>
                                        <div id="category" class="accordion-collapse collapse show">
                                            <div class="accordion-body">
                                                <div class="filter-scroll-div">
                                                    @if (count($categories) > 0)
                                                        @foreach ($categories->where('parent_id', 0) as $category)
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="category[]" value="{{ $category->id }}"
                                                                    {{ in_array($category->id, $selectedCategory) ? 'checked' : '' }}>
                                                                <label class="form-check-label">
                                                                    {{ @$category->name ?: 'N.A' }}
                                                                </label>
                                                            </div>

                                                            @foreach ($category->activeChilds as $hassubchild)
                                                                <div class="form-check ms-2">
                                                                    <input class="form-check-input" type="checkbox"
                                                                        name="category[]" value="{{ $hassubchild->id }}"
                                                                        {{ in_array($hassubchild->id, $selectedCategory) ? 'checked' : '' }}>
                                                                    <label class="form-check-label">
                                                                        {{ @$hassubchild->name ?: 'N.A' }}
                                                                    </label>
                                                                </div>
                                                                @foreach ($hassubchild->activeChilds as $subchild2)
                                                                    <div class="form-check ms-4">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            name="category[]"
                                                                            value="{{ $subchild2->id }}"
                                                                            {{ in_array($subchild2->id, $selectedCategory) ? 'checked' : '' }}>
                                                                        <label class="form-check-label">
                                                                            {{ @$subchild2->name ?: 'N.A' }}
                                                                        </label>
                                                                    </div>
                                                                @endforeach
                                                            @endforeach
                                                        @endforeach
                                                    @else
                                                        <p class="bg-light p-2 rounded">No industries to show.</p>
                                                    @endif
                                                </div>
                                                <button type="submit" class="filter-submit mt-3">Apply</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="accordion-item">
                                        @php
                                            $selectedIndustry = @$request->input('industry', []);
                                        @endphp
                                        <h2 class="accordion-header">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#industry" aria-expanded="true" aria-controls="industry">
                                                Industry
                                            </button>
                                        </h2>
                                        <div id="industry" class="accordion-collapse collapse show">
                                            <div class="accordion-body">

                                                @if (count($industries) > 0)
                                                    <div class="filter-scroll-div">
                                                        @foreach ($industries as $industry)
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="industry[]" value="{{ $industry->id }}"
                                                                    {{ in_array($industry->id, $selectedIndustry) ? 'checked' : '' }}>
                                                                <label class="form-check-label">
                                                                    {{ @$industry->name ?: 'N.A' }}
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                        
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox"
                                                                name="industry[]" value="0"
                                                                {{ in_array(0, $selectedIndustry) ? 'checked' : '' }}>
                                                            <label class="form-check-label">
                                                                Others
                                                            </label>
                                                        </div>
                                                    </div>
                                                @else
                                                    <p class="bg-light p-2 rounded">No industries to show.</p>
                                                @endif
                                                <button type="submit" class="filter-submit mt-3">Apply</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="accordion-item">
                                        @php
                                            $selectedApplication = @$request->input('application', []);
                                        @endphp
                                        <h2 class="accordion-header">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#application" aria-expanded="true"
                                                aria-controls="application">
                                                Application
                                            </button>
                                        </h2>
                                        <div id="application" class="accordion-collapse collapse show">
                                            <div class="accordion-body">

                                                @if (count($applications) > 0)
                                                    <div class="filter-scroll-div">
                                                        @foreach ($applications as $application)
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="application[]" value="{{ $application->id }}"
                                                                    {{ in_array($application->id, $selectedApplication) ? 'checked' : '' }}>
                                                                <label class="form-check-label">
                                                                    {{ @$application['name'] ?: 'N.A' }}
                                                                </label>
                                                            </div>
                                                        @endforeach

                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox"
                                                                name="application[]" value="0"
                                                                {{ in_array(0, $selectedApplication) ? 'checked' : '' }}>
                                                            <label class="form-check-label">
                                                                Others
                                                            </label>
                                                        </div>
                                                    </div>
                                                @else
                                                    <p class="bg-light p-2 rounded">No applications to show.</p>
                                                @endif
                                                <button type="submit" class="filter-submit mt-3">Apply</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="accordion-item">
                                        @php
                                            $selectedGrade = @$request->input('grade', []);
                                        @endphp
                                        <h2 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#grade" aria-expanded="true"
                                                aria-controls="grade">
                                                Grade
                                            </button>
                                        </h2>
                                        <div id="grade" class="accordion-collapse collapse">
                                            <div class="accordion-body">

                                                @if (count($grade) > 0)
                                                    @foreach ($grade as $g)
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox"
                                                                name="grade[]" value="{{ $g }}"
                                                                {{ in_array($g, $selectedGrade) ? 'checked' : '' }}>
                                                            <label class="form-check-label">
                                                                {{ @$g ?: 'N.A' }}
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                @else
                                                    <p class="bg-light p-2 rounded">No grades to show.</p>
                                                @endif
                                                <button type="submit" class="filter-submit mt-3">Apply</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        @php
                                            $selectedBrands = @$request->input('brand', []);
                                        @endphp
                                        <h2 class="accordion-header">
                                            <button
                                                class="accordion-button {{ !empty($selectedBrands) ? '' : 'collapsed' }}"
                                                type="button" data-bs-toggle="collapse" data-bs-target="#brand"
                                                aria-expanded="true" aria-controls="brand">
                                                Brand
                                            </button>
                                        </h2>
                                        <div id="brand" class="accordion-collapse collapse">
                                            <div class="accordion-body">
                                                @if (count($brands) > 0)
                                                    @foreach ($brands as $b)
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox"
                                                                name="brand[]" value="{{ $b }}"
                                                                {{ in_array($b, $selectedBrands) ? 'checked' : '' }}>
                                                            <label class="form-check-label">
                                                                {{ $b }}
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                @else
                                                    <p class="bg-light p-2 rounded">No brands to show.</p>
                                                @endif
                                                <button type="submit" class="filter-submit mt-3">Apply</button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-lg-9">

                        <div class="product-card-container mb-4">
                            <div class="row g-3">
                                {{--
                                @foreach ($products as $product)
                                    @php
                                        $images = @$product->getimages ? @$product->getimages->groupby('section') : '';
                                        $averageRating = @$product->getreviews->avg('rating');
                                        $filledStars = (int) $averageRating;
                                        $halfStar = $averageRating - $filledStars >= 0.5;
                                    @endphp
                                    <div class="col-xl-4 col-lg-6 col-md-6">

                                        <div class="product-grid-card">
                                            <div class="product-list-details">
                                                <a href="{{ route('public.product', @$product['id']) }}"
                                                    class="text-dark">
                                                    <div class="product-list-header">
                                                        <div class="product-list-img-container">
                                                            <img src="{{ !empty($images['mainimage']) ? @$images['mainimage']->first()->path : '' }}"
                                                                alt="product image" class="product-list-img"
                                                                onerror="src='/assets/img/noimg.jpg'">
                                                        </div>

                                                        <div class="title-container">
                                                            <div class="title">{{ @$product['name'] }}
                                                            </div>
                                                            <p class="subtitle">Category:
                                                                {{ @$product['getCategory']['name'] }} |
                                                                Rating:
                                                                <span class="star-rating ms-2">
                                                                    @for ($i = 1; $i <= 5; $i++)
                                                                        @if ($i <= $filledStars)
                                                                            <i class="bi bi-star-fill"></i>
                                                                        @elseif ($i == $filledStars + 1 && $halfStar)
                                                                            <i class="bi bi-star-half"></i>
                                                                        @else
                                                                            <i class="bi bi-star"></i>
                                                                        @endif
                                                                    @endfor
                                                                </span>
                                                                ({{ count(@$product->getreviews) }})
                                                            </p>
                                                        </div>
                                                    </div>
                                                </a>
                                                <table class="product-info-table" style="width:100%">
                                                    <tr>
                                                        <td style="width:120px">Product SKU:</td>
                                                        <td>{{ @$product['product_sku'] }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="width:120px">Packaging:</td>
                                                        <td>{{ @$product->getpackage->packaging_type ?: 'N.A' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="width:120px">MOQ:</td>
                                                        <td>{{ @$product->getpackage->min_quantity ?: 'N.A' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="width:120px">Price:</td>
                                                        <td>${{ number_format(@$product->getpackage->price, 2) }}</td>
                                                    </tr>
                                                </table>

                                                <div class="supplier-info mt-3 d-flex justify-content-between">
                                                    <div class="supplier-detail">
                                                        <p class="title">{{ @$product->getbusiness->company ?: 'N.A' }}
                                                            <img src="/assets/img/icons/verified.png" style="height:20px">
                                                        </p>
                                                        <p class="supplier-text">From <strong>United States</strong> |
                                                            Rating: 4.0/5.0 (15
                                                            Reviews)
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="product-grid-card-btn-container">
                                                    <a href="{{ route('public.supplier.profile', $product['business_id']) }}"
                                                        class="btn-outline">View Supplier</a>
                                                    @auth
                                                        <a class="btn-chatnow chat-button" data-pid="{{ $product['id'] }}"
                                                            data-bid="{{ $product['getBusiness']['id'] }}"
                                                            data-chatname="{{ $product['name'] }} - {{ $product['getBusiness']['company'] }}"
                                                            chat_id="{{ @$product['getChat'][0]['id'] }}"
                                                            title="Chat #{{ @$product['getChat'][0]['id'] }}">Chat
                                                            Now</a>
                                                    @endauth
                                                    @guest
                                                        <a class="btn-chatnow chat-button" data-bs-target="#login"
                                                            data-bs-toggle="modal">
                                                            Chat Now
                                                        </a>
                                                    @endguest
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                @endforeach
                                --}}


                                @if (count($products) > 0)
                                    @foreach ($products as $product)
                                        @php
                                            $images = @$product->getimages
                                                ? @$product->getimages->groupby('section')
                                                : '';
                                            $averageRating = @$product->getreviews->avg('rating');
                                            $filledStars = (int) $averageRating;
                                            $halfStar = $averageRating - $filledStars >= 0.5;
                                        @endphp
                                        <div class="col-xl-4 col-lg-4 col-md-6">
                                            <div class="product-card">
                                                <div class="img-container">
                                                    {{--
                                                <div class="review badge bg-primary">
                                                    4.0 <i class="bi bi-star-fill small ms-1"></i>
                                                </div> --}}
                                                    <a
                                                        href="{{ route('public.product', ['seller' => trim(preg_replace('/[^a-z0-9]+/', '-', strtolower($product['getBusiness']['company'] ?: 'product'))), 'id' => @$product['slug']]) }}">
                                                        <img src="{{ !empty($images['mainimage']) ? @$images['mainimage']->first()->path : '' }}"
                                                            alt="product image" class="img-fluid"
                                                            onerror="src='/assets/img/noimg.jpg'">
                                                    </a>
                                                </div>
                                                <div class="product-details">
                                                    <a class="text-black">
                                                        <div class="title-container">
                                                            <p class="subtitle">
                                                                @if (count($product['assignedCategory']) > 0)
                                                                    Category:
                                                                    @foreach ($product['assignedCategory'] as $productCategory)
                                                                        <span class="badge bg-secondary">
                                                                            {{ $productCategory['getCategory']['name'] }}</span>
                                                                    @endforeach |
                                                                @endif
                                                                Rating:
                                                                <span class="star-rating ms-2">
                                                                    @for ($i = 1; $i <= 5; $i++)
                                                                        @if ($i <= $filledStars)
                                                                            <i class="bi bi-star-fill"></i>
                                                                        @elseif ($i == $filledStars + 1 && $halfStar)
                                                                            <i class="bi bi-star-half"></i>
                                                                        @else
                                                                            <i class="bi bi-star"></i>
                                                                        @endif
                                                                    @endfor
                                                                </span>
                                                                ({{ count(@$product->getreviews) }})
                                                            </p>
                                                            <div class="title">
                                                                {{ @$product['name'] }}
                                                            </div>
                                                        </div>
                                                    </a>
                                                    <div class="product-info">
                                                        <table class="product-info-table">
                                                            <tr>
                                                                <td class="pe-2">Product SKU:</td>
                                                                <td>{{ @$product['product_sku'] }}</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Packaging:</td>
                                                                <td>
                                                                    <div
                                                                        class="cw-custom-select-wrapper product-card mb-0">
                                                                        <div class="cw-custom-select-box">
                                                                            <span class="cw-selected-option">
                                                                                @if (!empty($product) && @$product->getpackage->count())
                                                                                    @foreach ($product->getpackage as $package)
                                                                                        @if ($loop->first)
                                                                                            {{ ucfirst(@$package->packaging_type) }}
                                                                                        @endif
                                                                                    @endforeach
                                                                                @endif
                                                                            </span>
                                                                            <ul class="cw-custom-select-options">
                                                                                @if (!empty($product) && @$product->getpackage->count())
                                                                                    @foreach ($product->getpackage as $package)
                                                                                        <li data-value="{{ ucfirst(@$package->packaging_type) == 'Other' ? ucfirst(@$package->other_packaging_type) : ucfirst(@$package->packaging_type) }}"
                                                                                            data-price="{{ number_format(@$package->price, 2) }}"
                                                                                            data-id="{{ @$package->id }}">
                                                                                            <div
                                                                                                class="cw-custom-select-item">
                                                                                                <div class="cw-cs-info">
                                                                                                    <span class="fw-bold">
                                                                                                        {{ @$package['net_weight'] ?: 'N.A' }}
                                                                                                        @if (isset($package['measurement_units']) && $package['measurement_units'] && is_numeric(@$package['net_weight']))
                                                                                                            {{ @$package['measurement_units'] == 'metric' ? 'kg' : 'lb' }}
                                                                                                        @endif
                                                                                                    </span>
                                                                                                    <span>
                                                                                                        <span
                                                                                                            class="type-badge">{{ ucfirst(@$package->packaging_type) == 'Other' ? ucfirst(@$package->other_packaging_type) : ucfirst(@$package->packaging_type) }}
                                                                                                        </span>
                                                                                                    </span>
                                                                                                </div>
                                                                                                <div class="cw-cs-pricing">
                                                                                                    <span>${{ number_format(@$package->price, 2) }}</span>
                                                                                                </div>
                                                                                            </div>
                                                                                        </li>
                                                                                    @endforeach
                                                                                @endif
                                                                            </ul>
                                                                        </div>
                                                                    </div>

                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>MOQ:</td>
                                                                <td>
                                                                    @if (!empty($product) && @$product->getpackage->count())
                                                                        @foreach ($product->getpackage as $package)
                                                                            @if ($loop->first)
                                                                                {{ ucfirst(@$package->min_quantity) }}
                                                                            @endif
                                                                        @endforeach
                                                                    @endif
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>Price:</td>
                                                                <td class="product-price">
                                                                    @if (!empty($product) && @$product->getpackage->count())
                                                                        @foreach ($product->getpackage as $package)
                                                                            @if ($loop->first)
                                                                                ${{ number_format(@$package->price, 2) }}
                                                                            @endif
                                                                        @endforeach
                                                                    @endif
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                    <div class="supplier-info my-3 d-flex justify-content-between">
                                                        <div class="supplier-detail">
                                                            <p class="title">
                                                                {{ @$product->getbusiness->company ?: 'N.A' }}
                                                                @if (@$product->getbusiness->verified == '1')
                                                                    <img src="/assets/img/icons/verified.png" alt="verified" style="height:20px" class="ms-1">
                                                                @endif
                                                            </p>

                                                            @php
                                                                $supplierRatingCount = @$product->getbusiness->getSupplierRating->count();
                                                                $supplieraverageRating = @$product->getbusiness->getSupplierRating->avg(
                                                                    'rating',
                                                                );
                                                            @endphp
                                                            <p class="supplier-text">
                                                                @php
                                                                    $product_location =
                                                                        @$product->getavailability->getwarehouse
                                                                            ->getcountry->name_en ?:
                                                                        @$product->getavailability->getcountry->name_en;
                                                                @endphp
                                                                From
                                                                <strong>{{ $product_location ? ' ' . $product_location : 'N.A' }}</strong>
                                                                @if ($supplierRatingCount > 0)
                                                                    |
                                                                    Rating:
                                                                    {{ number_format(@$supplieraverageRating, 1) ?: '0.0' }}/5.0
                                                                    ({{ @$supplierRatingCount ?: 0 }} Reviews)
                                                                @endif
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <a href="{{ route('public.product', ['seller' => trim(preg_replace('/[^a-z0-9]+/', '-', strtolower($product['getBusiness']['company'] ?: 'product'))), 'id' => @$product['slug']]) }}"
                                                        class="btn-product-card w-100">View
                                                        Details</a>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                    <!-- Pagination -->
                                    <nav aria-label="Supplier navigation" class="py-3 pb-4">
                                        <ul class="pagination justify-content-center mb-0">
                                            <li class="page-item {{ $products->onFirstPage() ? 'disabled' : '' }}">
                                                <a class="page-link" data-page="{{ $products->currentPage() - 1 }}"
                                                    href="{{ $products->previousPageUrl() }}" tabindex="-1">Previous</a>
                                            </li>

                                            @for ($i = 1; $i <= $products->lastPage(); $i++)
                                                <li
                                                    class="page-item {{ $i == $products->currentPage() ? 'active' : '' }}">
                                                    <a class="page-link" href="{{ $products->url($i) }}"
                                                        data-page="{{ $i }}">{{ $i }}</a>
                                                </li>
                                            @endfor

                                            <li class="page-item {{ $products->hasMorePages() ? '' : 'disabled' }}">
                                                <a class="page-link" href="{{ $products->nextPageUrl() }}"
                                                    data-page="{{ $products->currentPage() + 1 }}">Next</a>
                                            </li>
                                        </ul>
                                    </nav>
                                @else
                                    <div class="d-flex justify-content-center align-items-center"
                                        style="min-height:460px">
                                        <div class="text-center mt-3">
                                            <img src="/assets/img/nosearch_results.png" class="img-fluid">
                                            @if ($products->count() == 0)
                                                <h4 class="fw-bold text-center">
                                                        No Products to show.
                                                </h4>
                                                @if(@$keyword['keyword'])
                                                    <p class="small">Showing results for "{{ @$keyword['keyword'] }}"</p>
                                                @endif
                                            @endif
                                        </div>
                                    </div>
                                @endif
                            </div>

                        </div>

                    </div>
                </div>


            </div>

        </div>
    </div>
@endsection
@push('css')
@endpush
@push('js')
    @auth
        <script>
            $(".chat-button").on("click", function() {
                var pid = $(this).attr("data-pid");
                var bid = $(this).attr("data-bid");
                $('#product_id').val(pid);
                $('#business_id').val(bid);
                $('#chat_id').val($(this).attr("chat_id"));
                $('#chatname').html($(this).attr("data-chatname"));
            });
        </script>
        @include('public.chat')
    @endauth

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selectBoxes = document.querySelectorAll('.cw-custom-select-box');

            selectBoxes.forEach(function(customSelectBox) {
                const selectedOption = customSelectBox.querySelector('.cw-selected-option');
                const optionsList = customSelectBox.querySelector('.cw-custom-select-options');

                customSelectBox.addEventListener('click', function(event) {
                    event.stopPropagation();
                    // Close other open select boxes
                    selectBoxes.forEach(function(box) {
                        if (box !== customSelectBox && box.classList.contains('open')) {
                            box.classList.remove('open');
                        }
                    });
                    customSelectBox.classList.toggle('open');
                });

                optionsList.addEventListener('click', function(event) {
                    if (event.target.closest('li')) {
                        const selectedLi = event.target.closest('li');
                        const value = selectedLi.getAttribute('data-value');
                        const price = selectedLi.getAttribute('data-price');
                        const text = selectedLi.querySelector('.cw-cs-info span').textContent;

                        selectedOption.textContent = value;

                        const productPackagePrice = customSelectBox.closest('table').querySelector(
                            '.product-price');
                        productPackagePrice.innerHTML = '$' + price;
                        customSelectBox.classList.remove('open');
                    }
                    customSelectBox.classList.toggle('open');
                });
            });

            document.addEventListener('click', function(event) {
                if (event.target.closest('.cw-custom-select-box') === null) {
                    selectBoxes.forEach(function(box) {
                        if (box.classList.contains('open')) {
                            box.classList.remove('open');
                        }
                    });
                }
            });
        });
    </script>
    <script>
        function toggleFilter() {
            const filterId = document.getElementById('filterId');
            filterId.classList.toggle('active');
        }
    </script>
    <script>
        function submitSearchFilterForm(event, viewType) {
            event.preventDefault();
            document.getElementById('viewInput').value = viewType;
            document.getElementById('searchFilterForm').submit();
        }
    </script>
    @if (Route::current()->uri() == 'search')
        <script>
            document.querySelectorAll('.page-link').forEach(function(link) {
                link.addEventListener('click', function(event) {
                    event.preventDefault();
                    const page = this.getAttribute('data-page');
                    const form = document.getElementById('searchFilterForm');
                    const inputPage = document.createElement('input');

                    inputPage.setAttribute('type', 'hidden');
                    inputPage.setAttribute('name', 'page');
                    inputPage.setAttribute('value', page);

                    form.appendChild(inputPage);
                    form.submit();
                });
            });
            // Remove the page input after the page is loaded
            window.addEventListener('load', function() {
                const form = document.getElementById('searchFilterForm');
                const existingPageInput = form.querySelector('input[name="page"]');
                if (existingPageInput) {
                    existingPageInput.remove();
                }
            });
        </script>
    @endif
@endpush