<?php
require_once 'config.php';

$pageTitle = 'Track Order - Performance Boat Parts';
require_once 'header.php';

$order = null;
$orderItems = [];
$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['order_number'])) {
    $orderNumber = trim($_POST['order_number']);
    
    $stmt = $pdo->prepare("SELECT * FROM orders WHERE order_number = ?");
    $stmt->execute([$orderNumber]);
    $order = $stmt->fetch();
    
    if ($order) {
        $stmt = $pdo->prepare("SELECT * FROM order_items WHERE order_id = ?");
        $stmt->execute([$order['id']]);
        $orderItems = $stmt->fetchAll();
    } else {
        $error = 'Order not found. Please check your order number and try again.';
    }
}
?>

    <div class="breadcrumbs">
        <div class="container">
            <ul>
                <li><a href="index.php">Home</a></li>
                <li>Track Order</li>
            </ul>
        </div>
    </div>

    <section class="track-order-section">
        <div class="container">
            <div class="track-order-hero">
                <div class="hero-icon">
                    <i class="fas fa-shipping-fast"></i>
                </div>
                <h1>Track Your Order</h1>
                <p>Enter your order number below to get real-time updates on your shipment</p>
            </div>

            <div class="track-search-card">
                <form method="POST" action="track-order.php" id="trackForm">
                    <div class="track-input-wrapper">
                        <div class="input-icon">
                            <i class="fas fa-barcode"></i>
                        </div>
                        <input type="text" name="order_number" id="orderNumberInput" placeholder="Enter order number or scan barcode" value="<?= htmlspecialchars($_POST['order_number'] ?? '') ?>" required>
                        <button type="button" class="btn btn-secondary" onclick="startBarcodeScanner()" title="Scan Barcode">
                            <i class="fas fa-camera"></i>
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i> Track
                        </button>
                    </div>
                </form>
                
                <div id="scannerModal" class="scanner-modal">
                    <div class="scanner-content">
                        <div class="scanner-header">
                            <h3><i class="fas fa-barcode"></i> Scan Barcode</h3>
                            <button onclick="closeScanner()" class="close-scanner"><i class="fas fa-times"></i></button>
                        </div>
                        <div class="scanner-body">
                            <video id="scannerVideo" autoplay playsinline></video>
                            <canvas id="scannerCanvas" style="display:none;"></canvas>
                            <div class="scanner-overlay">
                                <div class="scanner-frame"></div>
                            </div>
                            <p id="scannerStatus">Point camera at barcode...</p>
                        </div>
                    </div>
                </div>
                
                <?php if ($error): ?>
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle"></i> <?= htmlspecialchars($error) ?>
                </div>
                <?php endif; ?>
                
                <div class="track-tips">
                    <span><i class="fas fa-lightbulb"></i> Tip: Check your email for the order confirmation</span>
                </div>
            </div>

            <?php if ($order): ?>
            <div class="order-result">
                <div class="result-header">
                    <div class="barcode-section">
                        <div class="barcode-brand">
                            <i class="fas fa-anchor"></i>
                            <span>Performance Boat Parts</span>
                        </div>
                        <div class="order-number">
                            <span class="order-label">Order</span>
                            <span class="order-value">#<?= htmlspecialchars($order['order_number']) ?></span>
                        </div>
                        <div class="order-meta">
                            <span class="order-date"><i class="fas fa-calendar-alt"></i> <?= date('F j, Y', strtotime($order['created_at'])) ?></span>
                        </div>
                    </div>
                    <div class="status-pill status-<?= $order['status'] ?>">
                        <span class="status-dot"></span>
                        <?= ucfirst($order['status']) ?>
                    </div>
                </div>

                <div class="tracking-progress">
                    <div class="progress-track">
                        <div class="progress-fill" style="width: <?= $order['status'] === 'completed' ? '100%' : ($order['status'] === 'processing' ? '66%' : '33%') ?>"></div>
                    </div>
                    <div class="progress-steps">
                        <div class="progress-step <?= in_array($order['status'], ['pending', 'processing', 'completed']) ? 'active done' : '' ?>">
                            <div class="step-circle">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="step-label">Order Placed</div>
                            <div class="step-date"><?= date('M j, Y', strtotime($order['created_at'])) ?></div>
                        </div>
                        <div class="progress-step <?= in_array($order['status'], ['processing', 'completed']) ? 'active done' : '' ?>">
                            <div class="step-circle">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="step-label">Processing</div>
                            <div class="step-date"><?= in_array($order['status'], ['processing', 'completed']) ? 'In progress' : 'Waiting' ?></div>
                        </div>
                        <div class="progress-step <?= $order['status'] === 'completed' ? 'active done' : '' ?>">
                            <div class="step-circle">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="step-label">Delivered</div>
                            <div class="step-date"><?= $order['status'] === 'completed' ? 'Completed' : 'Pending' ?></div>
                        </div>
                    </div>
                </div>

                <div class="order-cards-grid">
                    <div class="order-main-card">
                        <div class="card-header">
                            <h3><i class="fas fa-box-open"></i> Order Details</h3>
                        </div>
                        <div class="order-items">
                            <?php foreach ($orderItems as $item): ?>
                            <div class="order-item-row">
                                <div class="item-thumb">
                                    <img src="https://placehold.co/80x80/e8f5e9/2e7d32?text=<?= strtoupper(substr($item['product_name'], 0, 1)) ?>" alt="<?= htmlspecialchars($item['product_name']) ?>">
                                </div>
                                <div class="item-info">
                                    <h4><?= htmlspecialchars($item['product_name']) ?></h4>
                                    <span class="item-qty">Qty: <?= $item['quantity'] ?></span>
                                    <span class="item-price">$<?= number_format($item['price'], 2) ?> each</span>
                                </div>
                                <div class="item-subtotal">
                                    $<?= number_format($item['total'], 2) ?>
                                </div>
                            </div>
                            <?php endforeach; ?>
                        </div>
                        <div class="order-totals">
                            <div class="total-row">
                                <span>Subtotal</span>
                                <span>$<?= number_format($order['subtotal'], 2) ?></span>
                            </div>
                            <div class="total-row">
                                <span>Shipping</span>
                                <span><?= $order['shipping'] > 0 ? '$' . number_format($order['shipping'], 2) : '<span class="free">FREE</span>' ?></span>
                            </div>
                            <div class="total-row">
                                <span>Tax</span>
                                <span>$<?= number_format($order['tax'], 2) ?></span>
                            </div>
                            <div class="total-row grand-total">
                                <span>Total</span>
                                <span>$<?= number_format($order['total'], 2) ?></span>
                            </div>
                        </div>
                    </div>

                    <div class="order-side-cards">
                        <div class="side-card">
                            <div class="side-card-header">
                                <i class="fas fa-user-circle"></i>
                                <h4>Customer</h4>
                            </div>
                            <div class="side-card-body">
                                <p class="name"><?= htmlspecialchars($order['customer_name']) ?></p>
                                <p><i class="fas fa-envelope"></i> <?= htmlspecialchars($order['customer_email']) ?></p>
                                <?php if ($order['customer_phone']): ?>
                                <p><i class="fas fa-phone"></i> <?= htmlspecialchars($order['customer_phone']) ?></p>
                                <?php endif; ?>
                            </div>
                        </div>

                        <div class="side-card">
                            <div class="side-card-header">
                                <i class="fas fa-truck"></i>
                                <h4>Shipping To</h4>
                            </div>
                            <div class="side-card-body">
                                <p><i class="fas fa-map-marker-alt"></i> <?= htmlspecialchars($order['shipping_address']) ?></p>
                                <p><?= htmlspecialchars($order['city']) ?>, <?= htmlspecialchars($order['state']) ?> <?= htmlspecialchars($order['zip']) ?></p>
                            </div>
                        </div>

                        <div class="side-card">
                            <div class="side-card-header">
                                <i class="fas fa-credit-card"></i>
                                <h4>Payment</h4>
                            </div>
                            <div class="side-card-body">
                                <p><strong>Method:</strong> <?= htmlspecialchars($order['payment_method']) ?></p>
                                <div class="payment-badge <?= $order['payment_status'] ?>">
                                    <i class="fas <?= $order['payment_status'] === 'paid' ? 'fa-check-circle' : 'fa-clock' ?>"></i>
                                    <?= ucfirst($order['payment_status']) ?>
                                </div>
                            </div>
                        </div>

                        <div class="side-card info-card">
                            <div class="side-card-header">
                                <i class="fas fa-calendar-alt"></i>
                                <h4>Order Info</h4>
                            </div>
                            <div class="side-card-body">
                                <p><strong>Placed:</strong> <?= date('M j, Y g:i A', strtotime($order['created_at'])) ?></p>
                                <p><strong>Last Updated:</strong> <?= date('M j, Y g:i A', strtotime($order['updated_at'])) ?></p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="result-actions">
                    <a href="products.php" class="btn btn-outline"><i class="fas fa-shopping-bag"></i> Continue Shopping</a>
                    <a href="contact.php" class="btn btn-primary"><i class="fas fa-headset"></i> Need Help?</a>
                </div>
            </div>
            <?php endif; ?>

            <div class="track-help-section">
                <div class="help-card">
                    <div class="help-icon"><i class="fas fa-clock"></i></div>
                    <h4>Delivery Times</h4>
                    <p>Standard shipping: 5-7 business days<br>Express: 2-3 business days</p>
                </div>
                <div class="help-card">
                    <div class="help-icon"><i class="fas fa-undo"></i></div>
                    <h4>Easy Returns</h4>
                    <p>30-day return policy on most items. Contact us to initiate a return.</p>
                </div>
                <div class="help-card">
                    <div class="help-icon"><i class="fas fa-shield-alt"></i></div>
                    <h4>Secure Tracking</h4>
                    <p>Your order is insured during transit. We'll notify you of any updates.</p>
                </div>
            </div>
        </div>
    </section>

    <script>
    // Barcode Scanner
    let videoStream = null;
    
    async function startBarcodeScanner() {
        const modal = document.getElementById('scannerModal');
        const video = document.getElementById('scannerVideo');
        const status = document.getElementById('scannerStatus');
        
        modal.classList.show();
        
        try {
            videoStream = await navigator.mediaDevices.getUserMedia({ 
                video: { facingMode: 'environment' } 
            });
            video.srcObject = videoStream;
            
            if ('BarcodeDetector' in window) {
                const barcodeDetector = new BarcodeDetector({ formats: ['qr_code', 'code_128', 'code_39', 'ean_13'] });
                
                async function detectBarcode() {
                    try {
                        const barcodes = await barcodeDetector.detect(video);
                        if (barcodes.length > 0) {
                            const code = barcodes[0].rawValue;
                            document.getElementById('orderNumberInput').value = code;
                            closeScanner();
                            document.getElementById('trackForm').submit();
                            return;
                        }
                    } catch (e) {}
                    requestAnimationFrame(detectBarcode);
                }
                detectBarcode();
            } else {
                status.textContent = 'BarcodeDetector not supported. Please enter order number manually.';
            }
        } catch (err) {
            status.textContent = 'Camera access denied. Please enter order number manually.';
        }
    }
    
    function closeScanner() {
        const modal = document.getElementById('scannerModal');
        const video = document.getElementById('scannerVideo');
        
        modal.classList.remove('show');
        
        if (videoStream) {
            videoStream.getTracks().forEach(track => track.stop());
            videoStream = null;
        }
    }
    </script>

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