@extends('layouts.app')

@section('aditional-header')
    <style>


        /* Price Range */
        price-range {
            margin-top: 2rem;
            --thumb-size: 17px;
            --thumb-color: var(--color-impacto);
            --thumb-shadow-size: 5px;
            --track-size: 5px;
            --track-color: #bbb;
            --track-highlight-color: #000;
            font-size: 20px;
            width: 100%;
            display: block;
        }

        /* Price Range Containers */
        price-range>div {
            position: relative;
            width: 100%;
            height: var(--thumb-size);
        }

        price-range>div>div {
            width: 100%;
            height: var(--track-size);
            background: var(--track-color);
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        /* Price Range Input */
        price-range input[type="range"] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 100%;
            margin: 0;
            padding: 0;
            background: transparent;
            border: none;
            outline: none;
            pointer-events: none;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        /* Price Range Input Track */
        price-range input[type="range"]::-webkit-slider-runnable-track {
            -webkit-appearance: none;
            height: 5px;
        }

        price-range input[type="range"]::-moz-range-track {
            -moz-appearance: none;
            height: 5px;
        }

        price-range input[type="range"]::-ms-track {
            appearance: none;
            height: 5px;
        }

        /* Price Range Input Thumb */
        price-range input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            margin-top: -5px;
            width: var(--thumb-size);
            height: var(--thumb-size);
            background: var(--thumb-color);
            border: none;
            border-radius: 50%;
            pointer-events: auto;
            cursor: pointer;
            box-shadow: 0 0 0 0 var(--thumb-color);
            transition: box-shadow 0.15s ease;
        }

        price-range input[type="range"]::-moz-range-thumb {
            -moz-appearance: none;
            width: var(--thumb-size);
            height: var(--thumb-size);
            background: var(--thumb-color);
            border: none;
            border-radius: 50%;
            pointer-events: auto;
            cursor: pointer;
            box-shadow: 0 0 0 0 var(--thumb-color);
            transition: box-shadow 0.15s ease;
        }

        price-range input[type="range"]::-ms-thumb {
            appearance: none;
            width: var(--thumb-size);
            height: var(--thumb-size);
            background: var(--thumb-color);
            border: none;
            border-radius: 50%;
            pointer-events: auto;
            cursor: pointer;
            box-shadow: 0 0 0 0 var(--thumb-color);
            transition: box-shadow 0.15s ease;
        }

        price-range input[type="range"]::-webkit-slider-thumb:hover {
            box-shadow: 0 0 0 var(--thumb-shadow-size) var(--thumb-color);
        }

        price-range input[type="range"]::-moz-range-thumb:hover {
            box-shadow: 0 0 0 var(--thumb-shadow-size) var(--thumb-color);
        }

        price-range input[type="range"]::-ms-thumb:hover {
            box-shadow: 0 0 0 var(--thumb-shadow-size) var(--thumb-color);
        }

        /* Price Range Output */
        price-range output {
            display: block;
            margin-top: 1rem;
            text-align: center;
        }

        .toggle-list {
            max-height: 22rem;
            /* Ajusta esta altura según tus necesidades */
            overflow-y: auto;
        }

        .custom-card {
            position: relative;
            border: none;
            margin-bottom: 7rem;
        }

        .custom-card img {
            height: 18rem;
            object-fit: cover;
            border-radius: 15px 15px 15px 15px;
        }

        .custom-card-body {
            position: absolute;
            bottom: -8rem;
            left: 20px;
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 1px 5px 17px 6px rgb(0 0 0 / 48%);
            width: calc(100% - 40px);
        }
        
        /*new css*/
		
		.b-filtros, .c-filtros{
			display:none;
		}
		
		
		
		@media only screen and (max-width: 767px) {
			.b-filtros{
				display: flex;
                background: #f5f5f5;
                padding: 12px;
                border-radius: 8px;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                color: #333;
                text-decoration: none;
                gap: 12px;
                border: 1px solid #ccc;
			}
			
			
			
			.b-filtros:hover{
				
                background: #ecebeb;
                text-decoration: none !important;
			}
			
            .shop-sidebar{
                display: none;
                position: absolute;
                background: #f3f3f3;
                width: 100%;
                z-index: 10;
                /* padding: 20px; */
                padding-top: 0px;
                top: -8px;
                box-shadow: 0px 8px 12px rgb(0 0 0 / 22%);
            }
            
            .c-filtros{
                display: flex;
                background: rgb(244 67 54 / 13%);
                padding: 12px;
                font-size: 20px;
                color: #333;
                text-decoration: none;
                gap: 12px;
                align-items: center;
                justify-content: center;
                margin: 10px;
                border-radius: 8px;
            }
            
            .c-filtros i{
                color:red;
            }
            
             .c-filtros:hover{
				
                background: rgb(244 67 54 / 23%);
                text-decoration: none !important;
			}
            
            .filter-catg{
                padding: 0px 20px;
                height: 80vh;
                overflow: hidden;
                overflow-y: scroll;
            }
			
			.shop-area {
                position: relative;
                    margin-top: 1rem !important; 
			    
			}
			
		}
        
    </style>
@endsection

@section('seoheader')
    {!! $seo ?? '' !!}
@endsection

