@extends('layout')
@section('content')

    <div class="header-banner">
        <img class="img-fluid d-none d-sm-none d-md-block" src="{{ url('images/dreihome/bg-drehome.jpg') }}" alt="" >
        <img class="img-fluid d-block d-sm-block d-md-none" src="{{ url('images/dreihome/bg-drehome.jpg') }}" alt="" >
        <div class="header__banner__content">
            <h1>Dreihome</h1>
            <p>Piezas en stock y pedido</p>
        </div>
    </div>
    
   
    <div class="container-xxl position-relative">
        <div class="wrapper__section__products">
            
            <div class="aside__nav"> 
                <!-- Pestañas verticales -->
                <ul class="nav flex-column nav-pills" id="vertical-tabs" role="tablist">
                     
                    <li class="nav-item item__vertical">
                        <a class="nav-link title__tabs" id="tab-sofas" data-toggle="pill" href="#sofas" role="tab" aria-controls="sofas" aria-selected="false">SOFÁS</a> 
                    </li> 
                    
                    <li class="nav-item item__vertical">
                        <a class="nav-link title__tabs" id="tab-sillas" data-toggle="pill" href="#sillas" role="tab" aria-controls="sillas" aria-selected="true">SILLAS</a> 
                    </li>
                    
                    <li class="nav-item item__vertical">
                        <a class="nav-link title__tabs" id="tab-mesas" data-toggle="pill" href="#mesas" role="tab" aria-controls="mesas" aria-selected="false">MESAS</a> 
                    </li>
                    
                    <li class="nav-item item__vertical">
                            <a class="nav-link active title__tabs" id="tab-muebles" data-toggle="pill" href="#muebles" role="tab" aria-controls="muebles" aria-selected="false">MUEBLES</a> 
                          <ul class="sub__cat">
                            <li>Aparadores</li>
                            <li>Muebles TV</li>
                            <li>Estanterías y vitrinas</li>
                            <li>Mesitas de noche</li>
                            <li>Cómodas y cajoneras</li>
                            <li>Consolas</li>
                            <li>Estantes</li>
                            <li>Colgadores</li>
                            <li>Muebles de baño</li>
                            <li>Percheros</li>
                            <li>Zapateros</li>
                            <li>Biombos</li>
                          </ul>
                    </li> 
                    
                    <li class="nav-item item__vertical">
                        <a class="nav-link title__tabs" id="tab-decoracion" data-toggle="pill" href="#decoracion" role="tab" aria-controls="decoracion" aria-selected="true">DECORACIÓN</a>
                          <ul class="sub__cat">
                            <li>Aparadores</li>
                            <li>Muebles TV</li>
                            <li>Estanterías y vitrinas</li>
                            <li>Mesitas de noche</li>
                            <li>Cómodas y cajoneras</li>
                            <li>Consolas</li>
                            <li>Estantes</li>
                            <li>Colgadores</li>
                            <li>Muebles de baño</li>
                            <li>Percheros</li>
                            <li>Zapateros</li>
                            <li>Biombos</li>
                          </ul>
                    </li>
                    
                    <li class="nav-item item__vertical">
                        <a class="nav-link title__tabs" id="tab6-tab" data-toggle="pill" href="#tab6" role="tab" aria-controls="tab6" aria-selected="false">EXTERIORES</a> 
                    </li>
                    
                    <li class="nav-item item__vertical">
                        <a class="nav-link title__tabs" id="tab7-tab" data-toggle="pill" href="#tab7" role="tab" aria-controls="tab7" aria-selected="false">DORMITORIO</a> 
                    </li> 
                    
                    <li class="nav-item item__vertical">
                        <a class="nav-link title__tabs" id="tab8-tab" data-toggle="pill" href="#tab8" role="tab" aria-controls="tab8" aria-selected="true">ILUMINACIÓN</a> 
                    </li>
                    
                    <li class="nav-item item__vertical">
                        <a class="nav-link title__tabs" id="tab9-tab" data-toggle="pill" href="#tab9" role="tab" aria-controls="tab9" aria-selected="false">ARTE</a> 
                    </li>
                    
                    <li class="nav-item item__vertical">
                            <a class="nav-link title__tabs" id="tab10-tab" data-toggle="pill" href="#tab10" role="tab" aria-controls="tab10" aria-selected="false">KIDS</a> 
                    </li> 
                    
                    <li class="nav-item item__vertical">
                        <a class="nav-link title__tabs" id="tab11-tab" data-toggle="pill" href="#tab11" role="tab" aria-controls="tab11" aria-selected="true">MASCOTAS</a> 
                    </li>

                    
                </ul>
            </div>
            
            <div class="right__nav" style="display:grid">
                
                <div class="wrapper__filters"> 
                    
                    <div class="form-floating select__category">
                      <select class="form-select" id="selectProductCategory" aria-label="Seleccionar sub categoría"> 
                        <option value="1" selected>Subcategoria de 01</option>
                        <option value="2">Subcategoria de 02</option>
                        <option value="3">Subcategoria de 03</option>
                      </select>
                      <label for="selectProductCategory">Seleccionar sub categoría:</label>
                    </div>
                    
                    <div class="input-group">
                        <label class="icon__search" for="searchProducts"> </label>
                        <input type="text" class="form-control search__products" id="searchProducts" placeholder="Ingresar texto"> 
                        <div class="input-group-append">
                          <button class="btn__search__products" type="button">
                            <span>Buscar</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="31" height="8" viewBox="0 0 31 8" fill="none">
                            <path d="M30.3536 4.35355C30.5488 4.15829 30.5488 3.84171 30.3536 3.64644L27.1716 0.464464C26.9763 0.269202 26.6597 0.269202 26.4645 0.464464C26.2692 0.659726 26.2692 0.976308 26.4645 1.17157L29.2929 4L26.4645 6.82842C26.2692 7.02369 26.2692 7.34027 26.4645 7.53553C26.6597 7.73079 26.9763 7.73079 27.1716 7.53553L30.3536 4.35355ZM4.37114e-08 4.5L30 4.5L30 3.5L-4.37114e-08 3.5L4.37114e-08 4.5Z" fill="#638F8A"/>
                            </svg>
                          </button>
                        </div>
                    </div>
                    
                    <!--<div class="search">-->
                    <!--      <i class="fa fa-search"></i>-->
                    <!--      <input type="text" class="form-control" placeholder="Have a question? Ask Now">-->
                    <!--      <button class="btn btn-primary">Search</button>-->
                    <!--</div>-->
                </div>
                        
                <!-- Contenido de las pestañas -->
                <div class="tab-content" id="vertical-tabs-content">
    
                    <!--SOFAS-->  
                    <div class="tab-pane fade " id="sofas" role="tabpanel" aria-labelledby="tab-sofas">
                        
                        <!-- Card products -->
                        <section class="cards__grid"> 
                        @include('dreihome.grids-products')
                        </section>
                        
                    </div>
                    
                    <!--SILLAS-->
                    <div class="tab-pane fade show active" id="sillas" role="tabpanel" aria-labelledby="tab-sillas"> 
                        <!-- Card products -->
                        <section class="cards__grid"> 
                        @include('dreihome.grids-products')
                        </section>
                        
                    </div>
                    
                    <!--MESAS-->
                    <div class="tab-pane fade" id="mesas" role="tabpanel" aria-labelledby="tab-mesas"> 
                        <!-- Card products -->
                        <section class="cards__grid"> 
                        @include('dreihome.grids-products')
                        </section>
                    </div>


                    <!--MUEBLES-->
                    <div class="tab-pane fade" id="muebles" role="tabpanel" aria-labelledby="tab-muebles"> 
                        <!-- Card products -->
                        <section class="cards__grid"> 
                        @include('dreihome.grids-products')
                        </section>
                    </div>

                    <!--DECORACION-->
                    <div class="tab-pane fade" id="decoracion" role="tabpanel" aria-labelledby="tab-decoracion"> 
                        <!-- Card products -->
                        <section class="cards__grid"> 
                        @include('dreihome.grids-products')
                        </section>
                    </div>
                </div>
                
     
                           
     
            </div>
    
        </div>
    
    
    </div>

 
 
 



</body>
</html>
 
 
@endsection
@section('scripts')
 


@endsection