<?php
include_once 'header.php';

// Include database connection
require_once 'db_connection.php'; 

$alias = isset($_GET['slug']) ? trim($_GET['slug']) : '';
$id = isset($_GET['id']) ? (int)$_GET['id'] : 0;

// Get product data by alias or id with brand information and category
if (!empty($alias)) {
    $sql = "SELECT p.*, b.brand as brand_name, c.category as category_name, c.alias as category_alias FROM products p LEFT JOIN brands b ON p.brand_id = b.id_brands LEFT JOIN category_product cp ON p.id_products = cp.id_product LEFT JOIN categories c ON cp.id_category = c.id_categories WHERE p.product_status = '1' AND p.alias = ? LIMIT 1";
    $stmt = $conn->prepare($sql);
    if (!$stmt) {
        die("Prepare failed: " . $conn->error . " SQL: " . $sql);
    }
    $stmt->bind_param("s", $alias);
} elseif ($id > 0) {
    $sql = "SELECT p.*, b.brand as brand_name, c.category as category_name, c.alias as category_alias FROM products p LEFT JOIN brands b ON p.brand_id = b.id_brands LEFT JOIN category_product cp ON p.id_products = cp.id_product LEFT JOIN categories c ON cp.id_category = c.id_categories WHERE p.product_status = '1' AND p.id_products = ? LIMIT 1";
    $stmt = $conn->prepare($sql);
    if (!$stmt) {
        die("Prepare failed: " . $conn->error . " SQL: " . $sql);
    }
    $stmt->bind_param("i", $id);
} else {
    die("Product not found - no slug or id provided");
}

if (!$stmt->execute()) {
    die("Execute failed: " . $stmt->error);
}

$result = $stmt->get_result();
$product = $result->fetch_assoc();

if (!$product) {
    die("Product not found");
}

// Get the main category (parent category) for breadcrumb
$main_category = null;
if (!empty($product['category_alias'])) {
    // Check if this category has a parent
    $parent_sql = "SELECT c.*, COALESCE(parent_cat.alias, c.alias) as main_alias, COALESCE(parent_cat.category, c.category) as main_category FROM categories c LEFT JOIN categories parent_cat ON c.parent = parent_cat.id_categories WHERE c.alias = ?";
    $parent_stmt = $conn->prepare($parent_sql);
    $parent_stmt->bind_param("s", $product['category_alias']);
    $parent_stmt->execute();
    $parent_result = $parent_stmt->get_result();
    $main_category = $parent_result->fetch_assoc();
}

// Get related products from the same category with brand information
$related_products_sql = "SELECT DISTINCT p.*, b.brand as brand_name FROM products p LEFT JOIN brands b ON p.brand_id = b.id_brands INNER JOIN category_product cp ON p.id_products = cp.id_product INNER JOIN category_product cp2 ON cp2.id_category = cp.id_category WHERE p.product_status = '1' AND cp2.id_product = ? AND p.id_products != ? LIMIT 8";

$stmt_related = $conn->prepare($related_products_sql);
if (!$stmt_related) {
    die("Related products prepare failed: " . $conn->error);
}
$stmt_related->bind_param("ii", $product['id_products'], $product['id_products']);
$stmt_related->execute();
$related_products = $stmt_related->get_result();

$conn->close();

// Set page title
$page_title = htmlspecialchars($product['title']) . " - Indolok";
?>

<script>
document.title = "<?= $page_title ?>";
</script>

<!-- Breadcrumb Section -->
<section class="u-clearfix u-white u-section-breadcrumb" style="padding: 20px 0;">
    <div class="u-clearfix u-sheet">
        <nav style="font-size: 0.9rem; color: #666;">
            <a href="index.php" style="color: #478ac9; text-decoration: none;">Home</a>
            <span style="margin: 0 8px;">›</span>
