@extends('layouts.app')
@section('page-title', 'Product List')
@section('body-class', 'pageNo2')
@section('head-scripts')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('body-content')

    @php
        $params = app('request')->all();
    @endphp
    <div class="global-loader-wrapper" style="display: none">
        <div class="loader"></div>
    </div>
        <div class="sidebar-page-container">

        <div class="auto-container">
            @if (session('success'))
                <div class="alert alert-success" id="success-alert">
                    {{ session('success') }}
                </div>
            @elseif(session('error'))
                <div class="alert alert-danger" id="error-alert">
                    {{ session('error') }}
                </div>
            @endif
            <div class="row clearfix">

                <div class="col-md-12 col-sm-12">
                    <div class="breadcrumb-section">
                        <h1 id="showing-string">@if (!empty(request('keyword') && !empty($response['recordsTotal'])))
                            Showing {{ $response['recordsTotal'] }} {{ $response['recordsTotal'] > 1 ? 'products' : 'product' }} @if(!empty(request('keyword')) && request('keyword') != "" ) for "<span id="search-keyword">{{request('keyword')}} @endif</span>"
                        @endif</h1>

                    </div>
                </div>

                <div class="sidebar-side col-lg-3 col-md-4 col-sm-12 left-sidebar">
                    <aside class="sidebar">
                        <div class="sidebar-widget search-box">
                            <div class="sidebar-title">
                                <h6>Refine your search result
                                </h6>
                            </div>
                            <div class="form-group">
                                <input type="search" id="search-bar-2"
                                    value="{{ !empty($params['keyword']) ? $params['keyword'] : '' }}"
                                    placeholder="Search Product" required>
                                <button class="icon fa fa-search" id="search-bar-Go-2">
                                </button>
                            </div>
                        </div>
                        <div class="sidebar-widget accordian-widget">
                            <div class="accordion" id="accordionExample">

                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingOne">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                            Categories
                                        </button>
                                    </h2>
                                    <div id="collapseOne" class="accordion-collapse collapse show position-relative"
                                        data-bs-target="#headingOne" aria-controls="headingOne">
                                        <div class="general-loader-wrapper" style="display: block;">
                                            <div class="loader"></div>
                                        </div>
                                        <div class="accordion-body" id="category_filter">
                                            <div class="collapseitem">
                                                <p>
                                                    <a class="btn collapsed" data-bs-toggle="collapse"
                                                        href="#collapseExample1" role="button" aria-expanded="false"
                                                        aria-controls="collapseExample1">
                                                        <span class="parentCategoryName">Network &amp; Communication
                                                            [230]</span>
                                                    </a>
                                                </p>
                                                <div class="collapse" id="collapseExample1">
                                                    <div class="card card-body">
                                                        <div id="collapseCategory_0" class="collapse show">
                                                            <ul class="collapseSubCategory">
                                                                <li><span>Analog Modems [21]</span></li>
                                                                <li><span>Broadband Modems [13]</span></li>
                                                                <li><span>CSUs &amp; DSUs [4]</span></li>
                                                                <li><span>DSL Switches [1]</span></li>
                                                                <li><span>Hubs &amp; Repeaters [33]</span></li>
                                                                <p class="maxlist-more"><a href="#" id="morecategory"
                                                                        class="linkColor">+ Show more</a></p>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingTwo">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false"
                                            aria-controls="collapseTwo">
                                            Brands
                                        </button>
                                    </h2>
                                    <div id="collapseTwo" class="accordion-collapse collapse show"
                                        data-bs-target="#headingTwo" aria-controls="headingTwo">
                                        <div class="accordion-body">
                                            <div class="widget_list_wrapper">

                                                <div class="form-group">
                                                    <input type="text" id="brandsFilterField" placeholder=" ">
                                                    <label for="searchField">Type to Filter</label>
                                                </div>

                                                <ul class="widgetList" id="brand_filters">
                                                    <li class="product-list-checkbox"><label
                                                            class="checkbox checkbox-outline-warning"><input
                                                                type="checkbox" id="56"><span> American Power
                                                                Conversion Corp</span><span
                                                                class="checkmark"></span></label></li>
                                                    <li class="product-list-checkbox"><label
                                                            class="checkbox checkbox-outline-warning"><input
                                                                type="checkbox" id="11341"><span> Hewlett Packard
                                                                Enterprise</span><span class="checkmark"></span></label>
                                                    </li>
                                                    <li class="product-list-checkbox"><label
                                                            class="checkbox checkbox-outline-warning"><input
                                                                type="checkbox" id="460"><span> Lantronix,
                                                                Inc</span><span class="checkmark"></span></label></li>
                                                    <li class="product-list-checkbox"><label
                                                            class="checkbox checkbox-outline-warning"><input
                                                                type="checkbox" id="6641"><span> Opengear</span><span
                                                                class="checkmark"></span></label></li>
                                                    <li class="product-list-checkbox"><label
                                                            class="checkbox checkbox-outline-warning"><input
                                                                type="checkbox" id="4909"><span> Tp-Link Technologies
                                                                Co., Ltd</span><span class="checkmark"></span></label></li>
                                                    <li class="product-list-checkbox"><label
                                                            class="checkbox checkbox-outline-warning"><input
                                                                type="checkbox" id="1506"><span> Vertiv
                                                                Co</span><span class="checkmark"></span></label></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item d-none">
                                    <h2 class="accordion-header" id="headingfour">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseFour"
                                            aria-expanded="false" aria-controls="collapseFour">
                                            Condition
                                        </button>
                                    </h2>
                                    <div id="collapseFour" class="accordion-collapse collapse"
                                        aria-labelledby="headingFour" data-bs-parent="#accordionExample" style="">
                                        <div class="accordion-body">
                                            <div class="widget_list widget_color">
                                                <ul class="widgetList no-marker">
                                                    <li class="product-list-checkbox"><label
                                                            class="checkbox checkbox-outline-warning"><input
                                                                type="checkbox" id="1"><span> New</span><span
                                                                class="checkmark"></span></label></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="sidebar-widget filter-widget">
                            <div class="widget-content">
                                <div class="sidebar-title">
                                    <h6>Price Filtering</h6>
                                </div>
                                <div class="range-slider-one clearfix">
                                    <div class="price-range-slider"></div>
                                    <div class="input">
                                        <input type="text" class="price-amount" id="price_range_field"
                                            name="field-name" readonly>
                                    </div>
                                    <div class="title">US Dollars</div>
                                    <div class="theme-btn filter-btn" id="price_range">Filter</div>
                                </div>
                            </div>
                        </div>
                    </aside>
                </div>

                <!-- Content Side -->
                <div class="content-side col-lg-9 col-md-8 col-sm-12 right-sidebar">
                    <!-- Filter Box -->
                    <div class="filter-box">

                            <!-- Left Box -->
                            <div class="left-box">

                                <div class="d-flex">
                                    <div class="form-group d-flex align-items-center">
                                        <span class="icon flaticon-document "></span>
                                        <select name="currency" class="" id="stock-filter">
                                            <option value="all">All</option>
                                            @if (!empty($params['filter']))
                                                <option value="in_stock"
                                                    {{ $params['filter'] == 'in_stock' ? 'selected' : '' }}>In Stock</option>
                                                <option value="rfq" {{ $params['filter'] == 'rfq' ? 'selected' : '' }}>RFQ
                                                </option>
                                            @else
                                                <option value="in_stock">In Stock</option>
                                                <option value="rfq">RFQ</option>
                                            @endif

                                        </select>
                                    </div>
                                    <div class="form-group d-flex align-items-center">
                                        <span class="icon flaticon-dollar-symbol"></span>
                                        <select name="currency" class="" id="sorting">
                                            <option value="none" selected>Sorting Products</option>
                                            @if (!empty($params['sort']))
                                                <option value="price_lth"
                                                    {{ $params['sort'] == 'price_lth' ? 'selected' : '' }}>Price Low To High
                                                </option>
                                                <option value="price_htl"
                                                    {{ $params['sort'] == 'price_htl' ? 'selected' : '' }}>Price High To Low
                                                </option>
                                            @else
                                                <option value="price_lth">Price Low To High</option>
                                                <option value="price_htl">Price High To Low</option>
                                            @endif

                                        </select>
                                    </div>
                                </div>
                                <div>
                                    <div class="form-group" id="advFilters">
                                        <span class="icon flaticon-count-symbol"></span>
                                        <span>Advance Filters</span>
                                    </div>
                                </div>




                            </div>
                            <!-- Right Box -->
                            <div class="right-box d-flex">
                                <div class="results" id="showing-results">
                                    <h1>Showing
                                        @if(!empty($response) && !empty($response['recordsTotal']))
                                            {{ $start }}–{{ $end > $response['recordsTotal'] ? $response['recordsTotal'] : $end }}
                                            of {{ $response['recordsTotal'] }} results
                                        @endif
                                    </h1>
                                </div>
                                <ul class="pages-list ">
                                    <li>
                                        <a class="flaticon-list " href="# " id="listView"></a>
                                    </li>
                                    {{-- <li>
                                        <a class="flaticon-menu-2 " href="# " id="gridView"></a>
                                    </li> --}}
                                </ul>
                            </div>

                    </div>
                    <!-- End Filter Box -->

                    <div class="shops-outer position-relative" id="viewController">
                        <div class="shop-item col-xl-4 col-lg-4 col-md-4 col-sm-6 large">
                            <div class="general-loader-wrapper" id="loader-2" style="display: none">
                                <div class="loader"></div>
                            </div>
                        </div>
                        <div class="row clearfix" id="products-container">
                            <!-- Shop Item -->
                            @if (!empty($products))
                                @foreach ($products as $row)
                                    <div class="shop-item col-xl-4 col-lg-4 col-md-4 col-sm-6">
                                        <div class="inner-box clear-fix">
                                            <div class="image">
                                                <a href="{{ route('product-details', ['id' => $row['id']]) }}">
                                                    <img id="product-image" data-id="image-{{ $row['id'] }}"
                                                        src="{{ config('constants.IMAGES_PATH') . '/' . $row['image'] }}"
                                                        onerror="this.onerror=null; this.src='{{ config('constants.IMAGES_PATH') . '/not-available.jpg' }}'"
                                                        alt="{{ !empty($row['manufacturer_part_number']) && !empty($row['brand_name']) ? $row['manufacturer_part_number'] . ' - ' . $row['brand_name'] : '' }}" />
                                                </a>
                                            </div>
                                            <div class="product-content">
                                                <div class="upper-content">
                                                    <a href="{{ route('product-details', ['id' => $row['id']]) }}">
                                                        <h2 class="product-title" id="product-title"
                                                            data-id="title-{{ $row['id'] }}">
                                                            {{ !empty($row['title']) ? strip_tags($row['title']) : (!empty($row['product_description']) ? strip_tags($row['product_description']) :  ($row['brand_name'] . ' ' . $row['manufacturer_part_number']) )}}
                                                        </h2>
                                                    </a>
                                                    <p class="product-shortDescription">{{ strip_tags($row['product_description']) }}</p>
                                                </div>
                                                <div class="lower-content">

                                                    <div class="productTech-details">
                                                        <div class="mfr-details clear-fix">

                                                            <p><strong>Mfr. #</strong>:<span id="mfr-no"
                                                                    data-id="mfr-no-{{ $row['id'] }}">{{ $row['manufacturer_part_number'] }}</span>
                                                            </p>
                                                            <p class="mfrName"><strong>Mfr. Name</strong>:<span id="mfr-name"
                                                                    data-id="mfr-name-{{ $row['id'] }}"><a
                                                                        href="{{ route('categories-by-brand', ['slug' => $row['brand_slug']]) }}"> {{ !empty($row['brand_name']) ? $row['brand_name'] : '' }}</a></span>
                                                            </p>
                                                            @if (!empty($row['stock']) && $row['stock'] > 0)
                                                                <div class="availability"><span
                                                                        class="selectedinstock selectedinstock-landscape"> In
                                                                        Stock</span></div>
                                                            @else
                                                                <div class="availability"><span
                                                                        class="selectedinstock selectedinstock-landscape" style="color: #da5d0c">
                                                                        Limited Availability</span></div>
                                                            @endif

                                                        </div>
                                                    </div>
                                                    <div class="listbuttons clear-fix">
                                                        @if (!empty($row['web_price']))
                                                            <div class="product-price">$<span id="product-price"
                                                                    data-id="price-{{ $row['id'] }}">{{ number_format($row['web_price'], 2) }}</span><span
                                                                    class="value">${{ $row['list_price'] }}</span>
                                                                </div>
                                                        @endif
                                                        @if($row['is_license_require'])
                                                        <p class="licenseRequired" style="color: rgb(255, 51, 0)">{{ config('constants.license_require') }}</p>
                                                        @endif
                                                        {{-- <ul>
                                                        <li class="wishlist"><a aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="Add to wishlist"><i class="fa fa-star"></i>Wishlist</a></li>
                                                        <li class="share"><a aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="share"><i class="fa fa-share"></i>Share</a></li>
                                                        <li class="compare"><a class="add-to-compare-link tosetpointer" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="Add to compare"><i class="fa fa-retweet"></i>Compare</a></li>

                                                    </ul> --}}
                                                    </div>
                                                    <div class="button-box-container">
                                                        @if (!empty($row['web_price']))
                                                            <div class="button-box add-to-cart">
                                                                <a href="javascript:void(0)"
                                                                    onclick="showAddToCart({{ $row['id'] }})"
                                                                    class="theme-btn btn-style-one clearfix cartModal">
                                                                    <span class="btn-wrap">
                                                                        <span class="text-one">Add To Cart</span>
                                                                        <span class="text-two">Add To Cart</span>
                                                                    </span>

                                                                </a>
                                                            </div>
                                                        @endif
                                                        <div class="button-box request-a-quote">
                                                            <a href="javascript:void(0)"
                                                                onclick="showRfq({{ $row['id'] }})"
                                                                class="theme-btn btn-style-one clearfix rfqModal">
                                                                <span class="btn-wrap">
                                                                    <span class="text-one">Get a Quote</span>
                                                                    <span class="text-two">Get a Quote</span>
                                                                </span>

                                                            </a>
                                                        </div>
                                                    </div>


                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <section id="thankyou ">
                                    <div class="thankyou-wrapper g_in_spacing_block">
                                        <div class="container">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="check-wrapper">
                                                        <img src="/images/resource/no-result/not-found.webp" class="img-fluid" alt="not found sign">
                                                    </div>
                                                    <div class="thankYou-textBlock">
                                                        <h2 class="block-title">Oops! We couldn`t find what you`re looking for.</h2>
                                                        <span class="sub-title">"Discover other<a href="/all-brands"><span>exciting
                                                                    products</span></a> to fulfill your needs."</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            @endif

                        </div>

                        <!-- Styled Pagination -->
                        <div id="pagination">
                            @if(!empty($response) && !empty($response['recordsTotal']))
                                @if (!empty($response) && $response['recordsTotal'] <= $response['page_size'])
                                    <ul class="styled-pagination text-center">
                                        <li class="next"><a href="#"><span class="fa fa-angle-double-left"></span></a>
                                        </li>
                                        <li><a href="#" class="active">1</a></li>
                                        <li class="next"><a href="#"><span class="fa fa-angle-double-right"></span></a>
                                        </li>
                                    </ul>
                                @else
                                    <ul class="styled-pagination text-center">