<?php
// Učitavanje neophodnih komponenti
require_once 'includes/config.php';
require_once 'includes/db.php';
require_once 'includes/functions.php';
require_once 'includes/product_functions.php';

// Dohvatanje URL parametra proizvoda
$product_slug = isset($_GET['slug']) ? clean_slug($_GET['slug']) : '';

// Redirekcija ako slug nije pronađen
if (empty($product_slug)) {
    header('Location: /');
    exit;
}

// Dohvatanje podataka o proizvodu
$product = get_product_by_slug($product_slug);

// Prikazivanje 404 stranice ako proizvod ne postoji
if (!$product) {
    http_response_code(404);
    include '404.php';
    exit;
}

// Dohvatanje dodatnih podataka o proizvodu
$product_images = get_product_images($product['id']);
$product_categories = get_product_categories($product['id']);
$product_reviews = get_product_reviews($product['id'], 'approved');
$product_faqs = get_product_faqs($product['id']);
$related_products = get_related_products($product['id'], 4);
$frequently_bought_together = get_frequently_bought_together($product['id'], 3);
$shipping_methods = get_shipping_methods();
$payment_methods = get_payment_methods();

// Kalkulacija podataka o proizvodu
$avg_rating = calculate_average_rating($product);
$discount_percent = calculate_discount_percent($product);
$rating_distribution = get_rating_distribution($product['id']);
$stock_status = get_product_stock_status($product);
$recent_sales = get_recent_product_sales($product['id']);

// Optimizacija meta podataka za SEO
$meta_title = generate_product_meta_title($product, $product_categories);
$meta_description = generate_product_meta_description($product, $discount_percent);
$canonical_url = get_canonical_product_url($product_slug);
$meta_keywords = generate_product_keywords($product, $product_categories);

// Breadcrumb hijerarhija
$breadcrumb_hierarchy = generate_breadcrumb_hierarchy($product, $product_categories);

// Strukturirani podaci za SEO
$structured_data = generate_product_structured_data(
    $product, 
    $product_images, 
    $product_reviews, 
    $avg_rating, 
    isset($product['specifications']) ? json_decode($product['specifications'], true) : []
);

// SEO podatke prenosi kroz podatke stranice
$page_data = [
    'title' => $meta_title,
    'description' => $meta_description,
    'keywords' => $meta_keywords,
    'canonical' => $canonical_url,
    'og_image' => !empty($product_images) ? UPLOADS_URL . '/products/' . $product_images[0]['image'] : '',
    'product' => $product,
    'structured_data' => $structured_data
];

// Učitavanje headera sa meta podacima
include 'includes/header.php';
?>

