@extends('front.layout.app')

@section('content')
    <div class="innerBanner">
        @if (isset($categorySlug) && $category->getFirstMediaUrl('banner-image') != null)
            <img src="{{ $category->getFirstMediaUrl('banner-image') ?? '' }}" class="w-100 h-100" alt="">
        @elseif (isset($page))
            <img src="{{ $page->cmsImages('background_banner_image') ?? '' }}" class="w-100 h-100" alt="">
        @else
            <img src="" class="w-100 h-100" alt="">
        @endif
        <div class="container">
            <div class="innerBanner__content">
                @if (isset($categorySlug))
                    {{-- <h2 class="heading">{{ $category->name ?? $categorySlug }}</h2> --}}
                @elseif(isset($vendor))
                    <h2 class="heading text-uppercase">
                        {{ isset($vendor->vendorShop) ? $vendor->vendorShop->name : $vendor->name }}
                        {{ $shop->shop_banner_title ?? '' }}</h2>
                @else
                    <h2 class="heading">{{ $shop->shop_banner_title ?? '' }}</h2>
                @endif
            </div>
        </div>
    </div>
    @if (isset($parentCategories) && $parentCategories->count() > 0)
        <section class="">
            <div class="container-fluid">
                <div class="flower-heading" data-aos="fade-up">
                    <h3>Sub Categories</h3>
                </div>
                <div class="row  justify-content-left">
                    @foreach ($parentCategories as $category)
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                            <div class="">
                                <div class="shop-card">
                                    <a href="{{ route('front.shop', $category->slug) }}">
                                        <span>{{ $category->name }}</span>
                                        <figure><img src="{{ $category->categoryImage() }}" class="img-fluid ssdsdsd"
                                                alt="img">
                                        </figure>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="shop-page">
        <div class="container-fluid">
            <form id="filter-form">
                <div class="row d-flex justify-content-center">
                    <div>

                    </div>
                    <div class="col-lg-12 col-md-12">
                        <div class="row">
                            <div class="col-md-10">
                                <div class="row justify-content-end align-items-center mb-4">
                                    <div class="col-lg-12 col-md-12">
                                        <div class="shopSearch">
                                            <input type="text" name="search" placeholder="Search">
                                            <button type="button"><i class="fal fa-search"></i></button>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row" id="product-list">
                            {{-- <x-front.product-listing :products="isset($products) ? $products : $vendor->products" :shop="true" /> --}}
                            <x-front.product-listing :products="isset($products) ? $products : $vendor->mergedProducts" :shop="true" />

                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <nav class="pagination">

                                    {{ isset($products) ? $products->links('alerts.custom-pagination') : '' }}

                                </nav>
                            </div>
                        </div>

                    </div>
                </div>
            </form>
        </div>
    </section>
@endsection()


@section('script')
    <script>
        $(document).ready(function() {
            // Initialize range sliders
            initializeSliders();

            function initializeSliders() {
                // THC Range Slider
                setupSlider("#slider-range", "#amount", "#amount1", 0, 100, "%");

                // Price Range Slider
                setupSlider("#price-range", "#price", "#price1", 0, 1000, "$");
            }

            function setupSlider(sliderId, inputMin, inputMax, minVal, maxVal, unit) {
                $(sliderId).slider({
                    range: true,
                    min: minVal,
                    max: maxVal,
                    values: [minVal, maxVal],
                    slide: function(event, ui) {
                        $(inputMin).val(ui.values[0] + unit);
                        $(inputMax).val(ui.values[1] + unit);
                    },
                    stop: function(event, ui) {
                        fetchFilteredProducts();
                    }
                });

                $(inputMin).val($(sliderId).slider("values", 0) + unit);
                $(inputMax).val($(sliderId).slider("values", 1) + unit);
            }
        });

        function isFilterActive() {
            let filters = $('#filter-form').serializeArray();
            let active = false;

            filters.forEach(function(item) {
                if (item.value !== "") {
                    active = true;
                }
            });

            return active;
        }

        $(document).on('click', '.pagination a', function(e) {

            if (isFilterActive()) {
                e.preventDefault();

                let url = $(this).attr('href');
                let page = url.split('page=')[1];

                fetchFilteredProducts(page);
            }
        });

        $('#filter-form input').on('change', function() {
            fetchFilteredProducts();
        });

        function fetchFilteredProducts(page = 1) {
            let filters = $('#filter-form').serialize();

            $('#product-list').html('<div class="loader">Loading...</div>');

            $.ajax({
                url: "{{ route('prods.filter') }}?page=" + page,
                type: 'GET',
                data: filters,
                success: function(response) {
                    $('#product-list').html(response.html);
                    $('.pagination').html(response.pagination);
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                }
            });
        }

    </script>
@endsection