product.php

<?php
/**
 * Product Detail Page
 */
require_once 'classes/Product.php';
require_once 'classes/Review.php';
require_once 'classes/User.php';

$productModel = new Product();
$id = isset($_GET['id']) ? (int)$_GET['id'] : 0;
$product = $productModel->getById($id);

if (!$product) {
    header('Location: index.php');
    exit;
}

$pageTitle = $product['name'];
$related = $productModel->getRelated($product['id'], $product['category_id'], 4);

require_once 'includes/header.php';
?>

<div class="product-detail">
    <div class="pd-image">
        <img src="<?= htmlspecialchars($product['image'] ?: 'assets/images/placeholder.png') ?>" alt="<?= htmlspecialchars($product['name']) ?>">
        <?php if ($isLoggedIn): ?>
        <button class="pd-wishlist-btn btn-wishlist-toggle" data-id="<?= $product['id'] ?>" title="Toggle Wishlist">
            <i class="far fa-heart"></i>
        </button>
        <?php endif; ?>
    </div>
    <div class="pd-info">
        <div class="pd-category"><?= htmlspecialchars($product['category_name']) ?></div>
        <h1 class="pd-title"><?= htmlspecialchars($product['name']) ?></h1>
        <div class="pd-price"><?= CURRENCY . number_format($product['price'], 2) ?></div>
        <p class="pd-desc"><?= nl2br(htmlspecialchars($product['description'])) ?></p>
        <div class="pd-stock <?= $product['stock'] <= 0 ? 'out' : '' ?>">
            <i class="fas fa-<?= $product['stock'] > 0 ? 'check-circle' : 'times-circle' ?>"></i>
            <?= $product['stock'] > 0 ? $product['stock'] . ' in stock' : 'Out of stock' ?>
        </div>

        <?php if ($product['stock'] > 0): ?>
        <div class="pd-actions">
            <div class="qty-control">
                <button class="qty-btn" data-action="dec">−</button>
                <input type="number" class="qty-input" id="qty-input" value="1" min="1" max="<?= $product['stock'] ?>">
                <button class="qty-btn" data-action="inc">+</button>
            </div>
            <button class="btn-add-cart btn-add-to-cart" data-id="<?= $product['id'] ?>">
                <i class="fas fa-cart-plus"></i> Add to Cart
            </button>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Related Products -->
<?php if (!empty($related)): ?>
<section class="section">
    <div class="section-header">
        <h2>Related Products</h2>
    </div>
    <div class="product-grid">
        <?php foreach ($related as $p): ?>
        <div class="product-card">
            <div class="product-card-img">
                <a href="product.php?id=<?= $p['id'] ?>">
                    <img src="<?= htmlspecialchars($p['image'] ?: 'assets/images/placeholder.png') ?>" alt="<?= htmlspecialchars($p['name']) ?>">
                </a>
                <?php if ($isLoggedIn): ?>
                <button class="product-card-wishlist btn-wishlist-toggle" data-id="<?= $p['id'] ?>" title="Add to Wishlist">
                    <i class="far fa-heart"></i>
                </button>
                <?php endif; ?>
                <button class="product-card-quick btn-add-to-cart" data-id="<?= $p['id'] ?>"><i class="fas fa-cart-plus"></i></button>
            </div>
            <div class="product-card-body">
                <div class="product-card-cat"><?= htmlspecialchars($p['category_name']) ?></div>
                <h3 class="product-card-title"><a href="product.php?id=<?= $p['id'] ?>"><?= htmlspecialchars($p['name']) ?></a></h3>
                <div class="product-card-price"><?= CURRENCY . number_format($p['price'], 2) ?></div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</section>
<?php endif; ?>

