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

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

$stmt = $pdo->prepare("
    SELECT c.*, u.name as seller_name, ci.image_path 
    FROM cars c 
    JOIN users u ON c.user_id = u.id 
    LEFT JOIN car_images ci ON c.id = ci.car_id AND ci.is_main = 1 
    WHERE c.id = ? AND c.deleted_at IS NULL AND (c.status = 'approved' OR c.status = 'sold')
");
$stmt->execute([$id]);
$car = $stmt->fetch();

if (!$car) {
    header('Location: cars.php');
    exit;
}

// Fetch all images
$stmt = $pdo->prepare("SELECT image_path FROM car_images WHERE car_id = ?");
$stmt->execute([$id]);
$images = $stmt->fetchAll(PDO::FETCH_COLUMN);
?>

<div class="container" style="padding: 4rem 0;">
    <div class="grid" style="grid-template-columns: 1.5fr 1fr; gap: 4rem; align-items: start;">
        
        <!-- Left Column: Images & Info -->
        <div>
            <div style="position: relative; margin-bottom: 2rem;">
                <img src="<?= htmlspecialchars($car['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>" class="w-full" style="border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.3);">
                <?php if ($car['status'] === 'sold'): ?>
                    <div class="sold-overlay">
                        <div class="sold-stamp">SOLD</div>
                    </div>
                <?php endif; ?>
            </div>

            <div class="grid grid-4 mb-3">
                <?php foreach ($images as $img): ?>
                    <img src="<?= htmlspecialchars($img) ?>" class="w-full" style="height: 120px; object-fit: cover; border-radius: 16px; cursor: pointer; transition: transform 0.3s ease; border: 1px solid var(--glass-border);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
                <?php endforeach; ?>
            </div>

            <div class="glass" style="padding: 3rem;">
                <h2 class="section-title mb-2">Description</h2>
                <div style="line-height: 2; color: var(--text-secondary); white-space: pre-line; font-size: 1.1rem;">
                    <?= htmlspecialchars($car['description']) ?>
                </div>
            </div>
        </div>

        <!-- Right Column: Details & Actions -->
        <div style="position: sticky; top: 120px;">
            <div class="glass" style="padding: 3.5rem; border-top: 5px solid var(--primary-color);">
                <div class="mb-2">
                    <span class="badge badge-primary"><?= htmlspecialchars($car['city']) ?></span>
                </div>
                
                <h1 class="fw-black mb-1" style="font-size: 3rem; line-height: 1.1; color: #fff;">
                    <?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?>
                </h1>
                
                <p class="text-secondary mb-3" style="font-size: 1.2rem; font-weight: 600;">
                    Year: <span class="text-gold"><?= $car['year'] ?></span> | Status: <span class="text-gold"><?= ucfirst($car['status']) ?></span>
                </p>

                <div style="background: rgba(0,0,0,0.2); padding: 2.5rem; border-radius: 24px; margin-bottom: 3rem; border: 1px solid var(--glass-border);">
                    <p class="text-secondary mb-1 text-sm fw-black" style="text-transform: uppercase; letter-spacing: 2px;">Current Marketplace Price</p>
                    <div class="price-tag-large">$<?= number_format($car['price']) ?></div>
                </div>

                <?php if ($car['status'] === 'sold'): ?>
                    <div class="box text-center" style="padding: 2.5rem; background: rgba(0,0,0,0.1); border-color: var(--glass-border);">
                        <p class="text-secondary fw-bold" style="font-size: 1.1rem;">This vehicle has been successfully sold.</p>
                    </div>
                <?php else: ?>
                    <a href="purchase.php?id=<?= $car['id'] ?>" class="btn btn-primary btn-lg w-full mb-2 fw-black">Initiate Purchase Request</a>
                <?php endif; ?>

                <div class="mt-3 pt-3" style="border-top: 1px solid var(--glass-border);">
                    <div class="flex align-center gap-1">
                        <div style="width: 55px; height: 55px; background: var(--primary-color); color: #000; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.4rem;">
                            <?= strtoupper(substr($car['seller_name'], 0, 1)) ?>
                        </div>
                        <div>
                            <p class="text-secondary text-sm fw-black" style="text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.2rem;">Verified Seller</p>
                            <p class="fw-black" style="font-size: 1.1rem; color: #fff;"><?= htmlspecialchars($car['seller_name']) ?></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="glass mt-2" style="padding: 2rem; background: rgba(46, 213, 115, 0.05); border-color: rgba(46, 213, 115, 0.2);">
                <h4 style="color: #2ed573; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.8rem; font-weight: 800;">
                    <span style="font-size: 1.5rem;">🛡️</span> AfgCars Secure Payment
                </h4>
                <p class="text-secondary text-sm" style="line-height: 1.8;">
                    Every transaction is protected. We verify bank references and legal documentation before finalizing any sale in Afghanistan.
                </p>
            </div>
        </div>

    </div>
</div>

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