@extends('frontend.layouts.app')
@section('title-suffix')
    {{ __('category.title') }}
@endsection

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/frontend/css/price_rangs.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/frontend/css/style.css') }}">
@endpush

@section('main-content')
    <section class="breadcrumb breadcrumb_bg">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="breadcrumb_iner">
                        <div class="breadcrumb_iner_item">
                            <h2>{{ $data['category_name'] }}</h2>
                            <p>{{ __('category.breadcrumb-1') }}<span>></span>{{ __('category.breadcrumb-2') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Category Product Area -->
    <section class="cat_product_area section_padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <p class="text-justify mb-4">{{ htmlspecialchars_decode($data['category_desc']) }}</p>
                </div>
                <div class="col-lg-3">
                    <div class="left_sidebar_area">
                        <aside class="left_widgets p_filter_widgets">
                            <div class="l_w_title">
                                <h3>{{ __('category.body-title-1') }}</h3>
                            </div>
                            <div class="widgets_inner">
                                <ul class="list">
                                    @if ($data['categories'])
                                        @foreach ($data['categories'] as $key => $category)
                                            <li>
                                                <a href="{{ route('category.slug', ['category_slug' => $category->slug]) }}">{{ $category->name }}</a>
                                                <span>
                                                    @if (!empty($category->products))
                                                        ({{ count($category->products) }})
                                                    @endif
                                                </span>
                                            </li>
                                        @endforeach
                                    @endif
                                </ul>
                            </div>
                        </aside>

                        <aside class="left_widgets p_filter_widgets price_rangs_aside">
                            <div class="l_w_title">
                                <h3>{{ __('category.body-title-2') }}</h3>
                            </div>
                            <div class="widgets_inner">
                                <div class="range_item">
                                    <!-- <div id="slider-range"></div> -->
                                    <input type="text" class="js-range-slider" value="" />
                                    <div class="d-flex">
                                        <div class="price_text">
                                            <p>{{ __('category.price-rang') }}</p>
                                        </div>
                                        <div class="price_value d-flex justify-content-center">
                                            <input type="text" class="js-input-from" id="amount" readonly />
                                            <span>{{ __('category.price-rang-to') }}</span>
                                            <input type="text" class="js-input-to" id="amount" readonly />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </aside>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="product_top_bar d-flex justify-content-between align-items-center">
                                <div class="single_product_menu">
                                    <p><span>{{ $data['category_products_count'] }}</span>{{ __('category.found') }}</p>
                                </div>
                                <div class="single_product_menu d-flex">
                                    <h5>{{ __('category.sort-by') }}</h5>
                                    <select class="form-control">
                                        <option value="1">{{ __('category.name-sort') }}</option>
                                        <option value="2">{{ __('category.price-sort') }}</option>
                                        <option value="3">{{ __('category.brand-sort') }}</option>
                                    </select>
                                </div>
                                {{-- <div class="single_product_menu d-flex">
                                    <h5>Voir :</h5>
                                    <div class="top_pageniation">
                                        <ul>
                                            <li>1</li>
                                            <li>2</li>
                                            <li>3</li>
                                        </ul>
                                    </div>
                                </div> --}}
                                <div class="single_product_menu d-flex">
                                    <div class="input-group">
                                        <form id="search-form" class="search-form d-flex">
                                            <input type="text" id="search-query" class="form-control" placeholder="{{ __('category.search-input') }}"
                                                aria-describedby="inputGroupPrepend" autocomplete="off">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="inputGroupPrepend"><i
                                                        class="ti-search"></i></span>
                                            </div>
                                        </form>
                                        <div id="search-results" class="search-results-panel"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row align-items-center latest_product_inner">
                        @if ($data['category_products'] && !empty($data['category_products']))
                            @foreach ($data['category_products'] as $key => $product)
                                <div class="col-lg-4 col-sm-6 price-range" data-price="{{ $product->selling_price }}">
                                    <div class="single_product_item">
                                        <a href="{{ route('single-product.slug', ['product_slug' => $product->slug]) }}">
                                            <img src="{{ asset($product->image) }}" alt="{{ $product->name }}">
                                        </a>
                                        <div class="single_product_text">
                                            <h4>{{ $product->name }}</h4>
                                            <h3>{{ $product->selling_price }}&nbsp;FCFA</h3>
                                            <div class="add_cart">
                                                <a href="{{ route('cart.add', $product->code) }}">{{ __('category.add-to-cart-btn') }}</a>
                                                <span>
                                                    <a href="{{ route('wishlist.add', $product->code) }}">
                                                        <i class="ti-heart"></i>
                                                    </a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                        <div class="col-lg-12">
                            <div class="pageination">
                                <nav aria-label="Page navigation example">
                                    <div class="paginate-container">
                                        {{ $data['category_products']->links() }}
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Category Product Area -->


    <!-- Best sellers section -->
    @include('frontend.partials.featured')
    <!-- End Best sellers section -->
@endsection

@push('scripts')
    <script>
        var paginator = @json($data['category_products']);
        products = paginator.data;
    </script>
    
    <script>
        $(document).ready(function () {
            $('#search-query').on('input', function () {
                let query = $(this).val().toLowerCase();

                if (query.length > 0) {
                    let filteredProducts = products.filter(function (product) {
                        return product.name.toLowerCase().includes(query) || 
                            product.selling_price == query;
                    });

                    $('#search-results').empty().show();
                    if (filteredProducts.length > 0) {
                        $.each(filteredProducts, function (index, product) {
                            $('#search-results').append('<div class="search-result-item">' +
                                // '<h4>' + product.name + '</h4>' +
                                '<a href="' + getRootUrl() + '/produit-unique/' +
                                            product.slug + '""><h4>' + product.name + '</h4>' +
                                '<p>' + product.selling_price + '&nbspFCFA</p></a>' +
                            '</div>');
                        });
                    } else {
                        $('#search-results').append('<div class="search-result-item">{{ __('category.no-products') }}</div>');
                    }
                } else {
                    $('#search-results').hide();
                }
            });

            $(document).click(function (event) {
                if (!$(event.target).closest('#search-form, #search-results').length) {
                    $('#search-results').hide();
                }
            });
        });

        function getRootUrl() {
            var rootUrl = window.location.protocol + "//" + window.location.hostname;
            if(window.location.port) {
                rootUrl += ":" + window.location.port;
            }
            // console.log(rootUrl);
            return rootUrl;
        }
    </script>
@endpush