//html
<app-navbar></app-navbar>
<div class="main-container">
    <div class="header-search-container">
        <i class="bi bi-arrow-left-circle header-icon" (click)="goBack()"></i>
        <h2 class="header-title" routerLink="/product-list">AV MERCH</h2>
        <div class="search-bar-container">
            <input type="text" class="form-control search-bar" placeholder="Search products" [(ngModel)]="searchTerm" (input)="filteredProductsBySearch()">
        </div>
    </div>
    
    <!-- Side Navbar -->
    <div class="side-navbar" [ngClass]="{'open': isSidebarOpen}">
      <ul>
        <li (click)="filterProductsByCategory(0)">All</li>
        <li (click)="filterProductsByCategory(1)">Tops</li>
        <li (click)="filterProductsByCategory(2)">Bottoms</li>
      </ul>
    </div>
    
    <!-- Toggle Button -->
    <button class="toggle-btn" (click)="toggleSidebar()">
      <i class="bi" [ngClass]="{'bi-list': !isSidebarOpen, 'bi-x': isSidebarOpen}"></i>
    </button>
    
    <div class="product-list-container">
        <div *ngIf="filteredProducts.length === 0">
            <br>
            <br>
            <h1>"No Products Found"</h1>
        </div>
        <div *ngIf="filteredProducts.length > 0" class="row">
            <div class="col-6" *ngFor="let product of filteredProducts">
                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                        <div class="card-img-container">
                            <a routerLink="/product-item/{{product.product_ID}}">
                                <img [src]="getImageSrc(product.product_Img)" alt= "Product Image" class="card-img-top">
                            </a>
                        </div>
                        <p class="card-text" style="text-align: center;">{{product.product_Name}}</p>
                    </div>
                </div>
                <br>
                <br>
            </div>
        </div>
    </div>
    <br>
</div>

//ts
import { Component } from '@angular/core';
import { OrderService } from '../Services/order.service';
import { Product } from '../shared/order';
import { CommonModule } from '@angular/common';
import { Router, RouterLink } from '@angular/router';
import { NavbarComponent } from './navbar.component';
import { Location } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [CommonModule, RouterLink, NavbarComponent, FormsModule],
  templateUrl: './product-list.component.html',
  styleUrl: './product-list.component.css'
})
export class ProductListComponent {
  productImage: string | null = null;
  products:Product[] = [];
  totalCartItems: number = 0;
  filteredProducts: Product[] = [];
  isSidebarOpen: boolean = false;
  searchTerm: string = '';

  constructor(private orderService:OrderService, private location: Location, private router: Router) {}

  ngOnInit(){
    this.GetAllProducts();
    this.orderService.cartItemsCount.subscribe(count => this.totalCartItems = count); // Update cart items count
    this.orderService.loadWishlistItems();
    this.orderService.loadCartItems();
  }

  GetAllProducts(): void {
    this.orderService.getAllProducts().subscribe({
      next: (p) => {
        this.products = p;
        this.filteredProducts = p;   
        console.log(p);        
      },
      error: (err) => {
        console.error('Error fetching products', err);
      }
    });
  }

  filterProductsByCategory(categoryId: number): void {
    if (categoryId === 0) {
      this.filteredProducts = this.products; // Display all products if 'All' is selected
    } else {
      this.filteredProducts = this.products.filter(product => product.product_Category_ID === categoryId);
    }
    this.toggleSidebar(); // Close sidebar after selecting a category
  }
  

  filteredProductsBySearch(): void {
    if (!this.searchTerm) {
      this.filteredProducts = this.products;
    } else {
      const term = this.searchTerm.toLowerCase();
      this.filteredProducts = this.products.filter(product =>
        product.product_Name.toLowerCase().includes(term)
      );
    }
  }

  toggleSidebar(): void {
    this.isSidebarOpen = !this.isSidebarOpen;
  }

  onCartUpdated(quantity: number) {  // Update cart count
    this.totalCartItems += quantity;
    // this.orderService.updateCartCount(this.totalCartItems); // Update the cart count in the service
  }

  getImageSrc(base64String: string): string {
    return `data:image/jpeg;base64,${base64String}`;
  }
  
  goBack() {
    const userTypeId = JSON.parse(localStorage.getItem('User')!).userTypeId;
    const userId = JSON.parse(localStorage.getItem('User')!).userId;
    if (userTypeId === 1) {  // Ensure userTypeID is compared as string
      this.router.navigateByUrl(`/OwnerHome/${userId}`);
    } else if (userTypeId === 2) {
      this.router.navigateByUrl(`/EmployeeHome/${userId}`);
    } else if (userTypeId === 3) {
      this.router.navigateByUrl(`/Home/${userId}`);
    }
  }
}