<?php
// PHP 7.4 compatible Checkout Page
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
require_once 'products.php';
require_once 'analytics.php';
track_order_request();

// Redirect to index if bag is empty
if (empty($_SESSION['bag'])) {
    header('Location: index.php');
    exit;
}

require_once 'header.php';

// Calculate subtotal
$subtotal = 0.0;
foreach ($_SESSION['bag'] as $item) {
    $subtotal += $item['single_price'] * $item['quantity'];
}
?>

<div class="container" style="padding-top: 40px;">
  <h1>Checkout.</h1>
  <p style="color: var(--text-secondary); margin-bottom: 24px;">Please complete your demo order details below.</p>
  
  <!-- Checkout Form -->
  <form action="success.php" method="POST">
    <div class="checkout-grid">
      
      <!-- Left Column - Forms -->
      <div class="checkout-forms">
        
        <!-- Contact Section -->
        <div>
          <h2 class="checkout-section-title">Contact Information</h2>
          <div class="form-group">
            <label for="email">Email Address</label>
            <input type="email" id="email" name="email" class="form-control" placeholder="name@example.com" required>
          </div>
          <div class="form-group">
            <label for="phone">Phone Number</label>
            <input type="tel" id="phone" name="phone" class="form-control" placeholder="081-234-5678" required>
          </div>
        </div>
        
        <!-- Shipping Section -->
        <div>
          <h2 class="checkout-section-title">Shipping Address</h2>
          <div class="form-group">
            <label for="fullname">Full Name</label>
            <input type="text" id="fullname" name="fullname" class="form-control" placeholder="John Doe" required>
          </div>
          <div class="form-group">
            <label for="address">Address Line</label>
            <input type="text" id="address" name="address" class="form-control" placeholder="123 Sukhumvit Rd" required>
          </div>
          <div class="row">
            <div class="col" style="flex: 2;">
              <div class="form-group">
                <label for="city">City / Province</label>
                <input type="text" id="city" name="city" class="form-control" placeholder="Bangkok" required>
              </div>
            </div>
            <div class="col" style="flex: 1;">
              <div class="form-group">
                <label for="zipcode">Zip Code</label>
                <input type="text" id="zipcode" name="zipcode" class="form-control" placeholder="10110" required>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Payment Details Section -->
        <div>
          <h2 class="checkout-section-title">Payment Method</h2>
          
          <!-- Visual Selection -->
          <div class="payment-methods-grid" style="margin-bottom: 24px;">
            <input type="radio" name="payment_method" id="pay-card" value="card" class="option-card-input" checked>
            <label for="pay-card" class="payment-method-label">
              <span class="payment-icon">💳</span> Credit or Debit Card
            </label>
            
            <input type="radio" name="payment_method" id="pay-apple" value="apple" class="option-card-input">
            <label for="pay-apple" class="payment-method-label">
              <span class="payment-icon"></span> Apple Pay
            </label>

            <input type="radio" name="payment_method" id="pay-google" value="google" class="option-card-input">
            <label for="pay-google" class="payment-method-label">
              <span class="payment-icon">G</span> Google Pay
            </label>

            <input type="radio" name="payment_method" id="pay-paypal" value="paypal" class="option-card-input">
            <label for="pay-paypal" class="payment-method-label">
              <span class="payment-icon">P</span> PayPal
            </label>
          </div>
          
          <!-- Card Info (Rendered as standard input field for simulation) -->
          <div id="card-fields">
            <div class="form-group">
              <label for="cardname">Name on Card</label>
              <input type="text" id="cardname" name="cardname" class="form-control" placeholder="JOHN DOE" required>
            </div>
            <div class="form-group">
              <label for="cardnumber">Card Number</label>
              <input type="text" id="cardnumber" name="cardnumber" class="form-control" placeholder="0000 0000 0000 0000" required>
            </div>
            <div class="row">
              <div class="col">
                <div class="form-group">
                  <label for="cardexpiry">Expiration (MM/YY)</label>
                  <input type="text" id="cardexpiry" name="cardexpiry" class="form-control" placeholder="12/28" required>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="cardcvv">CVV</label>
                  <input type="text" id="cardcvv" name="cardcvv" class="form-control" placeholder="000" required>
                </div>
              </div>
            </div>
          </div>
          
        </div>
        
      </div>
      
      <!-- Right Sticky Column - Order Summary -->
      <div class="checkout-summary-col">
        <div class="order-summary-box">
          <h3 style="font-size: 16px; font-weight: 600; margin-bottom: 16px;">Order Summary</h3>
          
          <div class="order-summary-items">
            <?php foreach ($_SESSION['bag'] as $item): 
              $product = get_product_by_id($item['product_id']);
              if (!$product) continue;
            ?>
              <div class="order-summary-item">
                <div>
                  <div class="name"><?php echo htmlspecialchars($product['name']); ?> (x<?php echo $item['quantity']; ?>)</div>
                  <div style="font-size: 11px;">Size: <?php echo htmlspecialchars($item['size']); ?></div>
                </div>
                <div>$<?php echo number_format($item['single_price'] * $item['quantity'], 2); ?></div>
              </div>
            <?php endforeach; ?>
          </div>
          
          <div class="order-summary-totals">
            <div class="summary-row" style="margin-bottom: 8px;">
              <span>Subtotal</span>
              <span>$<?php echo number_format($subtotal, 2); ?></span>
            </div>
            <div class="summary-row" style="margin-bottom: 12px;">
              <span>Shipping</span>
              <span>Free</span>
            </div>
            <div class="summary-row total" style="font-size: 18px; padding-top: 12px;">
              <span>Total</span>
              <span>$<?php echo number_format($subtotal, 2); ?></span>
            </div>
          </div>
          
          <div style="margin-top: 24px;">
            <button type="submit" class="btn btn-primary" style="width: 100%; padding: 14px;">Confirm Payment</button>
          </div>
        </div>
      </div>
      
    </div>
  </form>
</div>

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