
<?php
if (empty($_SESSION['user'])) {
    \Tshen\redirect('/login');
}

// Get class ID from URL
$classId = isset($params['id']) ? (int)$params['id'] : 0;

// Fetch class details
$stmt = $db->prepare('
    SELECT c.*, s.name as studio_name 
    FROM classes c 
    LEFT JOIN studios s ON c.studio_id = s.id 
    WHERE c.id = ?
');
$stmt->execute([$classId]);
$class = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$class) {
    \Tshen\redirect('/classes');
}

// Fetch user's available credits
$stmt = $db->prepare('
    SELECT SUM(credits_remaining) as total 
    FROM credit_bundles 
    WHERE user_id = ? AND expires_at > NOW() AND credits_remaining > 0
');
$stmt->execute([$_SESSION['user']['id']]);
$credits = $stmt->fetch(PDO::FETCH_ASSOC);
$availableCredits = (int)($credits['total'] ?? 0);
?>

<div class="booking-page">
    <div class="booking-container">
        <h1>Book Class</h1>
        
        <div class="class-details">
              <img src="<?= htmlspecialchars($class['image'] ?? \Tshen\asset('default-class.jpg')) ?>" 
                 alt="<?= htmlspecialchars($class['name']) ?>" 
                 class="class-image">
            
            <div class="details-content">
                <h2><?= htmlspecialchars($class['name']) ?></h2>
                <p class="studio"><?= htmlspecialchars($class['studio_name']) ?></p>
                
                <div class="credits-info">
                    <div class="required">
                        Required Credits: <strong><?= (int)$class['credits'] ?></strong>
                    </div>
                    <div class="available">
                        Your Available Credits: <strong><?= $availableCredits ?></strong>
                    </div>
                </div>

                <?php if ($availableCredits >= $class['credits']): ?>
                    <button onclick="confirmBooking(<?= (int)$class['id'] ?>, <?= (int)$class['credits'] ?>)" 
                            class="book-confirm-btn">
                        Confirm Booking
                    </button>
                <?php else: ?>
                    <div class="insufficient-credits">
                        <p>You need more credits to book this class.</p>
                        <a href="<?= \Tshen\url('/dashboard/bookings') ?>" class="purchase-btn">Purchase Credits</a>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<style>
.booking-page {
    padding: 40px 20px;
    max-width: 900px;
    margin: 0 auto;
}

.booking-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 30px;
}

.class-details {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    margin-top: 20px;
}

.class-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.details-content h2 {
    margin: 0 0 10px;
    color: var(--text);
}

.studio {
    color: var(--muted);
    margin-bottom: 20px;
}

.credits-info {
    background: var(--card);
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.credits-info .required {
    margin-bottom: 10px;
}

.credits-info strong {
    color: var(--accent);
}

.book-confirm-btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    margin-top: 20px;
}

.insufficient-credits {
    margin-top: 20px;
    text-align: center;
}

.purchase-btn {
    display: inline-block;
    background: var(--accent);
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .class-details {
        grid-template-columns: 1fr;
    }
}
</style>

<script>
function confirmBooking(classId, credits) {
    if (!confirm(`Book this class using ${credits} credits?`)) return;
    
    fetch('<?= \Tshen\url("/dashboard/book_class.php") ?>', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify({
            class_id: classId,
            credits: credits
        })
    })
    .then(r => r.json())
    .then(res => {
        if (res.success) {
            alert('Class booked successfully!');
            window.location.href = '<?= \Tshen\url("/dashboard/bookings") ?>';
        } else {
            alert(res.message || 'Booking failed');
        }
    })
    .catch(() => alert('Booking failed'));
}
</script>