@extends('frontend::layouts.master')

@section('content')
    <div class="bg-top-sub-gradient">
        @php
            $breadcrumbData =[
                [
                    'name' => 'home',
                    'title' => '',
                    'url' => '/',
                ],
                [
                    'name' => 'search-result',
                    'title' => 'Result for "mouse"',
                    'url' => '#',
                ],
                ];
        @endphp 
        <div class="lg:container p-4">
            <x-frontend::navigation.breadcrumbs.template :breadcrumbDatas=$breadcrumbData></x-frontend>
        </div>

        {{-- Mega Menu + Main Banner Carousel  --}}
        <div class="lg:container px-4">
            <div class="flex flex-wrap -mx-4 relative">
                <x-frontend::navigation.mega-category.template>
                    <x-slot:extra>
                        <nav class="sidebar-nav-wrapper">
                            <button class="sidebar-nav-close">
                                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="lg:hidden">
                                    <path d="M0.927622 12.4435L12.4434 0.927734" stroke="black" stroke-width="1.5" stroke-linecap="round"></path>
                                    <path d="M0.927623 0.927621L12.4434 12.4434" stroke="black" stroke-width="1.5" stroke-linecap="round"></path>
                                </svg>
                            </button>
                        <form action="#" class="sticky top-0 bottom-2 pb-3">
                            <div class="product-filter-wrapper flex flex-col gap-y-6">
                                <div class="double-slider-box">
                                    <label>Price</label>
                                    <div class="range-slider">
                                        <span class="slider-track"></span>
                                        <input type="range" name="min_val" class="min-val" min="0" max="290000" value="2000">
                                        <input type="range" name="max_val" class="max-val" min="10000" max="300000" value="200000">
                                    </div>
                                    <div class="input-box">
                                        <div class="min-box">
                                            <div class="input-wrap">
                                                <input type="number" name="min_input" class="input-field min-input" min="0" max="290000">
                                            </div>
                                        </div>
                                        <div class="range-dash">
                                            -
                                        </div>
                                        <div class="max-box">
                                            <div class="input-wrap">
                                                <input type="number" name="max_input" class="input-field max-input" min="10000" max="300000">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                {{-- <div class="single-slider-box">
                                    <label for="poppular-range">Popular</label>
                                        <input type="range" class="range-one-bullet" id="poppular-range"  min="0" max="1"
                                            aria-orientation="horizontal">
                                        <div class="flex items-baseline justify-between">
                                            <p class="font-light">Low viewers</p>
                                            <p class="font-light">Top viewers</p>
                                        </div>
                                    <div class="flex items-start gap-x-2 mt-4">
                                        <input type="radio" name="viewer_radio" class="radio-default" id="viewer-radio-1">
                                        <label for="viewer-radio-1">Low viewers</label>
                                    </div>
                                    <div class="flex items-start gap-x-2 mt-4">
                                        <input type="radio" name="viewer_radio" class="radio-default" id="viewer-radio-2">
                                        <label for="viewer-radio-2">Top viewers</label>
                                    </div>
                                </div>
                                <hr> --}}
                                <div class="">
                                    <label>Brand</label>
                                    <div class="flex items-start gap-x-4 mt-4">
                                        <input type="checkbox" name="brand_checkbox" class="checkbox-default" id="brand-checkbox-1">
                                        <label for="brand-checkbox-1">Apple</label>
                                    </div>
                                    <div class="flex items-start gap-x-4 mt-4">
                                        <input type="checkbox" name="brand_checkbox" class="checkbox-default" id="brand-checkbox-2">
                                        <label for="brand-checkbox-2">Asus</label>
                                    </div>
                                    <div class="flex items-start gap-x-4 mt-4">
                                        <input type="checkbox" name="brand_checkbox" class="checkbox-default" id="brand-checkbox-3">
                                        <label for="brand-checkbox-3">Acer</label>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="button-secondary !bg-opacity-50 mx-auto reset-btn w-full justify-center">ล้างตัวกรอง</button>
                            <button type="button" class="button-secondary mx-auto lg:hidden w-full justify-center mt-4 nav-close-btn">ยืนยัน</button>
                        </form>
                    </nav>
                    <div class="sidebar-nav-backdrop"></div>
                    </x-slot:extra>
                    </x-frontend>
                    <div class="w-full lg:w-auto flex-1 px-4">
                        <button class="ml-auto sidebar-more-trigger button-secondary mb-2 !bg-opacity-50 !border-none lg:hidden justify-start !px-8 inline-flex gap-x-1 !text-16 items-center w-full">
                            <svg class="!w-[18px] !h-[18px]" width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M23.3034 48.4375H18.75V24.7879L2.34375 5.25664V1.5625H46.875V5.23555L31.25 24.7668V40.4909L23.3034 48.4375ZM21.875 45.3125H22.0091L28.125 39.1966V23.6707L43.3115 4.6875H5.94727L21.875 23.6496V45.3125Z" fill="black"/>
                            </svg>
                            <p>ตัวกรอง</p>
                        </button>
                        <div class="flex items-center justify-between gap-y-4 gap-x-3 flex-wrap pb-6 lg:pb-10 pt-4 lg:pt-6">
                            <div cass="">
                                <h1 class="text-24 lg:text-36 font-bold text-primary leading-10">Result for "mouse"</h1>
                                <h4 class="text-20">21 results found</h4>
                            </div>
                            <div class="flex items-baseline gap-x-2">
                                <h4 class="font-semibold">เรียงตาม : </h4>
                                <select class="py-3 px-4 pe-9 block w-[200px] border-gray-200 rounded-lg">
                                    <option selected="">โปรดเลือก</option>
                                    <option>ความนิยม (น้อย ไป มาก)</option>
                                    <option>ความนิยม (มาก ไป น้อย)</option>
                                  </select>
                            </div>
                        </div>
                        <div class="flex -mx-3 gap-y-6 flex-wrap">
                            @for ($example = 1; $example < 4; $example++)
                                @for ($i = 1; $i < 5; $i++)
                                    <div class="w-full xtn:w-1/2 md:w-1/3 2xl:w-1/4 px-3">
                                        <x-frontend::card.product-card.template link="product-detail"
                                            productImage="{{ Module::asset('frontend:img/product' . $i . '.jpg') }}"
                                            productName="IMOU Smart IP Camera 3.6mm (REX 2D) GK2DP-3C0W ประกัน 2 ปี"
                                            productSubtitle="Lens : 3.6mm / IR Distance : 10m Audio Communication : Two-Way"
                                            brandImage="{{ Module::asset('frontend:img/brand.png') }}"
                                            brandName="EZVIZ" :badges="[
                                                [
                                                    'name' => 'new',
                                                    'title' => 'New',
                                                ],
                                                [
                                                    'name' => 'Best price',
                                                    'title' => 'New',
                                                ],
                                                [
                                                    'name' => 'flash',
                                                    'title' => 'Flash sale',
                                                ],
                                            ]" tag="Free special gift"
                                            price="2,500" discountPrice="2,690" :flashSale=false
                                            progressPercentage="25" progressText="1 sold" warranty="2 years warranty"
                                            addToCartLink="#">
                                        </x-frontend>
                                    </div>
                                @endfor
                            @endfor
                            <div class="w-full pt-8 pb-4 text-center">
                                <x-frontend::navigation.pagination.template></x-frontend::navigation.pagination.template>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
    <script>
        window.onload = function() {
    initSlider();
};
const minVal = document.querySelector(".min-val");
const maxVal = document.querySelector(".max-val");
const priceInputMin = document.querySelector(".min-input");
const priceInputMax = document.querySelector(".max-input");
const range = document.querySelector(".slider-track");

