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

// Get cart items from database if user is logged in
$cart_items = [];
if (isLoggedIn()) {
    $cart_items = getCartItems($pdo, $_SESSION['user_id']);
}
?>

<div class="container">
    <div class="section-title">
        <h2>عربة التسوق</h2>
    </div>
    
    <div class="cart-content">
        <table class="cart-table">
            <thead>
                <tr>
                    <th>المنتج</th>
                    <th>الاسم</th>
                    <th>السعر</th>
                    <th>الكمية</th>
                    <th>الإجمالي</th>
                    <th>الإجراء</th>
                </tr>
            </thead>
            <tbody>
                <!-- Cart items will be populated by JavaScript -->
            </tbody>
        </table>
        
        <div class="cart-total">
            <div class="cart-actions">
                <a href="<?php echo SITE_URL; ?>/products/index.php" class="btn btn-outline">متابعة التسوق</a>
                <div>
                    <strong>الإجمالي: <span class="cart-total-amount">$0.00</span></strong>
                    <a href="<?php echo SITE_URL; ?>/cart/checkout.php" class="btn btn-primary" style="margin-left: 15px;">الانتقال إلى الدفع</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Pass PHP cart data and site URL to JavaScript
window.serverCartItems = <?php echo json_encode($cart_items); ?>;
window.siteUrl = '<?php echo SITE_URL; ?>';
</script>

<style>
.cart-table th,
.cart-table td {
    direction: rtl;
    text-align: right;
}

.cart-actions {
    direction: rtl;
    text-align: right;
}

.cart-actions > div {
    float: left;
}

.section-title {
    direction: rtl;
    text-align: center;
}

.section-title h2 {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

@media (max-width: 768px) {
    .cart-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .cart-actions > div {
        float: none;
        margin-top: 15px;
    }
}
</style>

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