<nav class="navbar">
  <div style="max-width: fit-content;">
    <a routerLink="">
      <img [src]="'assets/img/logoATC.png'" alt="logo ATC" style="max-height: 60px;">
    </a>
  </div>
  <div class="nav-center">
    <ul class="ul-links">
      <li class="nav-links">
        <a class="main-option" href="">Inicio</a>
      </li>

      <!-- Opciones en la  nav de "Linea - " -->

      <li class="nav-links" (mouseenter)="showDropdowns('lineaHabitat', true)"
        (mouseleave)="showDropdowns(option.categoria.toLowerCase(), false)" *ngFor="let option of navOptions">
        <a class="main-option" [routerLink]="['/linea', option.categoria.toLowerCase()]"
          [ngClass]="{'hovered': currentDropdown[option.categoria]}">
          Línea {{option.categoria}}
        </a>

        <ul *ngIf="currentDropdown['lineaHabitat']" class="dropdown-menu">
          <li class="dropdown-option" *ngFor="let categoria of option.subcategorias"
            (mouseenter)="currentDropdown[option.categoria.toLowerCase()] = true"
            (mouseleave)="currentDropdown[option.categoria.toLowerCase()] = false">

            {{ categoria.subcategoria }}
            <mat-icon style="vertical-align: middle;">arrow_right</mat-icon>

            <ul class="submenu">
              <li class="submenu-li" *ngFor="let producto of categoria.productos"
                [routerLink]="['/linea',option.categoria.toLowerCase(), producto.ID]"
                (mouseenter)="currentDropdown[option.categoria.toLowerCase()] = true">
                <a [routerLink]="['/linea',option.categoria.toLowerCase(), producto.ID]">{{ producto.SUBMODELO }}</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>

      <!-- <li class="nav-links" (mouseenter)="showDropdowns('lineaComercial', true)"
        (mouseleave)="showDropdowns('lineaComercial', false)">
        <a class="main-option" routerLink="/linea/comercial" [ngClass]="{'hovered': currentDropdown['lineaComercial']}">
          Línea Comercial
        </a>

        <ul *ngIf="currentDropdown['lineaComercial']" class="dropdown-menu">
          <li class="dropdown-option" *ngFor="let categoria of lineaHabitatComercial"
            (mouseenter)="currentDropdown['lineaComercial'] = true"
            (mouseleave)="currentDropdown['lineaComercial'] = false">

            {{ categoria.categoria }}
            <mat-icon style="vertical-align: middle;">arrow_right</mat-icon>

            <ul class="submenu">
              <li class="submenu-li" *ngFor="let producto of categoria.productos"
                [routerLink]="['/linea/comercial', producto.name]"
                (mouseenter)="currentDropdown['lineaComercial'] = true">
                <a [routerLink]="['/linea/comercial', producto.name]">{{ producto.name }}</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>


      <li class="nav-links" (mouseenter)="showDropdowns('lineaIndustrial', true)"
        (mouseleave)="showDropdowns('lineaIndustrial', false)">
        <a class="main-option" routerLink="/linea/industrial"
          [ngClass]="{'hovered': currentDropdown['lineaIndustrial']}">
          Línea Industrial
        </a>

        <ul *ngIf="currentDropdown['lineaIndustrial']" class="dropdown-menu">
          <li class="dropdown-option" *ngFor="let categoria of lineaHabitatIndustrial"
            (mouseenter)="currentDropdown['lineaIndustrial'] = true"
            (mouseleave)="currentDropdown['lineaIndustrial'] = false">

            {{ categoria.categoria }}
            <mat-icon style="vertical-align: middle;">arrow_right</mat-icon>

            <ul class="submenu">
              <li class="submenu-li" *ngFor="let producto of categoria.productos"
                [routerLink]="['/linea/industrial', producto.name]"
                (mouseenter)="currentDropdown['lineaIndustrial'] = true">
                <a [routerLink]="['/linea/industrial', producto.name]">{{ producto.name }}</a>

              </li>
            </ul>
          </li>
        </ul>
      </li> -->


      <!-- DESCOMENTAR -->
      <li class="nav-links" (mouseenter)="showDropdowns('aplicacion', true)"
        (mouseleave)="showDropdowns('aplicacion', false)">
        <a class="main-option" routerLink="/linea/aplicacion" [ngClass]="{'hovered': currentDropdown['aplicacion']}">Por
          Aplicación</a>
        <ul *ngIf="currentDropdown['aplicacion']" class="dropdown-menu">
          <li><a class="dropdown-option" *ngFor="let option of menu4Opciones"
              routerLink="/aplicacion/{{option.ID}}">{{option.NOMBRE}}</a></li>
        </ul>
      </li>
      <li class="nav-links">
        <a class="main-option" routerLink="/cotizacion">Cotización</a>
      </li>
      <!-- <li class="nav-links" (mouseenter)="showDropdown = true" (mouseleave)="showDropdown = false">
        <a class="main-option" (click)="redirectPage()" style="cursor: pointer;">Portales</a>
      </li> -->

    </ul>
  </div>
  <div class="nav-right">
    <div class="input">
      <input type="text" [formControl]="searchControl" placeholder="Modelo  ">
      <mat-icon class="input-icon" style="color: #252E68;">search</mat-icon>
    </div>
    <mat-icon *ngIf="openSection" class="input-icon" style="color: #b91b23; cursor: pointer;"
      (click)="clearInput()">close</mat-icon>

  </div>


  <!------------------------------------ Vista mobile --------------------------------------->

  <div class="menu" (click)="toggleMenu()">
    <mat-icon>menu</mat-icon>
  </div>

  <!-- Agregamos una clase condicional para el despliegue del menú -->
  <div [ngClass]="{'active': isMenuOpen}" class="mobile-menu">
    <ul class="mobile-ul-links">
      <li class="mobile-nav-links" (click)="toggleMenu();closeMenu()">
        <a class="mobile-main-option" routerLink="">Inicio</a>
      </li>

      <!-- Línea Hábitat -->
      <li class="mobile-nav-links" *ngFor="let option of navOptions" r>
        <a class="mobile-main-option" [routerLink]="['/linea', option.categoria.toLowerCase()]"
          (click)="closeMenu()">Línea {{option.categoria}}</a>
        <mat-icon style="vertical-align: middle;" [ngClass]="{'rotated': openSubMenu === option.categoria}"
          (click)="toggleSubMenu(option.categoria); $event.stopPropagation()">
          chevron_right
        </mat-icon>

        <ul [ngClass]="{'sub-open': openSubMenu === option.categoria}" class="sub-menu">
          <li *ngFor="let subcategoria of option.subcategorias">
            <div class="categoria-header"
              (click)="toggleCategorySubMenu(subcategoria.subcategoria); $event.stopPropagation()">
              <a>{{ subcategoria.subcategoria }}</a>
              <mat-icon *ngIf="subcategoria.productos.length"
                [ngClass]="{'rotated': openCategorySubMenu === subcategoria.subcategoria}"
                style="vertical-align: middle;">chevron_right</mat-icon>
            </div>
            <ul *ngIf="openCategorySubMenu === subcategoria.subcategoria" class="product-list">
              <li class="product" *ngFor="let producto of subcategoria.productos">
                <a [routerLink]="['/linea', option.categoria.toLowerCase(), producto.ID]" (click)="closeMenu()">{{
                  producto.SUBMODELO }}</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>




      <!-- <li class="mobile-nav-links">
        <a class="mobile-main-option" routerLink="/linea/comercial" (click)="closeMenu()">Línea Comercial</a>
        <mat-icon style="vertical-align: middle;" (click)="toggleSubMenu('comercial'); $event.stopPropagation()"
          [ngClass]="{'rotated': openSubMenu === 'comercial'}">chevron_right</mat-icon>
        <ul [ngClass]="{'sub-open': openSubMenu === 'comercial'}" class="sub-menu">
          <li *ngFor="let categoria of lineaHabitatComercial">
            <div class="categoria-header"
              (click)="toggleCategorySubMenu(categoria.categoria); $event.stopPropagation()">
              <a>{{ categoria.categoria }}</a>
              <mat-icon *ngIf="categoria.productos.length" style="vertical-align: middle;"
                [ngClass]="{'rotated': openCategorySubMenu === categoria.categoria}">chevron_right</mat-icon>
            </div>
            <ul *ngIf="openCategorySubMenu === categoria.categoria" class="product-list">
              <li class="product" *ngFor="let producto of categoria.productos">
                <a [routerLink]="['/linea/comercial', producto.name]" (click)="closeMenu()">{{ producto.name }}</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>

      <li class="mobile-nav-links">
        <a class="mobile-main-option" routerLink="/linea/industrial" (click)="closeMenu()">Línea Industrial</a>
        <mat-icon style="vertical-align: middle;" [ngClass]="{'rotated': openSubMenu === 'industrial'}"
          (click)="toggleSubMenu('industrial'); $event.stopPropagation()">chevron_right</mat-icon>
        <ul [ngClass]="{'sub-open': openSubMenu === 'industrial'}" class="sub-menu">
          <li *ngFor="let categoria of lineaHabitatIndustrial">
            <div class="categoria-header"
              (click)="toggleCategorySubMenu(categoria.categoria); $event.stopPropagation()">
              <a>{{ categoria.categoria }}</a>
              <mat-icon *ngIf="categoria.productos.length" style="vertical-align: middle;"
                [ngClass]="{'rotated': openCategorySubMenu === categoria.categoria}">chevron_right</mat-icon>
            </div>
            <ul *ngIf="openCategorySubMenu === categoria.categoria" class="product-list">
              <li class="product" *ngFor="let producto of categoria.productos">
                <a [routerLink]="['/linea/industrial', producto.name]" (click)="closeMenu()">{{ producto.name }}</a>
              </li>
            </ul>
          </li>
        </ul>
      </li> -->

      <!-- Por Aplicación -->
      <li class="mobile-nav-links">
        <a class="mobile-main-option" [routerLink]="['/linea/aplicacion']" (click)="closeMenu()">Por Aplicación</a>
        <mat-icon style="vertical-align: middle;" [ngClass]="{'rotated': openSubMenu === 'aplicacion'}"
          (click)="toggleSubMenu('aplicacion')">chevron_right</mat-icon>
        <ul [ngClass]="{'sub-open': openSubMenu === 'aplicacion'}" class="sub-menu">
          <li *ngFor="let option of menu4Opciones">
            <a [routerLink]="['/linea/aplicacion/', option.NOMBRE]" (click)="closeMenu()">{{ option.NOMBRE }}</a>
          </li>
        </ul>
      </li>

      <!-- Cotización -->
      <!-- <li class="mobile-nav-links" (click)="toggleMenu(); closeMenu()">
        <a class="mobile-main-option" routerLink="/cotizacion" (click)="closeMenu()">Cotización</a>
      </li> -->

      <!-- Portales -->
      <!-- <li class="mobile-nav-links">
        <a class="mobile-main-option" (click)="redirectPage(); closeMenu()">Portales</a>
        
      </li> -->
    </ul>
  </div>


</nav>
<div class="resultados" *ngIf="productos.length > 0 && openSection">
  <div class="result-container">
    <span style="font-size: 24px;">Productos Relacionados</span>
    <hr>
    <ul style="display: flex;">
      <li *ngFor="let product of productos" [routerLink]="['linea', product.LINEA?.toLowerCase(), product.ID]"
        (click)="toggleOpenS()">
        <img [src]="product.img" alt="" style="height: 70px; width:70px">
        <span class="opt-text">
          {{ product.SUBMODELO }}
        </span>
      </li>
    </ul>
    
  </div>
</div>
<div class="resultados" *ngIf="openSection && isEmpty">
  <div class="result-container">
    <span style="font-size: 24px;">Productos Relacionados</span>
    <hr>
    <p *ngIf="productos.length === 0" style="color: #b91b23; font-size: 18px; text-align: center; margin-top: 10px;">
      No se encontraron resultados.
    </p>
  </div>
</div>