<?php if ($main_category && !empty($main_category['main_alias'])): ?>
                <a href="solution.php?type=<?= urlencode($main_category['main_alias']) ?>" style="color: #478ac9; text-decoration: none;"><?= htmlspecialchars($main_category['main_category']) ?></a>
            <?php else: ?>
                <a href="solution.php" style="color: #478ac9; text-decoration: none;">Solutions</a>
            <?php endif; ?>
            <span style="margin: 0 8px;">›</span>
            <span style="color: #333;"><?= htmlspecialchars($product['title']) ?></span>
        </nav>
    </div>
</section>

<section class="u-align-center u-clearfix u-white u-section-2" id="sec-f4bb">
    <div class="u-clearfix u-sheet u-valign-middle-lg u-valign-middle-md u-valign-middle-sm u-valign-middle-xl u-sheet-1"><!--product--><!--product_options_json--><!--{"source":"6"}--><!--/product_options_json-->
    <div class="u-container-style u-expanded-width u-product u-shape-rectangle u-product-1" data-products-datasource="site" data-product-id="6">
        <div class="u-container-layout u-valign-bottom-xs u-container-layout-1"><!--product_gallery--><!--options_json--><!--{"maxItems":""}--><!--/options_json-->
        <div class="u-carousel u-expanded-width-xs u-gallery u-layout-thumbnails u-lightbox u-no-transition u-product-control u-show-text-none u-thumbnails-position-bottom u-gallery-1" data-interval="5000" data-u-ride="carousel" id="carousel-f941">
            <div class="u-carousel-inner u-gallery-inner" role="listbox">
                <?php 
                $images = [];
                if (!empty($product['image1'])) $images[] = $product['image1'];
                if (!empty($product['image2'])) $images[] = $product['image2'];
                if (!empty($product['image3'])) $images[] = $product['image3'];
                if (!empty($product['image4'])) $images[] = $product['image4'];
                if (!empty($product['image5'])) $images[] = $product['image5'];
                
                if (empty($images)) $images[] = 'default-product.jpg'; // fallback image
                
                foreach($images as $index => $image): 
                ?>
                <div class="u-carousel-item u-gallery-item <?= $index === 0 ? 'u-active' : '' ?>">
                    <div class="u-back-slide">
                        <img class="u-back-image u-expanded u-image-contain" src="
                    <?= $url ?>cms/uploads/product/<?= $image ?>">
                    </div>
                    <div class="u-over-slide u-over-slide-1">
                        <h3 class="u-gallery-heading"><?= htmlspecialchars($product['title']) ?></h3>
                        <p class="u-gallery-text"><?= htmlspecialchars(substr($product['description'], 0, 100)) ?>...</p>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            <a class="u-carousel-control u-carousel-control-prev u-icon-circle u-opacity u-opacity-70 u-text-grey-60 u-text-hover-grey-75 u-carousel-control-1" href="#carousel-f941" role="button" data-u-slide="prev">
            <span aria-hidden="true">
                <svg viewBox="0 0 477.175 477.175"><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225
    c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path></svg>
            </span>
            <span class="sr-only">
                <svg viewBox="0 0 477.175 477.175"><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225
    c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path></svg>
            </span>
            </a>
            <a class="u-carousel-control u-carousel-control-next u-icon-circle u-opacity u-opacity-70 u-text-grey-60 u-text-hover-grey-75 u-carousel-control-2" href="#carousel-f941" role="button" data-u-slide="next">
            <span aria-hidden="true">
                <svg viewBox="0 0 477.175 477.175"><path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5
    c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z"></path></svg>
            </span>
            <span class="sr-only">
                <svg viewBox="0 0 477.175 477.175"><path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5
    c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z"></path></svg>
            </span>
            </a>
            <ol class="u-carousel-thumbnails u-spacing-20 u-carousel-thumbnails-1">
                <?php foreach($images as $index => $image): ?>
                <li class="u-border-1 u-border-palette-5-base u-carousel-thumbnail u-radius u-carousel-thumbnail-1 <?= $index === 0 ? 'u-active' : '' ?>" data-u-target="#carousel-f941" data-u-slide-to="<?= $index ?>">
                    <img class="u-carousel-thumbnail-image u-image" src="
                    <?= $url ?>cms/uploads/product/<?= $image ?>">
                </li>
                <?php endforeach; ?>
            </ol>
        </div><!--/product_gallery--><!--product_title-->
        <h2 class="u-product-control u-text u-text-custom-color-1 u-text-1"><?= htmlspecialchars($product['title']) ?></h2><!--/product_title-->
        
        <!--product_content-->
        <div class="u-custom-font u-product-control u-product-desc u-text u-text-2"><?= $product['description'] ?></div><!--/product_content-->
        
        <!-- Product Info Bar -->
        <div class="product-info-bar u-text-4" style="padding: 20px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #478ac9;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; font-size: 0.9rem;">
                <?php if (!empty($product['sku'])): ?>
                <div>
                    <strong style="color: #478ac9;">SKU:</strong><br>
                    <span style="color: #666;"><?= htmlspecialchars($product['sku']) ?></span>
                </div>
                <?php endif; ?>
                
                <?php if (!empty($product['brand']) || !empty($product['brand_name'])): ?>
                <div>
                    <strong style="color: #478ac9;">Brand:</strong><br>
                    <span style="color: #666;"><?= htmlspecialchars($product['brand_name'] ?? $product['brand'] ?? 'N/A') ?></span>
                </div>
                <?php endif; ?>
                
                <!-- <div>
                    <strong style="color: #478ac9;">Product Name:</strong><br>
                    <span style="color: #666;"><?= htmlspecialchars($product['product']) ?></span>
                </div> -->
            </div>
        </div>
        <?php if (!empty($product['specifications'])): ?>
        <div class="u-heading-font u-text u-text-3">
            <h4 style="color: #478ac9; margin-bottom: 15px;">Specifications:</h4>
            <?= nl2br(htmlspecialchars($product['specifications'])) ?>
        </div>
        <?php endif; ?>
        
        <?php if (!empty($product['features'])): ?>
        <div class="u-heading-font u-text u-text-4" style="margin-top: 20px;">
            <h4 style="color: #478ac9; margin-bottom: 15px;">Features:</h4>
            <?= nl2br(htmlspecialchars($product['features'])) ?>
        </div>
        <?php endif; ?>
        
        <?php if (!empty($product['long_description'])): ?>
        <div class="u-heading-font u-text u-text-5" style="margin-top: 30px;">
            <h4 style="color: #478ac9; margin-bottom: 15px; font-size: 1.25rem; font-weight: 600;">Spesifikasi</h4>
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #478ac9; line-height: 1.6;">
                <?php
                $content = $product['long_description'];
                // Replace common problematic characters
                $content = str_replace(['�', '?'], '•', $content);
                // Ensure proper UTF-8 encoding
                $content = mb_convert_encoding($content, 'UTF-8', 'auto');
                echo $content;
                ?>
            </div>
        </div>
        <?php endif; ?>
        
        </div>
    </div><!--/product-->
    </div>
