@extends('home.layouts.index')

@section('title')
    {{ $category->name ?? 'محصولات' }}
@endsection

@section('keywords')
    {{ $category->meta_keyword ?? '-'  }}
@endsection

@section('description')
    {{ $category->meta_description ?? '-'  }}
@endsection

@section('style')
    <style>
        header.dark {
            position: relative !important;
        }
    </style>
          <link rel="stylesheet" href="{{asset('home/css/skeleton.css')}}"/>

@endsection

@section('script')
<script>

document.addEventListener("DOMContentLoaded", () => {

  setupShowMoreButton();

  const desktopSidebar = document.getElementById("filter-sidebar-desktop");
  initializePriceSlider(desktopSidebar);

  const mobileDrawerContent = document.querySelector(
    "#filter-drawer .offcanvas-body"
  );
  if (
    desktopSidebar &&
    mobileDrawerContent &&
    mobileDrawerContent.innerHTML.trim() === ""
  ) {
    mobileDrawerContent.innerHTML = desktopSidebar.innerHTML;
    initializePriceSlider(mobileDrawerContent);
  }
});
let minPriceVal= 0 ;
let maxPriceVal= 0 ;
function initializePriceSlider(container) {
  if (!container) return;

  const slider = container.querySelector("#price-slider-track");
  if (!slider) return;

  const minHandle = container.querySelector("#price-slider-min-handle");
  const maxHandle = container.querySelector("#price-slider-max-handle");
  const range = container.querySelector("#price-slider-range");
  const minDisplay = container.querySelector("#min-price-display");
  const maxDisplay = container.querySelector("#max-price-display");

  if (!minHandle || !maxHandle || !range || !minDisplay || !maxDisplay) return;

  const MIN_PRICE = 0;
  const MAX_PRICE = {{$max_price}};
  const STEP = 1000;

  let minPercentState = 0;
  let maxPercentState = 100;

  const formatPrice = (price) => {
    return new Intl.NumberFormat("fa-IR").format(price) + " ت";
  };

  const updateSliderUI = () => {
    minHandle.style.right = `${minPercentState}%`;
    maxHandle.style.right = `${maxPercentState}%`;

    const displayMinPercent = Math.min(minPercentState, maxPercentState);
    const displayMaxPercent = Math.max(minPercentState, maxPercentState);

    range.style.right = `${displayMinPercent}%`;
    range.style.width = `${displayMaxPercent - displayMinPercent}%`;

     minPriceVal =
      MIN_PRICE + (displayMinPercent / 100) * (MAX_PRICE - MIN_PRICE);
     maxPriceVal =
      MIN_PRICE + (displayMaxPercent / 100) * (MAX_PRICE - MIN_PRICE);

    minDisplay.textContent = `از ${formatPrice(
      Math.round(minPriceVal / STEP) * STEP
    )}`;
    maxDisplay.textContent = `تا ${formatPrice(
      Math.round(maxPriceVal / STEP) * STEP
    )}`;
  };

  const createDragHandler = (updateStateCallback) => {
    return (startEvent) => {
      if (startEvent.type === "touchstart") {
        startEvent.preventDefault();
      }

      const sliderRect = slider.getBoundingClientRect();

      const onMove = (moveEvent) => {
        const clientX =
          moveEvent.clientX ||
          (moveEvent.touches && moveEvent.touches[0].clientX);
        if (clientX === undefined) return;

        const positionX = sliderRect.right - clientX;
        let newPercent = (positionX / sliderRect.width) * 100;
        newPercent = Math.max(0, Math.min(100, newPercent));

        updateStateCallback(newPercent);
        updateSliderUI();
      };

      const onEnd = () => {
        document.removeEventListener("mousemove", onMove);
        document.removeEventListener("mouseup", onEnd);
        document.removeEventListener("touchmove", onMove);
        document.removeEventListener("touchend", onEnd);
      };

      if (startEvent.type === "mousedown") {
        document.addEventListener("mousemove", onMove);
        document.addEventListener("mouseup", onEnd, { once: true });
      } else if (startEvent.type === "touchstart") {
        document.addEventListener("touchmove", onMove);
        document.addEventListener("touchend", onEnd, { once: true });
      }
    };
  };

  minHandle.addEventListener(
    "mousedown",
    createDragHandler((p) => (minPercentState = p))
  );
  maxHandle.addEventListener(
    "mousedown",
    createDragHandler((p) => (maxPercentState = p))
  );
  minHandle.addEventListener(
    "touchstart",
    createDragHandler((p) => (minPercentState = p)),
    { passive: false }
  );
  maxHandle.addEventListener(
    "touchstart",
    createDragHandler((p) => (maxPercentState = p)),
    { passive: false }
  );

  updateSliderUI();
}

