<?php
/**
 * Hero Slider Helper
 * Generates the exact HTML structure for the hero slider
 * Based on Cartzilla/home-electronics.html - 100% markup preservation
 * Uses featured products from database
 */

require_once __DIR__ . '/Product.php';
require_once __DIR__ . '/Database.php';

/**
 * Render hero slider with dynamic products
 * @param int $limit - Number of slides (default 3)
 */
function renderHeroSlider($limit = 3) {
    $productObj = new Product();
    $db = Database::getInstance();
    
    // Get featured products (prefer is_featured flag, then products with sale_price)
    $products = $db->fetchAll(
        "SELECT p.*, c.name as category_name, c.slug as category_slug
         FROM products p
         LEFT JOIN categories c ON p.category_id = c.id
         WHERE p.is_active = 1
         ORDER BY 
           CASE WHEN p.is_featured = 1 THEN 0 ELSE 1 END,
           p.featured_order ASC,
           CASE WHEN p.sale_price IS NOT NULL AND p.sale_price < p.price THEN 0 ELSE 1 END,
           p.created_at DESC
         LIMIT ?",
        [$limit]
    );
    
    // If not enough products, pad with existing ones
    if (count($products) < $limit) {
        $allProducts = $productObj->getFeaturedProducts($limit * 2);
        $products = array_slice(array_merge($products, $allProducts), 0, $limit);
    }
    
    // Generate slider HTML
    $html = '<!-- Hero slider -->
      <section class="container pt-4">
        <div class="row">
          <div class="col-lg-9 offset-lg-3">
            <div class="position-relative">
              <span class="position-absolute top-0 start-0 w-100 h-100 rounded-5 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 rounded-5 d-none d-block-dark rtl-flip" style="background: linear-gradient(90deg, #1b273a 0%, #1f2632 100%)"></span>
              <div class="row justify-content-center position-relative z-2">
                <div class="col-xl-5 col-xxl-4 offset-xxl-1 d-flex align-items-center mt-xl-n3">

                  <!-- Text content master slider -->
                  <div class="swiper px-5 pe-xl-0 ps-xxl-0 me-xl-n5" data-swiper=\'{
                    "spaceBetween": 64,
                    "loop": true,
                    "speed": 400,
                    "controlSlider": "#sliderImages",
                    "autoplay": {
                      "delay": 5500,
                      "disableOnInteraction": false
                    },
                    "scrollbar": {
                      "el": ".swiper-scrollbar"
                    }
                  }\'>
                    <div class="swiper-wrapper">';
    
    // Generate slides for text content
    foreach ($products as $index => $product) {
        $productName = htmlspecialchars($product['name']);
        $productSlug = htmlspecialchars($product['slug']);
        $shortDesc = htmlspecialchars($product['short_description'] ?? '');
        
        // Generate subtitle based on product
        $subtitle = $shortDesc;
        if (empty($subtitle)) {
            if ($product['sale_price'] && $product['sale_price'] < $product['price']) {
                $subtitle = 'Oferta săptămânii';
            } else {
                $subtitle = 'Produs nou';
            }
        }
        
        $html .= '<div class="swiper-slide text-center text-xl-start pt-5 py-xl-5">';
        $html .= '<p class="text-body">' . $subtitle . '</p>';
        $html .= '<h2 class="display-4 pb-2 pb-xl-4">' . $productName . '</h2>';
        $html .= '<a class="btn btn-lg btn-primary" href="/produs/' . $productSlug . '">';
        $html .= 'Cumpără acum';
        $html .= '<i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>';
        $html .= '</a>';
        $html .= '</div>';
    }
    
    $html .= '</div>
                  </div>
                </div>

                <div class="col-9 col-sm-7 col-md-6 col-lg-5 col-xl-7">

                  <!-- Binded images (controlled slider) -->
                  <div class="swiper user-select-none" id="sliderImages" data-swiper=\'{
                    "allowTouchMove": false,
                    "loop": true,
                    "effect": "fade",
                    "fadeEffect": {
                      "crossFade": true
                    }
                  }\'>
                    <div class="swiper-wrapper">';
    
    // Generate slides for images
    foreach ($products as $index => $product) {
        $productImage = $product['image'] ?? '/assets/img/home/electronics/hero-slider/0' . ($index + 1) . '.png';
        if (!str_starts_with($productImage, 'http') && !str_starts_with($productImage, '/')) {
            if (str_starts_with($productImage, 'assets/')) {
                $productImage = '/' . $productImage;
            } else {
                $productImage = '/assets/img/shop/electronics/' . $productImage;
            }
        }
        $productName = htmlspecialchars($product['name']);
        
        $html .= '<div class="swiper-slide d-flex justify-content-end">';
        $html .= '<div class="ratio rtl-flip" style="max-width: 495px; --cz-aspect-ratio: calc(537 / 495 * 100%)">';
        $html .= '<img src="' . htmlspecialchars($productImage) . '" alt="' . $productName . '">';
        $html .= '</div>';
        $html .= '</div>';
    }
    
    $html .= '</div>
                  </div>
                </div>
              </div>

              <!-- Scrollbar -->
              <div class="row justify-content-center" data-bs-theme="dark">
                <div class="col-xxl-10">
                  <div class="position-relative mx-5 mx-xxl-0">
                    <div class="swiper-scrollbar mb-4"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>';
    
    return $html;
}
?>

