38703-vm/car_detail.php

<?php
require_once __DIR__ . '/includes/header.php';

$pdo = db();
$id = $_GET['id'] ?? 0;

$stmt = $pdo->prepare("SELECT c.*, u.name as seller_name FROM cars c JOIN users u ON c.user_id = u.id WHERE c.id = ? AND c.status = 'approved'");
$stmt->execute([$id]);
$car = $stmt->fetch();

if (!$car) {
    echo "<div class='container' style='text-align: center; padding: 10rem 5%;'><h1>Car not found.</h1><a href='cars.php' class='btn btn-primary' style='margin-top: 2rem;'>Back to Marketplace</a></div>";
    require_once __DIR__ . '/includes/footer.php';
    exit;
}

// Get images
$stmt = $pdo->prepare("SELECT * FROM car_images WHERE car_id = ?");
$stmt->execute([$id]);
$images = $stmt->fetchAll();
$mainImage = '';
foreach ($images as $img) {
    if ($img['is_main']) {
        $mainImage = $img['image_path'];
        break;
    }
}
if (!$mainImage && !empty($images)) $mainImage = $images[0]['image_path'];

// Similar cars
$stmt = $pdo->prepare("SELECT c.*, ci.image_path FROM cars c LEFT JOIN car_images ci ON c.id = ci.car_id AND ci.is_main = 1 WHERE c.brand = ? AND c.id != ? AND c.status = 'approved' LIMIT 3");
$stmt->execute([$car['brand'], $id]);
$similar = $stmt->fetchAll();
?>