</section>

<!-- Related Products Section -->
<?php if ($related_products && $related_products->num_rows > 0): ?>
<section class="u-align-center u-clearfix u-container-align-center u-custom-color-10 u-section-3" id="related-products" style="display:none">
  <div class="industryDetailBoxes u-clearfix u-sheet u-valign-middle u-sheet-1">
    <h2 class="u-align-center u-custom-font u-text u-text-1" style="font-family: Poppins;
    font-size: 1.875rem;
    font-weight: 500;
    width: 100%;
    text-align:center;
    margin: 60px auto 20px; color:#1d4c78 !important">Related Products</h2>
    
    <div class="u-expanded-width u-layout-grid u-list u-list-1 productsSection">
      <div class="u-repeater u-repeater-1">
        <?php while($related = $related_products->fetch_assoc()): ?>
          <div class="u-align-center u-container-style u-list-item u-repeater-item u-white" style="margin-bottom: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden;">
            <div class="u-container-layout u-similar-container u-valign-top" style="padding: 0;">
              <?php if (!empty($related['image1'])): ?>
                <div style="position: relative; overflow: hidden; border-radius: 12px 12px 0 0;">
                  <a href="product-detail.php?slug=<?= $related['alias'] ?>">
                    <img class="u-image u-image-default" src="cms/uploads/products/<?= $related['image1'] ?>" alt="<?= $related['product'] ?>" 
                         style="width: 100%; height: 200px; object-fit: cover; transition: transform 0.3s ease;">
                  </a>
                  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(71,138,201,0.1) 0%, rgba(71,138,201,0.05) 100%);"></div>
                </div>
              <?php endif; ?>
              
              <div style="padding: 20px 15px;">
                <h4 class="u-align-left u-custom-font u-text u-text-custom-color-5" 
                    style="margin: 0 0 12px 0; font-size: 1.1rem; font-weight: 600; line-height: 1.3;">
                  <a href="product-detail.php?slug=<?= $related['alias'] ?>" 
                     style="text-decoration: none; color: #478ac9; transition: color 0.3s ease; display: block;">
                    <?= htmlspecialchars($related['title']) ?>
                    <span style="float: right; color: #478ac9; font-size: 1rem; transition: transform 0.3s ease;">›</span>
                  </a>
                </h4>
                
                <div class="u-card-description" style="margin-top: 10px;">
                  <p style="color: #666; line-height: 1.5; margin: 0; font-size: 0.85rem; text-align: left;">
                    <?= !empty($related['description']) ? (strlen($related['description']) > 80 ? substr($related['description'], 0, 80) . '...' : $related['description']) : 'Professional product solution.' ?>
                  </p>
                </div>
                
                <?php if (!empty($related['brand']) || !empty($related['brand_name'])): ?>
                <div style="margin-top: 10px; font-size: 0.8rem; color: #888;">
                  <strong>Brand:</strong> <?= htmlspecialchars($related['brand_name'] ?? $related['brand'] ?? 'N/A') ?>
                </div>
                <?php endif; ?>
                
                <div style="margin-top: 15px; padding-top: 12px; border-top: 1px solid #f0f0f0;">
                  <a href="product-detail.php?slug=<?= $related['alias'] ?>" 
                     style="display: inline-flex; align-items: center; color: #478ac9; font-weight: 500; text-decoration: none; font-size: 0.85rem; transition: color 0.3s ease;">
                    View Details 
                    <svg style="margin-left: 6px; width: 14px; height: 14px; transition: transform 0.3s ease;" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        <?php endwhile; ?>
      </div>
    </div>
  </div>
