@extends('frontend.layouts.main')

@section('main-container')
    <section>
        <div class="header-banner">
            <h2 class="header-banner-title">Explore Products</h2>
        </div>
    </section>
    @if ($products->count() > 0)
        <section class="section">
            <div class="container">
                <div class="row">
                    {{-- <div class="col-md-3 pe-5">
                        <div class="filter-sidebar">
                            <div class="filter-sidebar-header">
                                <h4 class="mb-0">Filter</h4>
                                <i class="bi bi-filter fs-3"></i>
                            </div>
                            <div class="filter-sidebar-body pt-0">
                                @if ($category->count() > 0)
                                    <h5 class="mb-3 fw-bold mt-4 text-uppercase">Category</h5>
                                    <div class="filter-sidebar-list">
                                        <div class="filter-sidebar-list-item mb-2">
                                            <label class="d-flex align-items-center">
                                                <select id="select-filter">
                                                    <option value="">Select Category</option>
                                                    @foreach ($category as $item)
                                                        <option value="{{ $item->product_category_name }}">
                                                            {{ $item->product_category_name }}</option>
                                                    @endforeach
                                                </select>
                                            </label>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div> --}}
                    <div class="col-md-12">
                        <div class="row mb-5 gy-4 align-items-center">
                            <div class="col-md-8">
                                <div class="input-group">
                                    <span class="input-group-text px-4" id="basic-addon1"><i class="bi bi-search"></i></span>
                                    <input type="search" class="form-control" name="search" id="search" value=""
                                        placeholder="Search products by name" />
                                </div>
                            </div>
                            @if ($category->count() > 0)
                                <div class="col-md-4">
                                    <select class="form-select form-control" aria-label="Default select example"
                                        id="select-filter">
                                        <option value="">Search by Category</option>
                                        @foreach ($category as $item)
                                            <option value="{{ $item->product_category_name }}">
                                                {{ $item->product_category_name }}</option>
                                        @endforeach
                                    </select>
                                    {{-- <button class="btn btn-primary w-100">Search</button> --}}
                                </div>
                            @endif
                        </div>
                        <div class="row" id='tbody'>
                            @foreach ($products as $product)
                                <div class="col-md-2 col-sm-4 mb-5">
                                    <div class="card-product">
                                        <div class="card-product-img">
                                            @foreach ($product->ProductImagesByID as $image)
                                                <img src="{{ asset($image->thumnail) }}" alt="{{ $product->product_name }}">
                                            @break
                                        @endforeach
                                    </div>
                                    <div class="card-product-body">
                                        <h3 class="card-product-title">{{ $product->product_name }}</h3>
                                    </div>
                                    <div class="card-product-footer">
                                        <a href="{{ route('frontend.product-detail.index', $product->slug) }}"
                                            class="btn btn-primary w-100 btn-sm">View Details</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="d-flex justify-content-center">
                        {{ $products->links() }}
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif

<script type="text/javascript">
    const search = document.getElementById('search');
    const tableBody = document.getElementById('tbody');
    const selectBox = document.querySelector("#select-filter")


    function getContent(search) {


        // const xhr = new XMLHttpRequest();
        // xhr.open('GET', '{{ URL::to('products-list/search') }}/?search=' + searchValue, true);
        // xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        // xhr.onreadystatechange = function() {

        //     if (xhr.readyState == 4 && xhr.status == 200) {
        //         // tableBody.innerHTML = xhr.responseText;
        //         console.log(xhr.responseText);
        //     }
        // }
        // xhr.send()
        fetch(`/supplier/public/products-list/search/?search=${search}`)
            .then(data => data.json())
            .then((data) => {
                console.log(data);
                tableBody.innerHTML = data.products.data.map((item) => {
                    return `
                    <div class="col-md-2 col-sm-4 mb-5">
                                    <div class="card-product">
                                        <div class="card-product-img">                                            
                                                <img src="${item?.product_images_by_i_d[0].thumnail}" alt="${item.product_name}">
                                        </div>
                                    <div class="card-product-body">
                                        <h3 class="card-product-title">${item.product_name}</h3>
                                    </div>                                    
                                </div>
                                </div>
                    `
                }).toString().replaceAll(",", "")
            })
            .catch((err) => console.error(err))

    }
    search.addEventListener('input', () => getContent(search.value));
    selectBox.addEventListener('input', () => getContent(selectBox.value));
</script>
@endsection