<div class="container" style="padding-top: 2rem;">
    <div style="display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem;">
        <div>
            <div id="main-car-image" class="glass" style="height: 550px; background-image: url('<?= htmlspecialchars($mainImage ?: 'assets/images/placeholder-car.jpg') ?>'); background-size: cover; background-position: center; border-radius: 20px; margin-bottom: 2rem; box-shadow: 0 20px 40px rgba(0,0,0,0.5);"></div>
            
            <?php if (count($images) > 1): ?>
                <div style="display: flex; gap: 1rem; margin-bottom: 3rem;">
                    <?php foreach ($images as $img): ?>
                        <div class="glass" style="width: 100px; height: 80px; background-image: url('<?= htmlspecialchars($img['image_path']) ?>'); background-size: cover; background-position: center; cursor: pointer; border-radius: 12px; transition: var(--transition);" onclick="document.getElementById('main-car-image').style.backgroundImage='url(\'<?= htmlspecialchars($img['image_path']) ?>\')'"></div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>

            <div class="glass" style="padding: 3rem; border-left: 4px solid var(--primary-color);">
                <h2 style="margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem;">
                    <span>📜</span> Detailed Description
                </h2>
                <div style="color: var(--text-secondary); line-height: 2; font-size: 1.1rem;">
                    <?= nl2br(htmlspecialchars($car['description'])) ?>
                </div>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; border-top: 1px solid var(--glass-border); padding-top: 2rem;">
                    <div>
                        <p style="color: var(--primary-color); font-weight: 700; margin-bottom: 0.5rem; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px;">Vehicle Condition</p>
                        <p style="color: var(--text-primary);">Excellent / Premium</p>
                    </div>
                    <div>
                        <p style="color: var(--primary-color); font-weight: 700; margin-bottom: 0.5rem; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px;">Transmission</p>
                        <p style="color: var(--text-primary);">Automatic</p>
                    </div>
                    <div>
                        <p style="color: var(--primary-color); font-weight: 700; margin-bottom: 0.5rem; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px;">Fuel Type</p>
                        <p style="color: var(--text-primary);">Petrol / Hybrid</p>
                    </div>
                    <div>
                        <p style="color: var(--primary-color); font-weight: 700; margin-bottom: 0.5rem; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px;">Import Status</p>
                        <p style="color: var(--text-primary);">Custom Cleared</p>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="glass" style="padding: 3rem; position: sticky; top: 120px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
                    <span style="background: rgba(212, 175, 55, 0.2); color: var(--primary-color); padding: 6px 16px; border-radius: 50px; font-weight: 700; font-size: 0.85rem; border: 1px solid var(--primary-color);"><?= $car['year'] ?> MODEL</span>
                    <span style="color: var(--text-secondary); font-size: 0.9rem; font-weight: 500;">📍 <?= $car['city'] ?>, AFG</span>
                </div>
                
                <h1 style="font-size: 3rem; margin-bottom: 1rem; line-height: 1.1; font-weight: 800;"><?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?></h1>
                <div class="car-price" style="font-size: 2.5rem; margin-bottom: 2.5rem;">$<?= number_format($car['price']) ?></div>
                
                <div style="background: rgba(255,255,255,0.02); padding: 2rem; border-radius: 16px; margin-bottom: 2.5rem; border: 1px solid var(--glass-border);">
                    <p style="color: var(--text-secondary); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.8rem;">
                        <span style="opacity: 0.5;">👤</span> Seller: <strong style="color: var(--text-primary);"><?= htmlspecialchars($car['seller_name']) ?></strong>
                    </p>
                    <p style="color: var(--text-secondary); display: flex; align-items: center; gap: 0.8rem;">
                        <span style="opacity: 0.5;">🆔</span> Listing ID: <strong style="color: var(--text-primary);">#AFG-<?= str_pad($car['id'], 5, '0', STR_PAD_LEFT) ?></strong>
                    </p>
                </div>

                <?php if (isset($_SESSION['user_id'])): ?>
                    <a href="purchase.php?id=<?= $car['id'] ?>" class="btn btn-primary" style="width: 100%; text-align: center; margin-bottom: 1.5rem; padding: 1.2rem; font-size: 1.1rem;">Initiate Purchase</a>
                    <a href="#" class="btn btn-outline" style="width: 100%; text-align: center; padding: 1.2rem;">Add to Favorites</a>
                <?php else: ?>
                    <div style="text-align: center; padding: 2rem; border: 1px dashed var(--glass-border); border-radius: 16px;">
                        <p style="margin-bottom: 1.5rem; color: var(--text-secondary); font-size: 0.95rem;">Interested in this vehicle? Log in to contact the seller.</p>
                        <a href="login.php" class="btn btn-primary" style="width: 100%; text-align: center;">Login to Proceed</a>
                    </div>
                <?php endif; ?>
                
                <div style="margin-top: 3rem; text-align: center;">
                    <p style="color: var(--text-secondary); font-size: 0.8rem;">Share this listing:</p>
                    <div style="display: flex; gap: 1rem; justify-content: center; margin-top: 1rem; font-size: 1.5rem;">
                        <span style="cursor: pointer; opacity: 0.6;">📱</span>
                        <span style="cursor: pointer; opacity: 0.6;">💬</span>
                        <span style="cursor: pointer; opacity: 0.6;">📧</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <?php if ($similar): ?>
        <div style="margin-top: 6rem;">
            <h2 class="section-title" style="text-align: left;">Similar Premium Vehicles</h2>
            <div class="grid">
                <?php foreach ($similar as $s): ?>
                    <div class="car-card glass">
                        <div class="car-img-container" style="overflow: hidden; height: 200px;">
                            <div class="car-img" style="background-image: url('<?= htmlspecialchars($s['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>'); background-size: cover; background-position: center; height: 100%;"></div>
                        </div>
                        <div class="car-info">
                            <div class="car-meta">
                                <span>📅 <?= htmlspecialchars($s['year']) ?></span>
                                <span>📍 <?= htmlspecialchars($s['city']) ?></span>
                            </div>
                            <h3><?= htmlspecialchars($s['brand'] . ' ' . $s['model']) ?></h3>
                            <div class="car-price">$<?= number_format($s['price']) ?></div>
                            <a href="car_detail.php?id=<?= $s['id'] ?>" class="btn btn-outline" style="width: 100%; text-align: center;">View Details</a>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    <?php endif; ?>
</div>

<?php require_once __DIR__ . '/includes/footer.php'; ?>