@extends('frontend.layouts.app')
@push('head-area')
    <link rel="stylesheet" href="{{asset('design/assets/css/category-style.css?v=02')}}">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

    <!-- Demo styles -->
    <style>

    </style>
@endpush
@section('content')
    @php
        $video_tag = '';

        if(trim($data['category']->video_link) != null)
        {
            if($data['category']->video_site == 'YouTube')
            {
                $video_tag = '<div class="categ-video-section mt-5 custom-video-spacing"><iframe style="width: -webkit-fill-available; height: -webkit-fill-available; position: relative;" src="https://www.youtube.com/embed/'. $data['category']->video_link .'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>';
            }
            else
            {
                $video_tag = '<div class="categ-video-section mt-5 custom-video-spacing"><iframe class="mb-5" style="width: -webkit-fill-available; height: -webkit-fill-available; position: relative;" src="https://player.vimeo.com/video/'. $data['category']->video_link .'" frameborder="0"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>';
            }
        }
    @endphp
    <section class="heroSectionOfMainCat py-5 px-lg-0 px-md-0 px-sm-0 px-3">
        <div class="container px-0 py-4">
            <div class="row">
                <div class="col-md-12">
                    <div class="breadcrumbSection">
                        <a href="/">Home </a>/ <span>{{$data['selectedCategory'] == null ? $data['category']->name : $data['selectedCategory']->name}}</span>
                    </div>
                    <div class="mainTitleOfMainHeading">
                        {{$data['selectedCategory'] == null ? $data['category']->name : $data['selectedCategory']->name}}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="categoryMainSlider py-5">
        <div class="container px-0">
            <div class="row">
                <div class="col-lg-12 position-relative px-5">
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            <!-- Add "All Categories" option first -->
                            <div class="swiper-slide">
                                <div class="categoryInner">
                                    <div class="catImage {{ request('category_id') == '' ? 'active' : '' }}">
                                        <a href="{{ request()->fullUrlWithQuery(['category_id' => '']) }}">
                                            <img class="categoryPlaceHolder" src="https://www.germedusa.com/up_data/na.jpg" alt="All Categories">
                                        </a>
                                    </div>
                                    <div class="catTitle {{ request('category_id') == '' ? 'active' : '' }}">
                                        <a href="{{ request()->fullUrlWithQuery(['category_id' => '']) }}">
                                            All Categories
                                            {{-- <span class="productCount">({{ $data['allProductsCount'] }})</span> --}}
                                        </a>
                                    </div>
                                </div>
                            </div>

                            @foreach ($data['categories'] as $category)
                                <div class="swiper-slide">
                                    <div class="categoryInner">
                                        <div class="catImage {{ request('category_id') == $category->id ? 'active' : '' }}">
                                            <a href="{{ request()->fullUrlWithQuery(['category_id' => $category->id]) }}">
                                                @if (!empty($category->image))
                                                    <img class="categoryImage" src="https://www.germedusa.com/up_data/categories/medium/{{$category->image}}" alt="{{$category->name}}">
                                                @else
                                                    <img class="categoryPlaceHolder" src="https://www.germedusa.com/up_data/na.jpg" alt="Placeholder Image">
                                                @endif
                                            </a>
                                        </div>
                                        <div class="catTitle {{ request('category_id') == $category->id ? 'active' : '' }}">
                                            <a href="{{ request()->fullUrlWithQuery(['category_id' => $category->id]) }}">
                                                {{ $category->name }}
                                                {{-- <span class="productCount {{ request('category_id') == $category->id ? 'active' : '' }}">({{ $category->product_count != 0 ? $category->product_count : $category->child_categories_count }})</span> --}}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="swiper-button-next mySwiper-next"></div>
                    <div class="swiper-button-prev mySwiper-prev"></div>
                </div>
            </div>
            @if ($data['allChildCategories'] && count($data['allChildCategories']) > 0)
                <div class="row pt-5">
                    <div class="col-lg-12 position-relative px-5">
                        <div class="swiper subCategorySlider">
                            <div class="swiper-wrapper">
                                @foreach ($data['allChildCategories'] as $childCategory)
                                    <div class="swiper-slide">
                                        <div class="subCategorySliderContent">
                                            <div class="subCategorySliderTitle">
                                                <a href="{{ request()->fullUrlWithQuery(['category_id' => $childCategory->id]) }}">
                                                    {{ $childCategory->name ?? $childCategory->name }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="swiper-button-next subCategorySlider-next"></div>
                        <div class="swiper-button-prev subCategorySlider-prev"></div>
                    </div>
                </div>
            @endif
        </div>
    </section>
    {{-- @dd($data); --}}
    @if (count($data['allChildCategories']) < 1)
        <section class="mainFilterAndProductSection py-5 px-lg-0 px-md-0 px-sm-0 px-3">
            <div class="container px-0">
                <div class="row">
                    <div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="leftSideSection">
                            <form method="GET" action="" class="filterForm">
                                @if (count($data['allChildCategories']) < 1)
                                    <div class="searchSection">
                                        <div class="searchIcon">
                                            <input type="text" name="s" placeholder="Search here.." value="{{ request('s') }}">
                                            <svg width="17" height="17" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M19.728 17.2913L15.8332 13.3971C15.6574 13.2214 15.4191 13.1237 15.1691 13.1237H14.5323C15.6105 11.7449 16.2512 10.0107 16.2512 8.12421C16.2512 3.63636 12.6142 0 8.12559 0C3.63698 0 0 3.63636 0 8.12421C0 12.6121 3.63698 16.2484 8.12559 16.2484C10.0125 16.2484 11.747 15.6079 13.126 14.5298V15.1665C13.126 15.4165 13.2236 15.6547 13.3994 15.8305L17.2942 19.7246C17.6614 20.0918 18.2552 20.0918 18.6186 19.7246L19.7241 18.6193C20.0913 18.2521 20.0913 17.6584 19.728 17.2913ZM8.12559 13.1237C5.36367 13.1237 3.12523 10.8896 3.12523 8.12421C3.12523 5.36276 5.35977 3.1247 8.12559 3.1247C10.8875 3.1247 13.126 5.35885 13.126 8.12421C13.126 10.8857 10.8914 13.1237 8.12559 13.1237Z" fill="#0071B8"/>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="filterAndClearBtn">
                                        <div class="filterTitle">
                                            Filter
                                        </div>
                                        <div class="clearallbtn">
                                            <a href="{{ request()->url() }}">Clear All</a>
                                        </div>
                                    </div>
                                    <div class="accordion" id="accordionExample">
                                        @if (!empty($data['filterOptions']['primary_material']))
                                            <div class="accordion-item">
                                                <h2 class="accordion-header" id="headingOne">
                                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                        Primary Material
                                                    </button>
                                                </h2>
                                                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                                    <div class="accordion-body">
                                                        @foreach ($data['filterOptions']['primary_material'] as $option)
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" name="primary_material[]" value="{{ $option }}" id="check_primary_{{ str_replace(' ', '_', strtolower($option)) }}" {{ in_array($option, old('primary_material', request()->input('primary_material', []))) ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="check_primary_{{ str_replace(' ', '_', strtolower($option)) }}">
                                                                    {{ $option }} ({{ $data['primaryMaterialCounts'][$option] }})
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        @if (!empty($data['filterOptions']['secondary_material']))
                                            <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">
                                                        Secondary Material
                                                    </button>
                                                </h2>
                                                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                                    <div class="accordion-body">
                                                        @foreach ($data['filterOptions']['secondary_material'] as $option)
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" name="secondary_material[]" value="{{ $option }}" id="check_secondary_{{ str_replace(' ', '_', strtolower($option)) }}" {{ in_array($option, old('secondary_material', request()->input('secondary_material', []))) ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="check_secondary_{{ str_replace(' ', '_', strtolower($option)) }}">
                                                                    {{ $option }} ({{ $data['secondaryMaterialCounts'][$option] }})
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        @if (!empty($data['filterOptions']['length']))
                                            <div class="accordion-item">
                                                <h2 class="accordion-header" id="headingFive">
                                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                                        Length
                                                    </button>
                                                </h2>
                                                <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
                                                    <div class="accordion-body">
                                                        @foreach ($data['filterOptions']['length'] as $option)
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" name="length[]" value="{{ $option }}" id="check_length_{{ str_replace(' ', '_', strtolower($option)) }}" {{ in_array($option, old('length', request()->input('length', []))) ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="check_length_{{ str_replace(' ', '_', strtolower($option)) }}">
                                                                    {{ $option }} ({{ $data['lengthCounts'][$option] }})
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        @if (!empty($data['filterOptions']['shape']))
                                            <div class="accordion-item">
                                                <h2 class="accordion-header" id="headingSix">
                                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                                                        Shape
                                                    </button>
                                                </h2>
                                                <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionExample">
                                                    <div class="accordion-body">
                                                        @foreach ($data['filterOptions']['shape'] as $option)
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" name="shape[]" value="{{ $option }}" id="check_shape_{{ str_replace(' ', '_', strtolower($option)) }}" {{ in_array($option, old('shape', request()->input('shape', []))) ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="check_shape_{{ str_replace(' ', '_', strtolower($option)) }}">
                                                                    {{ $option }} ({{ $data['shapeCounts'][$option] }})
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        @if (!empty($data['filterOptions']['tip']))
                                            <div class="accordion-item">
                                                <h2 class="accordion-header" id="headingSeven">
                                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
                                                        Tip Size
                                                    </button>
                                                </h2>
                                                <div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingSeven" data-bs-parent="#accordionExample">
                                                    <div class="accordion-body">
                                                        @foreach ($data['filterOptions']['tip'] as $option)
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" name="tip[]" value="{{ $option }}" id="check_tip_{{ str_replace(' ', '_', strtolower($option)) }}" {{ in_array($option, old('tip', request()->input('tip', []))) ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="check_tip_{{ str_replace(' ', '_', strtolower($option)) }}">
                                                                    {{ $option }} ({{ $data['tipCounts'][$option] }})
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                    <button type="submit" class="btn btn-primary mt-3">Apply Filters</button>
                                @endif
                            </form>
                            <div class="videoSection">
                                {!! $video_tag !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-6 col-sm-12">
                        @if (count($data['allChildCategories']) < 1)
                            <div class="showingResult pt-lg-0 pt-md-0 pt-sm-0 pt-3">
                                Showing {{ $data['allProducts']->firstItem() }}-{{ $data['allProducts']->lastItem() }} of {{ $data['allProducts']->total() }} Results
                            </div>
                            <hr>
                        @endif
                        <div class="rightSide">
                            @foreach($data['allProducts'] as $product)
                                <div class="singleProductContainer">
                                    <div class="innerProductSection">
                                        <div class="proImage">
                                            <a href="/{{ $product->slug }}">
                                                @if (!empty($product->image))
                                                    <img src="https://www.germedusa.com/up_data/products/images/medium/{{ $product->image }}" alt="{{ $product->name ?? 'Product Image' }}">
                                                @else
                                                    <img src="https://www.germedusa.com/up_data/na.jpg" alt="Placeholder Image">
                                                @endif
                                            </a>
                                        </div>
                                        <div class="proContent">
                                            <div class="proTitle">
                                                <a href="/{{ $product->slug }}">
                                                    {{ $product->name ?? $product->name }}
                                                </a>
                                            </div>
                                            <div class="proDescription">
                                                {{ $product->short_description ?? $product->short_description }}
                                            </div>
                                            <div class="proNote">
                                                Multiple buying options, see details to choose according to your needs.
                                            </div>
                                            <div class="proBtnAndPercentage">
                                                <div class="proBtn">
                                                    <a href="/{{ $product->slug }}">
                                                        <button>View Product Details</button>
                                                    </a>
                                                </div>
                                                <div class="proDiscount">
                                                    Upto 20% OFF
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            <!-- Pagination Links -->
                            {{ $data['allProducts']->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <section class="surgical-instrument-description py-5 px-lg-0 px-md-0 px-sm-0 px-3">
        <div class="container px-0">
            <div class="row">
                <div class="col-md-12">
                    <div class="Catdescription">
                        {!! $data['category']->short_description ? $data['category']->short_description : $data['category']->description !!}
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@push('after-scripts')
<!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 6,
            grid: {
                rows: 1,
            },
            spaceBetween: 30,
            mousewheel: true,
            keyboard: true,
            grabCursor: true,
            hashNavigation: {
                watchState: true,
            },
            // loop: true,
            // autoplay: {
            //     delay: 2000,
            //     disableOnInteraction: false,
            //     pauseOnMouseEnter: true,
            // },
            navigation: {
                nextEl: ".mySwiper-next",
                prevEl: ".mySwiper-prev",
            },
            breakpoints: {
                // When window width is <= 320px (small mobile devices)
                320: {
                    slidesPerView: 1,
                    spaceBetween: 10,
                },
                // When window width is <= 480px (mobile devices)
                480: {
                    slidesPerView: 2,
                    spaceBetween: 15,
                },
                // When window width is <= 768px (tablets)
                768: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                },
                // When window width is <= 1024px (small desktops)
                1024: {
                    slidesPerView: 5,
                    spaceBetween: 25,
                },
                // When window width is > 1024px (large desktops)
                1280: {
                    slidesPerView: 6,
                    spaceBetween: 30,
                }
            }
        });
    </script>
    <script>
        var swiper = new Swiper(".subCategorySlider", {
            slidesPerView: 4,
            grid: {
                rows: 1,
            },
            spaceBetween: 30,
            mousewheel: true,
            keyboard: true,
            grabCursor: true,
            hashNavigation: {
                watchState: true,
            },
            // loop: true,
            // autoplay: {
            //     delay: 2000,
            //     disableOnInteraction: false,
            //     pauseOnMouseEnter: true,
            // },
            navigation: {
                nextEl: ".subCategorySlider-next",
                prevEl: ".subCategorySlider-prev",
            },
            breakpoints: {
                // When window width is <= 320px (small mobile devices)
                320: {
                    slidesPerView: 1,
                    spaceBetween: 10,
                },
                // When window width is <= 480px (mobile devices)
                480: {
                    slidesPerView: 2,
                    spaceBetween: 15,
                },
                // When window width is <= 768px (tablets)
                768: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                },
                // When window width is <= 1024px (small desktops)
                1024: {
                    slidesPerView: 4,
                    spaceBetween: 25,
                },
            }
        });
    </script>
    <script>
        document.querySelectorAll('.form-check-input').forEach(function(input) {
            input.addEventListener('change', function() {
                input.closest('form').submit();
            });
        });
    </script>
@endpush