function setupShowMoreButton() {
  const descBtn = document.querySelector("#toggle-description");
  const descContent = document.querySelector("#description-content");
  const toggleText = document.querySelector("#toggle-text");
  const toggleArrow = document.querySelector("#toggle-arrow");

  if (!descBtn || !descContent || !toggleText || !toggleArrow) return;

  const collapsedHeight = "7rem";

  descContent.style.transition = "max-height 0.5s ease-in-out";
  descContent.style.overflow = "hidden";

  descContent.style.maxHeight = collapsedHeight;
  descBtn.setAttribute("aria-expanded", "false");

  descBtn.addEventListener("click", () => {
    const isExpanded = descBtn.getAttribute("aria-expanded") === "true";

    if (isExpanded) {
      descContent.style.maxHeight = collapsedHeight;
      descContent.classList.add("deactive");
      toggleText.textContent = "نمایش بیشتر";
      toggleArrow.style.transform = "rotate(0deg)";
      descBtn.setAttribute("aria-expanded", "false");
    } else {
      const fullHeight = descContent.scrollHeight + "px";
      descContent.style.maxHeight = fullHeight;
      descContent.classList.remove("deactive");
      toggleText.textContent = "نمایش کمتر";
      toggleArrow.style.transform = "rotate(180deg)";
      descBtn.setAttribute("aria-expanded", "true");
    }
  });
}

  const toggleBtnProduct = document.getElementById("toggle-cols-btn");
const postData = document.getElementById("post-data");
const toggleIcon = document.getElementById("toggle-icon");
const products = document.querySelectorAll(".new-product-card");
let isTwoCols = true; // default to 2 columns

// ✅ Set initial state
if (window.innerWidth <= 640) {
  postData.classList.add("row-cols-2");
  toggleIcon.className = "bx bx-grid-alt";
  products.forEach((p) => {
    p.classList.add("product-two-col-style");
    if (p.parentElement) {
      p.parentElement.classList.add("parent-two-col-style");
    }
  });
}

toggleBtnProduct.addEventListener("click", () => {
  if (window.innerWidth <= 640) {
    isTwoCols = !isTwoCols;

    postData.classList.toggle("row-cols-1", !isTwoCols);
    postData.classList.toggle("row-cols-2", isTwoCols);

    toggleIcon.className = isTwoCols ? "bx bx-grid-alt" : "bx bx-layout";

    products.forEach((p) => {
      p.classList.toggle("product-two-col-style", isTwoCols);
      if (p.parentElement) {
        p.parentElement.classList.toggle("parent-two-col-style", isTwoCols);
      }
    });
  }
});



</script>