@section('content')

    @include('utils.preloader')

    @include('layouts.header')


    <div class="shop-area">
        <div class="container-fluid custom-container">
            <div class="row">
                <div class="col-lg-12">
					<a href="" class="b-filtros">
						<i class="fa fa-filter"></i> Filtros
					</a>
			</div>
                <div class="shop-sidebar">
                    <a href="" class="c-filtros">
							<i class="fa fa-times"></i> Cerrar Filtros
						</a>
						<div class="filter-catg">
                    @if (count($qmenu) > 0)
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header">
                                    <h5>Categorias</h5>
                                    <span title="Mostrar/Ocultar"><i class="fas fa-angle-down"></i></span>
                                </div>
                                <div class="card-body">
                                    @if (Request::query('menu') !== null ||
                                            Request::query('categoria') !== null ||
                                            Request::query('qcategoria') !== null ||
                                            Request::query('qsearch') !== null)
                                        @foreach ($qmenu as $qm)
                                            @php
                                                $collapse = 'clp' . $qm->id_web_menu;
                                            @endphp
                                            <div class="accordion">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <a href="{{ route('catalogo', ['categoria' => $qm->name, 'c' => $qm->id_web_menu]) }}"
                                                            class="font-weight-bold">
                                                            {{ $qm->name }}
                                                        </a>
                                                    </div>
                                                    <div id="{{ $collapse }}" class="collapse show"
                                                        data-parent="#accordionCategory">
                                                        <div class="card-body">
                                                            <ul class="category-list">
                                                                @foreach ($qm->categories as $cat)
                                                                    <li class="ml-4 d-block text-dark">
                                                                        <a class="{{ Request::query('qcategoria') == $cat->cat_description ? 'font-weight-bold' : '' }}"
                                                                            href="{{ route('catalogo', ['qcategoria' => $cat->cat_description, 'sc' => $cat->id_categories]) }}">
                                                                            {{ $cat->cat_description }}
                                                                        </a>
                                                                    </li>
                                                                @endforeach
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif


                                </div>
                            </div>
                        </div>
                    @endif

                    {{-- FILTRO PC's PROCESADOR  --}}
                    @if (!empty($pc_filter_procesador))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>PROCESADOR</h5>
                                    <div>
                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands "
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @php
                                            $count = 0;
                                        @endphp
                                        @for ($i = 0; $i < count($pc_filter_procesador); $i++)
                                            @php
                                                $count++;
                                            @endphp
                                            @if ($count <= 10 && Request::query('dq1') != trim($pc_filter_procesador[$i]))
                                                @if (Request::query('dq1') == trim($pc_filter_procesador[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq1')">
                                                        <b style="">{{ $pc_filter_procesador[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase"
                                                        href="{{ Request::fullUrlWithQuery(['dq1' => trim($pc_filter_procesador[$i]), 'page' => 1]) }}">
                                                        {{ $pc_filter_procesador[$i] }}
                                                    </a>
                                                @endif
                                            @elseif (Request::query('dq1') == trim($pc_filter_procesador[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq1')">
                                                    <b style="">{{ $pc_filter_procesador[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase" class="d-none"
                                                    href="{{ Request::fullUrlWithQuery(['dq1' => trim($pc_filter_procesador[$i]), 'page' => 1]) }}">
                                                    {{ $pc_filter_procesador[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                        @if (count($pc_filter_procesador) > 10)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('pc_filter_procesador')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif
                    {{-- FILTRO PC's TARJETA  --}}
                    @if (!empty($pc_filter_tarjeta))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>TARJETA DE VIDEO</h5>
                                    <div>
                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands "
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @php
                                            $count = 0;
                                        @endphp
                                        @for ($i = 0; $i < count($pc_filter_tarjeta); $i++)
                                            @php
                                                $count++;
                                            @endphp
                                            @if ($count <= 10 && Request::query('dq2') != trim($pc_filter_tarjeta[$i]))
                                                @if (Request::query('dq2') == trim($pc_filter_tarjeta[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq2')">
                                                        <b style="">{{ $f[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase"
                                                        href="{{ Request::fullUrlWithQuery(['dq2' => trim($pc_filter_tarjeta[$i]), 'page' => 1]) }}">
                                                        {{ $pc_filter_tarjeta[$i] }}
                                                    </a>
                                                @endif
                                            @elseif (Request::query('dq2') == trim($pc_filter_tarjeta[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq2')">
                                                    <b style="">{{ $pc_filter_tarjeta[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase" class="d-none"
                                                    href="{{ Request::fullUrlWithQuery(['dq2' => trim($pc_filter_tarjeta[$i]), 'page' => 1]) }}">
                                                    {{ $pc_filter_tarjeta[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                        @if (count($pc_filter_tarjeta) > 10)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('pc_filter_tarjeta')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif
                    {{-- FILTRO PC's CAPACIDAD ALMACENAMIENTO  --}}
                    @if (!empty($pc_capacidad_memoria))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>CAPACIDAD ALMACENAMIENTO</h5>
                                    <div>
                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands "
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @php
                                            $count = 0;
                                        @endphp
                                        @for ($i = 0; $i < count($pc_capacidad_memoria); $i++)
                                            @php
                                                $count++;
                                            @endphp
                                            @if ($count <= 10 && Request::query('dq2') != trim($pc_capacidad_memoria[$i]))
                                                @if (Request::query('dq2') == trim($pc_capacidad_memoria[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq2')">
                                                        <b style="">{{ $pc_capacidad_memoria[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase"
                                                        href="{{ Request::fullUrlWithQuery(['dq2' => trim($pc_capacidad_memoria[$i]), 'page' => 1]) }}">
                                                        {{ $pc_capacidad_memoria[$i] }}
                                                    </a>
                                                @endif
                                            @elseif (Request::query('dq2') == trim($pc_capacidad_memoria[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq2')">
                                                    <b style="">{{ $pc_capacidad_memoria[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase" class="d-none"
                                                    href="{{ Request::fullUrlWithQuery(['dq2' => trim($pc_capacidad_memoria[$i]), 'page' => 1]) }}">
                                                    {{ $pc_capacidad_memoria[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                        @if (count($pc_capacidad_memoria) > 10)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('pc_filter_tarjeta')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif
                    {{-- FILTRO PC's CAPACIDAD RAM  --}}
                    @if (!empty($pc_memoria_ram))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>MEMORIA RAM</h5>
                                    <div>
                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands "
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @php
                                            $count = 0;
                                        @endphp
                                        @for ($i = 0; $i < count($pc_memoria_ram); $i++)
                                            @php
                                                $count++;
                                            @endphp
                                            @if ($count <= 10 && Request::query('dq2') != trim($pc_memoria_ram[$i]))
                                                @if (Request::query('dq2') == trim($pc_memoria_ram[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq2')">
                                                        <b style="">{{ $pc_memoria_ram[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase"
                                                        href="{{ Request::fullUrlWithQuery(['dq2' => trim($pc_memoria_ram[$i]), 'page' => 1]) }}">
                                                        {{ $pc_memoria_ram[$i] }}
                                                    </a>
                                                @endif
                                            @elseif (Request::query('dq2') == trim($pc_memoria_ram[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq2')">
                                                    <b style="">{{ $pc_memoria_ram[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase" class="d-none"
                                                    href="{{ Request::fullUrlWithQuery(['dq2' => trim($pc_memoria_ram[$i]), 'page' => 1]) }}">
                                                    {{ $pc_memoria_ram[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                        @if (count($pc_memoria_ram) > 10)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('pc_filter_tarjeta')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif

                    @if (!empty($capa_gb) || !empty($capa_tb))
                        @if (
                            $qmenu[0]->id_web_menu != 15 &&
                                $qmenu[0]->id_web_menu != 11 &&
                                $qmenu[0]->id_web_menu != 8 &&
                                $qmenu[0]->id_web_menu != 58)
                            <div class="shop-sidebar-widget">
                                <div class="card">
                                    <div class="card-header box-header d-flex justify-content-between">
                                        @if ($qmenu[0]->id_web_menu == 17)
                                            <h5>Capacidad Max. RAM</h5>
                                        @else
                                            <h5>Capacidad</h5>
                                        @endif
                                        <div>
                                            <span title="Mostrar/Ocultar" class="ml-3"><i
                                                    class="fas fa-angle-down"></i></span>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <ul class="compositions-list brands capacidad"
                                            style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                            @php
                                                $count = 0;
                                            @endphp
                                            @for ($i = 0; $i < count($capa_gb); $i++)
                                                @php
                                                    $count++;
                                                @endphp
                                                @if ($count <= 10 && Request::query('dq') != trim($capa_gb[$i]))
                                                    @if (Request::query('dq') == trim($capa_gb[$i]))
                                                        <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                            onclick="removeDqParam('dq')">
                                                            <b style="">{{ $capa_gb[$i] }} </b>
                                                            <span style="cursor: pointer; margin-left: 5px;"><i
                                                                    class="fas fa-times-circle"></i></span>
                                                        </a>
                                                    @else
                                                        <a style="text-transform: uppercase"
                                                            href="{{ Request::fullUrlWithQuery(['dq' => trim($capa_gb[$i]), 'page' => 1]) }}">
                                                            {{ $capa_gb[$i] }}
                                                        </a>
                                                    @endif
                                                @elseif (Request::query('dq') == trim($capa_gb[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq')">
                                                        <b style="">{{ $capa_gb[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase" class="d-none"
                                                        href="{{ Request::fullUrlWithQuery(['dq' => trim($capa_gb[$i]), 'page' => 1]) }}">
                                                        {{ $capa_gb[$i] }}
                                                    </a>
                                                @endif
                                            @endfor
                                            @for ($i = 0; $i < count($capa_tb); $i++)
                                                @php
                                                    $count++;
                                                @endphp
                                                @if ($count <= 10 && Request::query('dq') != trim($capa_tb[$i]))
                                                    @if (Request::query('dq') == trim($capa_tb[$i]))
                                                        <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                            onclick="removeDqParam('dq')">
                                                            <b style="">{{ $capa_tb[$i] }} </b>
                                                            <span style="cursor: pointer; margin-left: 5px;"><i
                                                                    class="fas fa-times-circle"></i></span>
                                                        </a>
                                                    @else
                                                        <a style="text-transform: uppercase"
                                                            href="{{ Request::fullUrlWithQuery(['dq' => trim($capa_tb[$i]), 'page' => 1]) }}">
                                                            {{ $capa_tb[$i] }}
                                                        </a>
                                                    @endif
                                                @elseif (Request::query('dq') == trim($capa_tb[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq')">
                                                        <b style="">{{ $capa_tb[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase" class="d-none"
                                                        href="{{ Request::fullUrlWithQuery(['dq' => trim($capa_tb[$i]), 'page' => 1]) }}">
                                                        {{ $capa_tb[$i] }}
                                                    </a>
                                                @endif
                                            @endfor
                                            @if (count($capa_gb) + count($capa_tb) > 10)
                                                <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                    onclick="mostrarRestantes('capacidad')"
                                                    onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                    onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                    Ver más
                                                </a>
                                            @endif
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endif

                    @if (!empty($lec_secuencial))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>Lectura Secuencial</h5>
                                    <div>
                                        {{-- <button class="btn btn-danger" onclick="removeDqParam('dq1')">Limpiaraa
                                                Filtro</button> --}}
                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands lec_secuencial"
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @php
                                            $count = 0;
                                        @endphp
                                        @for ($i = 0; $i < count($lec_secuencial); $i++)
                                            @php
                                                $count++;
                                            @endphp
                                            @if ($count <= 10 && Request::query('dq1') != trim($lec_secuencial[$i]))
                                                @if (Request::query('dq1') == trim($lec_secuencial[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq1')">
                                                        <b style="">{{ $lec_secuencial[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase"
                                                        href="{{ Request::fullUrlWithQuery(['dq1' => trim($lec_secuencial[$i]), 'page' => 1]) }}">
                                                        {{ $lec_secuencial[$i] }}
                                                    </a>
                                                @endif
                                            @elseif (Request::query('dq1') == trim($lec_secuencial[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq1')">
                                                    <b style="">{{ $lec_secuencial[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase" class="d-none"
                                                    href="{{ Request::fullUrlWithQuery(['dq1' => trim($lec_secuencial[$i]), 'page' => 1]) }}">
                                                    {{ $lec_secuencial[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                        @if (count($lec_secuencial) > 10)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('lec_secuencial')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif

                    @if (!empty($ranura_ram))
                        @if (
                            $qmenu[0]->id_web_menu != 25 &&
                                $qmenu[0]->id_web_menu != 19 &&
                                $qmenu[0]->id_web_menu != 11 &&
                                $qmenu[0]->id_web_menu != 15)
                            <div class="shop-sidebar-widget">
                                <div class="card">
                                    <div class="card-header box-header d-flex justify-content-between">
                                        <h5>Tipo Ranura (RAM)</h5>
                                        <div>

                                            <span title="Mostrar/Ocultar" class="ml-3"><i
                                                    class="fas fa-angle-down"></i></span>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <ul class="compositions-list brands ranura_ram"
                                            style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                            @php
                                                $count = 0;
                                            @endphp
                                            @for ($i = 0; $i < count($ranura_ram); $i++)
                                                @php
                                                    $count++;
                                                @endphp
                                                @if ($count <= 10 && Request::query('dq1') != trim($ranura_ram[$i]))
                                                    @if (Request::query('dq1') == trim($ranura_ram[$i]))
                                                        <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                            onclick="removeDqParam('dq1')">
                                                            <b style="">{{ $ranura_ram[$i] }} </b>
                                                            <span style="cursor: pointer; margin-left: 5px;"><i
                                                                    class="fas fa-times-circle"></i></span>
                                                        </a>
                                                    @else
                                                        <a style="text-transform: uppercase"
                                                            href="{{ Request::fullUrlWithQuery(['dq1' => trim($ranura_ram[$i]), 'page' => 1]) }}">
                                                            {{ $ranura_ram[$i] }}
                                                        </a>
                                                    @endif
                                                @elseif (Request::query('dq1') == trim($ranura_ram[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq1')">
                                                        <b style="">{{ $ranura_ram[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase" class="d-none"
                                                        href="{{ Request::fullUrlWithQuery(['dq1' => trim($ranura_ram[$i]), 'page' => 1]) }}">
                                                        {{ $ranura_ram[$i] }}
                                                    </a>
                                                @endif
                                            @endfor
                                            @if (count($ranura_ram) > 10)
                                                <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                    onclick="mostrarRestantes('ranura_ram')"
                                                    onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                    onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                    Ver más
                                                </a>
                                            @endif
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        @endif
                    @endif

                    @if (!empty($qmenu) && $qmenu[0]->id_web_menu == 11)

                        @if (!empty($alm_laptop))
                            <div class="shop-sidebar-widget">
                                <div class="card">
                                    <div class="card-header box-header d-flex justify-content-between">
                                        <h5>Almacenamiento</h5>
                                        <div>

                                            <span title="Mostrar/Ocultar" class="ml-3"><i
                                                    class="fas fa-angle-down"></i></span>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <ul class="compositions-list brands ranura_ram"
                                            style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">

                                            @php
                                                $count = 0;
                                            @endphp
                                            @for ($i = 0; $i < count($alm_laptop); $i++)
                                                @php
                                                    $count++;
                                                @endphp
                                                @if ($count <= 10 && Request::query('dq1') != trim($alm_laptop[$i]))
                                                    @if (Request::query('dq1') == trim($alm_laptop[$i]))
                                                        <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                            onclick="removeDqParam('dq1')">
                                                            <b style="">{{ $alm_laptop[$i] }} </b>
                                                            <span style="cursor: pointer; margin-left: 5px;"><i
                                                                    class="fas fa-times-circle"></i></span>
                                                        </a>
                                                    @else
                                                        <a style="text-transform: uppercase"
                                                            href="{{ Request::fullUrlWithQuery(['dq1' => trim($alm_laptop[$i]), 'page' => 1]) }}">
                                                            {{ $alm_laptop[$i] }}
                                                        </a>
                                                    @endif
                                                @elseif (Request::query('dq1') == trim($alm_laptop[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq1')">
                                                        <b style="">{{ $alm_laptop[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase" class="d-none"
                                                        href="{{ Request::fullUrlWithQuery(['dq1' => trim($alm_laptop[$i]), 'page' => 1]) }}">
                                                        {{ $alm_laptop[$i] }}
                                                    </a>
                                                @endif
                                            @endfor
                                            @if (count($alm_laptop) > 10)
                                                <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                    onclick="mostrarRestantes('alm_laptop')"
                                                    onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                    onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                    Ver más
                                                </a>
                                            @endif
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        @endif
                        @if (!empty($generacion_laptop))
                            <div class="shop-sidebar-widget">
                                <div class="card">
                                    <div class="card-header box-header d-flex justify-content-between">
                                        <h5>Generación</h5>
                                        <div>

                                            <span title="Mostrar/Ocultar" class="ml-3"><i
                                                    class="fas fa-angle-down"></i></span>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <ul class="compositions-list brands ranura_ram"
                                            style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">

                                            @php
                                                $count = 0;
                                            @endphp
                                            @for ($i = 0; $i < count($generacion_laptop); $i++)
                                                @php
                                                    $count++;
                                                @endphp
                                                @if ($count <= 10 && Request::query('dq3') != trim($generacion_laptop[$i]))
                                                    @if (Request::query('dq3') == trim($generacion_laptop[$i]))
                                                        <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                            onclick="removeDqParam('dq3')">
                                                            <b style="">{{ $generacion_laptop[$i] }} </b>
                                                            <span style="cursor: pointer; margin-left: 5px;"><i
                                                                    class="fas fa-times-circle"></i></span>
                                                        </a>
                                                    @else
                                                        <a style="text-transform: uppercase"
                                                            href="{{ Request::fullUrlWithQuery(['dq3' => trim($generacion_laptop[$i]), 'page' => 1]) }}">
                                                            {{ $generacion_laptop[$i] }}
                                                        </a>
                                                    @endif
                                                @elseif (Request::query('dq3') == trim($generacion_laptop[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq3')">
                                                        <b style="">{{ $generacion_laptop[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase" class="d-none"
                                                        href="{{ Request::fullUrlWithQuery(['dq3' => trim($generacion_laptop[$i]), 'page' => 1]) }}">
                                                        {{ $generacion_laptop[$i] }}
                                                    </a>
                                                @endif
                                            @endfor
                                            @if (count($generacion_laptop) > 10)
                                                <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                    onclick="mostrarRestantes('generacion_laptop')"
                                                    onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                    onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                    Ver más
                                                </a>
                                            @endif
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        @endif

                        @if (!empty($capa_ram))
                            <div class="shop-sidebar-widget">
                                <div class="card">
                                    <div class="card-header box-header d-flex justify-content-between">
                                        <h5>Capacidad RAM</h5>
                                        <div>

                                            <span title="Mostrar/Ocultar" class="ml-3"><i
                                                    class="fas fa-angle-down"></i></span>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <ul class="compositions-list brands ranura_ram"
                                            style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">

                                            @php
                                                $count = 0;
                                            @endphp
                                            @for ($i = 0; $i < count($capa_ram); $i++)
                                                @php
                                                    $count++;
                                                @endphp
                                                @if ($count <= 10 && Request::query('dq1') != trim($capa_ram[$i]))
                                                    @if (Request::query('dq1') == trim($capa_ram[$i]))
                                                        <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                            onclick="removeDqParam('dq1')">
                                                            <b style="">{{ $capa_ram[$i] }} </b>
                                                            <span style="cursor: pointer; margin-left: 5px;"><i
                                                                    class="fas fa-times-circle"></i></span>
                                                        </a>
                                                    @else
                                                        <a style="text-transform: uppercase"
                                                            href="{{ Request::fullUrlWithQuery(['dq1' => trim($capa_ram[$i]), 'page' => 1]) }}">
                                                            {{ $capa_ram[$i] }}
                                                        </a>
                                                    @endif
                                                @elseif (Request::query('dq1') == trim($capa_ram[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq1')">
                                                        <b style="">{{ $capa_ram[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase" class="d-none"
                                                        href="{{ Request::fullUrlWithQuery(['dq1' => trim($capa_ram[$i]), 'page' => 1]) }}">
                                                        {{ $capa_ram[$i] }}
                                                    </a>
                                                @endif
                                            @endfor
                                            @if (count($capa_ram) > 10)
                                                <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                    onclick="mostrarRestantes('capa_ram')"
                                                    onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                    onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                    Ver más
                                                </a>
                                            @endif
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        @endif
                    @endif

                    @if (!empty($kit_ram))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>KIT RAM</h5>
                                    <div>

                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands"
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">

                                        @for ($i = 0; $i < count($kit_ram); $i++)
                                            @if (Request::query('dq2') == trim($kit_ram[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq2')">
                                                    <b style="">{{ $kit_ram[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase"
                                                    href="{{ Request::fullUrlWithQuery(['dq2' => trim($kit_ram[$i]), 'page' => 1]) }}">{{ $kit_ram[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif

                    @if (!empty($luces_rgb))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>RGB</h5>
                                    <div>

                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands"
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">

                                        @for ($i = 0; $i < count($luces_rgb); $i++)
                                            @if (Request::query('dq3') == trim($luces_rgb[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq3')">
                                                    <b style="">{{ $luces_rgb[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase"
                                                    href="{{ Request::fullUrlWithQuery(['dq3' => trim($luces_rgb[$i]), 'page' => 1]) }}">{{ $luces_rgb[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif

                    @if (!empty($chipset))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    @if ($qmenu[0]->id_web_menu == 19)
                                        <h5>Socket</h5>
                                    @else
                                        <h5>Chipset</h5>
                                    @endif
                                    <div>

                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands chipset"
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @php
                                            $count = 0;
                                        @endphp
                                        @for ($i = 0; $i < count($chipset); $i++)
                                            @php
                                                $count++;
                                            @endphp
                                            @if ($count <= 10 && Request::query('dq2') != trim($chipset[$i]))
                                                @if (Request::query('dq2') == trim($chipset[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq2')">
                                                        <b style="">{{ $chipset[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase"
                                                        href="{{ Request::fullUrlWithQuery(['dq2' => trim($chipset[$i]), 'page' => 1]) }}">
                                                        {{ $chipset[$i] }}
                                                    </a>
                                                @endif
                                            @elseif (Request::query('dq2') == trim($chipset[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq2')">
                                                    <b style="">{{ $chipset[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase" class="d-none"
                                                    href="{{ Request::fullUrlWithQuery(['dq2' => trim($chipset[$i]), 'page' => 1]) }}">
                                                    {{ $chipset[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                        @if (count($chipset) > 10)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('chipset')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif

                    {{-- Factor de forma --}}
                    @if (!empty($factor_forma))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>Factores de Forma</h5>
                                    <div>
                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands "
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @php
                                            $count = 0;
                                        @endphp
                                        @for ($i = 0; $i < count($factor_forma); $i++)
                                            @php
                                                $count++;
                                            @endphp
                                            @if ($count <= 10 && Request::query('dq') != trim($factor_forma[$i]))
                                                @if (Request::query('dq') == trim($factor_forma[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq')">
                                                        <b style="">{{ $factor_forma[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase"
                                                        href="{{ Request::fullUrlWithQuery(['dq' => trim($factor_forma[$i]), 'page' => 1]) }}">
                                                        {{ $factor_forma[$i] }}
                                                    </a>
                                                @endif
                                            @elseif (Request::query('dq') == trim($factor_forma[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq')">
                                                    <b style="">{{ $factor_forma[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase" class="d-none"
                                                    href="{{ Request::fullUrlWithQuery(['dq' => trim($factor_forma[$i]), 'page' => 1]) }}">
                                                    {{ $factor_forma[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                        @if (count($factor_forma) > 10)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('factor_forma')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif

                    {{-- Cooler ventiladores--}}
                    @if (!empty($ventiladores_cooler))
                    <div class="shop-sidebar-widget">
                        <div class="card">
                            <div class="card-header box-header d-flex justify-content-between">
                                <h5>Cantidad de Ventiladores</h5>
                                <div>
                                    <span title="Mostrar/Ocultar" class="ml-3"><i
                                            class="fas fa-angle-down"></i></span>
                                </div>
                            </div>
                            <div class="card-body">
                                <ul class="compositions-list brands "
                                    style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                    @php
                                        $count = 0;
                                    @endphp
                                    @for ($i = 0; $i < count($ventiladores_cooler); $i++)
                                        @php
                                            $count++;
                                        @endphp
                                        @if ($count <= 10 && Request::query('dq') != trim($ventiladores_cooler[$i]))
                                            @if (Request::query('dq') == trim($ventiladores_cooler[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;text-align: center;;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq')">
                                                    <b style="">{{ $ventiladores_cooler[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase;text-align: center;"
                                                    href="{{ Request::fullUrlWithQuery(['dq' => trim($ventiladores_cooler[$i]), 'page' => 1]) }}">
                                                    {{ $ventiladores_cooler[$i] }}
                                                </a>
                                            @endif
                                        @elseif (Request::query('dq') == trim($ventiladores_cooler[$i]))
                                            <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;text-align: center;;color: white;background: rgb(0, 86, 179);"
                                                onclick="removeDqParam('dq')">
                                                <b style="">{{ $ventiladores_cooler[$i] }} </b>
                                                <span style="cursor: pointer; margin-left: 5px;"><i
                                                        class="fas fa-times-circle"></i></span>
                                            </a>
                                        @else
                                            <a style="text-transform: uppercase;text-align: center;" class="d-none"
                                                href="{{ Request::fullUrlWithQuery(['dq' => trim($ventiladores_cooler[$i]), 'page' => 1]) }}">
                                                {{ $ventiladores_cooler[$i] }}
                                            </a>
                                        @endif
                                    @endfor
                                    @if (count($ventiladores_cooler) > 10)
                                        <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                            onclick="mostrarRestantes('ventiladores_cooler')"
                                            onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                            onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                            Ver más
                                        </a>
                                    @endif
                                </ul>
                            </div>

                        </div>
                    </div>
                @endif

                    @if (!empty($generacion))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5 class="mr-auto">Generación</h5>
                                    <div>

                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>

                                <div class="card-body">
                                    <ul class="compositions-list brands generacion"
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">

                                        @php
                                            $count = 0;
                                        @endphp
                                        @foreach ($generacion as $key => $item)
                                            @php
                                                $count++;
                                            @endphp
                                            @if ($count <= 10 && Request::query('dq3') != trim($item))
                                                @if (Request::query('dq3') == trim($item))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq3')">
                                                        <b>{{ $item }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase "
                                                        href="{{ Request::fullUrlWithQuery(['dq3' => trim($item), 'page' => 1]) }}">
                                                        {{ $item }}
                                                    </a>
                                                @endif
                                            @elseif (Request::query('dq3') == trim($item))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq3')">
                                                    <b>{{ $item }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase " class="d-none"
                                                    href="{{ Request::fullUrlWithQuery(['dq3' => trim($item), 'page' => 1]) }}">
                                                    {{ $item }}
                                                </a>
                                            @endif
                                        @endforeach
                                        @if (count($generacion) > 10)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('generacion')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif

                    @if (!empty($pro_grafica))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>Graficos Integrados</h5>
                                    <div>

                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands"
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @for ($i = 0; $i < count($pro_grafica); $i++)
                                            @if (Request::query('dq1') == trim($pro_grafica[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq1')">
                                                    <b style="">{{ $pro_grafica[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase"
                                                    href="{{ Request::fullUrlWithQuery(['dq1' => trim($pro_grafica[$i]), 'page' => 1]) }}">{{ $pro_grafica[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif

                    @if (!empty($wifi))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>Conectividad</h5>
                                    <div>

                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands conectividad"
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @php
                                            $count = 0;
                                        @endphp
                                        @for ($i = 0; $i < count($wifi); $i++)
                                            @php
                                                $count++;
                                            @endphp
                                            @if (Request::query('dq3') == trim($wifi[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq3')">
                                                    <b style="">{{ $wifi[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase"
                                                    href="{{ Request::fullUrlWithQuery(['dq3' => trim($wifi[$i]), 'page' => 1]) }}">{{ $wifi[$i] }}
                                                </a>
                                            @endif
                                        @endfor

                                        @for ($i = 0; $i < count($bluetooth); $i++)
                                            @php
                                                $count++;
                                            @endphp
                                            @if (Request::query('dq3') == trim($bluetooth[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq3')">
                                                    <b style="">{{ $bluetooth[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase"
                                                    href="{{ Request::fullUrlWithQuery(['dq3' => trim($bluetooth[$i]), 'page' => 1]) }}">{{ $bluetooth[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                        @if (count($wifi) + count($bluetooth) > 10)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('conectividad')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif

                    {{-- PARA CASES --}}
                    @if (!empty($f_alimentacion))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>Potencia</h5>
                                    <div>
                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands"
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @for ($i = 0; $i < count($f_alimentacion); $i++)
                                            @if (Request::query('dq') == trim($f_alimentacion[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq')">
                                                    <b style="">{{ $f_alimentacion[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase"
                                                    href="{{ Request::fullUrlWithQuery(['dq' => trim($f_alimentacion[$i]), 'page' => 1]) }}">{{ $f_alimentacion[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if (!empty($f_certificacion))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>Certificacion</h5>
                                    <div>
                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands"
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @for ($i = 0; $i < count($f_certificacion); $i++)
                                            @if (Request::query('dq1') == trim($f_certificacion[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq1')">
                                                    <b style="">{{ $f_certificacion[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase"
                                                    href="{{ Request::fullUrlWithQuery(['dq1' => trim($f_certificacion[$i]), 'page' => 1]) }}">{{ $f_certificacion[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif

                    {{-- FILTRO MONITORES --}}
                    @if (!empty($pan_pulgadas))
                        @if ($qmenu[0]->id_web_menu != 15)
                            <div class="shop-sidebar-widget">
                                <div class="card">
                                    <div class="card-header box-header d-flex justify-content-between">
                                        <h5>Tamaño Pantalla</h5>
                                        <div>
                                            <span title="Mostrar/Ocultar" class="ml-3"><i
                                                    class="fas fa-angle-down"></i></span>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <ul class="compositions-list brands pan_pulgadas"
                                            style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                            @php
                                                $count = 0;
                                            @endphp
                                            @for ($i = 0; $i < count($pan_pulgadas); $i++)
                                                @php
                                                    $count++;
                                                @endphp
                                                @if ($count <= 10 && Request::query('dq') != trim($pan_pulgadas[$i]))
                                                    @if (Request::query('dq') == trim($pan_pulgadas[$i]))
                                                        <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                            onclick="removeDqParam('dq')">
                                                            <b style="">{{ $pan_pulgadas[$i] }} </b>
                                                            <span style="cursor: pointer; margin-left: 5px;"><i
                                                                    class="fas fa-times-circle"></i></span>
                                                        </a>
                                                    @else
                                                        <a style="text-transform: uppercase"
                                                            href="{{ Request::fullUrlWithQuery(['dq' => trim($pan_pulgadas[$i]), 'page' => 1]) }}">
                                                            {{ $pan_pulgadas[$i] }}
                                                        </a>
                                                    @endif
                                                @elseif (Request::query('dq') == trim($pan_pulgadas[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq')">
                                                        <b style="">{{ $pan_pulgadas[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase" class="d-none"
                                                        href="{{ Request::fullUrlWithQuery(['dq' => trim($pan_pulgadas[$i]), 'page' => 1]) }}">
                                                        {{ $pan_pulgadas[$i] }}
                                                    </a>
                                                @endif
                                            @endfor
                                            @if (count($pan_pulgadas) > 12)
                                                <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                    onclick="mostrarRestantes('pan_pulgadas')"
                                                    onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                    onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                    Ver más
                                                </a>
                                            @endif
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        @endif
                    @endif

                    @if (!empty($pan_sincro))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>Sinconizacion</h5>
                                    <div>

                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands pan_sincro"
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @php
                                            $count = 0;
                                        @endphp
                                        @for ($i = 0; $i < count($pan_sincro); $i++)
                                            @php
                                                $count++;
                                            @endphp
                                            @if ($count <= 10 && Request::query('dq1') != trim($pan_sincro[$i]))
                                                @if (Request::query('dq1') == trim($pan_sincro[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq1')">
                                                        <b style="">{{ $pan_sincro[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase"
                                                        href="{{ Request::fullUrlWithQuery(['dq1' => trim($pan_sincro[$i]), 'page' => 1]) }}">
                                                        {{ $pan_sincro[$i] }}
                                                    </a>
                                                @endif
                                            @elseif (Request::query('dq1') == trim($pan_sincro[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq1')">
                                                    <b style="">{{ $pan_sincro[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase" class="d-none"
                                                    href="{{ Request::fullUrlWithQuery(['dq1' => trim($pan_sincro[$i]), 'page' => 1]) }}">
                                                    {{ $pan_sincro[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                        @if (count($pan_sincro) > 12)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('pan_sincro')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif

                    @if (!empty($pan_taza))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>Taza Refresco</h5>
                                    <div>

                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands pan_taza"
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @php
                                            $count = 0;
                                        @endphp
                                        @for ($i = 0; $i < count($pan_taza); $i++)
                                            @php
                                                $count++;
                                            @endphp
                                            @if ($count <= 10 && Request::query('dq2') != trim($pan_taza[$i]))
                                                @if (Request::query('dq2') == trim($pan_taza[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq2')">
                                                        <b style="">{{ $pan_taza[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase"
                                                        href="{{ Request::fullUrlWithQuery(['dq2' => trim($pan_taza[$i]), 'page' => 1]) }}">
                                                        {{ $pan_taza[$i] }}
                                                    </a>
                                                @endif
                                            @elseif (Request::query('dq2') == trim($pan_taza[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq2')">
                                                    <b style="">{{ $pan_taza[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase" class="d-none"
                                                    href="{{ Request::fullUrlWithQuery(['dq2' => trim($pan_taza[$i]), 'page' => 1]) }}">
                                                    {{ $pan_taza[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                        @if (count($pan_taza) > 12)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('pan_taza')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif

                    @if (!empty($pan_panel))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>Tipo Panel</h5>
                                    <div>

                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands pan_panel"
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @php
                                            $count = 0;
                                        @endphp
                                        @for ($i = 0; $i < count($pan_panel); $i++)
                                            @php
                                                $count++;
                                            @endphp
                                            @if (Request::query('dq3') == trim($pan_panel[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq3')">
                                                    <b style="">{{ $pan_panel[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase"
                                                    href="{{ Request::fullUrlWithQuery(['dq3' => trim($pan_panel[$i]), 'page' => 1]) }}">{{ $pan_panel[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                        @if (count($pan_panel) > 12)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('pan_panel')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif

                    {{-- TARJETA DE VIDEO --}}
                    @if (!empty($tarj_salidad))
                        @if ($qmenu[0]->id_web_menu == 25)
                            <div class="shop-sidebar-widget">
                                <div class="card">
                                    <div class="card-header box-header d-flex justify-content-between">
                                        <h5>Puertos de Salida</h5>
                                        <div>
                                            {{-- <button class="btn btn-danger" onclick="removeDqParam('dq2')">Limpiar
                                                Filtro</button> --}}
                                            <span title="Mostrar/Ocultar" class="ml-3"><i
                                                    class="fas fa-angle-down"></i></span>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <ul class="compositions-list brands tarj_salidad"
                                            style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                            @php
                                                $count = 0;
                                            @endphp
                                            @for ($i = 0; $i < count($tarj_salidad); $i++)
                                                @php
                                                    $count++;
                                                @endphp
                                                @if ($count <= 10 && Request::query('dq2') != trim($tarj_salidad[$i]))
                                                    @if (Request::query('dq2') == trim($tarj_salidad[$i]))
                                                        <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                            onclick="removeDqParam('dq2')">
                                                            <b style="">{{ $tarj_salidad[$i] }} </b>
                                                            <span style="cursor: pointer; margin-left: 5px;"><i
                                                                    class="fas fa-times-circle"></i></span>
                                                        </a>
                                                    @else
                                                        <a style="text-transform: uppercase"
                                                            href="{{ Request::fullUrlWithQuery(['dq2' => trim($tarj_salidad[$i]), 'page' => 1]) }}">
                                                            {{ $tarj_salidad[$i] }}
                                                        </a>
                                                    @endif
                                                @elseif (Request::query('dq2') == trim($tarj_salidad[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq2')">
                                                        <b style="">{{ $tarj_salidad[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase" class="d-none"
                                                        href="{{ Request::fullUrlWithQuery(['dq2' => trim($tarj_salidad[$i]), 'page' => 1]) }}">
                                                        {{ $tarj_salidad[$i] }}
                                                    </a>
                                                @endif
                                            @endfor
                                            @if (count($tarj_salidad) > 10)
                                                <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                    onclick="mostrarRestantes('tarj_salidad')"
                                                    onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                    onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                    Ver más
                                                </a>
                                            @endif
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        @endif
                    @endif

                    @if (!empty($tarj_ventiladores))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>Cantidad de Ventiladores</h5>
                                    <div>
                                        {{-- <button class="btn btn-danger" onclick="removeDqParam('dq3')">Limpiar
                                                Filtro</button> --}}
                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands tarj_ventiladores"
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @php
                                            $count = 0;
                                        @endphp
                                        @for ($i = 0; $i < count($tarj_ventiladores); $i++)
                                            @php
                                                $count++;
                                            @endphp
                                            @if ($count <= 10 && Request::query('dq3') != trim($tarj_ventiladores[$i]))
                                                @if (Request::query('dq3') == trim($tarj_ventiladores[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center; font-size:13px ;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq3')">
                                                        <b style="">{{ $tarj_ventiladores[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase; font-size:13px"
                                                        href="{{ Request::fullUrlWithQuery(['dq3' => trim($tarj_ventiladores[$i]), 'page' => 1]) }}">
                                                        {{ $tarj_ventiladores[$i] }}
                                                    </a>
                                                @endif
                                            @elseif (Request::query('dq3') == trim($tarj_ventiladores[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center; font-size:13px ;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq3')">
                                                    <b style="">{{ $tarj_ventiladores[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase; font-size:13px" class="d-none"
                                                    href="{{ Request::fullUrlWithQuery(['dq3' => trim($tarj_ventiladores[$i]), 'page' => 1]) }}">
                                                    {{ $tarj_ventiladores[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                        @if (count($tarj_ventiladores) > 10)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('tarj_ventiladores')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif


                    {{-- BOTONES MOUSE --}}
                    @if (!empty($btn_mouse))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>Cantidad de Botones</h5>
                                    <div>
                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands "
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @php
                                            $count = 0;
                                        @endphp
                                        @for ($i = 0; $i < count($btn_mouse); $i++)
                                            @php
                                                $count++;
                                            @endphp
                                            @if ($count <= 10 && Request::query('dq1') != trim($btn_mouse[$i]))
                                                @if (Request::query('dq1') == trim($btn_mouse[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq1')">
                                                        <b style="">{{ $btn_mouse[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase"
                                                        href="{{ Request::fullUrlWithQuery(['dq1' => trim($btn_mouse[$i]), 'page' => 1]) }}">
                                                        {{ $btn_mouse[$i] }}
                                                    </a>
                                                @endif
                                            @elseif (Request::query('dq1') == trim($btn_mouse[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq1')">
                                                    <b style="">{{ $btn_mouse[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase" class="d-none"
                                                    href="{{ Request::fullUrlWithQuery(['dq1' => trim($btn_mouse[$i]), 'page' => 1]) }}">
                                                    {{ $btn_mouse[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                        @if (count($btn_mouse) > 10)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('btn_mouse')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif


                    {{-- SWITCHES TECLADOS --}}
                    @if (!empty($switch_teclado))
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>Switch</h5>
                                    <div>
                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands "
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @php
                                            $count = 0;
                                        @endphp
                                        @for ($i = 0; $i < count($switch_teclado); $i++)
                                            @php
                                                $count++;
                                            @endphp
                                            @if ($count <= 10 && Request::query('dq1') != trim($switch_teclado[$i]))
                                                @if (Request::query('dq1') == trim($switch_teclado[$i]))
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('dq1')">
                                                        <b style="">{{ $switch_teclado[$i] }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a style="text-transform: uppercase"
                                                        href="{{ Request::fullUrlWithQuery(['dq1' => trim($switch_teclado[$i]), 'page' => 1]) }}">
                                                        {{ $switch_teclado[$i] }}
                                                    </a>
                                                @endif
                                            @elseif (Request::query('dq1') == trim($switch_teclado[$i]))
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('dq1')">
                                                    <b style="">{{ $switch_teclado[$i] }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a style="text-transform: uppercase" class="d-none"
                                                    href="{{ Request::fullUrlWithQuery(['dq1' => trim($switch_teclado[$i]), 'page' => 1]) }}">
                                                    {{ $switch_teclado[$i] }}
                                                </a>
                                            @endif
                                        @endfor
                                        @if (count($switch_teclado) > 10)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('switch_teclado')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>

                            </div>
                        </div>
                    @endif




                    {{-- FILTRO DE MARCAS --}}
                    @if (count($brandsFilter) > 0)
                        <div class="shop-sidebar-widget">
                            <div class="card">
                                <div class="card-header box-header d-flex justify-content-between">
                                    <h5>Marcas</h5>
                                    <div>

                                        <span title="Mostrar/Ocultar" class="ml-3"><i
                                                class="fas fa-angle-down"></i></span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="compositions-list brands fmarcas" id="listBrandCatalogo"
                                        style="display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;">
                                        @php
                                            $count = 0;
                                        @endphp
                                        @foreach ($brandsFilter as $br)
                                            @php
                                                $count++;
                                            @endphp
                                            @if ($count <= 10 && Request::query('marca') != $br->b_description)
                                                @if (Request::query('marca') == $br->b_description)
                                                    <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                        onclick="removeDqParam('marca')">
                                                        <b>{{ $br->b_description }} </b>
                                                        <span style="cursor: pointer; margin-left: 5px;"><i
                                                                class="fas fa-times-circle"></i></span>
                                                    </a>
                                                @else
                                                    <a
                                                        href="{{ Request::fullUrlWithQuery(['marca' => $br->b_description, 'page' => 1]) }}">
                                                        {{ $br->b_description }}
                                                    </a>
                                                @endif
                                            @elseif (Request::query('marca') == $br->b_description)
                                                <a style="display: flex;justify-content: space-between;align-items: center;text-transform: uppercase;color: white;background: rgb(0, 86, 179);"
                                                    onclick="removeDqParam('marca')">
                                                    <b>{{ $br->b_description }} </b>
                                                    <span style="cursor: pointer; margin-left: 5px;"><i
                                                            class="fas fa-times-circle"></i></span>
                                                </a>
                                            @else
                                                <a class="d-none"
                                                    href="{{ Request::fullUrlWithQuery(['marca' => $br->b_description, 'page' => 1]) }}">
                                                    {{ $br->b_description }}
                                                </a>
                                            @endif
                                        @endforeach
                                        @if (count($brandsFilter) > 10)
                                            <a style="cursor: pointer; color:#0056b3" id="ver-mas"
                                                onclick="mostrarRestantes('fmarcas')"
                                                onmouseover="this.style.color='#fff'; this.style.backgroundColor='#0056b3'"
                                                onmouseout="this.style.color='#0056b3'; this.style.backgroundColor='transparent'">
                                                Ver más
                                            </a>
                                        @endif
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endif

                    {{-- RANGO DE PRECIOS --}}
                    <div class="shop-sidebar-widget">
                        <div class="card">
                            <div class="card-header  box-header">
                                <h5>Rango de Precio</h5>
                                <span title="Mostrar/Ocultar"><i class="fas fa-angle-down"></i></span>
                            </div>
                            <div class="card-body" style="text-align-last: center;">
                                <price-range currency="$">
                                    <div>
                                        <div>
                                            <input id="mirange" name="price-from" type="range" min="0"
                                                max="{{ $max_price }}" step="1"
                                                value="{{ Request::query('range') !== null ? explode('-', Request::query('range'))[0] : 0 }}"
                                                aria-label="From" />

                                            <input id="marange" name="price-to" type="range" min="0"
                                                max="{{ $max_price }}" step="1"
                                                value="{{ explode('-', Request::query('range'))[1] ?? $max_price }}"
                                                aria-label="To" />
                                        </div>
                                    </div>
                                    <output>
                                        output
                                    </output>
                                </price-range>

                                <button class="btn btn-dark ml-3 mb-3" id="btn-filter-price"
                                    style="width:30%;">Filtrar</button>

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

                <div class="shop-container">
                    <div class="shop-header">
                        <div class="row">
                            <div class="col-md-6">
                                <p>Mostrando {{ $productsCatalogo->firstItem() }} al
                                    {{ $productsCatalogo->lastItem() }} de
                                    {{ $productsCatalogo->total() }}
                                    ({{ intval($productsCatalogo->total() / 20) }} Páginas)
                                </p>
                            </div>
                            <div class="col-md-6 hide-mobiles">
                                <div class="float-right">
                                    <label for="">Ordenar: </label>
                                    <div class="btn-group">
                                       <!-- <a href="{{ Request::fullUrlWithQuery(['orp' => null, 'orn' => null, 'page' => 1]) }}"
                                            class="btn btn-light border">Por defecto</a>
                                        <a href="{{ Request::fullUrlWithQuery(['orn' => 'ASC', 'orp' => null, 'page' => 1]) }}"
                                            class="btn btn-light border">A-Z</a>
                                        <a href="{{ Request::fullUrlWithQuery(['orn' => 'DESC', 'orp' => null, 'page' => 1]) }}"
                                            class="btn btn-light border">Z-A</a>-->
                                        <a href="{{ Request::fullUrlWithQuery(['orp' => 'DESC', 'orn' => null, 'page' => 1]) }}"
                                            class="btn btn-light border">Precio Mayor-Menor</a>
                                        <a href="{{ Request::fullUrlWithQuery(['orp' => 'ASC', 'orn' => null, 'page' => 1]) }}"
                                            class="btn btn-light border">Precio Menor-Mayor</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="shop-container">
                        <div class="row">
                            @forelse ($productsCatalogo as $prod)
                                <div class="col-g-2-5 col-xs-6">
                                    @if ($prod->parts)
                                        @include('utils.products.pc_item_list', ['pc' => $prod])
                                    @else
                                        @include('utils.products.product_item_list', ['product' => $prod])
                                    @endif
                                </div>
                            @empty
                                <div class="col-md-12">
                                    <p>No se han encontrados productos relacionados a tu búsqueda.</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-md-5">{{ $productsCatalogo->withQueryString('pagination::custom') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if (true)
        @if ($blog_data)
           <div class="container-fluid custom-container">
                
<H4>¿QUIERES SABER MAS?</H4>
<div class="row">
    <div class="col-4">
        <div class="card custom-card">
            <img src="{{$blog_data->image}}" alt="Card image"
                class="w-100">
            <div class="custom-card-body">
                <h5 class="card-title">{{$blog_data->titulo}}</h5>
                <p class="card-text">{{$blog_data->sub_titulo}}</p>
                <a href="{{ route('blog_show', ['id' => $blog_data->id]) }}" class="btn btn-primary" target="_blank">Ver más</a>
            </div>
        </div>
    </div>

</div>
</div> 
           
        @endif
    @endif
    @include('layouts.brand')




    @include('layouts.newsletter')
    @if (isset(Auth::user()->id) &&
            (Auth::user()->id == '11125' ||
                Auth::user()->id == '53003' ||
                Auth::user()->id == '5' ||
                Auth::user()->id == '51859'))

        <div class="navigation--list">
            <div class="navigation__content">
                <a class="navigation__item ps-toggle--sidebar" href="#filters-sidebar">
                    <i class="fas fa-arrow-up"></i><i class="fas fa-arrow-down"></i><span> Filtros</span>
                </a>
            </div>
        </div>


        <div class="ps-panel--sidebar" id="filters-sidebar">
            <div class="ps-panel__header">
                <h3>Filtrar por</h3>
            </div>
            <div class="ps-panel-content">
                <ul>
                    @if (!empty($ranura_ram))
                        @if ($qmenu[0]->id_web_menu != 25)
                            <li class="active" style="margin: 2px 0px;">
                                <a href="#" class="toggle-link font-weight-bold w-100"
                                    data-toggle="toggle-ram">Ranura Ram</a>
                                <ul class="toggle-list" style="display: none; list-style: none;"
                                    data-toggle-list="toggle-ram">
                                    @foreach ($ranura_ram as $ranura)
                                        <li>
                                            <input type="checkbox" name="dq1" value="{{ trim($ranura) }}"
                                                @if (Request::query('dq1') == trim($ranura)) checked @endif>
                                            <label>{{ $ranura }}</label>
                                        </li>
                                    @endforeach
                                </ul>
                            </li>
                        @endif
                    @endif
                </ul>
                <ul>

                    @if (!empty($chipset))
                        @if ($qmenu[0]->id_web_menu != 25)
                            <li class="active" style="margin: 2px 0px;">
                                <a href="#" class="toggle-link font-weight-bold w-100"
                                    data-toggle="toggle-chipset">Chipset</a>
                                <ul class="toggle-list" style="display: none; list-style: none;"
                                    data-toggle-list="toggle-chipset">
                                    @foreach ($chipset as $cs)
                                        <li>
                                            <input type="checkbox" name="dq2" value="{{ trim($cs) }}"
                                                @if (Request::query('dq2') == trim($cs)) checked @endif>
                                            <label>{{ $cs }}</label>
                                        </li>
                                    @endforeach
                                </ul>
                            </li>
                        @endif
                    @endif



                </ul>
            </div>
            <button class="btn btn-success btn-filtrar w-100" type="submit">Filtrar</button>
        </div>

    @endif


    {{-- <ul>
                @if (!empty($chipset))
                    @if ($qmenu[0]->id_web_menu != 25)
                        <li class="active">
                            <p class="font-weight-bold">Tipo Ranura (RAM)</p>
                        </li>
                        @foreach ($chipset as $cs)
                            <li>
                                <input type="checkbox" name="dq1" value="{{ trim($cs) }}" @if (Request::query('dq2') == trim($cs)) checked @endif>
                                <label>{{ $cs }}</label>
                            </li>
                        @endforeach
                    @endif
                @endif
            </ul>
            <button class="btn btn-dark" type="submit">Filtar</button> --}}


    {{-- <div class="ps-panel--sidebar" id="order-sidebar">
        <div class="ps-panel__header">
            <h3>Ordenar por</h3>
        </div>
        <div class="ps-panel-content">
            <ul>
                <li class="active">
                    <a class="{{ Request::query('orp') == 'ASC' ? 'font-weight-bold' : '' }}"
                        href="{{ Request::fullUrlWithQuery(['orp' => 'ASC', 'orn' => null, 'page' => 1]) }}">Precio de
                        menor a mayor</a>
                </li>
                <li class="active">
                    <a class="{{ Request::query('orp') == 'DESC' ? 'font-weight-bold' : '' }}"
                        href="{{ Request::fullUrlWithQuery(['orp' => 'DESC', 'orn' => null, 'page' => 1]) }}">Precio de
                        mayor a menor</a>
                </li>
                <li class="active">
                    <a class="{{ Request::query('orn') == 'ASC' ? 'font-weight-bold' : '' }}"
                        href="{{ Request::fullUrlWithQuery(['orn' => 'ASC', 'orp' => null, 'page' => 1]) }}">Nombre de
                        A-z</a>
                </li>
                <li class="active">
                    <a class="{{ Request::query('orn') == 'DESC' ? 'font-weight-bold' : '' }}"
                        href="{{ Request::fullUrlWithQuery(['orn' => 'DESC', 'orp' => null, 'page' => 1]) }}">Nombre de
                        z-A</a>
                </li>
                <li class="active">
                    <a href="{{ Request::fullUrlWithQuery(['orp' => null, 'orn' => null, 'page' => 1]) }}">Mostrar
                        catalogo por defecto</a>
                </li>
            </ul>
        </div>
    </div> --}}
    <div class="overlay"></div>



    @include('layouts.footer')

    @include('utils.backtop')

@endsection

@section('scripts_custom')
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <script>
        
        $(document).ready(function(){
        $(".b-filtros").click(function(e){
            e.preventDefault(); // Evita el salto del enlace
            $(".shop-sidebar").fadeIn(); // Muestra el sidebar con animación
        });

        $(".c-filtros").click(function(e){
            e.preventDefault(); 
            $(".shop-sidebar").fadeOut(); // Oculta el sidebar
        });
    });
    
    
        class PriceRange extends HTMLElement {
            constructor() {
                super();
            }

            connectedCallback() {
                // Elements
                this.elements = {
                    container: this.querySelector('div'),
                    track: this.querySelector('div > div'),
                    from: this.querySelector('input:first-of-type'),
                    to: this.querySelector('input:last-of-type'),
                    output: this.querySelector('output')
                }

                // Event listeners
                this.elements.from.addEventListener('input', this.handleInput.bind(this));
                this.elements.to.addEventListener('input', this.handleInput.bind(this));

                // Properties
                this.currency = (this.hasAttribute('currency') &&
                    this.getAttribute('currency') !== undefined &&
                    this.getAttribute('currency') !== '') ? this.getAttribute('currency') : '£';

                // Update the DOM
                this.updateDom();

            }

            disconnectedCallback() {
                delete this.elements;
                delete this.currency;
            }

            get from() {
                return parseInt(this.elements.from.value);
            }
            get to() {
                return parseInt(this.elements.to.value);
            }

            handleInput(event) {
                if (parseInt(this.elements.to.value) - parseInt(this.elements.from.value) <= 1) {
                    if (event.target === this.elements.from) {
                        this.elements.from.value = (parseInt(this.elements.to.value) - 1);
                    } else if (event.target === this.elements.to) {
                        this.elements.to.value = (parseInt(this.elements.from.value) + 1);
                    }
                }

                // Update the DOM
                this.updateDom();
            }

            updateDom() {
                this.drawFill();
                this.drawOutput();
            }

            drawFill() {
                const percent1 = (this.elements.from.value / this.elements.from.max) * 100,
                    percent2 = (this.elements.to.value / this.elements.to.max) * 100;

                this.elements.track.style.background =
                    `linear-gradient(to right, var(--track-color) ${percent1}%, var(--track-highlight-color) ${percent1}%, var(--track-highlight-color) ${percent2}%, var(--track-color) ${percent2}%)`;
            }

            drawOutput() {
                this.elements.output.textContent =
                    `${this.currency}${this.elements.from.value} - ${this.currency}${this.elements.to.value}`;
            }
        }

        customElements.define('price-range', PriceRange);
    </script>
    <script>
        function removeDqParam(dq) {
            var url = window.location.href;
            var urlObject = new URL(url);
            urlObject.searchParams.delete(dq);
            window.location.href = urlObject.toString();
        }

        function mostrarRestantes(name) {
            var elementosOcultos = document.querySelectorAll('.compositions-list.brands.' + name + ' a[class="d-none"]');
            for (var i = 0; i < elementosOcultos.length; i++) {
                elementosOcultos[i].classList.remove('d-none');
            }
            var verMasElemento = document.querySelector('.compositions-list.brands.' + name + ' #ver-mas');
            if (verMasElemento) {
                verMasElemento.style.display = 'none';
            }
        }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Obtén todos los checkboxes para dq1
            var dq1Checkboxes = document.querySelectorAll('input[name="dq1"]');

            dq1Checkboxes.forEach(function(checkbox) {
                checkbox.addEventListener('change', function() {
                    if (this.checked) {
                        // Desmarca todos los otros checkboxes de dq1
                        dq1Checkboxes.forEach(function(otherCheckbox) {
                            if (otherCheckbox !== checkbox) {
                                otherCheckbox.checked = false;
                            }
                        });
                    }
                });
            });

            // Obtén todos los checkboxes para dq2
            var dq2Checkboxes = document.querySelectorAll('input[name="dq2"]');

            dq2Checkboxes.forEach(function(checkbox) {
                checkbox.addEventListener('change', function() {
                    if (this.checked) {
                        // Desmarca todos los otros checkboxes de dq2
                        dq2Checkboxes.forEach(function(otherCheckbox) {
                            if (otherCheckbox !== checkbox) {
                                otherCheckbox.checked = false;
                            }
                        });
                    }
                });
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var toggleLinks = document.querySelectorAll('.toggle-link');
            toggleLinks.forEach(function(toggleLink) {
                toggleLink.addEventListener('click', function(event) {
                    event.preventDefault();
                    var toggleList = document.querySelector('[data-toggle-list="' + toggleLink
                        .getAttribute('data-toggle') + '"]');
                    toggleList.style.display = toggleList.style.display === 'none' ? 'block' :
                        'none';
                });
            });

            // Verifica si al menos un checkbox de "dq2" está seleccionado y muestra el "toggle" correspondiente
            var dq2Checkboxes = document.querySelectorAll('input[name="dq2"]');
            var toggleListChipset = document.querySelector('[data-toggle-list="toggle-chipset"]');

            for (var i = 0; i < dq2Checkboxes.length; i++) {
                dq2Checkboxes[i].addEventListener('change', function() {
                    toggleListChipset.style.display = isAnyCheckboxSelected('dq2') ? 'block' : 'none';
                });
            }
        });

        // Función para verificar si al menos un checkbox está seleccionado
        function isAnyCheckboxSelected(checkboxName) {
            var checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]');
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    return true;
                }
            }
            return false;
        }
        document.addEventListener('DOMContentLoaded', function() {
            // Obtén el botón "Filtrar"
            var filterButton = document.querySelector('.btn-success');

            // Agrega un evento clic al botón
            filterButton.addEventListener('click', function() {
                // Obtén el valor seleccionado de dq1 (Ranura RAM)
                var selectedDq1Value = document.querySelector('input[name="dq1"]:checked');

                // Obtén el valor seleccionado de dq2 (Chipset)
                var selectedDq2Value = document.querySelector('input[name="dq2"]:checked');

                // Obtiene la URL actual
                var currentURL = window.location.href;

                // Elimina los parámetros "page" de la URL
                currentURL = currentURL.replace(/(\?|&)page=1/g,
                    ''); // Elimina todas las ocurrencias de page=1

                // Agrega el parámetro "page"
                currentURL += (currentURL.includes('?') ? '&' : '?') + 'page=1';

                // Agrega los parámetros "dq1" y "dq2" solo si están seleccionados
                if (selectedDq1Value) {
                    currentURL += '&dq1=' + selectedDq1Value.value;
                }

                if (selectedDq2Value) {
                    currentURL += '&dq2=' + selectedDq2Value.value;
                }

                // Redirige a la nueva URL
                window.location.href = currentURL;
            });
        });
    </script>
    <script>
        function redirectTo(url) {
            window.location.href = url;
        }
    </script>
@endsection