<?php
/**
 * Single Product Detail & Checkout Page
 * Professional Corporate Theme
 */

require_once 'includes/db.php';

$slug = isset($_GET['slug']) ? trim($_GET['slug']) : '';
if (empty($slug)) {
    header("Location: /products");
    exit;
}

// 1. Fetch Product
try {
    $stmt = $pdo->prepare("SELECT * FROM products WHERE slug = :slug AND status = 'active' LIMIT 1");
    $stmt->execute([':slug' => $slug]);
    $product = $stmt->fetch();

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

    $stmt_ss = $pdo->prepare("SELECT image FROM product_screenshots WHERE product_id = :id");
    $stmt_ss->execute([':id' => $product['id']]);
    $screenshots = $stmt_ss->fetchAll();
} catch (PDOException $e) {
    header("Location: /products");
    exit;
}

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

$page_title = $product['title'];
require_once 'includes/header.php';
?>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

    /* =========================================
       PRODUCT PAGE LAYOUT
       ========================================= */
    .product-layout {
        font-family: 'Outfit', sans-serif;
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 40px;
        margin-top: 40px;
        margin-bottom: 80px;
    }
    
    @media (max-width: 992px) {
        .product-layout { grid-template-columns: 1fr; }
        .product-sidebar { position: static !important; }
        .product-main { padding: 24px !important; }
    }

    /* LEFT SIDE: Details */
    .product-main {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 40px;
        box-shadow: none;
    }
    .product-title-large {
        font-size: 2.5rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 16px;
        line-height: 1.2;
        letter-spacing: -0.5px;
    }
    .product-meta-top {
        display: flex;
        gap: 24px;
        color: #64748b;
        font-size: 0.95rem;
        margin-bottom: 32px;
        padding-bottom: 24px;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .main-image {
        width: 100%;
        height: auto;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        margin-bottom: 24px;
        box-shadow: none;
    }
    
    .demo-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background-color: #f8fafc;
        color: #0f172a;
        padding: 12px 24px;
        border-radius: 4px;
        font-weight: 600;
        border: 1px solid #e2e8f0;
        margin-bottom: 32px;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    .demo-btn:hover {
        background-color: #f1f5f9;
        border-color: #FF0351;
        color: #FF0351;
    }

    .screenshots-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
        margin-bottom: 40px;
    }
    .screenshot-img {
        width: 100%;
        height: 90px;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid #e2e8f0;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .screenshot-img:hover {
        transform: scale(1.05);
        border-color: #FF0351;
        box-shadow: none;
    }

    .desc-content {
        line-height: 1.8;
        color: #64748b;
        font-size: 1.05rem;
    }

    /* RIGHT SIDE: Sticky Checkout Card */
    .product-sidebar {
        position: sticky;
        top: 100px;
    }
    .price-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 32px;
        box-shadow: none;
    }
    .price-amount {
        font-size: 2.8rem;
        font-weight: 800;
        color: #FF0351;
        margin-bottom: 8px;
        line-height: 1;
        letter-spacing: -1px;
    }
    
    /* Secure Features List */
    .secure-list {
        list-style: none;
        padding: 0;
        margin: 24px 0;
        border-top: 1px dashed #e2e8f0;
        padding-top: 24px;
    }
    .secure-list li {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
        color: #64748b;
        font-size: 0.95rem;
    }
    .secure-list li svg {
        color: #10b981;
        width: 20px;
        height: 20px;
    }

    .btn-add-cart {
        background: #FF0351;
        color: white;
        width: 100%;
        padding: 16px;
        font-size: 1.1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border: none;
        border-radius: 4px;
        font-weight: bold;
        cursor: pointer;
        transition: background 0.3s ease;
        font-family: 'Outfit', sans-serif;
    }
    
    .btn-add-cart:hover {
        background: #e60045;
    }
</style>

<div class="container">
    <div class="product-layout">
        
        <div class="product-main">
            <h1 class="product-title-large"><?php echo htmlspecialchars($product['title']); ?></h1>
            
            <div class="product-meta-top">
                <span><strong>Version:</strong> <?php echo htmlspecialchars($product['version'] ?? '1.0'); ?></span>
                <span><strong>Released:</strong> <?php echo date('M d, Y', strtotime($product['created_at'])); ?></span>
            </div>

            <img src="<?php echo get_image_url('products/images', $product['main_image']); ?>" class="main-image" alt="Product Image">

            <?php if (!empty($product['demo_link'])): ?>
                <a href="<?php echo htmlspecialchars($product['demo_link']); ?>" target="_blank" class="demo-btn">
                    <svg xmlns="http://www.w3.org/2000/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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                    </svg>
                    Live Preview
                </a>
            <?php endif; ?>

            <?php if (!empty($screenshots)): ?>
                <h3 style="font-size: 1.2rem; margin-bottom: 16px; color: #0f172a;">Gallery & Screenshots</h3>
                <div class="screenshots-grid">
                    <?php foreach ($screenshots as $ss): ?>
                        <img src="<?php echo get_image_url('products/screenshots', $ss['image']); ?>" class="screenshot-img" alt="Screenshot">
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>

            <div style="border-top: 1px solid #e2e8f0; padding-top: 32px; margin-top: 16px;">
                <h2 style="font-size: 1.5rem; margin-bottom: 20px; color: #0f172a;">Product Description</h2>
                <div class="desc-content">
                    <?php echo nl2br(htmlspecialchars($product['description'])); ?>
                </div>
            </div>
        </div>

        <div class="product-sidebar">
            <div class="price-card">
                <?php if($product['old_price'] > 0 && $product['old_price'] > $product['price']): ?>
                    <div style="text-decoration: line-through; color: #94a3b8; font-size: 1.2rem; margin-bottom: -5px;">
                        <?php echo CURRENCY_SYMBOL . ' ' . number_format($product['old_price'], 2); ?>
                    </div>
                <?php endif; ?>
                
                <div class="price-amount"><?php echo CURRENCY_SYMBOL . ' ' . number_format($product['price'], 2); ?></div>
                <p style="color: #64748b; margin-bottom: 24px; font-size: 0.95rem;">One-time payment. Full source code access.</p>

                <form action="" method="POST">
                    <input type="hidden" name="product_id" value="<?php echo $product['id']; ?>">
                    
                    <ul class="secure-list">
                        <li><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> Lifetime License</li>
                        <li><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> Instant Automated Delivery</li>
                        <li><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> 100% Secure Payment</li>
                    </ul>

                    <?php 
                    $in_cart = isset($_SESSION['cart']) && in_array($product['id'], $_SESSION['cart']);
                    if ($in_cart): 
                    ?>
                        <a href="/cart" class="btn-add-cart" style="text-decoration: none; background: #10b981;">
                            <svg xmlns="http://www.w3.org/2000/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="M5 13l4 4L19 7" /></svg>
                            Added to Cart
                        </a>
                    <?php else: ?>
                        <button type="submit" name="add_to_cart" class="btn-add-cart">
                            <svg xmlns="http://www.w3.org/2000/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="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>
                    <?php endif; ?>
                </form>
            </div>
        </div>
        
    </div>
</div>

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