<?php
require_once 'includes/db.php';

if (!isset($_GET['slug'])) { header("Location: /"); exit; }

$slug = $_GET['slug'];
$stmt = $pdo->prepare("SELECT p.*, c.name as cat_name FROM products p LEFT JOIN categories c ON p.category_id = c.id WHERE p.slug = ? AND p.status = 'active'");
$stmt->execute([$slug]);
$product = $stmt->fetch();

if (!$product) { header("Location: /"); exit; }

$cat_name = !empty($product['cat_name']) ? $product['cat_name'] : 'Uncategorized';
$cat_slug_url = strtolower(trim(preg_replace('/[^A-Za-z0-9-]+/', '-', $cat_name)));
$product_base_url = "/product/" . urlencode($cat_slug_url) . "/" . urlencode($slug);

$logged_in_name = 'Guest';
$logged_in_role = 'user';
$logged_in_id = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : null;
if ($logged_in_id) {
    $stmt_u = $pdo->prepare("SELECT name, role FROM users WHERE id = ?");
    $stmt_u->execute([$logged_in_id]);
    $u_data = $stmt_u->fetch();
    if($u_data) {
        $logged_in_name = $u_data['name'];
        $logged_in_role = $u_data['role'] ? $u_data['role'] : 'user';
    }
}

if ($_SERVER['REQUEST_METHOD'] == 'POST' && $logged_in_id) {
    if (isset($_POST['like_comment'])) {
        $c_id = (int)$_POST['comment_id'];
        
        $stmt_check = $pdo->prepare("SELECT vote_type FROM comment_votes WHERE comment_id = ? AND user_id = ?");
        $stmt_check->execute([$c_id, $logged_in_id]);
        $existing_vote = $stmt_check->fetchColumn();

        if ($existing_vote === 'like') {
            $pdo->prepare("DELETE FROM comment_votes WHERE comment_id = ? AND user_id = ?")->execute([$c_id, $logged_in_id]);
            $pdo->prepare("UPDATE product_comments SET likes = likes - 1 WHERE id = ?")->execute([$c_id]);
        } elseif ($existing_vote === 'dislike') {
            $pdo->prepare("UPDATE comment_votes SET vote_type = 'like' WHERE comment_id = ? AND user_id = ?")->execute([$c_id, $logged_in_id]);
            $pdo->prepare("UPDATE product_comments SET likes = likes + 1, dislikes = dislikes - 1 WHERE id = ?")->execute([$c_id]);
        } else {
            $pdo->prepare("INSERT INTO comment_votes (comment_id, user_id, vote_type) VALUES (?, ?, 'like')")->execute([$c_id, $logged_in_id]);
            $pdo->prepare("UPDATE product_comments SET likes = likes + 1 WHERE id = ?")->execute([$c_id]);
        }
        
        header("Location: " . $product_base_url);
        exit;
    }
    if (isset($_POST['dislike_comment'])) {
        $c_id = (int)$_POST['comment_id'];
        
        $stmt_check = $pdo->prepare("SELECT vote_type FROM comment_votes WHERE comment_id = ? AND user_id = ?");
        $stmt_check->execute([$c_id, $logged_in_id]);
        $existing_vote = $stmt_check->fetchColumn();

        if ($existing_vote === 'dislike') {
            $pdo->prepare("DELETE FROM comment_votes WHERE comment_id = ? AND user_id = ?")->execute([$c_id, $logged_in_id]);
            $pdo->prepare("UPDATE product_comments SET dislikes = dislikes - 1 WHERE id = ?")->execute([$c_id]);
        } elseif ($existing_vote === 'like') {
            $pdo->prepare("UPDATE comment_votes SET vote_type = 'dislike' WHERE comment_id = ? AND user_id = ?")->execute([$c_id, $logged_in_id]);
            $pdo->prepare("UPDATE product_comments SET dislikes = dislikes + 1, likes = likes - 1 WHERE id = ?")->execute([$c_id]);
        } else {
            $pdo->prepare("INSERT INTO comment_votes (comment_id, user_id, vote_type) VALUES (?, ?, 'dislike')")->execute([$c_id, $logged_in_id]);
            $pdo->prepare("UPDATE product_comments SET dislikes = dislikes + 1 WHERE id = ?")->execute([$c_id]);
        }
        
        header("Location: " . $product_base_url);
        exit;
    }
    if (isset($_POST['pin_comment']) && $logged_in_role === 'admin') {
        $c_id = (int)$_POST['comment_id'];
        $pdo->prepare("UPDATE product_comments SET is_pinned = IF(is_pinned=1, 0, 1) WHERE id = ?")->execute([$c_id]);
        header("Location: " . $product_base_url);
        exit;
    }
} elseif ($_SERVER['REQUEST_METHOD'] == 'POST' && (isset($_POST['like_comment']) || isset($_POST['dislike_comment']))) {
    header("Location: /login");
    exit;
}

if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['submit_comment'])) {
    $rating = (int)($_POST['rating'] ?? 5);
    $comment = htmlspecialchars($_POST['comment'] ?? '', ENT_QUOTES, 'UTF-8');
    $is_admin = ($logged_in_role === 'admin') ? 1 : 0;
    if (!empty($comment)) {
        $stmt_ins = $pdo->prepare("INSERT INTO product_comments (product_id, user_id, user_name, rating, comment, is_admin_reply) VALUES (?, ?, ?, ?, ?, ?)");
        $stmt_ins->execute([$product['id'], $logged_in_id, $logged_in_name, $rating, $comment, $is_admin]);
    }
    header("Location: " . $product_base_url);
    exit;
}

