<?php
// track_order.php

$host = 'localhost';
$dbname = 'storism1_NL_db';
$username = 'storism1_NLuser';
$password = 'NLelectromenagerpassword';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Connection failed: " . $e->getMessage());
}

// جلب الأقسام للقائمة
$stmt = $pdo->prepare("SELECT id, name FROM categories ORDER BY name");
$stmt->execute();
$categories = $stmt->fetchAll(PDO::FETCH_ASSOC);

// معالجة البحث عن الطلبات
$phone = $_GET['phone'] ?? '';
$orders = [];

if (!empty($phone)) {
    try {
        $stmt = $pdo->prepare("
            SELECT o.*, os.name AS status_name, w.name AS wilaya_name, dc.name AS delivery_company_name
            FROM orders o
            JOIN order_statuses os ON o.status_id = os.id
            LEFT JOIN wilayas w ON o.wilaya_id = w.id
            LEFT JOIN delivery_companies dc ON o.delivery_company_id = dc.id
            WHERE o.phone = ?
            ORDER BY o.order_date DESC
        ");
        $stmt->execute([$phone]);
        $orders = $stmt->fetchAll(PDO::FETCH_ASSOC);

        // جلب عناصر كل طلب
        foreach ($orders as &$order) {
            $stmt = $pdo->prepare("
                SELECT oi.*, p.name AS product_name, pv.sku
                FROM order_items oi
                JOIN product_variants pv ON oi.product_variant_id = pv.id
                JOIN products p ON pv.product_id = p.id
                WHERE oi.order_id = ?
            ");
            $stmt->execute([$order['id']]);
            $order['items'] = $stmt->fetchAll(PDO::FETCH_ASSOC);
        }
        unset($order);
    } catch (PDOException $e) {
        die("Error fetching orders: " . $e->getMessage());
    }
}
?>

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تتبع طلباتك - متجرنا</title>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Font -->
    <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=Tajawal:wght@300;400;500;700;800;900&display=swap" rel="stylesheet">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Tajawal', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* Header Styles */
        .header-top {
            background-color: #f8f9fa;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        
        .header-top-links {
            display: flex;
            justify-content: flex-end;
            gap: 20px;
        }
        
        .header-top-links a {
            color: #555;
            text-decoration: none;
            font-size: 14px;
        }
        
        .header-top-links a i {
            margin-left: 5px;
        }
        
        .header-main {
            padding: 15px 0;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            text-decoration: none;
        }
        
        .logo span {
            color: #2196F3;
        }
        
        .search-box {
            display: flex;
            margin: 15px 0;
        }
        
        .search-box input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            outline: none;
        }
        
        .search-box button {
            background-color: #2196F3;
            color: white;
            border: none;
            padding: 0 15px;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }
        
        /* Navigation */
        .navbar {
            background-color: #2196F3;
        }
        
        .nav-list {
            display: flex;
            list-style: none;
        }
        
        .nav-item {
            position: relative;
        }
        
        .nav-item a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 15px 20px;
            transition: background-color 0.3s;
        }
        
        .nav-item a:hover {
            background-color: #0b7dda;
        }
        
        .dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            background-color: white;
            min-width: 200px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            display: none;
            z-index: 100;
        }
        
        .nav-item:hover .dropdown {
            display: block;
        }
        
        .dropdown a {
            color: #333;
            padding: 10px 15px;
            border-bottom: 1px solid #eee;
        }
        
        .dropdown a:hover {
            background-color: #f5f5f5;
            color: #2196F3;
        }
        
        /* Track Order Page */
        .track-order-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 30px;
            margin: 30px 0;
        }
        
        .page-title {
            text-align: center;
            margin-bottom: 30px;
            color: #2196F3;
        }
        
        .track-form {
            max-width: 500px;
            margin: 0 auto 30px;
            text-align: center;
        }
        
        .track-form h3 {
            margin-bottom: 15px;
            color: #555;
        }
        
        .phone-input {
            display: flex;
            gap: 10px;
        }
        
        .phone-input input {
            flex: 1;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            outline: none;
        }
        
        .track-btn {
            background-color: #2196F3;
            color: white;
            border: none;
            padding: 0 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        .track-btn:hover {
            background-color: #0b7dda;
        }
        
        .no-orders {
            text-align: center;
            padding: 20px;
            color: #777;
            display: <?php echo empty($phone) ? 'none' : 'block'; ?>;
        }
        
        /* Orders List */
        .orders-list {
            margin-top: 30px;
            display: <?php echo empty($orders) && !empty($phone) ? 'none' : 'block'; ?>;
        }
        
        .order-card {
            border: 1px solid #eee;
            border-radius: 8px;
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .order-header {
            background-color: #f9f9f9;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
        }
        
        .order-id {
            font-weight: bold;
            color: #333;
        }
        
        .order-date {
            color: #777;
            font-size: 14px;
        }
        
        .order-status {
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: bold;
        }
        
        .status-pending {
            background-color: #FFC107;
            color: #333;
        }
        
        .status-sent {
            background-color: #2196F3;
            color: white;
        }
        
        .status-delivered {
            background-color: #4CAF50;
            color: white;
        }
        
        .status-cancelled {
            background-color: #F44336;
            color: white;
        }
        
        .order-body {
            padding: 15px;
        }
        
        .order-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .info-item {
            margin-bottom: 5px;
        }
        
        .info-label {
            font-weight: bold;
            color: #555;
            margin-bottom: 3px;
        }
        
        .info-value {
            color: #333;
        }
        
        .order-items-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        
        .order-items-table th, 
        .order-items-table td {
            border: 1px solid #eee;
            padding: 10px;
            text-align: right;
        }
        
        .order-items-table th {
            background-color: #f5f5f5;
        }
        
        .order-items-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .item-image {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
        }
        
        .order-total {
            text-align: left;
            margin-top: 15px;
            font-weight: bold;
            font-size: 18px;
        }
        
        .order-total span {
            color: #2196F3;
        }
        
        /* Footer */
        .footer {
            background-color: #333;
            color: white;
            padding: 40px 0 20px;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .footer-title {
            font-size: 18px;
            margin-bottom: 15px;
            color: white;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 10px;
        }
        
        .footer-links a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: #2196F3;
        }
        
        .footer-links i {
            margin-left: 5px;
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #444;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .order-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .phone-input {
                flex-direction: column;
            }
            
            .track-btn {
                width: 100%;
                padding: 12px;
            }
        }
        /* Mobile Navigation */
.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    display: none;
}

