@extends('layout')
@section('content')
<div class="header-banner">
   <img class="img-fluid d-none d-sm-none d-md-block" src="{{ url('images/proyectos/bg-proyectos.jpg') }}" alt="" >
   <img class="img-fluid d-block d-sm-block d-md-none" src="{{ url('images/proyectos/bg-proyectos.jpg') }}" alt="" >
   <div class="header__banner__content">
      <h1>Proyectos</h1>
   </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-residencial" data-toggle="pill" href="#residencial" role="tab" aria-controls="residencial" aria-selected="false">RESIDENCIAL</a>
               <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</p>
            </li>
            <li class="nav-item item__vertical">
               <a class="nav-link active title__tabs" id="tab-comercial" data-toggle="pill" href="#comercial" role="tab" aria-controls="comercial" aria-selected="true">COMERCIAL</a>
               <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</p>
            </li>
            <li class="nav-item item__vertical">
               <a class="nav-link title__tabs" id="tab-corporativo" data-toggle="pill" href="#corporativo" role="tab" aria-controls="corporativo" aria-selected="false">CORPORATIVO</a>
               <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</p>
            </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>
         <!-- Contenido de las pestañas -->
         <div class="tab-content" id="vertical-tabs-content">
            <!--RESIDENCIAL-->  
            <div class="tab-pane fade" id="residencial" role="tabpanel" aria-labelledby="tab-residencial">
               <section class="cards__grid">
                  <!-- Card products -->
                  @include('proyectos.cards-products')
               </section>
            </div>
            <!--COMERCIAL-->
            <div class="tab-pane fade show active" id="comercial" role="tabpanel" aria-labelledby="tab-comercial">
               <section class="cards__grid">
                  <!-- Card products -->
                  @include('proyectos.cards-products')
               </section>
            </div>
            <!--COORPORATIVO-->
            <div class="tab-pane fade" id="corporativo" role="tabpanel" aria-labelledby="tab-corporativo">
               <section class="cards__grid">
                  <!-- Card products -->
                  @include('proyectos.cards-products')
               </section>
            </div>
         </div>
      </div>
   </div>
</div> 
</body>
</html>
@endsection

@section('scripts')
 
@endsection