<script>
        function persianToEnglishNumbers(str) {
            const persianNumbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'] ;
            const englishNumbers = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];

            let englishStr = str;
            for (let i = 0; i < persianNumbers.length; i++) {
                englishStr = englishStr.replace(new RegExp(persianNumbers[i], 'g'), englishNumbers[i]);
            }
            return englishStr;
        }

        function number_format (number, decimals, dec_point, thousands_sep) {
            // Strip all characters but numerical ones.
            number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
            var n = !isFinite(+number) ? 0 : +number,
                prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
                sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
                dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
                s = '',
                toFixedFix = function (n, prec) {
                    var k = Math.pow(10, prec);
                    return '' + Math.round(n * k) / k;
                };
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
            if (s[0].length > 3) {
                s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
            }
            if ((s[1] || '').length < prec) {
                s[1] = s[1] || '';
                s[1] += new Array(prec - s[1].length + 1).join('0');
            }
            return s.join(dec);
        }

        var total = {{ $products->lastPage() }};
        var current_page = 1;
        $('.btn-clear-filter').click(function () {
            window.location.reload();
        })





        function change_sort(sort_id) {
            $('#sort_input').val(sort_id)
            filter_products();
        }

        function filter_products(sort_id = null, tag = null,input=null) {

            let attribute_values = [];

            if (sort_id!=null){
                $('#sort_input').val(sort_id)
            }
            let page =  $(this).data('page');



            let sort = $('#sort_products').val();
                    if (tag != null) {


                sort = $(tag).val();
            }




            $.each($('.attr_filter_ids:checked'), function () {
                attribute_values.push($(this).val());
            });

            $.ajax({
                url: "{{ route('home.product_categories',['category'=>$category->alias]) }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    attribute_values: attribute_values,
                    sort: sort,
                    min_price: minPriceVal,
                    max_price: maxPriceVal,
                    page: page,
                },
                dataType: "json",
                type: 'get',
                beforeSend: function () {
                    $('.loader-filter').show();
                },
                success: function (msg) {


                    $('.loader-filter').hide();

                    if (msg[0] === 1) {
                        $('#post-data').html(msg[1]);
                        const priceElements = document.querySelectorAll('.current-price, .old-price, .category-save-badge, .format-price');
                        priceElements.forEach(function (priceEl) {
                            const text = priceEl.textContent.trim();
                            const number = parseInt(text);
                            if (!isNaN(number)) {
                                priceEl.innerHTML = numberFormat(number) + (priceEl.classList.contains('category-save-badge') ? '%' : ' <span class="fw-normal fs-small">تومان</span>');
                            }
                        });
                        const savePriceElements = document.querySelectorAll('.save-tag');
                        savePriceElements.forEach(function (priceEl) {
                            const text = priceEl.textContent.trim();
                            const number = parseInt(text.replace(/[^\d]/g, '')); // extract numeric part
                            if (!isNaN(number)) {
                                // Keep prefix text like "سود شما"
                                const prefix = text.replace(/[0-9۰-۹.,]+.*/g, '').trim() || 'سود شما';
                                priceEl.innerHTML = `${prefix} ${numberFormat(number)} تومان`;
                            }
                        });
                        total = msg[2];
                        current_page = 1;
                        $('#load-more').html(msg[3]);
                        $('.modal-filter').fadeOut();
                    }
                }
            })

            // $('#orderby').val(sort);

            // $('#filter_products').submit();
        }


    //  var elementPosition = $('.fixed-scroll').offset().top;



    $(window).scroll(function(){
      if($(window).scrollTop() > elementPosition){

        $('.item-boxs').css('position','sticky').css('top',-750);


      } else {

        $('.item-boxs').css('position','static');
      }
    });
</script>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const hourHand = document.querySelector("[data-hour-hand]");
  const minuteHand = document.querySelector("[data-minute-hand]");
  const secondHand = document.querySelector("[data-second-hand]");

  function setClock() {
    const now = new Date();

    const seconds = now.getSeconds();
    const secondsDegrees = (seconds / 60) * 360 + 90;
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

    const minutes = now.getMinutes();
    const minutesDegrees = (minutes / 60) * 360 + (seconds / 60) * 6 + 90;
    minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;

    const hours = now.getHours();
    const hoursDegrees = (hours / 12) * 360 + (minutes / 60) * 30 + 90;
    hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
  }

  setInterval(setClock, 1000);
  setClock(); // Initial call to avoid delay
});

</script>

{{-- <script>
    document.addEventListener("DOMContentLoaded", function () {
        let currentPage = 1;
        const lastPage = {{ $products->lastPage() }};
        const trigger = document.getElementById("infinite-scroll-trigger");
        const postData = document.getElementById("post-data");
        let loading = false;

        const observer = new IntersectionObserver(async (entries) => {
            if (entries[0].isIntersecting && !loading && currentPage < lastPage) {
                loading = true;
                currentPage++;

                try {
                    const response = await fetch("{{ route('home.product_categories', ['category' => $category->alias]) }}?page=" + currentPage, {
                        headers: {
                            "X-Requested-With": "XMLHttpRequest"
                        }
                    });

                    const data = await response.json();
                    if (data[0] === 1) {
                        postData.insertAdjacentHTML("beforeend", data[1]);
                    }
                } catch (error) {
                    console.error("Error loading more products:", error);
                }

                loading = false;
            }
        }, { threshold: 1.0 });

        observer.observe(trigger);
    });
</script> --}}

@endsection