if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['submit_reply'])) {
    $parent_id = (int)$_POST['parent_id'];
    $comment = htmlspecialchars($_POST['reply_comment'] ?? '', ENT_QUOTES, 'UTF-8');
    $is_admin = ($logged_in_role === 'admin') ? 1 : 0;
    if (!empty($comment) && $parent_id > 0) {
        $stmt_ins = $pdo->prepare("INSERT INTO product_comments (product_id, user_id, user_name, parent_id, comment, is_admin_reply) VALUES (?, ?, ?, ?, ?, ?)");
        $stmt_ins->execute([$product['id'], $logged_in_id, $logged_in_name, $parent_id, $comment, $is_admin]);
    }
    header("Location: " . $product_base_url);
    exit;
}

$site_whatsapp = '';
try {
    $stmt_site = $pdo->query("SELECT contact_whatsapp FROM settings LIMIT 1");
    if ($stmt_site) {
        $site_whatsapp = $stmt_site->fetchColumn();
    }
} catch (Exception $e) {}

if (!isset($_SESSION['cart'])) { $_SESSION['cart'] = []; }
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_to_cart'])) {
    $pid = (int)$_POST['product_id'];
    if (!in_array($pid, $_SESSION['cart'])) {
        $_SESSION['cart'][] = $pid;
    }
    header("Location: /cart");
    exit;
}

if (!isset($_SESSION['wishlist'])) { $_SESSION['wishlist'] = []; }
if (isset($_POST['add_to_wishlist'])) {
    $pid = (int)$_POST['product_id'];
    if (!in_array($pid, $_SESSION['wishlist'])) { $_SESSION['wishlist'][] = $pid; }
    header("Location: " . $product_base_url);
    exit;
}

$in_wishlist = in_array($product['id'], $_SESSION['wishlist']);

$stmt_screens = $pdo->prepare("SELECT * FROM product_screenshots WHERE product_id = ? ORDER BY id ASC LIMIT 10");
$stmt_screens->execute([$product['id']]);
$screenshots = $stmt_screens->fetchAll();

$stmt_comments = $pdo->prepare("
    SELECT pc.*, u.name as u_name, u.avater 
    FROM product_comments pc 
    LEFT JOIN users u ON pc.user_id = u.id 
    WHERE pc.product_id = ? AND pc.parent_id IS NULL AND pc.status = 'active' 
    ORDER BY pc.is_pinned DESC, pc.id DESC
");
$stmt_comments->execute([$product['id']]);
$comments = $stmt_comments->fetchAll();

$stmt_avg = $pdo->prepare("SELECT AVG(rating) as avg_rating, COUNT(id) as total_reviews FROM product_comments WHERE product_id = ? AND parent_id IS NULL AND status = 'active'");
$stmt_avg->execute([$product['id']]);
$rating_data = $stmt_avg->fetch();
$avg_rating = $rating_data['avg_rating'] ? round($rating_data['avg_rating'], 1) : 0;
$total_reviews = $rating_data['total_reviews'] ?? 0;

$related_products = [];
try {
    $stmt_related = $pdo->prepare("SELECT p.*, c.name as category_name FROM products p LEFT JOIN categories c ON p.category_id = c.id WHERE p.category_id = ? AND p.id != ? AND p.status = 'active' ORDER BY p.id DESC LIMIT 4");
    $stmt_related->execute([$product['category_id'], $product['id']]);
    $related_products = $stmt_related->fetchAll();
} catch (Exception $e) {}


$site_url = defined('SITE_URL') ? rtrim(SITE_URL, '/') : ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]");
$og_url = $site_url . $product_base_url;

$page_title = !empty($product['meta_title']) ? $product['meta_title'] : $product['title'];
$og_title = $page_title;

$fallback_desc = !empty($product['description']) ? strip_tags(html_entity_decode($product['description'], ENT_QUOTES, 'UTF-8')) : 'Buy ' . $product['title'] . ' at the best price!';
$fallback_desc = substr(trim($fallback_desc), 0, 160);
$og_desc = !empty($product['meta_description']) ? $product['meta_description'] : $fallback_desc;
$meta_keywords = !empty($product['meta_keywords']) ? $product['meta_keywords'] : 'digital products, ' . $product['title'] . ', buy scripts, source code';

$main_image_path = ltrim($product['main_image'], '/');
if (strpos($product['main_image'], 'http') === 0) {
    $og_image = $product['main_image'];
} else {
    $base_dir = dirname($_SERVER['SCRIPT_NAME']);
    if($base_dir === '\\' || $base_dir === '/') $base_dir = '';
    $og_image = $site_url . $base_dir . '/uploads/products/images/' . $main_image_path;
}

$currency = defined('CURRENCY_SYMBOL') ? CURRENCY_SYMBOL : '৳';
if (is_numeric($currency)) {
    $currency = '৳';
}

require_once 'includes/header.php';

$discount_pct = 0;
if ($product['old_price'] > 0 && $product['old_price'] > $product['price']) {
    $discount_pct = round((($product['old_price'] - $product['price']) / $product['old_price']) * 100);
}

$user_votes = [];
if ($logged_in_id) {
    $stmt_votes = $pdo->prepare("SELECT comment_id, vote_type FROM comment_votes WHERE user_id = ?");
    $stmt_votes->execute([$logged_in_id]);
    while ($row = $stmt_votes->fetch()) {
        $user_votes[$row['comment_id']] = $row['vote_type'];
    }
}
?>
<meta property="og:title" content="<?php echo htmlspecialchars($og_title, ENT_QUOTES, 'UTF-8'); ?>" />
<meta property="og:description" content="<?php echo htmlspecialchars($og_desc, ENT_QUOTES, 'UTF-8'); ?>" />
<meta property="og:image" content="<?php echo htmlspecialchars($og_image, ENT_QUOTES, 'UTF-8'); ?>" />
<meta property="og:url" content="<?php echo htmlspecialchars($og_url, ENT_QUOTES, 'UTF-8'); ?>" />
<meta property="og:type" content="product" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php echo htmlspecialchars($og_title, ENT_QUOTES, 'UTF-8'); ?>">
<meta name="twitter:description" content="<?php echo htmlspecialchars($og_desc, ENT_QUOTES, 'UTF-8'); ?>">
<meta name="twitter:image" content="<?php echo htmlspecialchars($og_image, ENT_QUOTES, 'UTF-8'); ?>">
<meta itemprop="name" content="<?php echo htmlspecialchars($og_title, ENT_QUOTES, 'UTF-8'); ?>">
<meta itemprop="description" content="<?php echo htmlspecialchars($og_desc, ENT_QUOTES, 'UTF-8'); ?>">
<meta itemprop="image" content="<?php echo htmlspecialchars($og_image, ENT_QUOTES, 'UTF-8'); ?>">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />

