<?php
// track_order.php

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

session_start();

require_once __DIR__ . '/db.php';

// جلب معلومات المتجر
$stmt = $pdo->query("SELECT * FROM stores WHERE id = 1");
$store = $stmt->fetch();

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

// دالة لجلب اسم البلدية
function getCommuneName($pdo, $commune_id) {
    if (!$commune_id) return '--';
    $stmt = $pdo->prepare("SELECT commune_name_ascii FROM algeria_cities WHERE id = ?");
    $stmt->execute([$commune_id]);
    return $stmt->fetchColumn() ?: '--';
}

// دالة لجلب سعر التوصيل
function getDeliveryPrice($pdo, $wilaya_id, $delivery_type, $delivery_company_id) {
    if (!$wilaya_id) return 0;
    $stmt = $pdo->prepare("
        SELECT price FROM delivery_prices 
        WHERE wilaya_id = ? AND delivery_type = ? AND delivery_company_id = ?
        LIMIT 1
    ");
    $stmt->execute([$wilaya_id, $delivery_type, $delivery_company_id]);
    return $stmt->fetchColumn() ?: 0;
}

// دالة لتنسيق الخصائص المختارة
function formatSelectedAttributes($selected_attribute_value) {
    if (empty($selected_attribute_value) || $selected_attribute_value == '[]') {
        return '<span class="no-attributes">بدون خصائص</span>';
    }
    
    $attrs = json_decode($selected_attribute_value, true);
    if (json_last_error() !== JSON_ERROR_NONE) {
        return '<span class="no-attributes">' . htmlspecialchars($selected_attribute_value) . '</span>';
    }
    
    if (empty($attrs)) {
        return '<span class="no-attributes">بدون خصائص</span>';
    }
    
    $html = '<div class="attribute-tags">';
    foreach ($attrs as $key => $value) {
        $colorClass = 'attribute-color';
        if ($key == 'اللون') $colorClass = 'attribute-color-red';
        elseif ($key == 'المقاس') $colorClass = 'attribute-color-green';
        elseif ($key == 'حجم') $colorClass = 'attribute-color-blue';
        
        $html .= '<span class="attribute-tag ' . $colorClass . '">';
        $html .= '<strong>' . htmlspecialchars($key) . ':</strong> ' . htmlspecialchars($value);
        $html .= '</span>';
    }
    $html .= '</div>';
    
    return $html;
}

$message = '';
$error = '';
$message_type = '';

// معالجة إلغاء الطلب
if (isset($_POST['cancel_order'])) {
    $orderId = (int)$_POST['order_id'];
    
    try {
        $pdo->beginTransaction();
        
        // التحقق من أن الطلب لا يزال pending
        $checkStmt = $pdo->prepare("SELECT status_id FROM orders WHERE id = ?");
        $checkStmt->execute([$orderId]);
        $currentStatus = $checkStmt->fetchColumn();
        
        if ($currentStatus != 1) {
            throw new Exception("لا يمكن إلغاء طلب تمت معالجته بالفعل");
        }
        
        // تحديث حالة الطلب إلى "ملغي"
        $stmt = $pdo->prepare("UPDATE orders SET status_id = 4 WHERE id = ?");
        $stmt->execute([$orderId]);
        
        // جلب عناصر الطلب وإعادة الكميات للمخزون
        $stmt = $pdo->prepare("SELECT product_variant_id, quantity FROM order_items WHERE order_id = ?");
        $stmt->execute([$orderId]);
        $orderItems = $stmt->fetchAll();
        
        foreach ($orderItems as $item) {
            $stmt = $pdo->prepare("UPDATE product_variants SET stock = stock + ? WHERE id = ?");
            $stmt->execute([$item['quantity'], $item['product_variant_id']]);
        }
        
        $pdo->commit();
        $_SESSION['message'] = 'تم إلغاء الطلب بنجاح';
        $_SESSION['message_type'] = 'success';
        
    } catch (Exception $e) {
        $pdo->rollBack();
        $_SESSION['message'] = "خطأ في إلغاء الطلب: " . $e->getMessage();
        $_SESSION['message_type'] = 'error';
    }
    
    header("Location: track_order.php?phone=" . urlencode($_POST['phone'] ?? ''));
    exit();
}

// معالجة تعديل الطلب
if (isset($_POST['edit_order'])) {
    $orderId = (int)$_POST['order_id'];
    $newAddress = trim($_POST['address'] ?? '');
    $newPhone = trim($_POST['phone'] ?? '');
    $phone = $_POST['phone_number'] ?? '';
    
    try {
        $stmt = $pdo->prepare("
            UPDATE orders 
            SET address = ?, phone = ? 
            WHERE id = ? AND status_id = 1
        ");
        $stmt->execute([$newAddress, $newPhone, $orderId]);
        
        $_SESSION['message'] = 'تم تعديل الطلب بنجاح';
        $_SESSION['message_type'] = 'success';
        
    } catch (PDOException $e) {
        $_SESSION['message'] = "خطأ في تعديل الطلب: " . $e->getMessage();
        $_SESSION['message_type'] = 'error';
    }
    
    header("Location: track_order.php?phone=" . urlencode($phone));
    exit();
}

// عرض الرسائل من الجلسة
if (isset($_SESSION['message'])) {
    $message = $_SESSION['message'];
    $message_type = $_SESSION['message_type'] ?? 'info';
    unset($_SESSION['message']);
    unset($_SESSION['message_type']);
}

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

if (!empty($phone)) {
    try {
        // تنظيف رقم الهاتف من المسافات والرموز
        $cleanPhone = preg_replace('/[^0-9]/', '', $phone);
        
        $stmt = $pdo->prepare("
            SELECT o.*, 
                   os.name AS status_name,
                   os.id AS status_id,
                   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 REPLACE(REPLACE(REPLACE(o.phone, ' ', ''), '-', ''), '+', '') LIKE ?
            ORDER BY o.order_date DESC
        ");
        $stmt->execute(['%' . $cleanPhone . '%']);
        $orders = $stmt->fetchAll();

        // جلب عناصر كل طلب مع الخصائص
        foreach ($orders as &$order) {
            // جلب اسم البلدية
            $order['commune_name'] = getCommuneName($pdo, $order['commune_id']);
            
            // جلب سعر التوصيل
            $order['delivery_price'] = getDeliveryPrice(
                $pdo, 
                $order['wilaya_id'], 
                $order['delivery_type'], 
                $order['delivery_company_id']
            );
            
            // جلب عناصر الطلب
            $stmt = $pdo->prepare("
                SELECT oi.*, 
                       p.name AS product_name, 
                       pv.sku, 
                       pv.id AS variant_id,
                       pi.image_url AS product_image
                FROM order_items oi
                JOIN product_variants pv ON oi.product_variant_id = pv.id
                JOIN products p ON pv.product_id = p.id
                LEFT JOIN product_images pi ON p.id = pi.product_id AND pi.is_primary = 1
                WHERE oi.order_id = ?
            ");
            $stmt->execute([$order['id']]);
            $order['items'] = $stmt->fetchAll();
            
            // حساب المجموع
            $order['subtotal'] = 0;
            foreach ($order['items'] as $item) {
                $order['subtotal'] += $item['unit_price'] * $item['quantity'];
            }
            $order['total'] = $order['subtotal'] + $order['delivery_price'];
        }
        unset($order);
        
    } catch (PDOException $e) {
        $error = "خطأ في جلب الطلبات: " . $e->getMessage();
    }
}

// جلب إعدادات Meta Pixel
$pixel = $pdo->query("SELECT meta_pixel_id, meta_pixel_enabled FROM stores WHERE id = 1")->fetch();
?>
<!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>تتبع طلباتك - <?php echo htmlspecialchars($store['name']); ?></title>
    
    <!-- Meta Pixel Code -->
    <?php if ($pixel && $pixel['meta_pixel_enabled'] && !empty(trim($pixel['meta_pixel_id']))): ?>
    <script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', '<?php echo htmlspecialchars(trim($pixel['meta_pixel_id'])); ?>');
    fbq('track', 'PageView');
    </script>
    <noscript><img height="1" width="1" style="display:none" 
    src="https://www.facebook.com/tr?id=<?php echo htmlspecialchars(trim($pixel['meta_pixel_id'])); ?>&ev=PageView&noscript=1"/></noscript>
    <?php endif; ?>
    
    <link rel="icon" href="<?php echo BASE_URL . 'admin/' . htmlspecialchars($store['logo']); ?>" type="image/jpg">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary-color: #1a237e;
            --primary-dark: #0d47a1;
            --blue-color: #2196F3;
            --blue-dark: #1976D2;
            --secondary-color: #2C3E50;
            --light-color: #F8F9FA;
            --dark-color: #333;
            --gray-color: #6C757D;
            --success-color: #4CAF50;
            --warning-color: #FFC107;
            --danger-color: #F44336;
            --border-color: #E0E0E0;
            --shadow-light: 0 2px 10px rgba(0,0,0,0.08);
            --shadow-medium: 0 5px 15px rgba(0,0,0,0.1);
            --shadow-heavy: 0 10px 30px rgba(0,0,0,0.15);
            --transition: all 0.3s ease;
            --border-radius: 12px;
            --border-radius-sm: 8px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Tajawal', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: var(--dark-color);
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* Header Styles */
        .header-top {
            background-color: var(--secondary-color);
            padding: 10px 0;
            color: white;
        }
        
        .header-top-links {
            display: flex;
            justify-content: flex-end;
            gap: 20px;
        }
        
        .header-top-links a {
            color: rgba(255,255,255,0.9);
            text-decoration: none;
            font-size: 14px;
            transition: var(--transition);
        }
        
        .header-top-links a:hover {
            color: white;
        }
        
        .header-main {
            padding: 15px 0;
            background-color: white;
            box-shadow: var(--shadow-light);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .logo-image {
            width: 120px;
            height: auto;
            max-height: 60px;
            object-fit: contain;
        }
        
        .search-box {
            display: flex;
            margin: 0 auto;
            max-width: 500px;
        }
        
        .search-box input {
            flex: 1;
            padding: 12px 15px;
            border: 2px solid var(--border-color);
            border-radius: 8px 0 0 8px;
            outline: none;
            transition: var(--transition);
        }
        
        .search-box input:focus {
            border-color: var(--blue-color);
        }
        
        .search-box button {
            background: var(--blue-color);
            color: white;
            border: none;
            padding: 0 20px;
            border-radius: 0 8px 8px 0;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .search-box button:hover {
            background: var(--blue-dark);
        }
        
        /* Navigation */
        .navbar {
            background: var(--blue-color);
        }
        
        .nav-list {
            display: flex;
            list-style: none;
            justify-content: center;
            margin: 0;
            padding: 0;
        }
        
        .nav-item {
            position: relative;
        }
        
        .nav-item a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 15px 20px;
            transition: var(--transition);
            font-weight: 500;
        }
        
        .nav-item a:hover {
            background: rgba(255,255,255,0.1);
        }
        
        .dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            min-width: 200px;
            box-shadow: var(--shadow-medium);
            border-radius: 8px;
            overflow: hidden;
            display: none;
            z-index: 1001;
        }
        
        .nav-item:hover .dropdown {
            display: block;
        }
        
        .dropdown a {
            color: #333;
            padding: 12px 15px;
            display: block;
            text-decoration: none;
            border-bottom: 1px solid #eee;
            transition: var(--transition);
        }
        
        .dropdown a:hover {
            background: #f5f5f5;
            color: var(--blue-color);
        }
        
        .dropdown a:last-child {
            border-bottom: none;
        }
        
        /* Track Order Page */
        .track-container {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-heavy);
            padding: 40px;
            margin: 40px 0;
            animation: slideIn 0.5s ease-out;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .page-header h1 {
            font-size: 36px;
            color: var(--primary-color);
            margin-bottom: 10px;
            font-weight: 800;
        }
        
        .page-header p {
            color: var(--gray-color);
            font-size: 18px;
        }
        
        .search-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px;
            padding: 40px;
            margin-bottom: 40px;
            color: white;
            text-align: center;
        }
        
        .search-section h2 {
            font-size: 28px;
            margin-bottom: 20px;
            font-weight: 700;
        }
        
        .search-form {
            max-width: 600px;
            margin: 0 auto;
        }
        
        .input-group {
            display: flex;
            gap: 10px;
            background: white;
            border-radius: 50px;
            padding: 5px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        
        .input-group input {
            flex: 1;
            border: none;
            padding: 15px 25px;
            border-radius: 50px;
            font-size: 16px;
            outline: none;
        }
        
        .input-group button {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            border: none;
            padding: 15px 35px;
            border-radius: 50px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .input-group button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .message {
            padding: 15px 25px;
            border-radius: 50px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
            animation: messageSlide 0.3s ease;
        }
        
        @keyframes messageSlide {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .message.success {
            background: #d4edda;
            color: #155724;
            border-right: 4px solid #155724;
        }
        
        .message.error {
            background: #f8d7da;
            color: #721c24;
            border-right: 4px solid #721c24;
        }
        
        .message.info {
            background: #d1ecf1;
            color: #0c5460;
            border-right: 4px solid #0c5460;
        }
        
        .no-results {
            text-align: center;
            padding: 60px 20px;
            background: #f8f9fa;
            border-radius: 20px;
        }
        
        .no-results i {
            font-size: 80px;
            color: var(--gray-color);
            margin-bottom: 20px;
        }
        
        .no-results h3 {
            font-size: 24px;
            color: var(--dark-color);
            margin-bottom: 10px;
        }
        
        .no-results p {
            color: var(--gray-color);
            font-size: 16px;
        }
        
        /* Orders List */
        .orders-list {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        
        .order-card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-medium);
            overflow: hidden;
            transition: var(--transition);
            border: 1px solid var(--border-color);
            animation: cardAppear 0.5s ease forwards;
            opacity: 0;
            transform: translateY(20px);
        }
        
        .order-card:nth-child(1) { animation-delay: 0.1s; }
        .order-card:nth-child(2) { animation-delay: 0.2s; }
        .order-card:nth-child(3) { animation-delay: 0.3s; }
        .order-card:nth-child(4) { animation-delay: 0.4s; }
        .order-card:nth-child(5) { animation-delay: 0.5s; }
        
        @keyframes cardAppear {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .order-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-heavy);
            border-color: var(--blue-color);
        }
        
        .order-header {
            background: linear-gradient(135deg, var(--secondary-color), #1a252f);
            color: white;
            padding: 20px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .order-header:hover {
            background: linear-gradient(135deg, #1a252f, #0f1a23);
        }
        
        .order-header-left {
            display: flex;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .order-id-badge {
            background: rgba(255,255,255,0.2);
            padding: 8px 15px;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 700;
        }
        
        .order-date-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            color: rgba(255,255,255,0.9);
            font-size: 14px;
        }
        
        .order-date-badge i {
            color: var(--blue-color);
        }
        
        .status-badge {
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .status-pending {
            background: var(--warning-color);
            color: #333;
        }
        
        .status-sent {
            background: var(--blue-color);
            color: white;
        }
        
        .status-delivered {
            background: var(--success-color);
            color: white;
        }
        
        .status-cancelled {
            background: var(--danger-color);
            color: white;
        }
        
        .order-body {
            padding: 25px;
            display: none;
            border-top: 1px solid var(--border-color);
        }
        
        .order-body.show {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
            background: #f8f9fa;
            padding: 20px;
            border-radius: 15px;
        }
        
        .info-item {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .info-icon {
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, var(--blue-color), var(--blue-dark));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
        }
        
        .info-content {
            flex: 1;
        }
        
        .info-label {
            font-size: 13px;
            color: var(--gray-color);
            margin-bottom: 3px;
        }
        
        .info-value {
            font-size: 16px;
            font-weight: 600;
            color: var(--dark-color);
        }
        
        .delivery-type-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .delivery-home {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        .delivery-office {
            background: #f3e5f5;
            color: #7b1fa2;
        }
        
        .products-section {
            margin: 25px 0;
        }
        
        .products-section h3 {
            font-size: 20px;
            color: var(--secondary-color);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .products-section h3 i {
            color: var(--blue-color);
        }
        
        .products-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .products-table th {
            background: linear-gradient(135deg, var(--secondary-color), #1a252f);
            color: white;
            font-weight: 600;
            padding: 12px;
            text-align: right;
        }
        
        .products-table td {
            padding: 15px 12px;
            border-bottom: 1px solid #eee;
        }
        
        .products-table tr:last-child td {
            border-bottom: none;
        }
        
        .products-table tr:hover {
            background: #f8f9fa;
        }
        
        .product-image {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid #eee;
        }
        
        .product-name {
            font-weight: 600;
            color: var(--secondary-color);
        }
        
        .attribute-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .attribute-tag {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            border: 1px solid #ddd;
            background: #e3f2fd;
        }
        
        .attribute-color-red {
            background: #ffebee;
            border-color: #ffcdd2;
        }
        
        .attribute-color-green {
            background: #e8f5e8;
            border-color: #c8e6c9;
        }
        
        .attribute-color-blue {
            background: #e3f2fd;
            border-color: #bbdefb;
        }
        
        .no-attributes {
            color: var(--gray-color);
            font-size: 13px;
            font-style: italic;
        }
        
        .price-summary {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }
        
        .summary-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px dashed #ddd;
        }
        
        .summary-row:last-child {
            border-bottom: none;
        }
        
        .summary-row.total {
            font-size: 20px;
            font-weight: 800;
            color: var(--success-color);
            padding-top: 15px;
            margin-top: 10px;
            border-top: 2px solid var(--success-color);
        }
        
        .delivery-free {
            background: #d4edda;
            color: #155724;
            padding: 3px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            display: inline-block;
        }
        
        .order-actions {
            display: flex;
            gap: 15px;
            justify-content: flex-end;
            margin-top: 25px;
        }
        
        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--blue-color), var(--blue-dark));
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3);
        }
        
        .btn-danger {
            background: linear-gradient(135deg, #f44336, #d32f2f);
            color: white;
        }
        
        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(244, 67, 54, 0.3);
        }
        
        .btn-warning {
            background: linear-gradient(135deg, #FFC107, #FFB300);
            color: #333;
        }
        
        .btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
        }
        
        .btn-outline {
            background: transparent;
            border: 2px solid var(--blue-color);
            color: var(--blue-color);
        }
        
        .btn-outline:hover {
            background: var(--blue-color);
            color: white;
        }
        
        /* Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease;
        }
        
        .modal-content {
            background: white;
            border-radius: 20px;
            padding: 30px;
            max-width: 500px;
            width: 90%;
            position: relative;
            animation: modalSlide 0.3s ease;
        }
        
        @keyframes modalSlide {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--border-color);
        }
        
        .modal-header h3 {
            font-size: 22px;
            color: var(--secondary-color);
        }
        
        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--gray-color);
            transition: var(--transition);
        }
        
        .modal-close:hover {
            color: var(--danger-color);
            transform: rotate(90deg);
        }
        
        .modal-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .form-group label {
            font-weight: 600;
            color: var(--secondary-color);
        }
        
        .form-group input,
        .form-group textarea {
            padding: 12px 15px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            font-size: 16px;
            transition: var(--transition);
        }
        
        .form-group input:focus,
        .form-group textarea:focus {
            border-color: var(--blue-color);
            outline: none;
        }
        
        .form-group textarea {
            min-height: 100px;
            resize: vertical;
        }
        
        .modal-footer {
            display: flex;
            gap: 15px;
            justify-content: flex-end;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 2px solid var(--border-color);
        }
        
        /* Footer */
        .footer {
            background: var(--secondary-color);
            color: white;
            padding: 50px 0 20px;
            margin-top: 60px;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .footer-section h3 {
            font-size: 20px;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-section h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50px;
            height: 3px;
            background: var(--blue-color);
            border-radius: 2px;
        }
        
        .footer-section p {
            color: rgba(255,255,255,0.7);
            line-height: 1.8;
            margin-bottom: 20px;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 12px;
        }
        
        .footer-links a {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .footer-links a:hover {
            color: white;
            transform: translateX(-5px);
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-links a {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: var(--transition);
        }
        
        .social-links a:hover {
            background: var(--blue-color);
            transform: translateY(-5px);
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,0.1);
        }
        
        .footer-bottom p {
            color: rgba(255,255,255,0.5);
        }
        
        /* Mobile Navigation */
        .mobile-nav {
            position: fixed;
            bottom: 0;
            right: 0;
            left: 0;
            background: 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: 12px 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;
            cursor: pointer;
            border: none;
            background: none;
            width: 100%;
        }
        
        .mobile-nav-item.active {
            color: var(--blue-color);
        }
        
        .mobile-nav-icon {
            font-size: 20px;
            margin-bottom: 5px;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .navbar {
                display: none;
            }
            
            .mobile-nav {
                display: block;
            }
            
            .track-container {
                padding: 20px;
                margin: 20px 0;
            }
            
            .page-header h1 {
                font-size: 28px;
            }
            
            .search-section {
                padding: 30px 20px;
            }
            
            .search-section h2 {
                font-size: 22px;
            }
            
            .input-group {
                flex-direction: column;
                background: transparent;
                box-shadow: none;
                padding: 0;
            }
            
            .input-group input {
                border-radius: 50px;
                border: 2px solid white;
            }
            
            .input-group button {
                width: 100%;
                justify-content: center;
            }
            
            .order-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
                padding: 15px;
            }
            
            .order-header-left {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .info-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .products-table {
                font-size: 13px;
            }
            
            .products-table th,
            .products-table td {
                padding: 8px;
            }
            
            .product-image {
                width: 40px;
                height: 40px;
            }
            
            .order-actions {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
                justify-content: center;
            }
            
            .modal-content {
                padding: 20px;
            }
            
            .modal-footer {
                flex-direction: column;
            }
            
            .footer {
                padding: 40px 0 70px;
            }
            
            .footer-grid {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .footer-section h3::after {
                right: 50%;
                transform: translateX(50%);
            }
            
            .footer-links a {
                justify-content: center;
            }
            
            .social-links {
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <!-- Header Top -->
    <div class="header-top">
        <div class="container">
            <div class="header-top-links">
                <a href="tel:<?php echo htmlspecialchars($store['phone']); ?>">
                    <i class="fas fa-phone-alt"></i> <?php echo htmlspecialchars($store['phone']); ?>
                </a>
                <a href="mailto:<?php echo htmlspecialchars($store['emailp']); ?>">
                    <i class="fas fa-envelope"></i> <?php echo htmlspecialchars($store['emailp']); ?>
                </a>
            </div>
        </div>
    </div>
    
    <!-- Header Main -->
    <header class="header">
        <div class="header-main">
            <div class="container" style="display: flex; align-items: center; gap: 15px;">
                <?php if (!empty($store['logo'])): ?>
                    <a href="index.php">
                        <img src="<?php echo BASE_URL . 'admin/' . htmlspecialchars($store['logo']); ?>" 
                             alt="<?php echo htmlspecialchars($store['name']); ?>" 
                             class="logo-image">
                    </a>
                <?php else: ?>
                    <a href="index.php" style="font-size: 24px; font-weight: bold; color: var(--secondary-color); text-decoration: none;">
                        <?php echo htmlspecialchars($store['name']); ?>
                    </a>
                <?php endif; ?>
                
                <form action="index.php" method="GET" class="search-box" id="searchForm">
                    <input type="text" name="search" placeholder="ابحث عن منتجات...">
                    <button type="submit"><i class="fas fa-search"></i></button>
                </form>
            </div>
        </div>
        
        <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="track_order.php" class="active">طلباتك</a></li>
                    <li class="nav-item">
                        <a href="#">الأقسام</a>
                        <div class="dropdown">
                            <?php foreach ($categories as $category): ?>
                                <a href="index.php?category=<?php echo $category['id']; ?>">
                                    <?php echo htmlspecialchars($category['name']); ?>
                                </a>
                            <?php endforeach; ?>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    
    <!-- Main Content -->
    <main class="container">
        <div class="track-container">
            <div class="page-header">
                <h1><i class="fas fa-search"></i> تتبع طلباتك</h1>
                <p>أدخل رقم هاتفك لمتابعة حالة طلباتك</p>
            </div>
            
            <!-- Search Section -->
            <div class="search-section">
                <h2>🔍 ابحث عن طلباتك</h2>
                <form method="GET" action="track_order.php" class="search-form">
                    <div class="input-group">
                        <input type="text" 
                               name="phone" 
                               placeholder="أدخل رقم هاتفك (مثال: 0555123456)" 
                               value="<?php echo htmlspecialchars($phone); ?>"
                               pattern="[0-9\s\+]+"
                               title="أدخل أرقام فقط"
                               required>
                        <button type="submit">
                            <i class="fas fa-search"></i>
                            بحث
                        </button>
                    </div>
                </form>
            </div>
            
            <!-- Messages -->
            <?php if ($message): ?>
                <div class="message <?php echo $message_type; ?>">
                    <i class="fas fa-<?php echo $message_type == 'success' ? 'check-circle' : ($message_type == 'error' ? 'exclamation-circle' : 'info-circle'); ?>"></i>
                    <?php echo htmlspecialchars($message); ?>
                </div>
            <?php endif; ?>
            
            <?php if ($error): ?>
                <div class="message error">
                    <i class="fas fa-exclamation-circle"></i>
                    <?php echo htmlspecialchars($error); ?>
                </div>
            <?php endif; ?>
            
            <!-- Results -->
            <?php if (!empty($phone)): ?>
                <?php if (empty($orders)): ?>
                    <div class="no-results">
                        <i class="fas fa-box-open"></i>
                        <h3>لا توجد طلبات مسجلة بهذا الرقم</h3>
                        <p>رقم الهاتف: <?php echo htmlspecialchars($phone); ?></p>
                        <a href="index.php" class="btn btn-primary" style="margin-top: 20px; display: inline-block;">
                            <i class="fas fa-shopping-bag"></i>
                            تسوق الآن
                        </a>
                    </div>
                <?php else: ?>
                    <div class="orders-list">
                        <?php foreach ($orders as $order): ?>
                            <div class="order-card">
                                <div class="order-header" onclick="toggleOrder(this)">
                                    <div class="order-header-left">
                                        <span class="order-id-badge">
                                            <i class="fas fa-hashtag"></i> <?php echo str_pad($order['id'], 5, '0', STR_PAD_LEFT); ?>
                                        </span>
                                        <span class="order-date-badge">
                                            <i class="fas fa-calendar-alt"></i>
                                            <?php echo date('Y/m/d H:i', strtotime($order['order_date'])); ?>
                                        </span>
                                    </div>
                                    <span class="status-badge status-<?php echo $order['status_name']; ?>">
                                        <i class="fas fa-<?php 
                                            echo $order['status_name'] == 'pending' ? 'clock' : 
                                                ($order['status_name'] == 'sent' ? 'truck' : 
                                                ($order['status_name'] == 'delivered' ? 'check-circle' : 'times-circle')); 
                                        ?>"></i>
                                        <?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">
                                    <!-- Customer Info Grid -->
                                    <div class="info-grid">
                                        <div class="info-item">
                                            <div class="info-icon">
                                                <i class="fas fa-user"></i>
                                            </div>
                                            <div class="info-content">
                                                <div class="info-label">اسم العميل</div>
                                                <div class="info-value"><?php echo htmlspecialchars($order['customer_name']); ?></div>
                                            </div>
                                        </div>
                                        
                                        <div class="info-item">
                                            <div class="info-icon">
                                                <i class="fas fa-phone"></i>
                                            </div>
                                            <div class="info-content">
                                                <div class="info-label">رقم الهاتف</div>
                                                <div class="info-value" dir="ltr"><?php echo htmlspecialchars($order['phone']); ?></div>
                                                <?php if (!empty($order['phone2'])): ?>
                                                    <div style="font-size: 13px; color: #666; margin-top: 3px;" dir="ltr">
                                                        <i class="fas fa-phone-alt"></i> <?php echo htmlspecialchars($order['phone2']); ?>
                                                    </div>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                        
                                        <div class="info-item">
                                            <div class="info-icon">
                                                <i class="fas fa-map-marker-alt"></i>
                                            </div>
                                            <div class="info-content">
                                                <div class="info-label">الولاية</div>
                                                <div class="info-value"><?php echo htmlspecialchars($order['wilaya_name'] ?? 'غير محدد'); ?></div>
                                            </div>
                                        </div>
                                        
                                        <div class="info-item">
                                            <div class="info-icon">
                                                <i class="fas fa-city"></i>
                                            </div>
                                            <div class="info-content">
                                                <div class="info-label">البلدية</div>
                                                <div class="info-value"><?php echo htmlspecialchars($order['commune_name']); ?></div>
                                            </div>
                                        </div>
                                        
                                        <div class="info-item">
                                            <div class="info-icon">
                                                <i class="fas fa-truck"></i>
                                            </div>
                                            <div class="info-content">
                                                <div class="info-label">نوع التوصيل</div>
                                                <div class="info-value">
                                                    <span class="delivery-type-badge delivery-<?php echo $order['delivery_type']; ?>">
                                                        <i class="fas fa-<?php echo $order['delivery_type'] == 'home' ? 'home' : 'building'; ?>"></i>
                                                        <?php echo $order['delivery_type'] == 'home' ? 'توصيل للمنزل' : 'توصيل للمكتب'; ?>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="info-item">
                                            <div class="info-icon">
                                                <i class="fas fa-box"></i>
                                            </div>
                                            <div class="info-content">
                                                <div class="info-label">شركة التوصيل</div>
                                                <div class="info-value"><?php echo htmlspecialchars($order['delivery_company_name'] ?? 'غير محدد'); ?></div>
                                            </div>
                                        </div>
                                        
                                        <?php if (!empty($order['tracking_number'])): ?>
                                        <div class="info-item">
                                            <div class="info-icon">
                                                <i class="fas fa-hashtag"></i>
                                            </div>
                                            <div class="info-content">
                                                <div class="info-label">رقم التتبع</div>
                                                <div class="info-value"><?php echo htmlspecialchars($order['tracking_number']); ?></div>
                                            </div>
                                        </div>
                                        <?php endif; ?>
                                    </div>
                                    
                                    <!-- Address -->
                                    <div style="background: #fff3e0; padding: 15px; border-radius: 10px; margin-bottom: 25px; border-right: 4px solid #ff9800;">
                                        <i class="fas fa-map-pin" style="color: #ff9800; margin-left: 10px;"></i>
                                        <strong>العنوان الكامل:</strong> <?php echo htmlspecialchars($order['address']); ?>
                                    </div>
                                    
                                    <!-- Products Section -->
                                    <div class="products-section">
                                        <h3>
                                            <i class="fas fa-shopping-bag"></i>
                                            المنتجات المطلوبة
                                        </h3>
                                        
                                        <table class="products-table">
                                            <thead>
                                                <tr>
                                                    <th>المنتج</th>
                                                    <th>الخصائص</th>
                                                    <th>الكمية</th>
                                                    <th>السعر</th>
                                                    <th>الإجمالي</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php foreach ($order['items'] as $item): 
                                                    $item_total = $item['unit_price'] * $item['quantity'];
                                                ?>
                                                <tr>
                                                    <td>
                                                        <div style="display: flex; align-items: center; gap: 10px;">
                                                            <?php if (!empty($item['product_image'])): ?>
                                                                <img src="<?php echo BASE_URL . 'admin/' . htmlspecialchars($item['product_image']); ?>" 
                                                                     alt="<?php echo htmlspecialchars($item['product_name']); ?>" 
                                                                     class="product-image">
                                                            <?php endif; ?>
                                                            <span class="product-name"><?php echo htmlspecialchars($item['product_name']); ?></span>
                                                        </div>
                                                    </td>
                                                    <td><?php echo formatSelectedAttributes($item['selected_attribute_value']); ?></td>
                                                    <td><?php echo $item['quantity']; ?></td>
                                                    <td><?php echo number_format($item['unit_price'], 2); ?> دج</td>
                                                    <td><strong><?php echo number_format($item_total, 2); ?> دج</strong></td>
                                                </tr>
                                                <?php endforeach; ?>
                                            </tbody>
                                        </table>
                                    </div>
                                    
                                    <!-- Price Summary -->
                                    <div class="price-summary">
                                        <div class="summary-row">
                                            <span>مجموع المنتجات:</span>
                                            <span><strong><?php echo number_format($order['subtotal'], 2); ?> دج</strong></span>
                                        </div>
                                        <div class="summary-row">
                                            <span>تكلفة التوصيل:</span>
                                            <span>
                                                <?php if ($order['delivery_price'] == 0): ?>
                                                    <span class="delivery-free"><i class="fas fa-gift"></i> مجاني</span>
                                                <?php else: ?>
                                                    <strong><?php echo number_format($order['delivery_price'], 2); ?> دج</strong>
                                                <?php endif; ?>
                                            </span>
                                        </div>
                                        <div class="summary-row total">
                                            <span>الإجمالي الكلي:</span>
                                            <span><?php echo number_format($order['total'], 2); ?> دج</span>
                                        </div>
                                    </div>
                                    
                                    <!-- Order Actions (for pending orders only) -->
                                    <?php if ($order['status_name'] === 'pending'): ?>
                                        <div class="order-actions">
                                            <form method="POST" style="display: inline;" onsubmit="return confirm('هل أنت متأكد من إلغاء هذا الطلب؟')">
                                                <input type="hidden" name="order_id" value="<?php echo $order['id']; ?>">
                                                <input type="hidden" name="phone" value="<?php echo htmlspecialchars($phone); ?>">
                                                <button type="submit" name="cancel_order" class="btn btn-danger">
                                                    <i class="fas fa-times-circle"></i>
                                                    إلغاء الطلب
                                                </button>
                                            </form>
                                            <button class="btn btn-warning" onclick="openEditModal(<?php echo $order['id']; ?>, '<?php echo htmlspecialchars($order['address']); ?>', '<?php echo htmlspecialchars($order['phone']); ?>', '<?php echo htmlspecialchars($phone); ?>')">
                                                <i class="fas fa-edit"></i>
                                                تعديل الطلب
                                            </button>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            <?php endif; ?>
        </div>
    </main>
    
    <!-- Edit Order Modal -->
    <div class="modal" id="editModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-edit"></i> تعديل الطلب</h3>
                <button class="modal-close" onclick="closeEditModal()">&times;</button>
            </div>
            <form class="modal-form" method="POST" action="track_order.php">
                <input type="hidden" name="order_id" id="editOrderId">
                <input type="hidden" name="phone_number" id="editPhoneNumber">
                
                <div class="form-group">
                    <label for="editAddress">العنوان بالكامل:</label>
                    <textarea name="address" id="editAddress" required></textarea>
                </div>
                
                <div class="form-group">
                    <label for="editPhone">رقم الهاتف:</label>
                    <input type="tel" name="phone" id="editPhone" required pattern="[0-9\s\+]+" title="أدخل أرقام فقط">
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline" onclick="closeEditModal()">إلغاء</button>
                    <button type="submit" name="edit_order" class="btn btn-primary">
                        <i class="fas fa-save"></i>
                        حفظ التعديلات
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-section">
                    <h3><?php echo htmlspecialchars($store['name']); ?></h3>
                    <p><?php echo htmlspecialchars($store['description']); ?></p>
                    <div class="social-links">
                        <a href="<?php echo htmlspecialchars($store['facebook']); ?>" target="_blank"><i class="fab fa-facebook-f"></i></a>
                        <a href="<?php echo htmlspecialchars($store['telegram']); ?>" target="_blank"><i class="fab fa-telegram-plane"></i></a>
                        <a href="<?php echo htmlspecialchars($store['instgrame']); ?>" target="_blank"><i class="fab fa-instagram"></i></a>
                        <a href="https://wa.me/<?php echo htmlspecialchars($store['phone']); ?>" target="_blank"><i class="fab fa-whatsapp"></i></a>
                    </div>
                </div>
                
                <div class="footer-section">
                    <h3>روابط سريعة</h3>
                    <ul class="footer-links">
                        <li><a href="index.php"><i class="fas fa-angle-left"></i> الرئيسية</a></li>
                        <li><a href="track_order.php"><i class="fas fa-angle-left"></i> تتبع طلباتي</a></li>
                        <?php foreach (array_slice($categories, 0, 3) as $category): ?>
                            <li><a href="index.php?category=<?php echo $category['id']; ?>"><i class="fas fa-angle-left"></i> <?php echo htmlspecialchars($category['name']); ?></a></li>
                        <?php endforeach; ?>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3>معلومات الاتصال</h3>
                    <ul class="footer-links">
                        <li><a href="tel:<?php echo htmlspecialchars($store['phone']); ?>"><i class="fas fa-phone"></i> <?php echo htmlspecialchars($store['phone']); ?></a></li>
                        <li><a href="mailto:<?php echo htmlspecialchars($store['emailp']); ?>"><i class="fas fa-envelope"></i> <?php echo htmlspecialchars($store['emailp']); ?></a></li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>
                    <i class="far fa-copyright"></i>
                    جميع الحقوق محفوظة © <?php echo date('Y'); ?> 
                    <?php echo htmlspecialchars($store['name']); ?>
                </p>
            </div>
        </div>
    </footer>
    
    <!-- Mobile Navigation -->
    <nav class="mobile-nav">
        <ul class="mobile-nav-list">
            <a href="index.php" style="text-decoration: none; color: inherit;">
                <li class="mobile-nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : ''; ?>">
                    <i class="fas fa-home mobile-nav-icon"></i>
                    <span>الرئيسية</span>
                </li>
            </a>
            <a href="track_order.php" style="text-decoration: none; color: inherit;">
                <li class="mobile-nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'track_order.php' ? 'active' : ''; ?>">
                    <i class="fas fa-shopping-bag mobile-nav-icon"></i>
                    <span>طلباتي</span>
                </li>
            </a>
        </ul>
    </nav>
    
    <script>
        // Toggle order details
        function toggleOrder(element) {
            const body = element.nextElementSibling;
            body.classList.toggle('show');
            
            // تغيير الأيقونة (اختياري)
            const icon = element.querySelector('.order-header-left i');
            if (body.classList.contains('show')) {
                element.style.borderRadius = '15px 15px 0 0';
            } else {
                element.style.borderRadius = '15px';
            }
        }
        
        // Edit modal functions
        function openEditModal(orderId, address, phone, phoneNumber) {
            document.getElementById('editOrderId').value = orderId;
            document.getElementById('editAddress').value = address;
            document.getElementById('editPhone').value = phone;
            document.getElementById('editPhoneNumber').value = phoneNumber;
            document.getElementById('editModal').style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }
        
        function closeEditModal() {
            document.getElementById('editModal').style.display = 'none';
            document.body.style.overflow = '';
        }
        
        // Close modal on outside click
        document.getElementById('editModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeEditModal();
            }
        });
        
        // تنسيق رقم الهاتف في البحث
        const phoneInput = document.querySelector('input[name="phone"]');
        if (phoneInput) {
            phoneInput.addEventListener('input', function(e) {
                let value = e.target.value.replace(/[^\d\s\+]/g, '');
                e.target.value = value;
            });
        }
        
        // تتبع البحث في Meta Pixel
        document.querySelector('.search-form').addEventListener('submit', function() {
            if (typeof fbq !== 'undefined') {
                fbq('track', 'Search', {
                    search_string: document.querySelector('input[name="phone"]').value
                });
            }
        });
        
        // Responsive handling
        function handleResponsive() {
            if (window.innerWidth <= 768) {
                document.querySelector('.navbar').style.display = 'none';
            } else {
                document.querySelector('.navbar').style.display = 'block';
            }
        }
        
        window.addEventListener('load', handleResponsive);
        window.addEventListener('resize', handleResponsive);
    </script>
</body>
</html>