@section('content')


<div id="preloader">


   <section class="bg-aplus-dark">
        <div class="container text-light">
            <div class="row align-items-center py-5 gx-5 mt-80">
                <div class="col-lg-3 d-flex justify-content-center">
                    <div class="skeleton" style="height: 200px; width: 200px; border-radius: 8px;"></div>
                </div>
                <div class="col-lg-9">
                    <div class="skeleton skeleton-text" style="height: 2rem; width: 40%; margin-bottom: 1.5rem;"></div>
                    <div class="skeleton skeleton-text"></div>
                    <div class="skeleton skeleton-text"></div>
                    <div class="skeleton skeleton-text" style="width: 80%;"></div>
                </div>
            </div>
        </div>
    </section>

    <div class="bg-light">
        <div class="container py-4">
            <div class="row g-4">
                <!-- Desktop Sidebar Skeleton -->
                <aside class="col-lg-3 d-none d-lg-block">
                    <div class="bg-white p-4 mb-3">
                        <div class="skeleton skeleton-text" style="height: 2rem; width: 80%; margin-bottom: 1rem;"></div>
                    </div>
                    <div class="bg-white p-4 mb-3">
                        <div class="skeleton skeleton-text" style="height: 1.5rem; width: 60%; margin-bottom: 2.5rem;"></div>
                        <div class="skeleton" style="height: 0.5rem; width: 100%;"></div>
                        <div class="d-flex justify-content-between mt-3">
                            <div class="skeleton skeleton-text" style="width: 45%;"></div>
                            <div class="skeleton skeleton-text" style="width: 45%;"></div>
                        </div>
                    </div>
                    <div class="bg-white p-4">
                        <div class="skeleton skeleton-text" style="height: 2.5rem; margin-bottom: 1.5rem;"></div>
                        <div class="skeleton skeleton-text" style="width: 70%; margin-bottom: 1rem;"></div>
                        <div class="skeleton skeleton-text" style="width: 70%; margin-bottom: 1rem;"></div>
                        <div class="skeleton skeleton-text" style="width: 70%; margin-bottom: 2rem;"></div>

                        <div class="skeleton skeleton-text" style="height: 2.5rem; margin-bottom: 1.5rem;"></div>
                        <div class="skeleton skeleton-text" style="width: 70%; margin-bottom: 1rem;"></div>
                        <div class="skeleton skeleton-text" style="width: 70%; margin-bottom: 1rem;"></div>
                    </div>
                </aside>

                <!-- Main Content Skeleton -->
                <div class="col-lg-9">
                    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-center mb-4">
                         <!-- Mobile Controls Skeleton -->
                        <div class="w-100 d-lg-none mb-3">
                             <div class="d-flex gap-2 me-auto">
                                <div class="skeleton" style="height: 38px; width: 100px; border-radius: 0.375rem;"></div>
                                <div class="skeleton" style="height: 38px; width: 50px; border-radius: 0.375rem;"></div>
                            </div>
                        </div>
                         <!-- Desktop Controls Skeleton -->

                        <div class="skeleton w-100" style="height: 48px; border-radius: 0.375rem;"></div>
                    </div>

                    <div class="row row-cols-1 row-cols-sm-2 row-cols-xl-3 g-4">
                        <!-- Skeleton Product Card - Repeat 12 times -->
                        <script>
                            for (let i = 0; i < 12; i++) {
                                document.write(`
                                    <div class="col">
                                        <div class="new-product-card h-100 p-3">
                                            <div class="skeleton" style="height: 250px; margin-bottom: 1rem;"></div>
                                            <div class="product-info d-flex flex-column" style="flex-grow: 1;">
                                                <div>
                                                    <div class="d-flex justify-content-between">
                                                        <div class="skeleton skeleton-text" style="width: 40%;"></div>
                                                        <div class="skeleton skeleton-text" style="width: 25%;"></div>
                                                    </div>
                                                    <div class="skeleton skeleton-text mt-3" style="height: 1.2rem; width: 90%;"></div>
                                                    <div class="skeleton skeleton-text mt-2" style="height: 1.2rem; width: 70%; margin-bottom: 1.5rem;"></div>

                                                    <div class="specs">
                                                        <div class="skeleton skeleton-text" style="height: 0.75rem;"></div>
                                                        <div class="skeleton skeleton-text" style="height: 0.75rem;"></div>
                                                        <div class="skeleton skeleton-text" style="height: 0.75rem; margin-bottom: 1rem;"></div>
                                                    </div>
                                                </div>

                                                <div class="mt-auto">
                                                    <div class="price-section">
                                                        <div class="skeleton" style="width: 50%; height: 2rem; margin-right: auto;"></div>
                                                    </div>
                                                    <div class="skeleton" style="height: 48px; margin-top: 1rem; width: 100%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                `);
                            }
                        </script>
                    </div>

                    <!-- Pagination Skeleton -->
                    <nav class="d-flex justify-content-center mt-5" aria-label="Loading pages">
                        <div class="skeleton" style="width: 200px; height: 38px; border-radius: 1rem;"></div>
                    </nav>
                </div>
            </div>
        </div>
    </div>