<style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Noto+Serif+Bengali:wght@300;400;500;600;700&display=swap');

    body {
        font-family: 'Roboto', 'Noto Serif Bengali', sans-serif !important;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: #ffffff;
        margin: 0;
        padding: 0;
        color: #334155;
    }
    
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .product-details-container {
        margin-top: 15px;
        margin-bottom: 80px;
    }

    .product-gallery {
        position: relative;
        width: 100%;
        max-width: 500px;
        margin: 0 auto 20px auto;
    }

    .gallery-main-img {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        object-fit: cover;
        background-color: #ffffff;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        padding: 10px;
        box-sizing: border-box;
    }

    .sale-badge-circle {
        position: absolute;
        top: 20px;
        right: 20px;
        background-color: #84cc16 !important; 
        color: #ffffff !important;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.85rem;
        z-index: 10;
        box-shadow: none !important;
    }

    .expand-icon {
        position: absolute;
        bottom: 20px;
        left: 20px;
        background: rgba(255,255,255,0.9);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        color: #0f172a;
        box-shadow: none !important;
        border: 1px solid #e2e8f0;
    }

    .top-nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        font-size: 0.9rem;
    }

    .breadcrumb {
        color: #94a3b8;
    }
    
    .breadcrumb a {
        color: #94a3b8;
        text-decoration: none;
    }
    
    .breadcrumb span {
        color: #0f172a;
        font-weight: 500;
    }

    .product-title {
        font-size: 1.4rem;
        font-weight: 400;
        color: #0f172a;
        margin: 0 0 15px 0;
        line-height: 1.3;
    }

    .product-price-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }

    .old-price {
        font-size: 1.1rem;
        color: #94a3b8;
        text-decoration: line-through;
    }

    .new-price {
        font-size: 1.4rem;
        font-weight: 700;
        color: #00059E; 
    }

    .setup-video-wrapper {
        margin-bottom: 20px;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        padding-top: 56.25%; 
    }

    .setup-video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    .product-description {
        font-size: 0.95rem;
        line-height: 1.6;
        color: #334155;
        margin: 0 0 25px 0;
        word-wrap: break-word;
    }
    
    .product-description > *:first-child {
        margin-top: 0 !important;
    }
    .product-description > *:last-child {
        margin-bottom: 0 !important;
    }
    .product-description p {
        margin: 0 0 8px 0; 
    }
    .product-description p:empty {
        display: none;
    }
    
    .product-description img {
        max-width: 100%;
        border-radius: 6px;
        margin-bottom: 10px;
        height: auto;
        display: block;
    }
    .product-description a {
        color: #00059E;
        text-decoration: none;
        font-weight: 700;
        background-color: #e0e7ff; 
        padding: 2px 6px;
        border-radius: 4px;
        transition: 0.2s;
        display: inline-block;
    }
    .product-description a:hover {
        background-color: #c7d2fe;
        color: #00037a;
    }
    .product-description mark {
        background-color: #fef08a;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 600;
        color: #0f172a;
    }
    .product-description b, .product-description strong {
        font-weight: 800;
        color: #0f172a;
    }
    .product-description h1, .product-description h2, .product-description h3, .product-description h4, .product-description h5, .product-description h6 {
        color: #0f172a;
        margin-top: 12px;
        margin-bottom: 6px;
        font-weight: 700;
        line-height: 1.3;
    }
    .product-description ul, .product-description ol {
        margin-top: 4px;
        margin-bottom: 8px;
        padding-left: 20px;
    }
    .product-description li {
        margin-bottom: 3px;
    }

    .action-buttons-container {
        display: flex;
        gap: 10px;
        margin-top: 10px;
        margin-bottom: 25px;
        width: 100%;
        align-items: stretch;
    }

    .contact-btn-row {
        display: flex;
        gap: 10px;
        flex: 1;
    }

    .cart-form-wrapper {
        flex: 1; 
        margin: 0;
    }

    .btn-whatsapp, .btn-telegram {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        height: 48px;
        border-radius: 4px;
        font-weight: 600;
        font-size: 0.95rem;
        text-decoration: none;
        transition: 0.3s;
        box-shadow: none !important;
    }

    .btn-whatsapp { background: #25D366; }
    .btn-whatsapp:hover { background: #1da851; }

    .btn-telegram { background: #229ED9; }
    .btn-telegram:hover { background: #1c88ba; }

    .btn-add-cart {
        width: 100%;
        height: 48px;
        background: #00059E; 
        color: white;
        border: none;
        border-radius: 4px;
        font-weight: 700;
        font-size: 1.05rem;
        cursor: pointer;
        transition: 0.3s;
        text-transform: uppercase;
        font-family: inherit;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: none !important;
    }

    .btn-add-cart:hover {
        background: #00037a; 
    }

    .secondary-actions {
        display: flex;
        gap: 20px;
        margin-bottom: 25px;
    }

    .sec-btn {
        background: none;
        border: none;
        color: #334155;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        font-family: inherit;
        box-shadow: none !important;
    }

    .sec-btn:hover {
        color: #00059E;
    }

    .meta-info {
        font-size: 0.95rem;
        color: #334155;
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding-top: 15px;
        border-top: 1px solid #f1f5f9;
    }

    .meta-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .meta-label {
        font-weight: 600;
        color: #0f172a;
    }

    .meta-value {
        color: #64748b;
    }

    .social-icons {
        display: flex;
        gap: 12px;
        color: #64748b;
    }

    .social-icons a {
        color: inherit;
        transition: 0.3s;
    }

    .social-icons a:hover {
        color: #00059E;
    }

    .reviews-section { margin-top: 40px; padding-top: 30px; border-top: 1px solid #f1f5f9; }
    
    .rating-summary { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid #e2e8f0; }
    .rating-score { font-size: 3.5rem; font-weight: 700; color: #0f172a; line-height: 1; font-family: 'Roboto', sans-serif !important; }
    .rating-details { display: flex; flex-direction: column; gap: 4px; }
    .rating-stars-large svg { width: 20px; height: 20px; }
    .rating-count { color: #64748b; font-size: 0.9rem; font-weight: 500; font-family: 'Roboto', sans-serif !important; }

    .review-item { padding: 20px 0; border-bottom: 1px solid #f1f5f9; }
    .review-item:last-child { border-bottom: none; }
    
    .review-header { display: flex; align-items: center; gap: 15px; margin-bottom: 12px; }
    
    .review-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #e2e8f0; display: flex; align-items: center; justify-content: center; color: #64748b; font-weight: 700; font-size: 1.1rem; }
    
    .review-meta { display: flex; flex-direction: column; flex: 1; }
    .review-author { font-weight: 700; color: #0f172a; font-size: 1rem; display: flex; align-items: center; gap: 8px; font-family: 'Roboto', sans-serif !important; }
    .admin-badge { font-size: 0.65rem; background: #10b981; color: white; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Roboto', sans-serif !important; }
    .review-date-stars { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
    .review-date { font-size: 0.85rem; color: #64748b; font-family: 'Roboto', sans-serif !important; }
    
    .stars-small { display: flex; align-items: center; gap: 2px; }
    .stars-small svg { width: 14px; height: 14px; }

    .review-text { font-size: 0.95rem; color: #334155; line-height: 1.6; margin-bottom: 15px; }
    
    .review-actions { display: flex; align-items: center; gap: 15px; }
    .helpful-text { font-size: 0.85rem; color: #64748b; font-weight: 500; font-family: 'Roboto', sans-serif !important; }
    
    .action-btn { background: none; border: none; cursor: pointer; color: #64748b; display: flex; align-items: center; gap: 6px; font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; transition: all 0.2s; border: 1px solid #e2e8f0; font-family: 'Roboto', 'Noto Serif Bengali', sans-serif !important; font-weight: 500; box-shadow: none !important;}
    .action-btn:hover { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
    .action-btn.active-like { background: #eef2ff; color: #00059E; border-color: #c7d2fe; }
    .action-btn.active-dislike { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }

    .btn-reply { background: none; border: none; color: #64748b; font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: 20px; transition: all 0.2s; font-family: 'Roboto', 'Noto Serif Bengali', sans-serif !important; box-shadow: none !important;}
    .btn-reply:hover { background: #f1f5f9; color: #0f172a; }

    .reply-list { margin-top: 15px; margin-left: 15px; padding-left: 20px; border-left: 3px solid #e2e8f0; }
    .reply-item { margin-bottom: 15px; background: #f8fafc; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0; }
    .reply-item:last-child { margin-bottom: 0; }
    
    .review-form { margin-top: 40px; background: #ffffff; padding: 25px; border-radius: 8px; border: 1px solid #e2e8f0; box-shadow: none !important;}
    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.95rem; color: #0f172a; }
    .form-control { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-family: 'Roboto', 'Noto Serif Bengali', sans-serif !important; font-size: 0.95rem; outline: none; transition: 0.3s; box-sizing: border-box; box-shadow: none !important;}
    .form-control:focus { border-color: #00059E; }
    
    .rating-input-container { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 5px; }
    .rating-input-container input { display: none; }
    .rating-input-container label { cursor: pointer; color: #cbd5e1; margin: 0; padding: 0; display: inline-block; }
    .rating-input-container label svg { width: 32px; height: 32px; transition: 0.2s; }
    .rating-input-container input:checked ~ label { color: #00059E; }
    .rating-input-container label:hover, .rating-input-container label:hover ~ label { color: #00059E; }

    .btn-submit { background: #00059E; color: white; border: none; padding: 12px 24px; border-radius: 6px; font-weight: 700; cursor: pointer; transition: 0.3s; font-family: 'Roboto', 'Noto Serif Bengali', sans-serif !important; box-shadow: none !important;}
    .btn-submit:hover { background: #00037a; }
    
    .reply-form-container { display: none; margin-top: 15px; }

    /* Related Products Styles */
    .related-products-section { margin-top: 60px; padding-top: 30px; border-top: 1px solid #f1f5f9; }
    .related-title { font-size: 1.2rem; font-weight: 700; color: #0f172a; margin-bottom: 20px; }
    
    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 30px;
    }
    @media (min-width: 768px) {
        .product-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    }
    @media (min-width: 1024px) {
        .product-grid { grid-template-columns: repeat(4, 1fr); }
    }
    
    .category-box, .product-card, .info-card {
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        transition: all 0.3s ease-in-out !important;
        background: #ffffff !important;
    }
    .product-card {
        position: relative !important;
        display: flex;
        flex-direction: column;
        padding: 12px;
        text-decoration: none;
        overflow: hidden;
        height: auto;
    }
    .category-box:hover, .product-card:hover, .info-card:hover {
        transform: translateY(-2px) !important;
        border-color: #94a3b8 !important;
        background: #f8fafc !important;
    }
    .btn-buy {
        border-radius: 4px !important;
        box-shadow: none !important;
        transition: background 0.3s ease, color 0.3s ease !important;
        border: 1px solid transparent !important;
        background: #00059E !important;
        color: #ffffff !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        text-decoration: none;
        padding: 10px;
        margin-top: auto;
        font-weight: 500;
        font-family: 'Roboto', sans-serif !important;
    }
    .btn-buy:hover {
        background: #00037a !important;
        color: #ffffff !important;
    }
    .product-card-img {
        width: calc(100% + 24px);
        aspect-ratio: 1 / 1;
        height: auto !important;
        object-fit: cover !important; 
        background-color: #f1f5f9; 
        border-bottom: 1px solid #f1f5f9 !important;
        border-radius: 0 !important;
        transition: opacity 0.3s ease !important;
        margin: -12px -12px 10px -12px;
        padding: 0;
        box-sizing: border-box;
    }
    .product-card:hover .product-card-img {
        opacity: 0.9 !important;
    }
    .product-category-label {
        font-size: 0.75rem;
        color: #64748b;
        margin-bottom: 4px;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.5px;
    }
    .product-card-title {
        font-size: 1.1rem;
        color: #0f172a;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-weight: 700;
    }
    .product-card-price {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        font-family: 'Roboto', sans-serif !important;
    }
    .product-card-old-price {
        font-size: 0.8rem;
        color: #94a3b8;
        text-decoration: line-through;
        font-weight: 600;
    }
    .product-card-new-price {
        font-size: 1.15rem;
        font-weight: 800;
        color: #00059E;
    }
    
    .sale-badge {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        border-radius: 50% !important;
        background-color: #84cc16 !important;
        color: #ffffff !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.75rem !important;
        font-weight: 800 !important;
        z-index: 10 !important;
        box-shadow: none !important;
        font-family: 'Roboto', sans-serif !important;
    }

    @media (min-width: 992px) {
        .product-details-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: start;
        }
        .product-gallery {
            margin: 0;
            max-width: 100%;
        }
    }

    @media (max-width: 768px) {
        .action-buttons-container {
            flex-direction: column;
            height: auto;
        }
        .contact-btn-row {
            width: 100%;
        }
        .cart-form-wrapper {
            width: 100%;
        }
    }
</style>

<div class="container product-details-container">
    
    <div class="product-details-grid">
        
        <div class="product-gallery">
            <?php if($discount_pct > 0): ?>
                <div class="sale-badge-circle">-<?php echo $discount_pct; ?>%</div>
            <?php endif; ?>
            
            <img id="main-image" src="<?php echo get_image_url('products/images', $product['main_image']); ?>" class="gallery-main-img" alt="<?php echo htmlspecialchars($product['title'], ENT_QUOTES, 'UTF-8'); ?>">
            
            <div class="expand-icon" onclick="window.open(document.getElementById('main-image').src, '_blank')">
                <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /></svg>
            </div>
            
            <?php if(count($screenshots) > 0): ?>
            <div style="display: flex; gap: 10px; margin-top: 15px; overflow-x: auto;">
                <img src="<?php echo get_image_url('products/images', $product['main_image']); ?>" style="width: 70px; height: 70px; object-fit: cover; border: 1px solid #e2e8f0; border-radius: 4px; cursor: pointer; padding: 0;" onclick="document.getElementById('main-image').src=this.src;">
                <?php foreach($screenshots as $ss): ?>
                    <img src="<?php echo get_image_url('products/screenshots', $ss['image']); ?>" style="width: 70px; height: 70px; object-fit: cover; border: 1px solid #e2e8f0; border-radius: 4px; cursor: pointer; padding: 0;" onclick="document.getElementById('main-image').src=this.src;">
                <?php endforeach; ?>
            </div>
            <?php endif; ?>
        </div>

        <div class="product-info-wrap">
            
            <div class="top-nav-bar">
                <div class="breadcrumb">
                    <a href="/index">Home</a> / 
                    <span style="font-weight: 600; color: #334155;"><a href="/products/category/<?php echo urlencode($cat_slug_url); ?>"><?php echo htmlspecialchars($product['cat_name'], ENT_QUOTES, 'UTF-8'); ?></a></span>
                </div>
            </div>

            <h1 class="product-title"><?php echo htmlspecialchars($product['title'], ENT_QUOTES, 'UTF-8'); ?></h1>
            
            <div class="product-price-wrap">
                <?php if($product['old_price'] > 0 && $product['old_price'] > $product['price']): ?>
                    <span class="old-price"><?php echo $currency . number_format($product['old_price'], 2); ?></span>
                <?php endif; ?>
                <span class="new-price"><?php echo $currency . number_format($product['price'], 2); ?></span>
            </div>

            <?php if(!empty($product['demo_link']) || !empty($product['setup_video_url'])): ?>
                <?php 
                    $video_id = '';
                    $demo_url = !empty($product['setup_video_url']) ? $product['setup_video_url'] : $product['demo_link'];
                    if (strpos($demo_url, 'youtube.com/watch') !== false) {
                        parse_str(parse_url($demo_url, PHP_URL_QUERY), $vars);
                        $video_id = $vars['v'] ?? '';
                    } elseif (strpos($demo_url, 'youtu.be/') !== false) {
                        $video_id = substr(parse_url($demo_url, PHP_URL_PATH), 1);
                    }
                ?>
                <?php if($video_id): ?>
                    <div class="setup-video-wrapper">
                        <iframe src="https://www.youtube.com/embed/<?php echo htmlspecialchars($video_id, ENT_QUOTES, 'UTF-8'); ?>" title="Setup Video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                    </div>
                <?php else: ?>
                     <div style="margin-bottom: 20px;">
                        <a href="<?php echo htmlspecialchars($demo_url, ENT_QUOTES, 'UTF-8'); ?>" target="_blank" style="display:inline-block; padding: 10px 15px; background:#0f172a; color:#fff; text-decoration:none; border-radius:4px; font-weight:600;">View Setup Video / Demo</a>
                     </div>
                <?php endif; ?>
            <?php endif; ?>

            <div class="product-description">
                <?php echo !empty($product['description']) ? html_entity_decode($product['description'], ENT_QUOTES, 'UTF-8') : ''; ?>
            </div>

            <div class="action-buttons-container">
                <div class="contact-btn-row">
                    <a href="<?php echo !empty($site_whatsapp) ? 'https://wa.me/' . preg_replace('/[^0-9]/', '', $site_whatsapp) . '?text=' . urlencode("Hello, I am interested in " . $product['title']) : '#'; ?>" target="_blank" class="btn-whatsapp" title="WhatsApp">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z"/></svg>
                        WhatsApp
                    </a>
                    
                    <?php 
                        $tg_msg = "Hello DeveloperSketvia,\n\nI am interested in hiring you for a complete setup and development of '" . $product['title'] . "'.\nআমি প্রফেশনালভাবে এই ওয়েবসাইট/অ্যাপটি আপনার মাধ্যমে বানিয়ে নিতে চাই।\n\nPlease let me know the pricing, requirements, and timeline.\n\nThank you!";
                        $tg_link = "https://t.me/DeveloperSketvia01?text=" . urlencode($tg_msg);
                    ?>
                    <a href="<?php echo $tg_link; ?>" target="_blank" class="btn-telegram" title="Telegram">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .24z"/></svg>
                        Telegram
                    </a>
                </div>
                
                <form action="product-details?slug=<?php echo htmlspecialchars($slug, ENT_QUOTES, 'UTF-8'); ?>" method="POST" class="cart-form-wrapper">
                    <input type="hidden" name="product_id" value="<?php echo $product['id']; ?>">
                    <input type="hidden" name="quantity" value="1">
                    <button type="submit" name="add_to_cart" class="btn-add-cart">
                        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" 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"/></svg>
                        ADD TO CART
                    </button>
                </form>
            </div>

            <div class="secondary-actions">
                <form action="product-details?slug=<?php echo htmlspecialchars($slug, ENT_QUOTES, 'UTF-8'); ?>" method="POST" style="margin:0;">
                    <input type="hidden" name="product_id" value="<?php echo $product['id']; ?>">
                    <button type="submit" name="add_to_wishlist" class="sec-btn" <?php echo $in_wishlist ? 'disabled' : ''; ?> style="<?php echo $in_wishlist ? 'color: #00059E;' : ''; ?>">
                        <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="<?php echo $in_wishlist ? 'fill: #00059E;' : ''; ?>"><path stroke-linecap="round" stroke-linejoin="round" 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" /></svg>
                        <?php echo $in_wishlist ? 'Added to wishlist' : 'Add to wishlist'; ?>
                    </button>
                </form>
            </div>

            <div class="meta-info">
                <div class="meta-row">
                    <span class="meta-label">Category:</span>
                    <span class="meta-value"><?php echo htmlspecialchars($product['cat_name'], ENT_QUOTES, 'UTF-8'); ?></span>
                </div>
                <div class="meta-row">
                    <span class="meta-label">Share:</span>
                    <div class="social-icons">
                        <?php 
                            $share_title = urlencode($og_title);
                            $raw_msg = "Check out " . $product['title'] . ".\n\nAvailable now for instant download. Get premium access to high-quality code and digital assets.\n\nView details here:\n";
                            $share_text = urlencode($raw_msg);
                        ?>
                        <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($og_url); ?>" target="_blank" title="Share on Facebook"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4v-8.5z"/></svg></a>
                        <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode($og_url); ?>&text=<?php echo $share_text; ?>" target="_blank" title="Share on Twitter"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.054 10.054 0 01-3.127 1.184 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg></a>
                        <a href="https://wa.me/?text=<?php echo $share_text . urlencode($og_url); ?>" target="_blank" title="Share on WhatsApp"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z"/></svg></a>
                        <a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode($og_url); ?>&title=<?php echo $share_title; ?>&summary=<?php echo $share_text; ?>" target="_blank" title="Share on LinkedIn"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a>
                        <a href="https://t.me/share/url?url=<?php echo urlencode($og_url); ?>&text=<?php echo $share_text; ?>" target="_blank" title="Share on Telegram"><svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .24z"/></svg></a>
                    </div>
                </div>
            </div>

        </div>
    </div>
    
    <div class="reviews-section">
        <h2 style="font-size: 1.2rem; font-weight: 700; color: #0f172a; margin-bottom: 20px;">Ratings and reviews</h2>
        
        <div class="rating-summary">
            <div class="rating-score"><?php echo number_format($avg_rating, 1); ?></div>
            <div class="rating-details">
                <div class="stars-small rating-stars-large">
                    <?php 
                    $full_stars = floor($avg_rating);
                    for($i=1; $i<=5; $i++): 
                        if($i <= $full_stars): ?>
                            <svg fill="#00059E" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                        <?php else: ?>
                            <svg fill="#e2e8f0" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                        <?php endif; 
                    endfor; ?>
                </div>
                <div class="rating-count"><?php echo number_format($total_reviews); ?> reviews</div>
            </div>
        </div>
        
        <div class="reviews-list">
            <?php if(count($comments) > 0): ?>
                <?php foreach($comments as $comment): ?>
                    <div class="review-item">
                        <?php if($comment['is_pinned']): ?>
                            <div style="font-size: 0.75rem; color: #10b981; display: flex; align-items: center; gap: 4px; margin-bottom: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;">
                                <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M16 12V4h1V2H7v2h1v8l-2 2v2h4v6h2v-6h4v-2l-2-2z"/></svg> Pinned
                            </div>
                        <?php endif; ?>
                        
                        <div class="review-header">
                            <?php $display_name = !empty($comment['u_name']) ? $comment['u_name'] : $comment['user_name']; ?>
                            
                            <?php if(!empty($comment['avater'])): ?>
                                <img src="<?php echo (strpos($comment['avater'], 'http') === 0) ? htmlspecialchars($comment['avater'], ENT_QUOTES, 'UTF-8') : get_image_url('users', $comment['avater']); ?>" alt="Avatar" class="review-avatar">
                            <?php else: ?>
                                <div class="review-avatar">
                                    <?php echo strtoupper(substr($display_name, 0, 1)); ?>
                                </div>
                            <?php endif; ?>
                            
                            <div class="review-meta">
                                <span class="review-author">
                                    <?php echo htmlspecialchars($display_name, ENT_QUOTES, 'UTF-8'); ?>
                                </span>
                                <div class="review-date-stars">
                                    <div class="stars-small">
                                        <?php for($i=1; $i<=5; $i++): ?>
                                            <?php if($i <= $comment['rating']): ?>
                                                <svg fill="#00059E" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                                            <?php else: ?>
                                                <svg fill="#e2e8f0" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                                            <?php endif; ?>
                                        <?php endfor; ?>
                                    </div>
                                    <span class="review-date"><?php echo date('F j, Y', strtotime($comment['created_at'])); ?></span>
                                </div>
                            </div>
                            <?php if($comment['is_admin_reply']): ?>
                                <span class="admin-badge">Admin</span>
                            <?php endif; ?>
                        </div>
                        
                        <div class="review-text">
                            <?php echo nl2br(htmlspecialchars($comment['comment'], ENT_QUOTES, 'UTF-8')); ?>
                        </div>
                        
                        <div class="review-actions">
                            <span class="helpful-text">Was this review helpful?</span>
                            
                            <?php 
                                $user_vote = $user_votes[$comment['id']] ?? null;
                                $like_class = ($user_vote === 'like') ? 'action-btn active-like' : 'action-btn';
                                $dislike_class = ($user_vote === 'dislike') ? 'action-btn active-dislike' : 'action-btn';
                            ?>

                            <form action="product-details?slug=<?php echo htmlspecialchars($slug, ENT_QUOTES, 'UTF-8'); ?>" method="POST" style="margin: 0;">
                                <input type="hidden" name="comment_id" value="<?php echo $comment['id']; ?>">
                                <button type="submit" name="like_comment" class="<?php echo $like_class; ?>">
                                    <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
                                    <?php echo $comment['likes']; ?>
                                </button>
                            </form>
                            
                            <form action="product-details?slug=<?php echo htmlspecialchars($slug, ENT_QUOTES, 'UTF-8'); ?>" method="POST" style="margin: 0;">
                                <input type="hidden" name="comment_id" value="<?php echo $comment['id']; ?>">
                                <button type="submit" name="dislike_comment" class="<?php echo $dislike_class; ?>">
                                    <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
                                    <?php echo $comment['dislikes']; ?>
                                </button>
                            </form>

                            <button class="btn-reply" onclick="toggleReplyForm(<?php echo $comment['id']; ?>)">Reply</button>

                            <?php if($logged_in_role === 'admin'): ?>
                                <form action="product-details?slug=<?php echo htmlspecialchars($slug, ENT_QUOTES, 'UTF-8'); ?>" method="POST" style="margin: 0; margin-left: auto;">
                                    <input type="hidden" name="comment_id" value="<?php echo $comment['id']; ?>">
                                    <button type="submit" name="pin_comment" class="action-btn" style="color: <?php echo $comment['is_pinned'] ? '#00059E' : '#64748b'; ?>; border: none; padding: 0;">
                                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M16 12V4h1V2H7v2h1v8l-2 2v2h4v6h2v-6h4v-2l-2-2z"/></svg>
                                    </button>
                                </form>
                            <?php endif; ?>
                        </div>
                        
                        <div class="reply-form-container" id="reply-form-<?php echo $comment['id']; ?>">
                            <form action="product-details?slug=<?php echo htmlspecialchars($slug, ENT_QUOTES, 'UTF-8'); ?>" method="POST" style="margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap;">
                                <input type="hidden" name="parent_id" value="<?php echo $comment['id']; ?>">
                                <input type="text" name="reply_comment" placeholder="Add a public reply..." class="form-control" style="flex: 1; min-width: 200px;" required>
                                <button type="submit" name="submit_reply" class="btn-submit" style="padding: 10px 20px;">Send</button>
                            </form>
                        </div>

                        <?php
                            $stmt_replies = $pdo->prepare("
                                SELECT pc.*, u.name as u_name, u.avater 
                                FROM product_comments pc 
                                LEFT JOIN users u ON pc.user_id = u.id 
                                WHERE pc.parent_id = ? AND pc.status = 'active' 
                                ORDER BY pc.id ASC
                            ");
                            $stmt_replies->execute([$comment['id']]);
                            $replies = $stmt_replies->fetchAll();
                            if(count($replies) > 0):
                        ?>
                        <div class="reply-list">
                            <?php foreach($replies as $reply): ?>
                                <div class="reply-item">
                                    <div class="review-header" style="margin-bottom: 8px;">
                                        <?php $reply_display_name = !empty($reply['u_name']) ? $reply['u_name'] : $reply['user_name']; ?>
                                        <div class="review-meta" style="flex-direction: row; align-items: center; gap: 10px;">
                                            <span class="review-author" style="font-size: 0.95rem;">
                                                <?php echo htmlspecialchars($reply_display_name, ENT_QUOTES, 'UTF-8'); ?>
                                            </span>
                                            <?php if($reply['is_admin_reply']): ?>
                                                <span class="admin-badge" style="background: #00059E;">Developer response</span>
                                            <?php endif; ?>
                                            <span class="review-date" style="font-size: 0.8rem; margin-left: auto;">
                                                <?php echo date('F j, Y', strtotime($reply['created_at'])); ?>
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <div class="review-text" style="font-size: 0.9rem; margin-bottom: 10px;">
                                        <?php echo nl2br(htmlspecialchars($reply['comment'], ENT_QUOTES, 'UTF-8')); ?>
                                    </div>
                                    
                                    <div class="review-actions">
                                        <?php 
                                            $reply_user_vote = $user_votes[$reply['id']] ?? null;
                                            $reply_like_class = ($reply_user_vote === 'like') ? 'action-btn active-like' : 'action-btn';
                                            $reply_dislike_class = ($reply_user_vote === 'dislike') ? 'action-btn active-dislike' : 'action-btn';
                                        ?>
                                        <form action="product-details?slug=<?php echo htmlspecialchars($slug, ENT_QUOTES, 'UTF-8'); ?>" method="POST" style="margin: 0;">
                                            <input type="hidden" name="comment_id" value="<?php echo $reply['id']; ?>">
                                            <button type="submit" name="like_comment" class="<?php echo $reply_like_class; ?>">
                                                <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
                                                <?php echo $reply['likes']; ?>
                                            </button>
                                        </form>
                                        
                                        <form action="product-details?slug=<?php echo htmlspecialchars($slug, ENT_QUOTES, 'UTF-8'); ?>" method="POST" style="margin: 0;">
                                            <input type="hidden" name="comment_id" value="<?php echo $reply['id']; ?>">
                                            <button type="submit" name="dislike_comment" class="<?php echo $reply_dislike_class; ?>">
                                                <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
                                                <?php echo $reply['dislikes']; ?>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <p style="color: #64748b; padding: 20px 0;">No reviews yet. Be the first to share your thoughts!</p>
            <?php endif; ?>
        </div>

        <div class="review-form">
            <h3 style="margin-bottom: 15px; font-size: 1.1rem; color: #0f172a; font-weight: 700;">Rate this product</h3>
            <form action="product-details?slug=<?php echo htmlspecialchars($slug, ENT_QUOTES, 'UTF-8'); ?>" method="POST">
                <div class="form-group" style="text-align: center; margin-bottom: 25px;">
                    <div class="rating-input-container">
                        <input type="radio" id="star5" name="rating" value="5" required />
                        <label for="star5" title="5 stars">
                            <svg fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                        </label>
                        
                        <input type="radio" id="star4" name="rating" value="4" />
                        <label for="star4" title="4 stars">
                            <svg fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                        </label>
                        
                        <input type="radio" id="star3" name="rating" value="3" />
                        <label for="star3" title="3 stars">
                            <svg fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                        </label>
                        
                        <input type="radio" id="star2" name="rating" value="2" />
                        <label for="star2" title="2 stars">
                            <svg fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                        </label>
                        
                        <input type="radio" id="star1" name="rating" value="1" />
                        <label for="star1" title="1 star">
                            <svg fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                        </label>
                    </div>
                    <div style="font-size: 0.85rem; color: #64748b; margin-top: 5px;">Tell others what you think</div>
                </div>
                <div class="form-group">
                    <textarea name="comment" class="form-control" rows="4" required placeholder="Describe your experience (optional)"></textarea>
                </div>
                <button type="submit" name="submit_comment" class="btn-submit" style="width: 100%;">Post Review</button>
            </form>
        </div>
    </div>
    
    <?php if(count($related_products) > 0): ?>
    <div class="related-products-section">
        <h2 class="related-title">Related Products</h2>
        <div class="product-grid">
            <?php foreach($related_products as $rel_prod): 
                $rel_cat_name = !empty($rel_prod['category_name']) ? $rel_prod['category_name'] : 'Uncategorized';
                $rel_cat_slug = strtolower(trim(preg_replace('/[^A-Za-z0-9-]+/', '-', $rel_cat_name)));
                $rel_product_url = "/product/" . urlencode($rel_cat_slug) . "/" . urlencode($rel_prod['slug']);
            ?>
                <div class="product-card">
                    <?php if($rel_prod['old_price'] > 0 && $rel_prod['old_price'] > $rel_prod['price']): ?>
                        <?php $rel_discount_pct = round((($rel_prod['old_price'] - $rel_prod['price']) / $rel_prod['old_price']) * 100); ?>
                        <span class="sale-badge">-<?php echo $rel_discount_pct; ?>%</span>
                    <?php endif; ?>
                    
                    <img src="<?php echo get_image_url('products/images', $rel_prod['main_image']); ?>" alt="Product" class="product-card-img" loading="lazy">
                    
                    <div class="product-category-label"><?php echo htmlspecialchars($rel_cat_name); ?></div>
                    <div class="product-card-title"><?php echo htmlspecialchars($rel_prod['title']); ?></div>
                    
                    <div class="product-card-price">
                        <?php if($rel_prod['old_price'] > 0 && $rel_prod['old_price'] > $rel_prod['price']): ?>
                            <span class="product-card-old-price"><?php echo $currency . number_format($rel_prod['old_price'], 2); ?></span>
                        <?php endif; ?>
                        <span class="product-card-new-price"><?php echo $currency . number_format($rel_prod['price'], 2); ?></span>
                    </div>
                    
                    <a href="<?php echo $rel_product_url; ?>" class="btn-buy">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" 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" /></svg>
                        Buy Now
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
    <?php endif; ?>
</div>

<script>
    function toggleReplyForm(id) {
        var form = document.getElementById('reply-form-' + id);
        if (form.style.display === 'none' || form.style.display === '') {
            form.style.display = 'block';
        } else {
            form.style.display = 'none';
        }
    }
</script>

<?php require_once 'includes/footer.php'; ?>
<?php require_once 'includes/mobile-nav.php'; ?>