<!-- CSS za centriranje modala -->
<style>
    /* Centriranje modala */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        overflow: hidden;
    }

    .modal.active {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-content {
        position: relative;
        width: 90%;
        max-width: 600px;
        margin: auto;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        overflow: auto;
        max-height: 90vh;
    }

    .zoom-content {
        background-color: transparent;
        box-shadow: none;
        max-width: 80%;
        max-height: 80vh;
        overflow: visible;
    }

    /* Stil za polje uploada */
    .custom-file {
        position: relative;
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .custom-file-input {
        position: relative;
        z-index: 2;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        margin: 0;
        opacity: 0;
    }

    .custom-file-label {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .text-muted {
        color: #6c757d;
        font-size: 0.875em;
    }

    .mt-2 {
        margin-top: 0.5rem;
    }
</style>

<!-- Strukturirani podaci za proizvod (JSON-LD) -->
<script type="application/ld+json">
    <?php echo json_encode($structured_data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT); ?>
</script>

<!-- Breadcrumb navigacija -->
<div class="breadcrumbs-wrapper" aria-label="Navigacija">
    <div class="container">
        <nav class="breadcrumbs" aria-label="Breadcrumb">
            <ol itemscope itemtype="https://schema.org/BreadcrumbList">
                <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                    <a href="/" itemprop="item"><span itemprop="name">Početna</span></a>
                    <meta itemprop="position" content="1" />
                </li>
                <?php foreach($breadcrumb_hierarchy as $index => $item): ?>
                <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                    <a href="<?php echo $item['url']; ?>" itemprop="item">
                        <span itemprop="name"><?php echo htmlspecialchars($item['name']); ?></span>
                    </a>
                    <meta itemprop="position" content="<?php echo $index + 2; ?>" />
                </li>
                <?php endforeach; ?>
                <li class="current-page" aria-current="page"><?php echo htmlspecialchars($product['name']); ?></li>
            </ol>
            
            <!-- Povratak na kategoriju -->
            <?php if(!empty($breadcrumb_hierarchy)): ?>
            <a href="<?php echo $breadcrumb_hierarchy[count($breadcrumb_hierarchy)-1]['url']; ?>" class="back-to-category">
                <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                Nazad na <?php echo $breadcrumb_hierarchy[count($breadcrumb_hierarchy)-1]['name']; ?>
            </a>
            <?php endif; ?>
        </nav>
    </div>
</div>

<!-- Glavni sadržaj proizvoda -->
<div class="product-container">
    <div class="container">
        <!-- Glavni prikaz proizvoda -->
        <div class="product-main-wrapper">
            <!-- Galerija proizvoda -->
            <div class="product-gallery-section">
                <!-- Oznaka popusta ako postoji -->
                <?php if($discount_percent > 0): ?>
                <div class="discount-badge" aria-label="Popust <?php echo $discount_percent; ?>%">
                    <span>-<?php echo $discount_percent; ?>%</span>
                </div>
                <?php endif; ?>
                
                <!-- Oznaka dostupnosti -->
                <div class="stock-indicator <?php echo $stock_status['class']; ?>">
                    <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    <span><?php echo $stock_status['label']; ?></span>
                </div>
                
                <!-- Glavna slika proizvoda -->
                <div class="main-image-container">
                    <img id="main-product-image" 
                         src="<?php echo UPLOADS_URL . '/products/' . $product_images[0]['image']; ?>" 
                         alt="<?php echo htmlspecialchars($product_images[0]['alt_text'] ?? $product['name']); ?>"
                         data-zoom-src="<?php echo UPLOADS_URL . '/products/large/' . $product_images[0]['image']; ?>"
                         width="600" height="600" loading="eager" />
                         
                    <!-- Kontrola za uvećanje slike -->
                    <button type="button" class="image-zoom-trigger" aria-label="Uvećaj sliku" data-trigger="zoom">
                        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
                    </button>
                </div>
                
                <!-- Thumbnail galerija -->
                <?php if(count($product_images) > 1): ?>
                <div class="product-thumbnails" role="list" aria-label="Galerija slika proizvoda">
                    <?php foreach($product_images as $index => $image): ?>
                    <button type="button" 
                            class="thumbnail <?php echo $index === 0 ? 'active' : ''; ?>" 
                            data-image="<?php echo UPLOADS_URL . '/products/' . $image['image']; ?>"
                            data-zoom-src="<?php echo UPLOADS_URL . '/products/large/' . $image['image']; ?>"
                            data-index="<?php echo $index; ?>"
                            aria-label="Slika <?php echo $index + 1; ?> od <?php echo count($product_images); ?>">
                        <img src="<?php echo UPLOADS_URL . '/products/thumbs/' . $image['image']; ?>" 
                             alt="<?php echo htmlspecialchars($image['alt_text'] ?? 'Thumbnail ' . ($index + 1) . ' - ' . $product['name']); ?>"
                             width="80" height="80" loading="lazy" />
                    </button>
                    <?php endforeach; ?>
                </div>
                <?php endif; ?>
                
                <!-- 360° pregled ako postoji -->
                <?php if(isset($product['has_360']) && $product['has_360']): ?>
                <button type="button" class="view-360-button" data-product-id="<?php echo $product['id']; ?>">
                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
                    Pogledaj 360° pregled
                </button>
                <?php endif; ?>
            </div>
            
            <!-- Informacije o proizvodu -->
            <div class="product-info-section">
                <!-- Brend i šifra proizvoda -->
                <div class="product-brand-section">
                    <div class="product-brand">
                        <img src="/uploads/hugong-logo.png" alt="Hugong" width="120" height="40" loading="lazy">
                    </div>
                    <div class="product-sku" style="padding-left: 25px;">
                        <span>Šifra proizvoda:</span> <?php echo $product['sku']; ?>
                    </div>
                </div>
                
                <!-- Naslov proizvoda -->
                <h1 class="product-title"><?php echo htmlspecialchars($product['name']); ?></h1>
                
                <!-- Ocena proizvoda i recenzije -->
                <div class="product-rating-section">
                    <?php if($product['rating_count'] > 0): ?>
                    <div class="product-rating">
                        <div class="stars" aria-label="Ocena <?php echo number_format($avg_rating, 1); ?> od 5">
                            <?php for($i = 1; $i <= 5; $i++): ?>
                            <span class="star <?php echo $i <= round($avg_rating) ? 'filled' : ''; ?>">&#9733;</span>
                            <?php endfor; ?>
                        </div>
                        <div class="rating-text">
                            <strong><?php echo number_format($avg_rating, 1); ?></strong>/5
                            <span class="rating-count">(<?php echo $product['rating_count']; ?> <?php echo get_review_text($product['rating_count']); ?>)</span>
                            <a href="#reviews" class="scroll-to-reviews">Pogledaj recenzije</a>
                        </div>
                    </div>
                    <?php else: ?>
                    <div class="no-reviews">
                        <a href="#" class="be-first-review">Budite prvi koji će oceniti ovaj proizvod</a>
                    </div>
                    <?php endif; ?>
                    
                    <!-- Nedavno kupljeno -->
                    <?php if(!empty($recent_sales)): ?>
                    <div class="recent-sales-indicator">
                        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        <span><?php echo $recent_sales; ?> <?php echo (int)$recent_sales === 1 ? 'osoba je kupila' : 'osoba su razmatrale kupovinu'; ?> ovog proizvoda u poslednja 24h</span>
                    </div>
                    <?php endif; ?>
                </div>
                
                <!-- Ključne karakteristike -->
                <div class="key-features">
                    <h2 class="section-subtitle">Ključne karakteristike:</h2>
                    <ul class="features-list">
                        <?php 
                        if (isset($product['features'])):
                            $features = explode("\n", $product['features']);
                            foreach(array_slice($features, 0, 5) as $feature): 
                                if(trim($feature)):
                        ?>
                        <li><?php echo trim($feature); ?></li>
                        <?php 
                                endif;
                            endforeach;
                        endif;
                        ?>
                    </ul>
                </div>
                
                <!-- Trust elementi -->
                <div class="value-propositions">
                    <!-- Dostupnost proizvoda -->
                    <div class="value-item <?php echo $stock_status['class']; ?>">
                        <div class="value-icon">
                            <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <?php if($stock_status['available']): ?>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                <?php else: ?>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                <?php endif; ?>
                            </svg>
                        </div>
                        <div class="value-text">
                            <strong><?php echo $stock_status['label']; ?></strong>
                            <?php if($stock_status['limited']): ?>
                            <span class="limited-stock-count">Još samo <?php echo $stock_status['count']; ?> <?php echo $stock_status['count'] == 1 ? 'komad' : ($stock_status['count'] < 5 ? 'komada' : 'komada'); ?> na stanju!</span>
                            <?php endif; ?>
                        </div>
                    </div>
                    
                    <!-- Garancija 25 meseci -->
                    <div class="value-item warranty">
                        <div class="value-icon">
                            <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                        </div>
                        <div class="value-text">
                            <strong>25 meseci garancije</strong>
                            <p>Pogledajte detaljnije ispod u odeljku Garancija</p>
                        </div>
                    </div>
                    
                    <!-- Besplatna isporuka -->
                    <div class="value-item free-shipping">
                        <div class="value-icon">
                            <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path></svg>
                        </div>
                        <div class="value-text">
                            <strong>Besplatna isporuka</strong>
                            <span><br>Za sve porudžbine</span>
                        </div>
                    </div>
                    
                    <!-- Garancija najniže cene -->
                    <div class="value-item price-match">
                        <div class="value-icon">
                            <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        </div>
                        <div class="value-text">
                            <strong>Garantovano najniža cena</strong>
                            <a href="#" class="price-match-trigger" data-product-id="<?php echo $product['id']; ?>">Našli ste jeftinije?</a>
                        </div>
                    </div>
                </div>
                
                <!-- Cena i akcije -->
                <div class="product-price-section">
                    <?php if(!empty($product['sale_price'])): ?>
                    <div class="price-wrapper sale">
                        <div class="current-price" data-price="<?php echo $product['sale_price']; ?>"><?php echo number_format($product['sale_price'], 0, ',', '.'); ?> RSD</div>
                        <div class="old-price"><?php echo number_format($product['price'], 0, ',', '.'); ?> RSD</div>
                        <div class="discount-badge">-<?php echo $discount_percent; ?>%</div>
                        
                        <!-- Timer za akciju ako postoji -->
                        <?php if(isset($product['sale_ends_at']) && strtotime($product['sale_ends_at']) > time()): ?>
                        <div class="sale-countdown" data-ends="<?php echo $product['sale_ends_at']; ?>">
                            <div class="countdown-label">Akcija ističe za:</div>
                            <div class="countdown-timer">
                                <span class="days">00</span>d
                                <span class="hours">00</span>h
                                <span class="minutes">00</span>m
                                <span class="seconds">00</span>s
                            </div>
                        </div>
                        <?php endif; ?>
                    </div>
                    <?php else: ?>
                    <div class="price-wrapper">
                        <div class="current-price" data-price="<?php echo $product['price']; ?>"><?php echo number_format($product['price'], 0, ',', '.'); ?> RSD</div>
                    </div>
                    <?php endif; ?>
                    
                    <!-- Plaćanje na rate -->
                    <?php 
                    $current_price = !empty($product['sale_price']) ? $product['sale_price'] : $product['price'];
                    if($current_price >= 5000):
                    ?>
                    <div class="installment-options">
                        <div class="installment-badge">
                            <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
                            <span>Plaćanje na rate</span>
                        </div>
                        
                        <div class="installment-info">
                            <span class="installment-amount">
                                <strong>Od <?php echo number_format(ceil($current_price / 12), 0, ',', '.'); ?> RSD</strong> mesečno
                            </span>
                            <a href="#" id="payment-options-trigger" class="toggle-details" data-price="<?php echo $current_price; ?>">
                                Opcije plaćanja <svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                            </a>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
                
                <!-- Količina i kupovina -->
                <div class="product-purchase-section">
                    <div class="quantity-selector">
                        <label for="quantity">Količina:</label>
                        <div class="quantity-controls">
                            <button type="button" class="quantity-btn minus" aria-label="Smanji količinu">-</button>
                            <input type="number" id="quantity" name="quantity" value="1" min="1" max="<?php echo $stock_status['count']; ?>" aria-label="Količina">
                            <button type="button" class="quantity-btn plus" aria-label="Povećaj količinu">+</button>
                        </div>
                    </div>
                    
                    <!-- Dugmići za kupovinu -->
                    <div class="purchase-buttons">
                        <button type="button" id="add-to-cart-btn" class="add-to-cart-button" 
                                data-product-id="<?php echo $product['id']; ?>"
                                <?php echo !$stock_status['available'] ? 'disabled' : ''; ?>>
                            <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                            Dodaj u korpu
                        </button>
                        <button type="button" id="buy-now-btn" class="buy-now-button" 
                                data-product-id="<?php echo $product['id']; ?>"
                                <?php echo !$stock_status['available'] ? 'disabled' : ''; ?>>
                            <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                            Kupi odmah
                        </button>
                    </div>
                </div>
                
                <!-- Dodatne opcije -->
                <div class="product-action-links">
                    <button type="button" class="action-link add-to-wishlist" data-product-id="<?php echo $product['id']; ?>">
                        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                        Dodaj u listu želja
                    </button>
                    <button type="button" class="action-link ask-question" data-product-id="<?php echo $product['id']; ?>">
                        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        Postavi pitanje
                    </button>
                    <button type="button" class="action-link share-product">
                        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path></svg>
                        Podeli proizvod
                    </button>
                </div>
                
                <!-- Opcije isporuke -->
                <div class="shipping-options">
                    <h3 class="section-subtitle">Opcije isporuke:</h3>
                    <div class="shipping-option">
                        <div class="option-icon">
                            <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path></svg>
                        </div>
                        <div class="option-text">
                            <strong>Besplatna dostava</strong> Isporuka u roku od 1-3 radna dana
                        </div>
                    </div>
                    <div class="shipping-option">
                        <div class="option-icon">
                            <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                        </div>
                        <div class="option-text">
                            <strong>Lično preuzimanje</strong> Oskara Daviča 2, Kragujevac (Pon-Pet: 08-16h, Sub: 08-12h)
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Često se kupuje zajedno -->
        <?php if(!empty($frequently_bought_together)): ?>
        <div class="frequently-bought-together">
            <h2 class="section-title">Često se kupuje zajedno</h2>
            
            <div class="fbt-products">
                <!-- Trenutni proizvod -->
                <div class="fbt-product current-product">
                    <div class="fbt-product-image">
                        <img src="<?php echo UPLOADS_URL . '/products/thumbs/' . $product_images[0]['image']; ?>" 
                             alt="<?php echo htmlspecialchars($product['name']); ?>"
                             width="100" height="100" loading="lazy" />
                    </div>
                    <div class="fbt-product-info">
                        <div class="fbt-product-name">
                            <span class="fbt-this-product">Ovaj proizvod:</span> 
                            <?php echo substr($product['name'], 0, 40) . (strlen($product['name']) > 40 ? '...' : ''); ?>
                        </div>
                        <div class="fbt-product-price">
                            <?php echo number_format(!empty($product['sale_price']) ? $product['sale_price'] : $product['price'], 0, ',', '.'); ?> RSD
                        </div>
                    </div>
                </div>
                
                <!-- Plus znak -->
                <div class="fbt-plus">+</div>
                
                <!-- Povezani proizvodi -->
                <?php foreach($frequently_bought_together as $index => $fbt_product): ?>
                <div class="fbt-product">
                    <div class="fbt-checkbox">
                        <input type="checkbox" id="fbt-product-<?php echo $fbt_product['id']; ?>" 
                               name="fbt_products[]" 
                               value="<?php echo $fbt_product['id']; ?>"
                               checked>
                        <label for="fbt-product-<?php echo $fbt_product['id']; ?>" class="custom-checkbox"></label>
                    </div>
                    <div class="fbt-product-image">
                        <a href="/<?php echo $fbt_product['slug']; ?>">
                            <img src="<?php echo UPLOADS_URL . '/products/thumbs/' . $fbt_product['image']; ?>" 
                                 alt="<?php echo htmlspecialchars($fbt_product['name']); ?>"
                                 width="100" height="100" loading="lazy" />
                        </a>
                    </div>
                    <div class="fbt-product-info">
                        <div class="fbt-product-name">
                            <a href="/<?php echo $fbt_product['slug']; ?>">
                                <?php echo substr($fbt_product['name'], 0, 40) . (strlen($fbt_product['name']) > 40 ? '...' : ''); ?>
                            </a>
                        </div>
                        <div class="fbt-product-price">
                            <?php echo number_format(!empty($fbt_product['sale_price']) ? $fbt_product['sale_price'] : $fbt_product['price'], 0, ',', '.'); ?> RSD
                        </div>
                    </div>
                </div>
                
                <?php if($index < count($frequently_bought_together) - 1): ?>
                <div class="fbt-plus">+</div>
                <?php endif; ?>
                <?php endforeach; ?>
                
                <!-- Ukupna cena i dugme za dodavanje -->
                <div class="fbt-total">
                    <div class="fbt-total-info">
                        <span>Ukupna cena:</span>
                        <div class="fbt-total-price" id="fbt-total-amount">
                            <?php echo number_format(calculate_fbt_total($product, $frequently_bought_together), 0, ',', '.'); ?> RSD
                        </div>
                        <div class="fbt-savings">Ušteda: <span id="fbt-save-amount">5.000 RSD</span></div>
                    </div>
                    <button type="button" id="add-all-to-cart" class="btn-add-all">
                        <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                        Dodaj sve u korpu
                    </button>
                </div>
            </div>
        </div>
        <?php endif; ?>
        
        <!-- Tabovi sa sadržajem -->
        <div class="product-tabs-section">
            <div class="tabs-nav" role="tablist">
                <button type="button" class="tab-btn active" id="tab-description-btn" 
                        data-tab="tab-description" role="tab" aria-selected="true" 
                        aria-controls="tab-description">
                    Opis proizvoda
                </button>
                <button type="button" class="tab-btn" id="tab-specifications-btn" 
                        data-tab="tab-specifications" role="tab" aria-selected="false" 
                        aria-controls="tab-specifications">
                    Specifikacije
                </button>
                <button type="button" class="tab-btn" id="tab-reviews-btn" 
                        data-tab="tab-reviews" role="tab" aria-selected="false" 
                        aria-controls="tab-reviews">
                    Recenzije (<?php echo $product['rating_count']; ?>)
                </button>
                <button type="button" class="tab-btn" id="tab-faq-btn" 
                        data-tab="tab-faq" role="tab" aria-selected="false" 
                        aria-controls="tab-faq">
                    Česta pitanja
                </button>
                <button type="button" class="tab-btn" id="tab-warranty-btn" 
                        data-tab="tab-warranty" role="tab" aria-selected="false" 
                        aria-controls="tab-warranty">
                    Garancija
                </button>
            </div>
            
            <div class="tabs-content">
                <!-- Opis proizvoda Tab -->
                <div id="tab-description" class="tab-content active" role="tabpanel" aria-labelledby="tab-description-btn">
                    <div class="tab-content-inner formatted-content">
                        <?php echo $product['description']; ?>
                    </div>
                </div>
                
                <!-- Specifikacije Tab -->
                <div id="tab-specifications" class="tab-content" role="tabpanel" aria-labelledby="tab-specifications-btn">
                    <div class="tab-content-inner">
                        <?php if(isset($product['specifications']) && !empty($product_specifications = json_decode($product['specifications'], true))): ?>
                        <table class="specifications-table">
                            <caption class="sr-only">Tehničke specifikacije za <?php echo htmlspecialchars($product['name']); ?></caption>
                            <tbody>
                                <?php foreach($product_specifications as $spec): ?>
                                <tr>
                                    <th scope="row"><?php echo htmlspecialchars($spec['name']); ?></th>
                                    <td><?php echo htmlspecialchars($spec['value']); ?></td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                        <?php else: ?>
                        <p class="no-data">Tehničke specifikacije za ovaj proizvod trenutno nisu dostupne.</p>
                        <?php endif; ?>
                    </div>
                </div>
                
                <!-- Recenzije Tab -->
                <div id="tab-reviews" class="tab-content" role="tabpanel" aria-labelledby="tab-reviews-btn" id="reviews">
                    <div class="tab-content-inner">
                        <!-- Pregled ocena -->
                        <div class="reviews-summary">
                            <div class="rating-average">
                                <div class="big-rating"><?php echo number_format($avg_rating, 1); ?></div>
                                <div class="rating-stars">
                                    <?php for($i = 1; $i <= 5; $i++): ?>
                                    <span class="star <?php echo $i <= round($avg_rating) ? 'filled' : ''; ?>">&#9733;</span>
                                    <?php endfor; ?>
                                </div>
                                <div class="rating-count"><?php echo $product['rating_count']; ?> <?php echo get_review_text($product['rating_count']); ?></div>
                            </div>
                            
                            <!-- Distribucija ocena -->
                            <div class="rating-breakdown">
                                <?php for($i = 5; $i >= 1; $i--): 
                                    $percentage = $product['rating_count'] > 0 ? 
                                                ($rating_distribution[$i] / $product['rating_count']) * 100 : 0;
                                ?>
                                <div class="rating-bar">
                                    <div class="rating-label"><?php echo $i; ?> &#9733;</div>
                                    <div class="progress-bar">
                                        <div class="progress" style="width: <?php echo $percentage; ?>%"></div>
                                    </div>
                                    <div class="rating-percent"><?php echo round($percentage); ?>%</div>
                                </div>
                                <?php endfor; ?>
                            </div>
                            
                            <!-- CTA za ostavljanje recenzije -->
                            <div class="write-review">
                                <button type="button" id="write-review-btn" class="btn-write-review">Napišite recenziju</button>
                            </div>
                        </div>
                        
                        <!-- Forma za recenzije - podrazumevano sakrivena -->
                        <div id="review-form-container" style="display: none;">
                            <h3>Ocenite ovaj proizvod</h3>
                            
                            <?php if(is_logged_in()): ?>
                            <form id="review-form" action="/ajax/submit-review.php" method="post">
                                <input type="hidden" name="product_id" value="<?php echo $product['id']; ?>">
                                    <?php echo csrf_token_field(); ?>

                                
                                <div class="form-group">
                                    <label for="rating">Vaša ocena</label>
                                    <div class="rating-input">
                                        <?php for($i = 5; $i >= 1; $i--): ?>
                                        <input type="radio" id="star<?php echo $i; ?>" name="rating" value="<?php echo $i; ?>" <?php echo $i == 5 ? 'checked' : ''; ?>>
                                        <label for="star<?php echo $i; ?>" aria-label="<?php echo $i; ?> zvezdica" title="<?php echo $i; ?> zvezdica">&#9733;</label>
                                        <?php endfor; ?>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label for="review-title">Naslov recenzije</label>
                                    <input type="text" id="review-title" name="title" placeholder="Ukratko opišite vaše iskustvo" required>
                                </div>
                                
                                <div class="form-group">
                                    <label for="review-comment">Vaš komentar</label>
                                    <textarea id="review-comment" name="comment" rows="5" placeholder="Opišite šta vam se sviđa ili ne sviđa u vezi proizvoda" required></textarea>
                                </div>
                                
                                <div class="form-group">
                                    <div class="form-checkbox">
                                        <input type="checkbox" id="review-consent" name="consent" required>
                                        <label for="review-consent">Potvrđujem da je ova recenzija zasnovana na ličnom iskustvu i da nemam lični ili poslovni interes u ovom proizvodu</label>
                                    </div>
                                </div>
                                
                                <div class="form-actions">
                                    <button type="button" id="cancel-review" class="btn-cancel">Odustani</button>
                                    <button type="submit" class="btn-submit">Pošalji recenziju</button>
                                </div>
                            </form>
                            <?php else: ?>
                            <div class="login-prompt">
                                <p>Morate biti prijavljeni da biste ostavili recenziju.</p>
                                <a href="/login.php?redirect=<?php echo urlencode($_SERVER['REQUEST_URI'] . '#reviews'); ?>" class="btn-primary">Prijavite se</a>
                            </div>
                            <?php endif; ?>
                        </div>
                        
                        <!-- Lista recenzija -->
                        <?php if(!empty($product_reviews)): ?>
                        <div class="reviews-list">
                            <?php foreach($product_reviews as $review): ?>
                            <div class="review-item">
                                <div class="review-header">
                                    <div class="reviewer-info">
                                        <div class="reviewer-name"><?php echo htmlspecialchars($review['name'] ?? $review['user_name']); ?></div>
                                        <div class="verified-badge" <?php echo isset($review['verified_purchase']) && $review['verified_purchase'] ? '' : 'style="display:none;"'; ?>>
                                            <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                            Verifikovana kupovina
                                        </div>
                                    </div>
                                    <div class="review-date"><?php echo date('d.m.Y.', strtotime($review['created_at'])); ?></div>
                                </div>
                                
                                <div class="review-rating" aria-label="Ocena: <?php echo $review['rating']; ?> od 5">
                                    <?php for($i = 1; $i <= 5; $i++): ?>
                                    <span class="star <?php echo $i <= $review['rating'] ? 'filled' : ''; ?>">&#9733;</span>
                                    <?php endfor; ?>
                                </div>
                                
                                <?php if(!empty($review['title'])): ?>
                                <h4 class="review-title"><?php echo htmlspecialchars($review['title']); ?></h4>
                                <?php endif; ?>
                                
                                <div class="review-content">
                                    <?php echo nl2br(htmlspecialchars($review['comment'])); ?>
                                </div>
                                
                                <div class="review-footer">
                                    <button type="button" class="btn-helpful" data-review-id="<?php echo $review['id']; ?>">
                                        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017a2 2 0 01-1.386-.53l-4.26-3.839M7 18H3a2 2 0 01-2-2V9.372a2 2 0 01.51-1.326l5-4.764A2 2 0 018.49 3h2.146c.31 0 .615.088.879.253l1.483.934A5 5 0 0115.5 5h5a2 2 0 011.936 2.479"></path></svg>
                                        Korisno (<span class="helpful-count"><?php echo $review['helpful_count'] ?? 0; ?></span>)
                                    </button>
                                </div>
                            </div>
                            <?php endforeach; ?>
                        </div>
                        
                        <?php if(count($product_reviews) > 5): ?>
                        <div class="reviews-pagination">
                            <a href="/recenzije/<?php echo $product_slug; ?>" class="btn-all-reviews">Pogledajte sve recenzije</a>
                        </div>
                        <?php endif; ?>
                        <?php else: ?>
                        <div class="no-reviews">
                            <p>Još uvek nema recenzija za ovaj proizvod. Budite prvi koji će podeliti svoje iskustvo.</p>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
                
                <!-- FAQ Tab -->
                <div id="tab-faq" class="tab-content" role="tabpanel" aria-labelledby="tab-faq-btn">
                    <div class="tab-content-inner">
                        <?php if(!empty($product_faqs)): ?>
                        <div class="faq-accordion" itemscope itemtype="https://schema.org/FAQPage">
                            <?php foreach($product_faqs as $faq): ?>
                            <div class="faq-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
                                <div class="faq-question">
                                    <button class="accordion-btn" aria-expanded="false">
                                        <span itemprop="name"><?php echo htmlspecialchars($faq['question']); ?></span>
                                        <svg class="accordion-icon" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                    </button>
                                </div>
                                <div class="faq-answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" hidden>
                                    <div itemprop="text">
                                        <?php echo $faq['answer']; ?>
                                    </div>
                                </div>
                            </div>
                            <?php endforeach; ?>
                        </div>
                        <?php else: ?>
                        <div class="no-data">
                            <p>Trenutno nema čestih pitanja za ovaj proizvod. Imate pitanje? Slobodno nas kontaktirajte putem <a href="/kontakt">kontakt forme</a> ili pozovite na 065/8-065-065.</p>
                        </div>
                        <?php endif; ?>
                        
                        <!-- Obrazac za postavljanje pitanja -->
                        <div class="ask-question-section">
                            <h3>Imate pitanje o ovom proizvodu?</h3>
                            <button type="button" id="show-question-form" class="btn-ask-question">Postavite pitanje</button>
                            
                            <div id="question-form-container" style="display: none;">
                                <form id="question-form" action="/ajax/submit-question.php" method="post">
                                    <?php echo csrf_token_field(); ?>
                                    <input type="hidden" name="product_id" value="<?php echo $product['id']; ?>">
                                    
                                    <div class="form-group">
                                        <label for="question-name">Vaše ime</label>
                                        <input type="text" id="question-name" name="name" required>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="question-email">Email adresa</label>
                                        <input type="email" id="question-email" name="email" required>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="question-text">Vaše pitanje</label>
                                        <textarea id="question-text" name="question" rows="4" required></textarea>
                                    </div>
                                    
                                    <div class="form-actions">
                                        <button type="button" id="cancel-question" class="btn-cancel">Odustani</button>
                                        <button type="submit" class="btn-submit">Pošalji pitanje</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Garancija Tab -->
                <div id="tab-warranty" class="tab-content" role="tabpanel" aria-labelledby="tab-warranty-btn" id="warranty-info">
                    <div class="tab-content-inner">
                        <div class="warranty-info">
                            <div class="warranty-header">
                                <svg width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                                <div class="warranty-title">
                                    <h3>25 meseci garancije</h3>
                                    <p>Uz ovaj proizvod dobijate garanciju u trajanju od 25 meseci koja uključuje:</p>
                                </div>
                            </div>
                            
                            <ul class="warranty-features">
                                <li>
                                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                    <span>Besplatno servisiranje tokom garantnog roka</span>
                                </li>
                                <li>
                                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                    <span>Zamena delova bez nadoknade</span>
                                </li>
                                <li>
                                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                    <span>Dostupnost rezervnih delova u narednih 7 godina</span>
                                </li>
                                <li>
                                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                    <span>Tehnička podrška putem telefona i emaila</span>
                                </li>
                            </ul>
                            
                            <div class="warranty-note">
                                <p><strong>Napomena:</strong> Garancija se automatski aktivira od dana kupovine. Potrebno je da sačuvate originalni račun kao dokaz o kupovini.</p>
                            </div>
                            
                            <div class="faq-accordion">
                                <div class="faq-item">
                                    <div class="faq-question">
                                        <button class="accordion-btn" aria-expanded="false">
                                            <span>Kako da aktiviram garanciju?</span>
                                            <svg class="accordion-icon" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                        </button>
                                    </div>
                                    <div class="faq-answer" hidden>
                                        <p>Garancija se automatski aktivira od dana kupovine. Potrebno je da sačuvate originalni račun kao dokaz o kupovini. Za aktivaciju garancije nije potrebna dodatna registracija proizvoda.</p>
                                    </div>
                                </div>
                                
                                <div class="faq-item">
                                    <div class="faq-question">
                                        <button class="accordion-btn" aria-expanded="false">
                                            <span>Garantna izjava</span>
                                            <svg class="accordion-icon" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                        </button>
                                    </div>
                                    <div class="faq-answer" hidden>
                                        <p>Garantna izjava:</p>
                                        <ul>
                                            <li>a) Proizvod će funckionisati normalno ako se prilikom upotrebe pridržavate tehničkog uputstva koje je priloženo odnosno koje ste dobili od proizvođača i ako proizvod budete upotrebljivali za one svrhe za koje je namenjen.</li>
                                            <li>b) Servis će u garantnom roku o svom trošku otkloniti kvarove koji su se pokazali na aparatu u roku od 30 dana.</li>
                                            <li>Garancija važi od dana prodaje što se dokazuje prodajnim dokumentom (računom) i overenim garantnim listom.</li>
                                            <li>Garancija se ne preuzima ako se ustanovi da je uzrok kvara nepridržavanje uputstvu za upotrebu ili u slučaju da je kvar pokušala otkloniti nestručna osoba odnosno ako su bili ugrađeni neoriginalni delovi.</li>
                                            <li>Garancija se ne priznaje za potrošne rezervne delove koji su definisani u uputstvu za upotrebu.</li>
                                            <li>Servisiranje aparata koje se smatra redovnim servisiranjem i u garantnom roku kako je navedeno u uputstvu ide na trošak vlasnika aparata.</li>
                                            <li>Servisiranje u garantnom roku obavlja ovlašćeni servis.</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="faq-item">
                                    <div class="faq-question">
                                        <button class="accordion-btn" aria-expanded="false">
                                            <span>Šta nije pokriveno garancijom?</span>
                                            <svg class="accordion-icon" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                        </button>
                                    </div>
                                    <div class="faq-answer" hidden>
                                        <p>Garancija ne pokriva:</p>
                                        <ul>
                                            <li>Fizička oštećenja nastala usled nepravilnog rukovanja</li>
                                            <li>Kvarove nastale usled nepravilne ugradnje ili upotrebe</li>
                                            <li>Oštećenja usled više sile (poplava, grom, požar)</li>
                                            <li>Potrošni materijal (kablovi, klešta za masu, držači elektrode, elektrode, dizne, kontaktne mlaznice, ostali pribor i potrošni materijal)</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="faq-item">
                                    <div class="faq-question">
                                        <button class="accordion-btn" aria-expanded="false">
                                            <span>Kako da prijavim kvar?</span>
                                            <svg class="accordion-icon" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                        </button>
                                    </div>
                                    <div class="faq-answer" hidden>
                                        <p>Kvar možete prijaviti na sledeće načine:</p>
                                        <ol>
                                            <li>Pozivom na broj 026/611-297, 026/223-548 ili 063/208-844</li>
                                            <li>Slanjem emaila na info@hugong-aparati.rs</li>
                                            <li>Dolaskom u naš prodajni objekat u Kragujevcu</li>
                                        </ol>
                                        <p>Potrebno je da imate spreman račun, garantni list i uređaj sa vidljivim i neoštećenim serijskim broj uređaja prilikom prijave.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Slični proizvodi -->
        <?php if(!empty($related_products)): ?>
        <div class="similar-products-section">
            <h2 class="section-title">Slični proizvodi</h2>
            
            <div class="recommended-products-container">
                <!-- Strelica levo -->
                <div class="scroll-hint left" aria-label="Prethodni proizvodi">
                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                </div>
                
                <!-- Proizvodi -->
                <div class="recommended-products-wrapper">
                    <div class="recommended-products-scroll">
                        <?php foreach($related_products as $related): ?>
                        <div class="product-card">
                            <?php 
                            $related_discount = 0;
                            if(!empty($related['sale_price'])): 
                                $related_discount = calculate_discount_percent_value($related);
                            ?>
                            <div class="product-discount">-<?php echo $related_discount; ?>%</div>
                            <?php endif; ?>
                            
                            <a href="/<?php echo $related['slug']; ?>" class="product-card-link">
                                <div class="product-image">
                                    <img src="<?php echo UPLOADS_URL . '/products/thumbs/' . $related['image']; ?>" 
                                         alt="<?php echo htmlspecialchars($related['name']); ?>"
                                         width="220" height="220" loading="lazy">
                                </div>
                                
                                <div class="product-details">
                                    <h3 class="product-title"><?php echo $related['name']; ?></h3>
                                    
                                    <?php if(isset($related['rating_count']) && $related['rating_count'] > 0): 
                                        $related_rating = $related['rating_count'] > 0 ? round($related['rating_sum'] / $related['rating_count'], 1) : 0;
                                    ?>
                                    <div class="product-rating">
                                        <div class="stars" aria-label="Ocena <?php echo $related_rating; ?> od 5">
                                            <?php for($i = 1; $i <= 5; $i++): ?>
                                            <span class="star <?php echo $i <= round($related_rating) ? 'filled' : ''; ?>">&#9733;</span>
                                            <?php endfor; ?>
                                        </div>
                                        <span class="rating-count">(<?php echo $related['rating_count']; ?>)</span>
                                    </div>
                                    <?php endif; ?>
                                    
                                    <div class="product-price">
                                        <?php if(!empty($related['sale_price'])): ?>
                                        <span class="old-price"><?php echo number_format($related['price'], 0, ',', '.'); ?> RSD</span>
                                        <span class="current-price"><?php echo number_format($related['sale_price'], 0, ',', '.'); ?> RSD</span>
                                        <?php else: ?>
                                        <span class="current-price"><?php echo number_format($related['price'], 0, ',', '.'); ?> RSD</span>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </a>
                            
                            <button type="button" class="btn-quick-add" data-product-id="<?php echo $related['id']; ?>" aria-label="Dodaj u korpu">
                                <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                            </button>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
                
                <!-- Strelica desno -->
                <div class="scroll-hint right" aria-label="Sledeći proizvodi">
                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                </div>
            </div>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Sticky kupi dugme za mobilne uređaje -->
<div class="sticky-cart">
    <div class="sticky-product-info">
        <div class="sticky-product-name"><?php echo substr($product['name'], 0, 40) . (strlen($product['name']) > 40 ? '...' : ''); ?></div>
        <div class="sticky-product-price">
            <?php if(!empty($product['sale_price'])): ?>
            <span class="current-price"><?php echo number_format($product['sale_price'], 0, ',', '.'); ?> RSD</span>
            <span class="old-price"><?php echo number_format($product['price'], 0, ',', '.'); ?> RSD</span>
            <?php else: ?>
            <span class="current-price"><?php echo number_format($product['price'], 0, ',', '.'); ?> RSD</span>
            <?php endif; ?>
        </div>
    </div>
    <button type="button" class="sticky-buy-btn" 
            data-product-id="<?php echo $product['id']; ?>"
            <?php echo !$stock_status['available'] ? 'disabled' : ''; ?>>
        <?php echo !$stock_status['available'] ? 'NEDOSTUPNO' : 'DODAJ U KORPU'; ?>
    </button>
</div>

<!-- Modali -->
<!-- Modal za uvećanje slike -->
<div id="image-modal" class="modal">
    <div class="modal-overlay"></div>
    <div class="modal-content zoom-content">
        <button type="button" class="modal-close" aria-label="Zatvori">&times;</button>
        <img id="zoomed-image" src="" alt="Uvećana slika proizvoda">
    </div>
</div>

<!-- Modal za korekciju cene -->
<div id="price-match-modal" class="modal">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">Zahtev za korekciju cene</h3>
            <button type="button" class="modal-close" aria-label="Zatvori">&times;</button>
        </div>
        <div class="modal-body">
            <p>Ukoliko ste pronašli isti proizvod po nižoj ceni, pošaljite nam link i mi ćemo vam ponuditi najbolju cenu.</p>
<form id="price-match-form" method="post" action="/ajax/price-match.php" enctype="multipart/form-data">
        <?php echo csrf_token_field(); ?>

    <input type="hidden" name="product_id" value="<?php echo $product['id']; ?>">
    <input type="hidden" name="product_name" value="<?php echo htmlspecialchars($product['name']); ?>">
    
    <div class="form-group">
        <label for="pm-name" class="required">Vaše ime</label>
        <input type="text" id="pm-name" name="name" required>
    </div>
    
    <div class="form-group">
        <label for="pm-email" class="required">Email adresa</label>
        <input type="email" id="pm-email" name="email" required>
    </div>
    
    <div class="form-group">
        <label for="pm-phone">Telefon</label>
        <input type="tel" id="pm-phone" name="phone">
    </div>
    
    <div class="form-group">
        <label for="pm-link">Link ka proizvodu sa nižom cenom</label>
        <input type="url" id="pm-link" name="competitor_url" required>
    </div>
    
    <!-- Novo polje za upload dokaza -->
<div class="form-group">
    <label for="proof_file">Dokaz o nižoj ceni</label>
    <small class="form-text text-muted"><strong>Ako nemate link</strong>, priložite sliku predračuna ili cenovnika</small>
    <div class="custom-file mt-2">
        <input type="file" id="proof_file" name="proof_file" class="custom-file-input" accept="image/jpeg,image/png,image/gif,application/pdf">
        <label class="custom-file-label" for="proof_file">Izaberite fajl</label>
    </div>
    <small class="form-text text-muted">Dozvoljeni formati: JPG, PNG, GIF, PDF (maks. 5MB)</small>
</div>
    
    <div class="form-group">
        <label for="pm-price" class="required">Cena (RSD)</label>
        <input type="number" id="pm-price" name="competitor_price" required min="1">
    </div>
    
    <div class="form-group">
        <label for="pm-message">Dodatne napomene</label>
        <textarea id="pm-message" name="message" rows="3"></textarea>
    </div>
    
    <div class="form-actions">
        <button type="button" class="btn-cancel modal-cancel">Odustani</button>
        <button type="submit" class="btn-primary">Pošalji zahtev</button>
    </div>
</form>
        </div>
    </div>
</div>

<!-- Modal za opcije plaćanja -->
<div id="payment-options-modal" class="modal">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">Opcije plaćanja</h3>
            <button type="button" class="modal-close" aria-label="Zatvori">&times;</button>
        </div>
        <div class="modal-body">
            <div class="payment-methods">
                <!-- Kreditne kartice -->
                <div class="payment-method">
                    <div class="method-icon">
                        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
                    </div>
                    <div class="method-details">
                        <h4>Kreditne kartice - do 9 rata bez kamate (pozovite nas za više informacija)</h4>
                        <p>Plaćanje Banca Intesa kreditnim karticama na do 9 mesečnih rata bez kamate i bez naknade.</p>
                        <!--<div class="available-cards">-->
                        <!--    <span class="card-icon">VISA</span>-->
                        <!--    <span class="card-icon">MasterCard</span>-->
                        <!--    <span class="card-icon">Maestro</span>-->
                        <!--    <span class="card-icon">Dina</span>-->
                        <!--</div>-->
                        <div class="rate-example">
                            <p>Za proizvod cene <strong id="modal-product-price"><?php echo number_format($current_price, 0, ',', '.'); ?></strong> RSD:</p>
                            <table class="rates-table">
                                <thead>
                                    <tr>
                                        <th>Broj rata</th>
                                        <th>Iznos rate (RSD)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>3 rate</td>
                                        <td id="rate-3"><?php echo number_format(ceil($current_price / 3), 0, ',', '.'); ?></td>
                                    </tr>
                                    <tr>
                                        <td>6 rata</td>
                                        <td id="rate-6"><?php echo number_format(ceil($current_price / 6), 0, ',', '.'); ?></td>
                                    </tr>
                                    <tr>
                                        <td>9 rata</td>
                                        <td id="rate-12"><?php echo number_format(ceil($current_price / 9), 0, ',', '.'); ?></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- Čekovi građana -->
                <div class="payment-method">
                    <div class="method-icon">
                        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                    </div>
                    <div class="method-details">
                        <h4>Čekovi građana - do 6 rata</h4>
                        <p>Trenutno nije moguće plaćanje čekovima građana</p>
                    </div>
                </div>
                
                <!-- Gotovina -->
                <div class="payment-method">
                    <div class="method-icon">
                        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z"></path></svg>
                    </div>
                    <div class="method-details">
                        <h4>Po predračunu uz lično preuzimanje - dodatni popust 500 dinara</h4>
                        <p>Plaćanje po predračunu prilikom ličnog preuzimanja kod nas na adresi Oskara Daviča 2, Kragujevac uz dodatni popust od 500 dinara!</p>
                        <p>Vaša cena uz popust: <strong id="cash-discount-price"><?php echo number_format($current_price - 500, 0, ',', '.'); ?></strong> RSD</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal za uspešno dodavanje u korpu -->
<div id="cart-success-modal" class="modal">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">Proizvod dodat u korpu</h3>
            <button type="button" class="modal-close" aria-label="Zatvori">&times;</button>
        </div>
        <div class="modal-body">
            <div class="cart-success-message">
                <div class="success-icon">
                    <svg width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                </div>
                <p>Proizvod <strong><?php echo $product['name']; ?></strong> je uspešno dodat u korpu.</p>
            </div>
            <div class="cart-success-buttons">
                <a href="/cart" class="btn-go-to-cart">Idi na korpu</a>
                <button type="button" class="btn-continue-shopping modal-cancel">Nastavi kupovinu</button>
            </div>
        </div>
    </div>
</div>



<?php include 'includes/footer.php'; ?>