</div>

<div id="preloader-content">


    <section class="bg-aplus-dark">
        <div class="container text-light">
            <div class="row align-items-center py-5 gx-5 mt-80">
                <div class="col-lg-3 d-flex" style="padding: 0">
                    <img
                        src="{{ imageExist(env('CATEGORY_IMAGES_UPLOAD_PATH'),$category->banner_image) }}"
                        class="img-fluid m-auto"
                        style="object-fit: cover"
                    />
                </div>
                <div class="col-lg-9 d-flex flex-column justify-content-center">
                    <h1 class="fw-light m-4 text-white" style="font-size: 18px">
                        {{$category->name}}
                    </h1>
                    <p class="mb-4 text-justify" >
{{$category->short_description}}
                    </p>
                </div>
            </div>
        </div>
    </section>

    <div class="bg-light">
        <div class="container py-4">

            @if($products && $products->count() > 0)
                <div class="row g-4">
                <!-- Desktop Sidebar -->
                <aside class="col-lg-3 d-none d-lg-block">
                    <div id="filter-sidebar-desktop">
                       {{-- <div class="bg-white p-4 mb-3">--}}
                           {{-- <div--}}
{{--                                class="form-check form-switch d-flex row-reverse justify-content-between align-items-center"--}}
{{--                            >--}}
{{--                                <input--}}
{{--                                    class="form-check-input"--}}
{{--                                    type="checkbox"--}}
{{--                                    role="switch"--}}
{{--                                    id="available-only"--}}
{{--                                    checked--}}
{{--                                />--}}
{{--                                <label class="form-check-label fw-bold" for="available-only"--}}
{{--                                >فقط کالاهای موجود</label--}}
{{--                                >--}}
{{--                            </div>--}}
{{--                        </div> --}}

                        <div class="bg-white p-4 mb-3">
                            <h3 class="fw-bold mb-2" style="font-size: 16px">
                                محدوده قیمت
                            </h3>
                            <div class="pt-4">
                                <div
                                    id="price-slider-track"
                                    class="position-relative bg-light rounded-pill"
                                    style="height: 0.25rem"
                                >
                                    <div
                                        id="price-slider-range"
                                        class="position-absolute h-100 rounded-pill"
                                        style="background-color: var(--color-primary-red)"
                                    ></div>
                                    <div
                                        id="price-slider-min-handle"
                                        class="position-absolute top-50 translate-middle"
                                        style="transform: translate(50%, -50%)"
                                    >
                                        <div
                                            class="rounded-circle cursor-pointer"
                                            style="
                            width: 1rem;
                            height: 1rem;
                            background-color: var(--color-primary-red);
                          "
                                        ></div>
                                    </div>
                                    <div
                                        id="price-slider-max-handle"
                                        class="position-absolute top-50 translate-middle"
                                        style="transform: translate(50%, -50%)"
                                    >
                                        <div
                                            class="rounded-circle cursor-pointer"
                                            style="
                            width: 1rem;
                            height: 1rem;
                            background-color: var(--color-primary-red);
                          "
                                        ></div>
                                    </div>
                                </div>
                                <div
                                    class="d-flex justify-content-between small text-muted mt-3"
                                >
                                    <span id="min-price-display"></span>
                                    <span id="max-price-display"></span>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white p-4">
                            <div class="accordion accordion-flush" id="filterAccordion">
                                @foreach($attributes as $key => $attribute)
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button
                                            class="accordion-button collapsed fw-bold p-0 py-3"
                                            type="button"
                                            data-bs-toggle="collapse"
                                            data-bs-target="#collapseType{{$attribute->id}}"
                                            aria-expanded="false"
                                            aria-controls="collapseType{{$attribute->id}}"
                                        >
                                            {{ $attribute->name }}
                                        </button>
                                    </h2>
                                    <div
                                        id="collapseType{{$attribute->id}}"
                                        class="accordion-collapse collapse"
                                    >
                                        <div class="accordion-body pt-2 pb-0">
                                            @foreach($attribute->AttributeValues()->orderby('priority_show','asc')->whereIn('id',$all_attribute_value_exists_ids)->get() as $attrValue)
                                            <div class="form-check">
                                                <input
                                                    class="form-check-input attr_filter_ids"
                                                    type="checkbox" name="attr_filter_ids[]"
                                                    autocomplete="off" id="attr_filter_{{ $attrValue->id }}"
                                                    onclick="filter_products(null,null,this)"
                                                    value="{{ $attrValue->id }}"

                                                />

                                                <label class="form-check-label" for="attr_filter_{{ $attrValue->id }}">{{ $attrValue->name }}</label>
                                            </div>
                                            @endforeach

                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>

                    </aside>
                    <div class="col-lg-8">
                    <div
                        class="d-flex flex-column flex-lg-row justify-content-between align-items-center mb-4"
                    >

                    <div class="mobile w-100">
                        <div class="d-flex gap-2 me-auto">
                          <button
                            id="filter-open-button"
                            class="btn btn-light border d-flex align-items-center gap-2 mb-3"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#filter-drawer"
                            aria-controls="filter-drawer"
                          >
                            <i class="bx bx-filter-alt"></i>
                            <span>فیلتر</span>
                          </button>

                          <button class="btn btn-light border mb-3 d-flex align-items-center justify-content-center" id="toggle-cols-btn">
                            <i class='bx bx-layout' id="toggle-icon"></i>
                          </button>
                        </div>
                    </div>


                        <p class="small d-none d-lg-block">نمایش 1 - 12 از 12 نتیجه</p>
                        <div class="w-100 w-lg-auto">


                            <select onchange="filter_products()" id="sort_products"
                                    class="form-select">
                                <option value="0" {{ $sort==0 ? 'selected' : '' }}>پیش فرض</option>
                                <option value="1" {{ $sort==1 ? 'selected' : '' }}>جدید ترین</option>
                                <option value="2" {{ $sort==2 ? 'selected' : '' }}>قدیمی ترین</option>
                                <option value="3" {{ $sort==3 ? 'selected' : '' }}>قیمت ،نزولی</option>
                                <option value="4" {{ $sort==4 ? 'selected' : '' }}>قیمت ،صعودی</option>
                                <option value="5" {{ $sort==5 ? 'selected' : '' }}>محبوب ترین ها</option>
                            </select>
                        </div>
                    </div>

                    <div id="post-data" class="row row-cols-1 row-cols-sm-2 row-cols-xl-3 g-1">

                        @if($products->count() > 0)
                            @foreach($products as $product)
                                <div class="col-lg-4 col-sm-6">
                                    @include('home.sections.product_category_box')
                                </div>
                            @endforeach
                        @endif
                    </div>

                    {{-- <div id="infinite-scroll-trigger" class="my-4 text-center">
                        <span class="text-muted">در حال بارگذاری...</span>
                    </div> --}}
                        @if($category->description)
                    <div class="w-100 border rounded-lg mt-4 parent">
                        <div
                            id="description-content"
                            class="text-secondary overflow-hidden p-4 bg-white deactive"
                            style="max-height: 7rem"
                        >
                     {!! $category->description !!}
                        </div>
                        <button
                            id="toggle-description"
                            class="w-100 d-flex justify-content-center align-items-center gap-2 py-2 px-4 bg-light"
                        >
                            <span id="toggle-text" class="show-more-btn">نمایش بیشتر</span>
                            <i id="toggle-arrow" class="bx bx-chevron-down fs-4"></i>
                        </button>
                    </div>
                        @endif


                        {!! $products->links() !!}
                </div>
                </div>
            @else
            <div class="coming-soon-container text-center py-5">
                <div class="coming-soon-icon mb-3">
                     <div class="clock">
        <div class="hand hour-hand" data-hour-hand></div>
        <div class="hand minute-hand" data-minute-hand></div>
        <div class="hand second-hand" data-second-hand></div>
        <div class="center-dot"></div>
      </div>
                </div>
                <h1 class="coming-soon-title mb-2">به زودی در دسترس شما...</h1>
                <p class="coming-soon-text mb-4">
                   محصولات دسته {{ $category->name }} آپلاس به زودی اضافه میشود<br/> لطفا کمی بعد دوباره تلاش کنید
                </p>
                <a href="{{ url('/') }}" class="coming-soon-cta btn btn-outline-light">بازگشت به صفحه اصلی</a>
            </div>

            @endif


        </div>



    </div>


