<?php
/**
 * Shop Categories Page
 * Converted from shop-categories-electronics.html
 * Displays all product categories
 */

$pageTitle = 'Cartzilla | Magazin Electronice - Categorii';
$pageDescription = 'Cartzilla - Magazin Online E-Commerce';

require_once __DIR__ . '/includes/header.php';

// Initialize classes
$product = new Product();
$db = Database::getInstance();

// Get all main categories (parent_id IS NULL)
$categories = $product->getCategories(null);

// Get product count for each category and subcategories
foreach ($categories as &$category) {
    // Get product count for this category
    $productCount = $db->fetchOne(
        "SELECT COUNT(*) as count FROM products WHERE category_id = ? AND is_active = 1",
        [$category['id']]
    );
    $category['product_count'] = $productCount['count'] ?? 0;
    
    // Get subcategories
    $subcategories = $product->getCategories($category['id']);
    $category['subcategories'] = $subcategories;
    
    // Get product count for subcategories
    foreach ($category['subcategories'] as &$subcat) {
        $subProductCount = $db->fetchOne(
            "SELECT COUNT(*) as count FROM products WHERE category_id = ? AND is_active = 1",
            [$subcat['id']]
        );
        $subcat['product_count'] = $subProductCount['count'] ?? 0;
    }
}

// Category images mapping (you can store these in database or use a naming convention)
$categoryImages = [
    'smartphones' => '01.png',
    'accessories' => '02.png',
    'tablets' => '03.png',
    'wearable-electronics' => '04.png',
    'computers-laptops' => '05.png',
    'cameras-photo-video' => '06.png',
    'headphones' => '07.png',
    'video-games' => '08.png',
];

