<?php
include 'includes/header.php';
include 'includes/db.php';

// Get card ID from URL
if(!isset($_GET['id']) || !is_numeric($_GET['id'])){
    echo "<p>Invalid card ID.</p>";
    exit;
}

$id = intval($_GET['id']);
$result = $conn->query("SELECT * FROM client_cards WHERE id=$id");
if($result && $result->num_rows > 0){
    $card = $result->fetch_assoc();
    // Use the full path stored in DB directly
    $image = !empty($card['image']) ? $card['image'] : 'assets/images/no-image.jpg';
} else {
    echo "<p>Card not found.</p>";
    exit;
}
?>

<section class="card-detail-section">
    <div class="card-detail-container">
        <h2><?= htmlspecialchars($card['type']) ?></h2>
        <div class="card-detail-image">
            <img src="<?= htmlspecialchars($image) ?>" alt="<?= htmlspecialchars($card['type']) ?>">
        </div>
        <div class="card-detail-description">
            <?= $card['description'] ?> <!-- Full description from DB -->
        </div>
        <a href="index.php" class="back-btn">← Back to Client Cards</a>
    </div>
</section>

<style>
.card-detail-section {
    padding: 40px 20px;
    text-align: center;
}

.card-detail-container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px;
}

.card-detail-image img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 5px;
}

.card-detail-description {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
}

.back-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 16px;
    background: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}

.back-btn:hover {
    background: #0056b3;
}
</style>

<?php include 'includes/footer.php'; ?>
