<?php
require_once 'config.php';

$cart_items = getCartItems($pdo);
$cart_total = getCartTotal($pdo);

if (empty($cart_items)) {
    header('Location: cart.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkout - EliteEquip</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <style>
        .checkout-page {
            margin-top: 100px;
            margin-bottom: 50px;
        }
        .checkout-form-container {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            box-shadow: var(--shadow-md);
        }
        .order-summary {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            box-shadow: var(--shadow-md);
            position: sticky;
            top: 100px;
        }
        .form-label {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
    </style>
</head>
<body>

<div id="loadingOverlay" class="loading-overlay">
    <div class="spinner-border text-warning" style="width: 4rem; height: 4rem;"></div>
</div>

<div id="toastContainer" class="toast-container"></div>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
    <div class="container">
        <a class="navbar-brand" href="index.php">
            <i class="fas fa-microchip"></i>
            <span>Elite<span class="text-warning">Equip</span></span>
        </a>
        <div class="cart-icon-wrapper">
            <a href="cart.php" class="cart-icon">
                <i class="fas fa-shopping-cart"></i>
                <span class="cart-count"><?php echo getCartCount($pdo); ?></span>
            </a>
        </div>
    </div>
</nav>

<div class="container checkout-page">
    <div class="row">
        <div class="col-lg-7">
            <div class="checkout-form-container">
                <h3 class="mb-4">Shipping Information</h3>
                <form id="checkoutForm" action="process_order.php" method="POST">
                    <div class="row">
                        <div class="col-12 mb-3">
                            <label class="form-label">Full Name *</label>
                            <input type="text" class="form-control" name="full_name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Phone Number *</label>
                            <input type="tel" class="form-control" name="phone" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" class="form-control" name="email">
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Street Address *</label>
                            <textarea class="form-control" name="address" rows="2" required></textarea>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">City *</label>
                            <input type="text" class="form-control" name="city" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">State *</label>
                            <input type="text" class="form-control" name="state" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Country *</label>
                            <input type="text" class="form-control" name="country" required>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary w-100 btn-lg">Place Order</button>
                </form>
            </div>
        </div>
        
        <div class="col-lg-5">
            <div class="order-summary">
                <h4 class="mb-4">Order Summary</h4>
                <?php foreach ($cart_items as $item): ?>
                <div class="d-flex justify-content-between mb-2">
                    <span><?php echo htmlspecialchars($item['name']); ?> x<?php echo $item['quantity']; ?></span>
                    <span>$<?php echo number_format($item['price'] * $item['quantity'], 2); ?></span>
                </div>
                <?php endforeach; ?>
                <hr>
                <div class="d-flex justify-content-between mb-2">
                    <strong>Subtotal</strong>
                    <strong>$<?php echo number_format($cart_total, 2); ?></strong>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span>Shipping</span>
                    <span>Free</span>
                </div>
                <hr>
                <div class="d-flex justify-content-between">
                    <strong style="font-size: 1.2rem;">Total</strong>
                    <strong style="font-size: 1.5rem; color: var(--secondary);">$<?php echo number_format($cart_total, 2); ?></strong>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="script.js"></script>
<script>
document.getElementById('checkoutForm').addEventListener('submit', function(e) {
    const required = ['full_name', 'phone', 'address', 'city', 'state', 'country'];
    for (let field of required) {
        const input = document.querySelector(`[name="${field}"]`);
        if (!input.value.trim()) {
            e.preventDefault();
            showToast(`Please fill in ${field.replace('_', ' ')}`, 'error');
            return false;
        }
    }
    showLoading();
});
</script>
</body>
</html>