<?php
$page_title = "Course Checkout | Visa Solution Plus";
$active_page = "checkout";
include 'header.php';
?>

<!-- Custom CSS for Checkout -->
<link rel="stylesheet" href="checkout.css">

<section class="checkout-section">
    <div class="container">
        <div class="row g-5">
            <!-- Left Column: Cart & Checkout Form -->
            <div class="col-lg-8">
                <!-- Course Selection Card -->
                <div class="checkout-card mb-4">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h4 class="fw-bold mb-0"><i class="fas fa-shopping-bag me-2 text-primary"></i>1. Course Selection</h4>
                    </div>
                    <div id="cart-items-container">
                        <!-- Loaded via JS -->
                    </div>
                </div>

                <!-- Billing & Payment Details -->
                <div class="checkout-card">
                    <h4 class="fw-bold mb-4"><i class="fas fa-user-check me-2 text-primary"></i>2. Billing & Payment Details</h4>
                    
                    <form id="payment-form">
                        <div class="row g-3">
                            <!-- Personal Info -->
                            <div class="col-md-6">
                                <label class="form-label fw-bold small opacity-75">FULL NAME</label>
                                <input type="text" class="form-control premium-input" id="bill_name" placeholder="John Doe" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small opacity-75">EMAIL ADDRESS</label>
                                <input type="email" class="form-control premium-input" id="bill_email" placeholder="john@example.com" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small opacity-75">PHONE NUMBER</label>
                                <input type="tel" class="form-control premium-input" id="bill_phone" placeholder="+91 98765 43210" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small opacity-75">COUNTRY</label>
                                <select class="form-select premium-input" id="bill_country" required>
                                    <option value="India">India</option>
                                    <option value="USA">USA</option>
                                    <option value="UK">UK</option>
                                    <option value="Canada">Canada</option>
                                    <option value="Australia">Australia</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold small opacity-75">BILLING ADDRESS</label>
                                <textarea class="form-control premium-input" id="bill_address" rows="2" placeholder="Street address, City, State, PIN" required></textarea>
                            </div>

                            <!-- Card Details -->
                            <div class="col-12 mt-4">
                                <div class="payment-methods-pill mb-3">
                                    <span class="active" style="background:#3b82f6;color:white;padding:5px 15px;border-radius:20px;font-size:0.8rem;font-weight:600;"><i class="fas fa-credit-card me-2"></i>Credit / Debit Card</span>
                                </div>
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-bold small opacity-75">CARD NUMBER</label>
                                <div class="input-group">
                                    <input type="text" class="form-control premium-input border-end-0" id="card_num" placeholder="0000 0000 0000 0000" maxlength="19" required>
                                    <span class="input-group-text bg-white border-start-0"><i class="fas fa-lock text-muted"></i></span>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-bold small opacity-75">EXPIRY DATE</label>
                                <input type="text" class="form-control premium-input" id="card_expiry" placeholder="MM / YY" maxlength="5" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small opacity-75">CVV / CVC</label>
                                <input type="password" class="form-control premium-input" id="card_cvv" placeholder="***" maxlength="3" required>
                            </div>
                        </div>
                    </form>

                    <div class="mt-5 p-4 bg-light rounded-4 border border-info border-opacity-25">
                        <div class="d-flex align-items-start gap-3">
                            <i class="fas fa-shield-check text-success mt-1 fs-5"></i>
                            <div>
                                <h6 class="fw-bold mb-1">Encrypted Payment</h6>
                                <p class="small text-muted mb-0">Your payment information is encrypted and processed securely. We do not store your full card details.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Order Summary -->
            <div class="col-lg-4">
                <div class="summary-card">
                    <h3 class="summary-title">Order Summary</h3>
                    
                    <div class="summary-row">
                        <span class="opacity-75">Subtotal</span>
                        <span id="summary-subtotal">$0.00</span>
                    </div>
                    
                    <div class="summary-row">
                        <span class="opacity-75">Processing Fee</span>
                        <span>$0.00</span>
                    </div>
                    
                    <div class="summary-row">
                        <span class="opacity-75">Tax (GST/VAT)</span>
                        <span>Included</span>
                    </div>
                    
                    <div class="summary-total">
                        <span>Total</span>
                        <span id="summary-total-val">$0.00</span>
                    </div>
                    
                    <button class="btn-pay" id="process-payment-btn">
                        COMPLETE PAYMENT <i class="fas fa-lock ms-2"></i>
                    </button>
                    
                    <div class="mt-4 text-center">
                        <img src="https://img.icons8.com/color/48/000000/visa.png" width="40" alt="Visa">
                        <img src="https://img.icons8.com/color/48/000000/mastercard.png" width="40" alt="Mastercard" class="mx-2">
                        <img src="https://img.icons8.com/color/48/000000/paypal.png" width="40" alt="Paypal">
                    </div>
                    
                    <p class="small text-center mt-3 opacity-50">
                        <i class="fas fa-shield-alt me-1"></i> SSL Encrypted & 100% Secure
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Payment Loading Overlay -->
<div class="loading-overlay" id="payment-loading">
    <div class="spinner"></div>
    <h3 class="mt-4 fw-bold">Processing Payment</h3>
    <p class="text-muted">Please do not refresh or close this window...</p>
</div>

<!-- JS Logic -->
<script src="checkout.js"></script>

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