.mobile-nav-list {
    display: flex;
    list-style: none;
    justify-content: space-around;
    padding: 10px 0;
    margin: 0;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 10px;
    color: #555;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.3s;
}

.mobile-nav-item.active {
    color: #2196F3;
}

.mobile-nav-icon {
    font-size: 20px;
    margin-bottom: 5px;
}

.mobile-nav-item span {
    font-size: 12px;
}

@media (max-width: 768px) {
    .mobile-nav {
        display: block;
    }
    
    /* إخفاء التنقل العادي على الهاتف */
    .navbar {
        display: none;
    }
    
    /* تعديل الهيدر ليتناسب مع الهاتف */
    .header-main {
        padding: 10px 0;
    }
    
    .search-box {
        margin: 10px 0;
    }
}
    </style>
</head>
<body>
    <!-- Header Top -->
    <div class="header-top">
        <div class="container">
            <div class="header-top-links">
                <a href="#"><i class="fas fa-phone-alt"></i> 0551234567</a>
                <a href="#"><i class="fas fa-envelope"></i> info@example.com</a>
            </div>
        </div>
    </div>
    
    <!-- Header Main -->
    <header class="header">
        <div class="header-main">
            <div class="container">
                <a href="index.php" class="logo">B&A<span>SHOP</span></a>
                <div class="search-box">
                    <input type="text" placeholder="ابحث عن منتجات...">
                    <button><i class="fas fa-search"></i></button>
                </div>
            </div>
        </div>
        
        <!-- Desktop Navigation -->
        <nav class="navbar">
            <div class="container">
                <ul class="nav-list">
                    <li class="nav-item"><a href="index.php">الرئيسية</a></li>
                    <li class="nav-item">
                        <a href="#">المنتجات</a>
                        <div class="dropdown">
                            <a href="#">كل المنتجات</a>
                            <a href="#">العروض الخاصة</a>
                            <a href="#">المنتجات الجديدة</a>
                            <a href="#">الأكثر مبيعاً</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a href="#">الأقسام</a>
                        <div class="dropdown">
                            <?php foreach ($categories as $category): ?>
                                <a href="?category=<?php echo $category['id']; ?>"><?php echo htmlspecialchars($category['name']); ?></a>
                            <?php endforeach; ?>
                        </div>
                    </li>
                    <li class="nav-item"><a href="#">عنا</a></li>
                    <li class="nav-item"><a href="#">اتصل بنا</a></li>
                </ul>
            </div>
        </nav>
    </header>
    
    <!-- Track Order Content -->
    <main class="container">
        <div class="track-order-container">
            <h1 class="page-title">تتبع طلباتك</h1>
            
            <div class="track-form">
                <h3>أدخل رقم هاتفك لمتابعة طلباتك</h3>
                <form method="GET" action="track_order.php" class="phone-input">
                    <input type="text" name="phone" placeholder="رقم الهاتف المستخدم في الطلب" value="<?php echo htmlspecialchars($phone); ?>" required>
                    <button type="submit" class="track-btn">تتبع الطلب <i class="fas fa-search"></i></button>
                </form>
            </div>
            
            <div class="no-orders" id="noOrders">
                <p>لا توجد طلبات مسجلة بهذا الرقم</p>
            </div>
            
            <div class="orders-list" id="ordersList">
                <?php foreach ($orders as $order): ?>
                <div class="order-card">
                    <div class="order-header">
                        <div>
                            <span class="order-id">الطلب #<?php echo $order['id']; ?></span>
                            <span class="order-date">بتاريخ: <?php echo date('Y/m/d H:i', strtotime($order['order_date'])); ?></span>
                        </div>
                        <span class="order-status status-<?php echo $order['status_name']; ?>">
                            <?php 
                            switch($order['status_name']) {
                                case 'pending': echo 'قيد الانتظار'; break;
                                case 'sent': echo 'تم الشحن'; break;
                                case 'delivered': echo 'تم التسليم'; break;
                                case 'cancelled': echo 'ملغي'; break;
                                default: echo $order['status_name'];
                            }
                            ?>
                        </span>
                    </div>
                    
                    <div class="order-body">
                        <div class="order-info">
                            <div class="info-item">
                                <div class="info-label">الاسم:</div>
                                <div class="info-value"><?php echo htmlspecialchars($order['customer_name']); ?></div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">رقم الهاتف:</div>
                                <div class="info-value"><?php echo htmlspecialchars($order['phone']); ?></div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">العنوان:</div>
                                <div class="info-value"><?php echo htmlspecialchars($order['address']); ?></div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">الولاية:</div>
                                <div class="info-value"><?php echo htmlspecialchars($order['wilaya_name'] ?? 'غير محدد'); ?></div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">نوع التوصيل:</div>
                                <div class="info-value">
                                    <?php echo $order['delivery_type'] === 'home' ? 'توصيل إلى المنزل' : 'توصيل إلى المكتب'; ?>
                                </div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">شركة التوصيل:</div>
                                <div class="info-value"><?php echo htmlspecialchars($order['delivery_company_name'] ?? 'لم يتم تحديدها بعد'); ?></div>
                            </div>
                            <?php if (!empty($order['tracking_number'])): ?>
                            <div class="info-item">
                                <div class="info-label">رقم التتبع:</div>
                                <div class="info-value"><?php echo htmlspecialchars($order['tracking_number']); ?></div>
                            </div>
                            <?php endif; ?>
                        </div>
                        
                        <h4>المنتجات المطلوبة:</h4>
                        <table class="order-items-table">
                            <thead>
                                <tr>
                                    <th>الصورة</th>
                                    <th>المنتج</th>
                                    <th>الخصائص</th>
                                    <th>الكمية</th>
                                    <th>السعر</th>
                                    <th>الإجمالي</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php 
                                $order_total = 0;
                                foreach ($order['items'] as $item): 
                                    $item_total = $item['unit_price'] * $item['quantity'];
                                    $order_total += $item_total;
                                ?>
                                <tr>
                                    <td>
                                        <img src="images/product_placeholder.jpg" alt="Product" class="item-image">
                                    </td>
                                    <td><?php echo htmlspecialchars($item['product_name']); ?></td>
                                    <td><?php echo htmlspecialchars($item['selected_attribute_value'] ?? 'لا يوجد'); ?></td>
                                    <td><?php echo $item['quantity']; ?></td>
                                    <td><?php echo number_format($item['unit_price'], 2); ?> دج</td>
                                    <td><?php echo number_format($item_total, 2); ?> دج</td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                        
                        <div class="order-total">
                            المجموع الكلي: <span><?php echo number_format($order_total, 2); ?> دج</span>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </main>
    
    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div>
                    <h3 class="footer-title">معلومات عنا</h3>
                    <p>متجرنا هو وجهتكم لأفضل المنتجات بأسعار تنافسية.</p>
                </div>
                <div>
                    <h3 class="footer-title">روابط سريعة</h3>
                    <ul class="footer-links">
                        <li><a href="index.php"><i class="fas fa-angle-left"></i> الرئيسية</a></li>
                        <li><a href="#"><i class="fas fa-angle-left"></i> المنتجات</a></li>
                        <li><a href="#"><i class="fas fa-angle-left"></i> الأقسام</a></li>
                        <li><a href="#"><i class="fas fa-angle-left"></i> اتصل بنا</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="footer-title">تواصلوا معنا</h3>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fab fa-facebook-f"></i> فيسبوك</a></li>
                        <li><a href="#"><i class="fab fa-twitter"></i> تويتر</a></li>
                        <li><a href="#"><i class="fab fa-whatsapp"></i> واتساب</a></li>
                        <li><a href="#"><i class="fab fa-telegram"></i> تيليغرام</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; <?php echo date('Y'); ?> B&ASHOP. جميع الحقوق محفوظة.</p>
            </div>
        </div>
    </footer>