// Function to get category image
function getCategoryImage($categorySlug, $categoryImages) {
    $slug = strtolower($categorySlug);
    // Try exact match first
    if (isset($categoryImages[$slug])) {
        return 'assets/img/shop/electronics/categories/' . $categoryImages[$slug];
    }
    // Try partial matches
    foreach ($categoryImages as $key => $image) {
        if (strpos($slug, $key) !== false || strpos($key, $slug) !== false) {
            return 'assets/img/shop/electronics/categories/' . $image;
        }
    }
    // Default image
    return 'assets/img/shop/electronics/categories/01.png';
}
?>

    <!-- Page content -->
    <main class="content-wrapper">

      <!-- Breadcrumb -->
      <nav class="container pt-3 my-3 my-md-4" aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/">Acasă</a></li>
          <li class="breadcrumb-item active" aria-current="page">Categorii</li>
        </ol>
      </nav>


      <!-- Page title -->
      <h1 class="h3 container mb-sm-4">Categorii produse</h1>


      <!-- Brands -->
      <section class="container mb-4">
        <div class="overflow-auto" data-simplebar data-simplebar-auto-hide="false">
          <div class="row row-cols-6 g-0" style="min-width: 960px">
            <div class="col">
              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="/catalog">
                <div class="ratio" style="max-width: 164px; --cz-aspect-ratio: calc(80 / 164 * 100%)">
                  <img src="assets/img/shop/electronics/brands/apple-light-mode.svg" class="d-none-dark" alt="Apple">
                  <img src="assets/img/shop/electronics/brands/apple-dark-mode.svg" class="d-none d-block-dark" alt="Apple">
                </div>
              </a>
            </div>
            <div class="col">
              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="/catalog">
                <img src="assets/img/shop/electronics/brands/motorola-light-mode.svg" class="d-none-dark" alt="Motorola">
                <img src="assets/img/shop/electronics/brands/motorola-dark-mode.svg" class="d-none d-block-dark" alt="Motorola">
              </a>
            </div>
            <div class="col">
              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="/catalog">
                <img src="assets/img/shop/electronics/brands/xiaomi-light-mode.svg" class="d-none-dark" alt="Xiaomi">
                <img src="assets/img/shop/electronics/brands/xiaomi-dark-mode.svg" class="d-none d-block-dark" alt="Xiaomi">
              </a>
            </div>
            <div class="col">
              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="/catalog">
                <img src="assets/img/shop/electronics/brands/canon-light-mode.svg" class="d-none-dark" alt="Canon">
                <img src="assets/img/shop/electronics/brands/canon-dark-mode.svg" class="d-none d-block-dark" alt="Canon">
              </a>
            </div>
            <div class="col">
              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="/catalog">
                <img src="assets/img/shop/electronics/brands/samsung-light-mode.svg" class="d-none-dark" alt="Samsung">
                <img src="assets/img/shop/electronics/brands/samsung-dark-mode.svg" class="d-none d-block-dark" alt="Samsung">
              </a>
            </div>
            <div class="col">
              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="/catalog">
                <img src="assets/img/shop/electronics/brands/sony-light-mode.svg" class="d-none-dark" alt="Sony">
                <img src="assets/img/shop/electronics/brands/sony-dark-mode.svg" class="d-none d-block-dark" alt="Sony">
              </a>
            </div>
          </div>
        </div>
      </section>


      <!-- Category cards -->
      <section class="container">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 gy-5">

          <?php if (empty($categories)): ?>
          <div class="col-12">
            <div class="text-center py-5">
              <p class="fs-lg text-body-secondary">Nu s-au găsit categorii.</p>
            </div>
          </div>
          <?php else: ?>
          <?php foreach ($categories as $category): ?>
          <!-- Category -->
          <div class="col">
            <div class="hover-effect-scale">
              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="/catalog/<?php echo htmlspecialchars($category['slug']); ?>">
                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
                  <?php if (!empty($category['image'])): ?>
                  <img src="<?php echo htmlspecialchars($category['image']); ?>" class="hover-effect-target" alt="<?php echo htmlspecialchars($category['name']); ?>">
                  <?php else: ?>
                  <img src="<?php echo getCategoryImage($category['slug'], $categoryImages); ?>" class="hover-effect-target" alt="<?php echo htmlspecialchars($category['name']); ?>">
                  <?php endif; ?>
                </div>
              </a>
              <h2 class="h6 d-flex w-100 pb-2 mb-1">
                <a class="animate-underline animate-target d-inline text-truncate" href="/catalog/<?php echo htmlspecialchars($category['slug']); ?>">
                  <?php echo htmlspecialchars($category['name']); ?>
                  <?php if ($category['product_count'] > 0): ?>
                  <span class="text-body-secondary fs-xs ms-2">(<?php echo $category['product_count']; ?>)</span>
                  <?php endif; ?>
                </a>
              </h2>
              <?php if (!empty($category['subcategories'])): ?>
              <ul class="nav flex-column gap-2 mt-n1">
                <?php foreach (array_slice($category['subcategories'], 0, 6) as $subcat): ?>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="/catalog/<?php echo htmlspecialchars($subcat['slug']); ?>">
                    <?php echo htmlspecialchars($subcat['name']); ?>
                    <?php if ($subcat['product_count'] > 0): ?>
                    <span class="text-body-secondary fs-xs ms-1">(<?php echo $subcat['product_count']; ?>)</span>
                    <?php endif; ?>
                  </a>
                </li>
                <?php endforeach; ?>
                <?php if (count($category['subcategories']) > 6): ?>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="/catalog/<?php echo htmlspecialchars($category['slug']); ?>">
                    View all...
                  </a>
                </li>
                <?php endif; ?>
              </ul>
              <?php endif; ?>
            </div>
          </div>
          <?php endforeach; ?>
          <?php endif; ?>

        </div>
      </section>


      <!-- Banners -->
      <section class="container pb-4 pt-5 mb-3">
        <div class="row g-3 g-lg-4">
          <div class="col-md-7">
            <div class="position-relative d-flex flex-column flex-sm-row align-items-center h-100 rounded-5 overflow-hidden px-5 px-sm-0 pe-sm-4">
              <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark rtl-flip" style="background: linear-gradient(90deg, #accbee 0%, #e7f0fd 100%)"></span>
              <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark rtl-flip" style="background: linear-gradient(90deg, #1b273a 0%, #1f2632 100%)"></span>
              <div class="position-relative z-1 text-center text-sm-start pt-4 pt-sm-0 ps-xl-4 mt-2 mt-sm-0 order-sm-2">
                <h2 class="h3 mb-2">iPhone 14</h2>
                <p class="fs-sm text-light-emphasis mb-sm-4">Apple iPhone 14 128GB Blue</p>
                <a class="btn btn-primary" href="/catalog">
                  From 899 RON
                  <i class="ci-arrow-up-right fs-base ms-1 me-n1"></i>
                </a>
              </div>
              <div class="position-relative z-1 w-100 align-self-end order-sm-1" style="max-width: 416px">
                <div class="ratio rtl-flip" style="--cz-aspect-ratio: calc(320 / 416 * 100%)">
                  <img src="assets/img/shop/electronics/banners/iphone-1.png" alt="iPhone 14">
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-5">
            <div class="position-relative d-flex flex-column align-items-center justify-content-between h-100 rounded-5 overflow-hidden pt-3">
              <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark rtl-flip" style="background: linear-gradient(90deg, #fdcbf1 0%, #fdcbf1 1%, #ffecfa 100%)"></span>
              <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark rtl-flip" style="background: linear-gradient(90deg, #362131 0%, #322730 100%)"></span>
              <div class="position-relative z-1 text-center pt-3 mx-4">
                <i class="ci-apple text-body-emphasis fs-3 mb-3"></i>
                <p class="fs-sm text-light-emphasis mb-1">Deal of the week</p>
                <h2 class="h3 mb-4">iPad Pro M1</h2>
              </div>
              <a class="position-relative z-1 d-block w-100" href="/catalog">
                <div class="ratio rtl-flip" style="--cz-aspect-ratio: calc(159 / 525 * 100%)">
                  <img src="assets/img/shop/electronics/banners/ipad.png" width="525" alt="iPad">
                </div>
              </a>
            </div>
          </div>
        </div>
      </section>

    </main>

<?php require_once __DIR__ . '/includes/footer.php'; ?>