<?php
// Fetch reviews for this product
$reviewModel = new Review();
$reviews = $reviewModel->getByProduct($product['id']);
$averageRating = $reviewModel->getAverageRating($product['id']);
?>
<section class="section product-reviews-section">
    <div class="reviews-container">
        <div class="reviews-header">
            <h2>Customer Reviews</h2>
            <div class="reviews-summary-wrapper">
                <?php if ($averageRating > 0): ?>
                    <div class="reviews-score-card">
                        <div class="score-num"><?= number_format($averageRating, 1) ?></div>
                        <div class="score-stars">
                            <?php
                            $fullStars = floor($averageRating);
                            $halfStar = ($averageRating - $fullStars) >= 0.5 ? 1 : 0;
                            $emptyStars = 5 - $fullStars - $halfStar;
                            for ($i = 0; $i < $fullStars; $i++) echo '<i class="fas fa-star"></i>';
                            if ($halfStar) echo '<i class="fas fa-star-half-alt"></i>';
                            for ($i = 0; $i < $emptyStars; $i++) echo '<i class="far fa-star"></i>';
                            ?>
                        </div>
                        <div class="score-count">Based on <?= count($reviews) ?> reviews</div>
                    </div>
                <?php else: ?>
                    <div class="no-reviews-card">
                        <i class="far fa-comments"></i>
                        <p>No reviews yet. Be the first to review this product!</p>
                    </div>
                <?php endif; ?>
            </div>
        </div>

        <div class="reviews-list">
            <?php foreach ($reviews as $rev): ?>
                <div class="review-card">
                    <div class="review-card-header">
                        <div class="reviewer-avatar"><?= strtoupper(substr($rev['username'] ?? 'A', 0, 1)) ?></div>
                        <div class="reviewer-meta">
                            <span class="reviewer-name"><?= htmlspecialchars($rev['username'] ?? 'Anonymous') ?></span>
                            <span class="review-date"><?= date('M d, Y', strtotime($rev['created_at'])) ?></span>
                        </div>
                        <div class="review-card-stars">
                            <?php
                            for ($i = 1; $i <= 5; $i++) {
                                echo '<i class="' . ($i <= $rev['rating'] ? 'fas' : 'far') . ' fa-star"></i>';
                            }
                            ?>
                        </div>
                    </div>
                    <div class="review-card-body">
                        <p><?= nl2br(htmlspecialchars($rev['comment'])) ?></p>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>

        <?php if (User::isLoggedIn()): ?>
            <div class="review-form-card">
                <h3>Write a Review</h3>
                <form id="reviewForm">
                    <input type="hidden" name="product_id" value="<?= $product['id'] ?>" />
                    
                    <div class="form-group-star">
                        <label>Your Rating</label>
                        <div class="star-rating-picker" id="starPicker">
                            <i class="fas fa-star star-btn active" data-value="1"></i>
                            <i class="fas fa-star star-btn active" data-value="2"></i>
                            <i class="fas fa-star star-btn active" data-value="3"></i>
                            <i class="fas fa-star star-btn active" data-value="4"></i>
                            <i class="fas fa-star star-btn active" data-value="5"></i>
                        </div>
                        <input type="hidden" name="rating" id="ratingInput" value="5" required />
                    </div>

                    <div class="form-group">
                        <label for="comment">Your Review</label>
                        <textarea name="comment" id="comment" rows="4" placeholder="Share your experience with this product..." required></textarea>
                    </div>

                    <button type="submit" class="btn-submit-review">Submit Review</button>
                </form>
                <div id="reviewMessage"></div>
            </div>
        <?php else: ?>
            <div class="review-login-prompt">
                <p><i class="fas fa-info-circle"></i> Please <a href="login.php?redirect=product.php?id=<?= $product['id'] ?>">login</a> to leave a review.</p>
            </div>
        <?php endif; ?>
    </div>
</section>

<script>
// Star picker logic
const starPicker = document.getElementById('starPicker');
if (starPicker) {
    const stars = starPicker.querySelectorAll('.star-btn');
    const ratingInput = document.getElementById('ratingInput');

    stars.forEach(star => {
        // Highlight on hover
        star.addEventListener('mouseover', function() {
            const val = parseInt(this.dataset.value);
            stars.forEach(s => {
                if (parseInt(s.dataset.value) <= val) {
                    s.classList.add('hovered');
                } else {
                    s.classList.remove('hovered');
                }
            });
        });

        star.addEventListener('mouseout', function() {
            stars.forEach(s => s.classList.remove('hovered'));
        });

        // Set value on click
        star.addEventListener('click', function() {
            const val = parseInt(this.dataset.value);
            ratingInput.value = val;
            stars.forEach(s => {
                if (parseInt(s.dataset.value) <= val) {
                    s.classList.add('active');
                } else {
                    s.classList.remove('active');
                }
            });
        });
    });
}

// Form submission logic
const reviewForm = document.getElementById('reviewForm');
if (reviewForm) {
    reviewForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        const payload = {
            product_id: parseInt(formData.get('product_id')),
            rating: parseInt(formData.get('rating')),
            comment: formData.get('comment')
        };
        try {
            const res = await fetch('api/submit_review.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            const data = await res.json();
            const msgDiv = document.getElementById('reviewMessage');
            if (data.success) {
                msgDiv.innerHTML = '<span class="text-success"><i class="fas fa-check-circle"></i> Review submitted successfully!</span>';
                setTimeout(() => location.reload(), 1500);
            } else {
                msgDiv.innerHTML = '<span class="text-danger"><i class="fas fa-times-circle"></i> ' + (data.error || 'Failed to submit review.') + '</span>';
            }
        } catch (err) {
            console.error(err);
        }
    });
}
</script>
<?php require_once 'includes/footer.php'; ?>