const defaultMin = 0;
const defaultMax = 300000;
const minGap = 32000;
const sliderMinValue = parseInt(minVal.min);
const sliderMaxValue = parseInt(maxVal.max);

function initSlider() {
    // Initialize inputs
    updateSlider();
    updateInputs();

    // Event listeners for input changes
    minVal.addEventListener('input', handleMinChange);
    maxVal.addEventListener('input', handleMaxChange);
    priceInputMin.addEventListener('input', handleMinInputChange);
    priceInputMax.addEventListener('input', handleMaxInputChange);
    priceInputMin.addEventListener('blur', handleMinInputBlur);
    priceInputMax.addEventListener('blur', handleMaxInputBlur);
}

function handleMinChange() {
    const minValue = parseInt(minVal.value);
    const maxValue = parseInt(maxVal.value);
    if (maxValue - minValue < minGap) {
        minVal.value = maxValue - minGap;
    }
    updateSlider();
    updateInputs();
}

function handleMaxChange() {
    const minValue = parseInt(minVal.value);
    const maxValue = parseInt(maxVal.value);
    if (maxValue - minValue < minGap) {
        maxVal.value = minValue + minGap;
    }
    updateSlider();
    updateInputs();
}

function handleMinInputChange() {
    const minValue = parseInt(priceInputMin.value);
    if (minValue < sliderMinValue) priceInputMin.value = sliderMinValue;
    if (minValue > maxVal.value - minGap) priceInputMin.value = maxVal.value - minGap;
    minVal.value = priceInputMin.value;
    handleMinChange();
}

function handleMaxInputChange() {
    const maxValue = parseInt(priceInputMax.value);
    if (maxValue > sliderMaxValue) priceInputMax.value = sliderMaxValue;
    if (maxValue < minVal.value + minGap) priceInputMax.value = minVal.value + minGap;
    maxVal.value = priceInputMax.value;
    handleMaxChange();
}

function handleMinInputBlur() {
    const minValue = parseInt(priceInputMin.value);
    if (minValue < sliderMinValue) priceInputMin.value = sliderMinValue;
    if (minValue > maxVal.value - minGap) priceInputMin.value = maxVal.value - minGap;
    minVal.value = priceInputMin.value;
    handleMinChange();
}

function handleMaxInputBlur() {
    const maxValue = parseInt(priceInputMax.value);
    if (maxValue > sliderMaxValue) priceInputMax.value = sliderMaxValue;
    if (maxValue < minVal.value + minGap) priceInputMax.value = minVal.value + minGap;
    maxVal.value = priceInputMax.value;
    handleMaxChange();
}
function resetSlider() {
    minVal.value = defaultMin;
    maxVal.value = defaultMax;
    
    priceInputMin.value = defaultMin;
    priceInputMax.value = defaultMax;
    const checkboxes = document.querySelectorAll('input[name="brand_checkbox"]');
    checkboxes.forEach(checkbox => {
        checkbox.checked = false;
    });
    updateSlider();
}
function updateSlider() {
    const minPercent = ((minVal.value - sliderMinValue) / (sliderMaxValue - sliderMinValue)) * 100;
    const maxPercent = ((maxVal.value - sliderMinValue) / (sliderMaxValue - sliderMinValue)) * 100;

    range.style.left = `${minPercent}%`;
    range.style.right = `${100 - maxPercent}%`;
}

function updateInputs() {
    priceInputMin.value = minVal.value;
    priceInputMax.value = maxVal.value;
}
const resetButton = document.querySelector(".reset-btn");
resetButton.addEventListener("click", resetSlider);
    </script>
@endsection