/**
 * Checkout Page
 * 
 * This page handles the checkout process for the shopping cart.
 */

// Include initialization file
require_once 'includes/init.php';

// Check if cart is empty
if (!isset($_SESSION['cart']) || empty($_SESSION['cart'])) {
    header('Location: cart.php');
    exit;
}

// Initialize variables
$step = isset($_GET['step']) ? (int)$_GET['step'] : 1;
$error = '';
$success = '';

// Get cart items
$cartItems = [];
$subtotal = 0;
$totalItems = 0;

if (!empty($_SESSION['cart'])) {
    // Get product IDs
    $productIds = array_keys($_SESSION['cart']);
    $placeholders = implode(',', array_fill(0, count($productIds), '?'));
    
    // Get products from database
    $stmt = $db->prepare("
        SELECT p.*, pc.name as category_name 
        FROM products p 
        JOIN product_categories pc ON p.category_id = pc.id 
        WHERE p.id IN ({$placeholders}) AND p.status = 'active'
    ");
    $stmt->execute($productIds);
    $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    // Process products
    foreach ($products as $product) {
        $itemId = $product['id'];
        $quantity = $_SESSION['cart'][$itemId]['quantity'] ?? 1;
        $variationId = $_SESSION['cart'][$itemId]['variation_id'] ?? null;
        
        // Get variation if exists
        $variation = null;
        if ($variationId) {
            $variationStmt = $db->prepare("
                SELECT * FROM product_variations 
                WHERE id = ? AND product_id = ?
            ");
            $variationStmt->execute([$variationId, $itemId]);
            $variation = $variationStmt->fetch(PDO::FETCH_ASSOC);
        }
        
        // Parse images
        $product['images'] = json_decode($product['images'], true) ?: [];
        
        // Get main image URL
        $product['main_image'] = !empty($product['images']) ? 
            $storage->getSignedUrl($product['images'][0]) : 
            '/assets/images/product-placeholder.jpg';
        
        // Calculate price
        $price = $product['price'];
        if (!empty($product['sale_price']) && $product['sale_price'] < $product['price']) {
            $price = $product['sale_price'];
        }
        
        // Add variation price if exists
        if ($variation && !empty($variation['price_adjustment'])) {
            $price += $variation['price_adjustment'];
        }
        
        // Calculate item total
        $itemTotal = $price * $quantity;
        
        // Add to cart items
        $cartItems[] = [
            'id' => $itemId,
            'name' => $product['name'],
            'category_name' => $product['category_name'],
            'image' => $product['main_image'],
            'price' => $price,
            'price_formatted' => '$' . number_format($price, 2),
            'quantity' => $quantity,
            'variation' => $variation ? $variation['name'] : null,
            'variation_id' => $variationId,
            'item_total' => $itemTotal,
            'item_total_formatted' => '$' . number_format($itemTotal, 2),
            'type' => $product['type'],
            'digital' => $product['type'] === 'digital',
        ];
        
        // Update subtotal
        $subtotal += $itemTotal;
        $totalItems += $quantity;
    }
}

// Update cart count in session
$_SESSION['cart_count'] = $totalItems;

// Calculate shipping cost
$shipping = 0;
if ($subtotal > 0 && $subtotal < 50) {
    $shipping = 5.95;
}

// Calculate tax (assuming 8% tax rate)
$taxRate = 0.08;
$tax = $subtotal * $taxRate;

// Calculate total
$total = $subtotal + $shipping + $tax;

// Get user data if logged in
$user = null;
$addresses = [];
if (is_logged_in()) {
    $userId = get_user_id();
    $user = $auth->getUser($userId);
    
    // Get user addresses
    $addresses = $db->fetchAll(
        "SELECT * FROM user_addresses WHERE user_id = ?",
        [$userId]
    );
}

// Function to create order
function createOrder() {
    global $db, $auth;
    
    // Get checkout data from session
    $checkout = $_SESSION['checkout'] ?? null;
    
    if (!$checkout) {
        return false;
    }
    
    // Get user ID if logged in
    $userId = is_logged_in() ? get_user_id() : null;
    
    // Generate order number
    $orderNumber = 'ORD-' . date('Ymd') . '-' . strtoupper(substr(md5(uniqid(mt_rand(), true)), 0, 6));
    
    // Prepare order data
    $orderData = [
        'order_number' => $orderNumber,
        'user_id' => $userId,
        'status' => 'pending',
        'payment_method' => $checkout['payment_method'],
        'payment_status' => $checkout['payment_method'] === 'bank_transfer' ? 'pending' : 'paid',
        'subtotal' => $checkout['subtotal'],
        'shipping_amount' => $checkout['shipping'],
        'tax_amount' => $checkout['tax'],
        'discount_amount' => 0,
        'total_amount' => $checkout['total'],
        'billing_name' => $checkout['billing']['first_name'] . ' ' . $checkout['billing']['last_name'],
        'billing_email' => $checkout['billing']['email'],
        'billing_phone' => $checkout['billing']['phone'],
        'billing_company' => $checkout['billing']['company'],
        'billing_address_1' => $checkout['billing']['address_1'],
        'billing_address_2' => $checkout['billing']['address_2'],
        'billing_city' => $checkout['billing']['city'],
        'billing_state' => $checkout['billing']['state'],
        'billing_postcode' => $checkout['billing']['postcode'],
        'billing_country' => $checkout['billing']['country'],
        'shipping_name' => $checkout['shipping']['first_name'] . ' ' . $checkout['shipping']['last_name'],
        'shipping_company' => $checkout['shipping']['company'],
        'shipping_address_1' => $checkout['shipping']['address_1'],
        'shipping_address_2' => $checkout['shipping']['address_2'],
        'shipping_city' => $checkout['shipping']['city'],
        'shipping_state' => $checkout['shipping']['state'],
        'shipping_postcode' => $checkout['shipping']['postcode'],
        'shipping_country' => $checkout['shipping']['country'],
        'shipping_phone' => $checkout['shipping']['phone'],
        'notes' => $checkout['notes'],
        'created_at' => date('Y-m-d H:i:s'),
        'updated_at' => date('Y-m-d H:i:s'),
    ];
    
    // Insert order into database
    $orderId = $db->insert('orders', $orderData);
    
    if (!$orderId) {
        return false;
    }
    
    // Get cart items
    $cartItems = [];
    $totalItems = 0;
    
    if (!empty($_SESSION['cart'])) {
        // Get product IDs
        $productIds = array_keys($_SESSION['cart']);
        $placeholders = implode(',', array_fill(0, count($productIds), '?'));
        
        // Get products from database
        $stmt = $db->prepare("
            SELECT p.*, pc.name as category_name 
            FROM products p 
            JOIN product_categories pc ON p.category_id = pc.id 
            WHERE p.id IN ({$placeholders}) AND p.status = 'active'
        ");
        $stmt->execute($productIds);
        $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
        
        // Process products
        foreach ($products as $product) {
            $itemId = $product['id'];
            $quantity = $_SESSION['cart'][$itemId]['quantity'] ?? 1;
            $variationId = $_SESSION['cart'][$itemId]['variation_id'] ?? null;
            
            // Get variation if exists
            $variation = null;
            if ($variationId) {
                $variationStmt = $db->prepare("
                    SELECT * FROM product_variations 
                    WHERE id = ? AND product_id = ?
                ");
                $variationStmt->execute([$variationId, $itemId]);
                $variation = $variationStmt->fetch(PDO::FETCH_ASSOC);
            }
            
            // Calculate price
            $price = $product['price'];
            if (!empty($product['sale_price']) && $product['sale_price'] < $product['price']) {
                $price = $product['sale_price'];
            }
            
            // Add variation price if exists
            if ($variation && !empty($variation['price_adjustment'])) {
                $price += $variation['price_adjustment'];
            }
            
            // Calculate item total
            $itemTotal = $price * $quantity;
            
            // Add to cart items
            $cartItems[] = [
                'order_id' => $orderId,
                'product_id' => $itemId,
                'variation_id' => $variationId,
                'name' => $product['name'],
                'variation' => $variation ? $variation['name'] : null,
                'price' => $price,
                'quantity' => $quantity,
                'total' => $itemTotal,
                'type' => $product['type'],
                'created_at' => date('Y-m-d H:i:s'),
                'updated_at' => date('Y-m-d H:i:s'),
            ];
            
            $totalItems += $quantity;
        }
    }
    
    // Insert order items into database
    foreach ($cartItems as $item) {
        $orderItemId = $db->insert('order_items', $item);
        
        // Create download for digital products
        if ($item['type'] === 'digital' && $orderItemId) {
            // Generate download token
            $downloadToken = md5(uniqid(mt_rand(), true));
            
            // Get media ID for the product
            $media = $db->fetchOne(
                "SELECT id FROM media WHERE product_id = ? AND type = 'download'",
                [$item['product_id']]
            );
            
            if ($media) {
                // Create download record
                $downloadData = [
                    'user_id' => $userId,
                    'order_id' => $orderId,
                    'order_item_id' => $orderItemId,
                    'product_id' => $item['product_id'],
                    'media_id' => $media['id'],
                    'token' => $downloadToken,
                    'download_limit' => 5, // Allow 5 downloads
                    'download_count' => 0,
                    'expires_at' => date('Y-m-d H:i:s', strtotime('+30 days')), // Expires in 30 days
                    'status' => 'active',
                    'created_at' => date('Y-m-d H:i:s'),
                    'updated_at' => date('Y-m-d H:i:s'),
                ];
                
                $db->insert('downloads', $downloadData);
            }
        }
    }
    
    // Update order with item count
    $db->update('orders', ['item_count' => $totalItems], 'id = ?', [$orderId]);
    
    // Clear checkout data
    unset($_SESSION['checkout']);
    
    return $orderId;
}

// Process checkout form
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if ($step === 1) {
        // Step 1: Billing & Shipping Information
        $billingFirstName = trim($_POST['billing_first_name'] ?? '');
        $billingLastName = trim($_POST['billing_last_name'] ?? '');
        $billingEmail = trim($_POST['billing_email'] ?? '');
        $billingPhone = trim($_POST['billing_phone'] ?? '');
        $billingCompany = trim($_POST['billing_company'] ?? '');
        $billingAddress1 = trim($_POST['billing_address_1'] ?? '');
        $billingAddress2 = trim($_POST['billing_address_2'] ?? '');
        $billingCity = trim($_POST['billing_city'] ?? '');
        $billingState = trim($_POST['billing_state'] ?? '');
        $billingPostcode = trim($_POST['billing_postcode'] ?? '');
        $billingCountry = trim($_POST['billing_country'] ?? '');
        
        $shipToDifferentAddress = isset($_POST['ship_to_different_address']);
        
        $shippingFirstName = $shipToDifferentAddress ? trim($_POST['shipping_first_name'] ?? '') : $billingFirstName;
        $shippingLastName = $shipToDifferentAddress ? trim($_POST['shipping_last_name'] ?? '') : $billingLastName;
        $shippingCompany = $shipToDifferentAddress ? trim($_POST['shipping_company'] ?? '') : $billingCompany;
        $shippingAddress1 = $shipToDifferentAddress ? trim($_POST['shipping_address_1'] ?? '') : $billingAddress1;
        $shippingAddress2 = $shipToDifferentAddress ? trim($_POST['shipping_address_2'] ?? '') : $billingAddress2;
        $shippingCity = $shipToDifferentAddress ? trim($_POST['shipping_city'] ?? '') : $billingCity;
        $shippingState = $shipToDifferentAddress ? trim($_POST['shipping_state'] ?? '') : $billingState;
        $shippingPostcode = $shipToDifferentAddress ? trim($_POST['shipping_postcode'] ?? '') : $billingPostcode;
        $shippingCountry = $shipToDifferentAddress ? trim($_POST['shipping_country'] ?? '') : $billingCountry;
        $shippingPhone = $shipToDifferentAddress ? trim($_POST['shipping_phone'] ?? '') : $billingPhone;
        
        $orderNotes = trim($_POST['order_notes'] ?? '');
        
        // Validate required fields
        $requiredFields = [
            'billing_first_name' => $billingFirstName,
            'billing_last_name' => $billingLastName,
            'billing_email' => $billingEmail,
            'billing_phone' => $billingPhone,
            'billing_address_1' => $billingAddress1,
            'billing_city' => $billingCity,
            'billing_state' => $billingState,
            'billing_postcode' => $billingPostcode,
            'billing_country' => $billingCountry,
        ];
        
        if ($shipToDifferentAddress) {
            $requiredFields = array_merge($requiredFields, [
                'shipping_first_name' => $shippingFirstName,
                'shipping_last_name' => $shippingLastName,
                'shipping_address_1' => $shippingAddress1,
                'shipping_city' => $shippingCity,
                'shipping_state' => $shippingState,
                'shipping_postcode' => $shippingPostcode,
                'shipping_country' => $shippingCountry,
                'shipping_phone' => $shippingPhone,
            ]);
        }
        
        $missingFields = [];
        foreach ($requiredFields as $field => $value) {
            if (empty($value)) {
                $missingFields[] = $field;
            }
        }
        
        if (!empty($missingFields)) {
            $error = 'Please fill in all required fields.';
        } elseif (!filter_var($billingEmail, FILTER_VALIDATE_EMAIL)) {
            $error = 'Please enter a valid email address.';
        } else {
            // Store checkout data in session
            $_SESSION['checkout'] = [
                'billing' => [
                    'first_name' => $billingFirstName,
                    'last_name' => $billingLastName,
                    'email' => $billingEmail,
                    'phone' => $billingPhone,
                    'company' => $billingCompany,
                    'address_1' => $billingAddress1,
                    'address_2' => $billingAddress2,
                    'city' => $billingCity,
                    'state' => $billingState,
                    'postcode' => $billingPostcode,
                    'country' => $billingCountry,
                ],
                'shipping' => [
                    'first_name' => $shippingFirstName,
                    'last_name' => $shippingLastName,
                    'company' => $shippingCompany,
                    'address_1' => $shippingAddress1,
                    'address_2' => $shippingAddress2,
                    'city' => $shippingCity,
                    'state' => $shippingState,
                    'postcode' => $shippingPostcode,
                    'country' => $shippingCountry,
                    'phone' => $shippingPhone,
                ],
                'notes' => $orderNotes,
                'subtotal' => $subtotal,
                'shipping' => $shipping,
                'tax' => $tax,
                'total' => $total,
            ];
            
            // Proceed to next step
            header('Location: checkout.php?step=2');
            exit;
        }
    } elseif ($step === 2) {
        // Step 2: Payment Information
        $paymentMethod = $_POST['payment_method'] ?? '';
        
        if (empty($paymentMethod)) {
            $error = 'Please select a payment method.';
        } else {
            // Store payment method in session
            $_SESSION['checkout']['payment_method'] = $paymentMethod;
            
            // Process payment based on method
            switch ($paymentMethod) {
                case 'credit_card':
                    // Process credit card payment
                    $cardNumber = $_POST['card_number'] ?? '';
                    $cardExpiry = $_POST['card_expiry'] ?? '';
                    $cardCvv = $_POST['card_cvv'] ?? '';
                    $cardName = $_POST['card_name'] ?? '';
                    
                    // Validate card details
                    if (empty($cardNumber) || empty($cardExpiry) || empty($cardCvv) || empty($cardName)) {
                        $error = 'Please enter all card details.';
                    } else {
                        // In a real application, you would process the payment through a payment gateway
                        // For this example, we'll just simulate a successful payment
                        $paymentSuccessful = true;
                        
                        if ($paymentSuccessful) {
                            // Create order
                            $orderId = createOrder();
                            
                            if ($orderId) {
                                // Clear cart
                                $_SESSION['cart'] = [];
                                $_SESSION['cart_count'] = 0;
                                
                                // Redirect to order confirmation
                                header('Location: order.php?id=' . $orderId);
                                exit;
                            } else {
                                $error = 'Failed to create order. Please try again.';
                            }
                        } else {
                            $error = 'Payment failed. Please try again.';
                        }
                    }
                    break;
                
                case 'paypal':
                    // Redirect to PayPal
                    // In a real application, you would redirect to PayPal for payment
                    // For this example, we'll just simulate a successful payment
                    $paymentSuccessful = true;
                    
                    if ($paymentSuccessful) {
                        // Create order
                        $orderId = createOrder();
                        
                        if ($orderId) {
                            // Clear cart
                            $_SESSION['cart'] = [];
                            $_SESSION['cart_count'] = 0;
                            
                            // Redirect to order confirmation
                            header('Location: order.php?id=' . $orderId);
                            exit;
                        } else {
                            $error = 'Failed to create order. Please try again.';
                        }
                    } else {
                        $error = 'Payment failed. Please try again.';
                    }
                    break;
                
                case 'bank_transfer':
                    // Create order
                    $orderId = createOrder();
                    
                    if ($orderId) {
                        // Clear cart
                        $_SESSION['cart'] = [];
                        $_SESSION['cart_count'] = 0;
                        
                        // Redirect to order confirmation
                        header('Location: order.php?id=' . $orderId);
                        exit;
                    } else {
                        $error = 'Failed to create order. Please try again.';
                    }
                    break;
                
                default:
                    $error = 'Invalid payment method.';
                    break;
            }
        }
    }
}
?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Checkout - Complete your purchase">
    <meta name="keywords" content="checkout, payment, order, media portfolio, shop">
    <title>Checkout | Media Portfolio</title>
    
    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/shop.css">
    <style>
        .checkout-container {
            max-width: 1200px;
            margin: 100px auto;
            padding: 0 20px;
        }
        
        .checkout-header {
            margin-bottom: 30px;
        }
        
        .checkout-header h1 {
            font-size: 32px;
            margin-bottom: 10px;
        }
        
        .checkout-steps {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            position: relative;
        }
        
        .checkout-steps::before {
            content: '';
            position: absolute;
            top: 14px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--border-color);
            z-index: 1;
        }
        
        .checkout-step {
            position: relative;
            z-index: 2;
            text-align: center;
            width: 33.333%;
        }
        
        .step-number {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: var(--border-color);
            color: var(--text-color);
            font-weight: 600;
            margin: 0 auto 10px;
        }
        
        .step-number.active {
            background-color: var(--primary-color);
            color: white;
        }
        
        .step-number.completed {
            background-color: var(--success-color);
            color: white;
        }
        
        .step-title {
            font-size: 14px;
            font-weight: 500;
        }
        
        .checkout-content {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
        }
        
        @media (max-width: 992px) {
            .checkout-content {
                grid-template-columns: 1fr;
            }
        }
        
        .checkout-form {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: var(--shadow-small);
            padding: 30px;
        }
        
        .dark-mode .checkout-form {
            background-color: #2a2a2a;
        }
        
        .checkout-summary {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: var(--shadow-small);
            padding: 30px;
            align-self: start;
        }
        
        .dark-mode .checkout-summary {
            background-color: #2a2a2a;
        }
        
        .form-section {
            margin-bottom: 30px;
        }
        
        .form-section-title {
            font-size: 20px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .form-group label.required::after {
            content: '*';
            color: var(--danger-color);
            margin-left: 4px;
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            font-family: 'Poppins', sans-serif;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }
        
        .dark-mode .form-control {
            background-color: #3a3a3a;
            color: var(--light-color);
            border-color: #555;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        
        .form-check {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }
        
        .form-check input {
            margin-right: 10px;
            margin-top: 5px;
        }
        
        .form-actions {
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
        }
        
        .btn {
            padding: 12px 25px;
            border-radius: 5px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--secondary-color);
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
        }
        
        .btn-outline:hover {
            background-color: var(--primary-color);
            color: white;
        }
        
        .summary-title {
            font-size: 20px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .summary-items {
            margin-bottom: 20px;
        }
        
        .summary-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-color);
        }
        
        .summary-item:last-child {
            border-bottom: none;
        }
        
        .item-info {
            display: flex;
            align-items: center;
            flex: 1;
        }
        
        .item-image {
            width: 60px;
            height: 60px;
            border-radius: 5px;
            overflow: hidden;
            margin-right: 15px;
        }
        
        .item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .item-details {
            flex: 1;
        }
        
        .item-name {
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .item-meta {
            font-size: 14px;
            color: var(--text-color-light);
        }
        
        .item-price {
            font-weight: 500;
            white-space: nowrap;
            margin-left: 15px;
        }
        
        .summary-totals {
            margin-top: 20px;
        }
        
        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .summary-row.total {
            font-size: 18px;
            font-weight: 600;
            padding-top: 10px;
            margin-top: 10px;
            border-top: 1px solid var(--border-color);
        }
        
        .payment-methods {
            margin-top: 20px;
        }
        
        .payment-method {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .payment-method:hover {
            border-color: var(--primary-color);
        }
        
        .payment-method.active {
            border-color: var(--primary-color);
            background-color: rgba(52, 152, 219, 0.05);
        }
        
        .payment-method input {
            margin-right: 10px;
            margin-top: 3px;
        }
        
        .payment-method-info {
            flex: 1;
        }
        
        .payment-method-title {
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .payment-method-description {
            font-size: 14px;
            color: var(--text-color-light);
        }
        
        .payment-method-icons {
            margin-left: 15px;
            display: flex;
            gap: 5px;
        }
        
        .payment-details {
            margin-top: 15px;
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            display: none;
        }
        
        .payment-details.active {
            display: block;
        }
        
        .card-fields {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        
        .error-message {
            background-color: rgba(231, 76, 60, 0.1);
            border: 1px solid rgba(231, 76, 60, 0.3);
            color: #e74c3c;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        
        @media (max-width: 768px) {
            .checkout-container {
                margin: 80px auto;
            }
            
            .checkout-header h1 {
                font-size: 28px;
            }
            
            .checkout-form,
            .checkout-summary {
                padding: 20px;
            }
            
            .form-actions {
                flex-direction: column;
                gap: 10px;
            }
            
            .form-actions .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- Preloader -->
    <div id="preloader">
        <div class="loader">
            <svg class="circular" viewBox="25 25 50 50">
                <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
            </svg>
        </div>
    </div>

    <!-- Header -->
    <header id="header" class="header">
        <div class="container">
            <div class="header-inner">
                <div class="logo">
                    <a href="index.html">
                        <img src="assets/images/logo.png" alt="Media Portfolio Logo" class="logo-light">
                        <img src="assets/images/logo.png" alt="Media Portfolio Logo" class="logo-dark">
                    </a>
                </div>
                
                <!-- Hamburger Menu -->
                <div class="hamburger-menu">
                    <div class="hamburger">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                
                <!-- Shop Icons -->
                <div class="shop-icons">
                    <a href="search.php" class="shop-icon" aria-label="Search">
                        <i class="fas fa-search"></i>
                    </a>
                    <a href="account.php" class="shop-icon" aria-label="Account">
                        <i class="fas fa-user"></i>
                    </a>
                    <a href="cart.php" class="shop-icon cart-icon" aria-label="Cart">
                        <i class="fas fa-shopping-cart"></i>
                        <span class="cart-count">0</span>
                    </a>
                </div>
            </div>
        </div>
    </header>

    <!-- Navigation Menu -->
    <nav id="nav-menu" class="nav-menu">
        <div class="menu-inner">
            <div class="container">
                <ul class="menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="photos.php">Photo Gallery</a></li>
                    <li><a href="videos.php">Video Gallery</a></li>
                    <li><a href="audio.php">Audio Gallery</a></li>
                    <li><a href="shop.php">Shop</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
                
                <div class="menu-footer">
                    <div class="social-links">
                        <a href="#" target="_blank" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                        <a href="#" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                        <a href="#" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
                    </div>
                    
                    <div class="theme-switch">
                        <label class="switch">
                            <input type="checkbox" id="theme-toggle">
                            <span class="slider round"></span>
                        </label>
                        <span class="theme-label">Dark Mode</span>
                    </div>
                </div>
            </div>
        </div>
    </nav>    <!-- Main Content -->
    <main>
        <div class="checkout-container">
            <div class="checkout-header">
                <h1>Checkout</h1>
                <p>Complete your purchase</p>
            </div>
            
            <div class="checkout-steps">
                <div class="checkout-step">
                    <div class="step-number <br />
<b>Warning</b>:  Undefined variable $step in <b>/home/wildgirlsproduct/public_html/checkout.php</b> on line <b>1015</b><br />
">1</div>
                    <div class="step-title">Billing & Shipping</div>
                </div>
                <div class="checkout-step">
                    <div class="step-number <br />
<b>Warning</b>:  Undefined variable $step in <b>/home/wildgirlsproduct/public_html/checkout.php</b> on line <b>1019</b><br />
">2</div>
                    <div class="step-title">Payment</div>
                </div>
                <div class="checkout-step">
                    <div class="step-number <br />
<b>Warning</b>:  Undefined variable $step in <b>/home/wildgirlsproduct/public_html/checkout.php</b> on line <b>1023</b><br />
">3</div>
                    <div class="step-title">Confirmation</div>
                </div>
            </div>
            
                        
            <div class="checkout-content">
                <br />
<b>Warning</b>:  Undefined variable $step in <b>/home/wildgirlsproduct/public_html/checkout.php</b> on line <b>1035</b><br />
<br />
<b>Warning</b>:  Undefined variable $step in <b>/home/wildgirlsproduct/public_html/checkout.php</b> on line <b>1242</b><br />
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer id="footer" class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <img src="assets/images/logo.png" alt="Media Portfolio Logo">
                </div>
                
                <div class="footer-links">
                    <div class="footer-column">
                        <h3>Navigation</h3>
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="photos.php">Photos</a></li>
                            <li><a href="videos.php">Videos</a></li>
                            <li><a href="audio.php">Audio</a></li>
                            <li><a href="shop.php">Shop</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </div>
                    
                    <div class="footer-column">
                        <h3>Services</h3>
                        <ul>
                            <li><a href="services.html#photography">Photography</a></li>
                            <li><a href="services.html#videography">Videography</a></li>
                            <li><a href="services.html#audio-production">Audio Production</a></li>
                            <li><a href="services.html#editing">Editing Services</a></li>
                            <li><a href="services.html#consulting">Consulting</a></li>
                        </ul>
                    </div>
                    
                    <div class="footer-column">
                        <h3>Legal</h3>
                        <ul>
                            <li><a href="privacy.html">Privacy Policy</a></li>
                            <li><a href="terms.html">Terms of Service</a></li>
                            <li><a href="copyright.html">Copyright</a></li>
                            <li><a href="shipping.html">Shipping Policy</a></li>
                            <li><a href="returns.html">Returns & Refunds</a></li>
                        </ul>
                    </div>
                    
                    <div class="footer-column">
                        <h3>Contact</h3>
                        <ul class="contact-info">
                            <li><i class="fas fa-map-marker-alt"></i> 123 Media Street, City, Country</li>
                            <li><i class="fas fa-phone"></i> +1 (555) 123-4567</li>
                            <li><i class="fas fa-envelope"></i> info@mediaportfolio.com</li>
                        </ul>
                        
                        <div class="social-links">
                            <a href="#" target="_blank" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                            <a href="#" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                            <a href="#" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                            <a href="#" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#" target="_blank" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>&copy; 2023 Media Portfolio. All rights reserved.</p>
                <div class="payment-methods">
                    <i class="fab fa-cc-visa"></i>
                    <i class="fab fa-cc-mastercard"></i>
                    <i class="fab fa-cc-amex"></i>
                    <i class="fab fa-cc-paypal"></i>
                    <i class="fab fa-cc-apple-pay"></i>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="assets/js/main.js"></script>
    <script>
        // Show/hide shipping address fields
        document.getElementById('ship_to_different_address').addEventListener('change', function() {
            const shippingFields = document.getElementById('shipping_address_fields');
            shippingFields.style.display = this.checked ? 'block' : 'none';
        });
        
        // Show/hide payment method details
        const paymentMethods = document.querySelectorAll('.payment-method');
        const paymentDetails = document.querySelectorAll('.payment-details');
        
        paymentMethods.forEach(method => {
            const radio = method.querySelector('input[type="radio"]');
            
            radio.addEventListener('change', function() {
                // Update active class on payment methods
                paymentMethods.forEach(m => m.classList.remove('active'));
                if (this.checked) {
                    method.classList.add('active');
                }
                
                // Show/hide payment details
                paymentDetails.forEach(detail => detail.classList.remove('active'));
                document.getElementById(this.value + '_fields').classList.add('active');
            });
        });
    </script>
</body>
</html>