</section>
<?php endif; ?>

<style>
/* Related Products Hover Effects */
#related-products .u-list-item:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
}

#related-products .u-list-item:hover img {
  transform: scale(1.05) !important;
}

#related-products .u-list-item:hover h4 a span {
  transform: translateX(5px) !important;
}

#related-products .u-list-item:hover a[href*="View Details"] svg {
  transform: translateX(3px) !important;
}

#related-products .u-list-item h4 a:hover {
  color: #2c5aa0 !important;
}

#related-products .u-list-item a[href*="View Details"]:hover {
  color: #2c5aa0 !important;
}

/* Grid layout for related products */
#related-products .u-layout-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
  padding: 20px 0 !important;
}

#related-products .u-repeater-1 {
  display: contents !important;
}

/* Responsive grid adjustments */
@media (max-width: 1400px) {
  #related-products .u-layout-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 1024px) {
  #related-products .u-layout-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  #related-products .u-layout-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
  }
  
  #related-products .u-list-item {
    margin-bottom: 20px !important;
  }
  
  #related-products .u-list-item img {
    height: 160px !important;
  }
}

@media (max-width: 480px) {
  #related-products .u-layout-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Product Info Bar Responsive Adjustments */
.product-info-bar {
  clear: both;
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  .product-info-bar {
    margin-top: 30px !important;
  }
}

@media (max-width: 767px) {
  .product-info-bar {
    margin: 20px 0 !important;
    padding: 15px !important;
  }
  
  .product-info-bar > div {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (max-width: 575px) {
  .product-info-bar {
    margin: 15px 0 !important;
    padding: 12px !important;
  }
}
</style>

<?php include_once 'footer.php'; ?>