<!-- Mobile Navigation -->
<nav class="mobile-nav">
    <ul class="mobile-nav-list">
        <a href="index.php">
            <li class="mobile-nav-item ">
                <i class="fas fa-home mobile-nav-icon"></i>
                <span>الرئيسية</span>
            </li>
        </a>
       
        <a href="track_order.php">
            <li class="mobile-nav-item active">
                <i class="fas fa-shopping-bag mobile-nav-icon"></i>
                <span>طلباتي</span>
            </li>
        </a>
    </ul>
</nav><script>
document.addEventListener('DOMContentLoaded', function() {
    // تحديد العنصر النشط في القائمة
    const navItems = document.querySelectorAll('.mobile-nav-item');
    
    navItems.forEach(item => {
        item.addEventListener('click', function() {
            navItems.forEach(i => i.classList.remove('active'));
            this.classList.add('active');
        });
    });
    
    // إخفاء التنقل العادي على الهاتف
    if (window.innerWidth <= 768) {
        document.querySelector('.navbar').style.display = 'none';
    }
    
    window.addEventListener('resize', function() {
        if (window.innerWidth <= 768) {
            document.querySelector('.navbar').style.display = 'none';
        } else {
            document.querySelector('.navbar').style.display = 'block';
        }
    });
});
</script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const phoneInput = document.querySelector('input[name="phone"]');
            const noOrdersMsg = document.getElementById('noOrders');
            const ordersList = document.getElementById('ordersList');
            
            // Show/hide messages based on initial state
            if (<?php echo empty($orders) && !empty($phone) ? 'true' : 'false'; ?>) {
                noOrdersMsg.style.display = 'block';
                ordersList.style.display = 'none';
            } else if (<?php echo !empty($orders) ? 'true' : 'false'; ?>) {
                noOrdersMsg.style.display = 'none';
                ordersList.style.display = 'block';
            }
            
            // Format phone number input
            phoneInput.addEventListener('input', function(e) {
                let value = e.target.value.replace(/\D/g, '');
                e.target.value = value;
            });
        });
    </script>
</body>
</html>