</div>

    <div class="offcanvas offcanvas-start" id="filter-drawer" tabindex="-1" aria-modal="true" role="dialog">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title">فیلترها</h5>
          <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" style="z-index: 1000;"></button>
        </div>
        <div class="offcanvas-body">
          <div id="filter-sidebar-desktop">
            <div class="bg-white p-4 mb-3">
              <div class="form-check form-switch d-flex row-reverse justify-content-between align-items-center">
                <input class="form-check-input" type="checkbox" role="switch" id="available-only" checked="">
                <label class="form-check-label fw-bold" for="available-only">فقط کالاهای موجود</label>
              </div>
            </div>

            <div class="bg-white p-4 mb-3">
              <h3 class="fw-bold mb-2" style="font-size: 16px">محدوده قیمت</h3>
              <div class="pt-4">
                <div id="price-slider-track" class="position-relative bg-light rounded-pill" style="height: 0.25rem">
                  <div id="price-slider-range" class="position-absolute h-100 rounded-pill" style="background-color: var(--color-primary-red)"></div>
                  <div id="price-slider-min-handle" class="position-absolute top-50 translate-middle" style="transform: translate(50%, -50%)">
                    <div class="rounded-circle cursor-pointer" style="
                        width: 1rem;
                        height: 1rem;
                        background-color: var(--color-primary-red);
                      "></div>
                  </div>
                  <div id="price-slider-max-handle" class="position-absolute top-50 translate-middle" style="transform: translate(50%, -50%)">
                    <div class="rounded-circle cursor-pointer" style="
                        width: 1rem;
                        height: 1rem;
                        background-color: var(--color-primary-red);
                      "></div>
                  </div>
                </div>
                <div class="d-flex justify-content-between small text-muted mt-3">
                  <span id="min-price-display"></span>
                  <span id="max-price-display"></span>
                </div>
              </div>
            </div>

            <div class="bg-white p-4">
              <div class="accordion accordion-flush" id="filterAccordion">
                <!-- Filter Group: Type -->
                <div class="accordion-item">
                  <h2 class="accordion-header">
                    <button class="accordion-button collapsed fw-bold p-0 py-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapseType" aria-expanded="false" aria-controls="collapseType">
                      نوع
                    </button>
                  </h2>
                  <div id="collapseType" class="accordion-collapse collapse">
                    <div class="accordion-body pt-2 pb-0">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="type-1"><label class="form-check-label" for="type-1">فرهای بخارپز (5)</label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="type-2"><label class="form-check-label" for="type-2">فرهای تکی (12)</label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="type-3"><label class="form-check-label" for="type-3">فرهای دوگانه (3)</label>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Filter Group: Size -->
                <div class="accordion-item">
                  <h2 class="accordion-header">
                    <button class="accordion-button collapsed fw-bold p-0 py-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSize" aria-expanded="false" aria-controls="collapseSize">
                      سایز
                    </button>
                  </h2>
                  <div id="collapseSize" class="accordion-collapse collapse">
                    <div class="accordion-body pt-2 pb-0">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="size-1"><label class="form-check-label" for="size-1">43 اینچ (4)</label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="size-2"><label class="form-check-label" for="size-2">50 اینچ (2)</label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="size-3"><label class="form-check-label" for="size-3">55 اینچ (1)</label>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- More filters... -->
              </div>
            </div>
            <button type="button" class="btn btn-danger w-100" data-bs-dismiss="modal" id="apply-filter-btn">
              اعمال فیلتر
            </button>
          </div>
        </div>
    </div>

@endsection