<?php

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

require_once __DIR__ . '/db.php';

// ==== جلب إعدادات Meta Pixel ====
try {
    $pixel = $pdo->query("SELECT meta_pixel_id, meta_pixel_enabled FROM stores WHERE id = 1")->fetch();
} catch (Exception $e) {
    $pixel = null;
}

if (isset($_GET['id']) && is_numeric($_GET['id'])) {
    $product_id = (int) $_GET['id'];
} else {
    die("معرف المنتج غير صالح أو مفقود");
}

$product = [];
$product_attributes = [];
$product_images = [];
$product_variants = [];
$delivery_info = [];
$delivery_prices_home = [];
$delivery_prices_office = [];
$wilayas = [];

// ===== دالة تنسيق اسم الولاية للعرض (للواجهة فقط) =====
function formatWilayaForDisplay($id, $name) {
    $id_padded = str_pad($id, 2, '0', STR_PAD_LEFT);
    
    // ترجمة أسماء الولايات
    $arabic_names = [
        1 => 'أدرار',
        2 => 'الشلف',
        3 => 'الأغواط',
        4 => 'أم البواقي',
        5 => 'باتنة',
        6 => 'بجاية',
        7 => 'بسكرة',
        8 => 'بشار',
        9 => 'البليدة',
        10 => 'البويرة',
        11 => 'تمنراست',
        12 => 'تبسة',
        13 => 'تلمسان',
        14 => 'تيارت',
        15 => 'تيزي وزو',
        16 => 'الجزائر',
        17 => 'الجلفة',
        18 => 'جيجل',
        19 => 'سطيف',
        20 => 'سعيدة',
        21 => 'سكيكدة',
        22 => 'سيدي بلعباس',
        23 => 'عنابة',
        24 => 'قالمة',
        25 => 'قسنطينة',
        26 => 'المدية',
        27 => 'مستغانم',
        28 => 'المسيلة',
        29 => 'معسكر',
        30 => 'ورقلة',
        31 => 'وهران',
        32 => 'البيض',
        33 => 'إليزي',
        34 => 'برج بوعريريج',
        35 => 'بومرداس',
        36 => 'الطارف',
        37 => 'تندوف',
        38 => 'تيسمسيلت',
        39 => 'الوادي',
        40 => 'خنشلة',
        41 => 'سوق أهراس',
        42 => 'تيبازة',
        43 => 'ميلة',
        44 => 'عين الدفلة',
        45 => 'النعامة',
        46 => 'عين تموشنت',
        47 => 'غرداية',
        48 => 'غليزان',
        49 => 'تيميمون',
        50 => 'برج باجي مختار',
        51 => 'أولاد جلال',
        52 => 'بني عباس',
        53 => 'عين صالح',
        54 => 'عين قزام',
        55 => 'تقرت',
        56 => 'جانت',
        57 => 'المغير',
        58 => 'المنيعة'
    ];
    
    $arabic_name = isset($arabic_names[$id]) ? $arabic_names[$id] : $name;
    return $id_padded . ' - ' . $name . ' / ' . $arabic_name;
}

try {
    $stmt = $pdo->prepare("
        SELECT p.*, c.name AS category_name,
               (SELECT GROUP_CONCAT(dc.id) FROM product_delivery_companies pdc 
                JOIN delivery_companies dc ON pdc.delivery_company_id = dc.id 
                WHERE pdc.product_id = p.id) AS delivery_company_ids
        FROM products p 
        LEFT JOIN categories c ON p.category_id = c.id 
        WHERE p.id = ?
    ");
    $stmt->execute([$product_id]);
    $product = $stmt->fetch();
    
    if (!$product) {
        die("المنتج غير موجود");
    }
    
    $stmt = $pdo->prepare("
        SELECT a.id, a.name, pa.value, a.input_type, a.values_list 
        FROM product_attributes pa
        JOIN attributes a ON pa.attribute_id = a.id
        WHERE pa.product_id = ?
    ");
    $stmt->execute([$product_id]);
    $product_attributes = $stmt->fetchAll();
    
    $stmt = $pdo->prepare("SELECT image_url, is_primary FROM product_images WHERE product_id = ? ORDER BY is_primary DESC, id ASC");
    $stmt->execute([$product_id]);
    $product_images = $stmt->fetchAll();
    
    $stmt = $pdo->prepare("
        SELECT pv.id, pv.sku, pv.price, pv.stock, pv.is_default
        FROM product_variants pv
        WHERE pv.product_id = ?
    ");
    $stmt->execute([$product_id]);
    $product_variants = $stmt->fetchAll();
    
    foreach ($product_variants as &$variant) {
        $stmt = $pdo->prepare("
            SELECT a.name AS attribute_name, va.attribute_value
            FROM variant_attributes va
            JOIN attributes a ON va.attribute_id = a.id
            WHERE va.variant_id = ?
        ");
        $stmt->execute([$variant['id']]);
        $variant['variant_attrs'] = $stmt->fetchAll();
        
        $stmt = $pdo->prepare("
            SELECT image_url, is_primary FROM variant_images WHERE variant_id = ? ORDER BY is_primary DESC, id ASC
        ");
        $stmt->execute([$variant['id']]);
        $variant['variant_images'] = $stmt->fetchAll();
    }
    unset($variant);
    
    if (!empty($product['delivery_company_ids'])) {
        $delivery_company_ids = explode(',', $product['delivery_company_ids']);
        $first_company_id = $delivery_company_ids[0];
        
        $stmt = $pdo->prepare("
            SELECT dc.id, dc.name 
            FROM delivery_companies dc
            WHERE dc.id = ?
        ");
        $stmt->execute([$first_company_id]);
        $delivery_info = $stmt->fetch();

        $stmt = $pdo->prepare("
            SELECT dp.wilaya_id, dp.price, w.name AS wilaya_name
            FROM delivery_prices dp
            JOIN wilayas w ON dp.wilaya_id = w.id
            WHERE dp.delivery_company_id = ? AND dp.delivery_type = 'home'
        ");
        $stmt->execute([$first_company_id]);
        $delivery_prices_home = $stmt->fetchAll();

        $stmt = $pdo->prepare("
            SELECT dp.wilaya_id, dp.price, w.name AS wilaya_name
            FROM delivery_prices dp
            JOIN wilayas w ON dp.wilaya_id = w.id
            WHERE dp.delivery_company_id = ? AND dp.delivery_type = 'office'
        ");
        $stmt->execute([$first_company_id]);
        $delivery_prices_office = $stmt->fetchAll();

        $available_wilayas = array_unique(
            array_merge(
                array_column($delivery_prices_home, 'wilaya_id'),
                array_column($delivery_prices_office, 'wilaya_id')
            )
        );

        if (!empty($available_wilayas)) {
            // ترتيب الولايات بالرقم (تصاعدي)
            sort($available_wilayas);
            
            $stmt = $pdo->prepare("
                SELECT id, name 
                FROM wilayas 
                WHERE id IN (" . implode(',', array_fill(0, count($available_wilayas), '?')) . ") 
                ORDER BY id ASC
            ");
            $stmt->execute($available_wilayas);
            $wilayas = $stmt->fetchAll();
        }
    }
    
} catch (PDOException $e) {
    die("خطأ في جلب تفاصيل المنتج: " . $e->getMessage());
}

// ============================================================
// =====  التعديل: جلب بيانات البلديات من ملف JSON =====
// ============================================================
$communes_data = []; // مصفوفة لحفظ كل البلديات من ملف JSON
$cities_json_file = __DIR__ . '/cities.json'; // تحديد مسار ملف JSON

// محاولة قراءة ملف JSON
if (file_exists($cities_json_file)) {
    $json_content = file_get_contents($cities_json_file);
    $communes_data = json_decode($json_content, true);
    if (json_last_error() !== JSON_ERROR_NONE) {
        // إذا كان هناك خطأ في ملف JSON، نسجل الخطأ ونجعل المصفوفة فارغة
        error_log("خطأ في فك تشفير ملف cities.json: " . json_last_error_msg());
        $communes_data = [];
    }
} else {
    // إذا لم يوجد الملف، نسجل هذا الخطأ ونتابع بدون بلديات
    error_log("ملف cities.json غير موجود في المسار: " . $cities_json_file);
    $communes_data = [];
}

// دالة لجلب البلديات الخاصة بولاية معينة من مصفوفة JSON
function getCommunesFromJson($wilaya_id, $communes_data) {
    $wilaya_code = str_pad($wilaya_id, 2, '0', STR_PAD_LEFT);
    $filtered_communes = [];
    
    foreach ($communes_data as $commune) {
        if (isset($commune['wilaya_code']) && $commune['wilaya_code'] === $wilaya_code) {
            $filtered_communes[] = [
                'id' => $commune['id'],
                'commune_name' => $commune['commune_name'], // الاسم العربي
                'commune_name_ascii' => $commune['commune_name_ascii'] // الاسم الفرنسي
            ];
        }
    }
    
    // ترتيب البلديات حسب الاسم الفرنسي أبجدياً (كما في الكود الأصلي)
    usort($filtered_communes, function($a, $b) {
        return strcmp($a['commune_name_ascii'], $b['commune_name_ascii']);
    });
    
    return $filtered_communes;
}

// ============================================================
// ===== نهاية التعديل =====
// ============================================================

$default_variant = !empty($product_variants) ? $product_variants[0] : null;

// البحث عن أول خاصية متوفرة لعرض سعرها افتراضياً
$default_price_for_display = $product['price'];
if (!empty($product_variants)) {
    foreach ($product_variants as $variant) {
        if ($variant['stock'] > 0) {
            $default_price_for_display = $variant['price'];
            break;
        }
    }
}

$stmt2 = $pdo->query("SELECT * FROM stores WHERE id = 1");
$store = $stmt2->fetch();

$stmt = $pdo->prepare("SELECT id, name FROM categories ORDER BY name");
$stmt->execute();
$categories = $stmt->fetchAll();

// جلب المنتجات المشابهة
$related_products = [];
try {
    $stmt = $pdo->prepare("
        SELECT p.*, pi.image_url AS image
        FROM products p
        LEFT JOIN product_images pi ON p.id = pi.product_id AND pi.is_primary = 1
        WHERE p.category_id = ? AND p.id != ? AND p.is_active = 1
        ORDER BY p.created_at DESC
        LIMIT 4
    ");
    $stmt->execute([$product['category_id'], $product_id]);
    $related_products = $stmt->fetchAll();
} catch (PDOException $e) {
    $related_products_error = "خطأ في جلب المنتجات ذات الصلة";
}

// تجميع كل الصور
$all_images = [];
foreach ($product_images as $image) {
    $all_images[] = [
        'type' => 'product',
        'image_url' => $image['image_url'],
        'is_primary' => $image['is_primary']
    ];
}

$variant_attributes = [];
$available_variant_combinations = [];

// تجميع الخصائص من المتغيرات المتوفرة
if (!empty($product_variants)) {
    foreach ($product_variants as $variant) {
        if ($variant['stock'] > 0) {
            foreach ($variant['variant_attrs'] as $attr) {
                $attr_name = $attr['attribute_name'];
                $attr_value = $attr['attribute_value'];
                if (!isset($variant_attributes[$attr_name])) {
                    $variant_attributes[$attr_name] = [];
                }
                if (!in_array($attr_value, $variant_attributes[$attr_name])) {
                    $variant_attributes[$attr_name][] = $attr_value;
                }
            }
        }
        
        // إضافة صور المتغيرات
        foreach ($variant['variant_images'] as $image) {
            $found = false;
            foreach ($all_images as $existing) {
                if ($existing['image_url'] === $image['image_url']) {
                    $found = true;
                    break;
                }
            }
            if (!$found) {
                $all_images[] = [
                    'type' => 'variant',
                    'variant_id' => $variant['id'],
                    'image_url' => $image['image_url'],
                    'is_primary' => $image['is_primary']
                ];
            }
        }
    }
}

// ترتيب الصور: الأساسية أولاً ثم الباقي
usort($all_images, function($a, $b) {
    if ($a['is_primary'] == $b['is_primary']) return 0;
    return ($a['is_primary'] > $b['is_primary']) ? -1 : 1;
});

$main_image_url = !empty($all_images) ? $all_images[0]['image_url'] : '';

// التحقق إذا كان المنتج متوفراً
$is_product_available = false;
$available_stock = 0;

if (!empty($product_variants)) {
    foreach ($product_variants as $variant) {
        if ($variant['stock'] > 0) {
            $is_product_available = true;
            $available_stock += $variant['stock'];
        }
    }
} else {
    $is_product_available = ($product['stock_quantity'] > 0);
    $available_stock = $product['stock_quantity'];
}

// إعداد بيانات المنتج لـ Meta Pixel
$product_data_for_pixel = [
    'id' => $product['id'],
    'name' => htmlspecialchars($product['name'], ENT_QUOTES, 'UTF-8'),
    'price' => $product['discounted_price'] ?: $product['price'],
    'category' => htmlspecialchars($product['category_name'] ?? 'عام', ENT_QUOTES, 'UTF-8')
];
?>
<!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($product['name']); ?> - <?php echo htmlspecialchars($store['name']); ?></title>
    
    <!-- Meta Pixel Code -->
    <?php if ($pixel && $pixel['meta_pixel_enabled'] && !empty(trim($pixel['meta_pixel_id']))): ?>
    <?php $pixel_id = htmlspecialchars(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 $pixel_id; ?>');
    fbq('track', 'PageView');
    
    fbq('track', 'ViewContent', {
        content_ids: ['<?php echo $product['id']; ?>'],
        content_name: '<?php echo addslashes($product['name']); ?>',
        content_type: 'product',
        value: <?php echo $product['discounted_price'] ?: $product['price']; ?>,
        currency: 'DZD',
        content_category: '<?php echo addslashes($product['category_name'] ?? 'عام'); ?>'
    });
    </script>
    <noscript><img height="1" width="1" style="display:none" 
    src="https://www.facebook.com/tr?id=<?php echo $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">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <style>
        /* جميع الـ CSS الموجود في ملفك الأصلي يبقى كما هو */
        :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;
            --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);
            --transition: all 0.3s ease;
            --border-radius: 12px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Tajawal', sans-serif;
        }
        
        body {
            background-color: #f8f9fa;
            color: var(--dark-color);
            line-height: 1.6;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* أنماط إضافية لتنسيق خيارات الولاية والبلدية */
        .wilaya-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 0;
        }
        
        .wilaya-code {
            background: var(--blue-color);
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
            min-width: 40px;
            text-align: center;
        }
        
        /* باقي الأنماط كما هي في ملفك الأصلي */
    </style>
    <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;
            --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);
            --transition: all 0.3s ease;
            --border-radius: 12px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Tajawal', sans-serif;
        }
        
        body {
            background-color: #f8f9fa;
            color: var(--dark-color);
            line-height: 1.6;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* Header */
        .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;
        }
        
        /* Product Layout */
        .product-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin: 30px 0;
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-light);
            overflow: hidden;
            padding: 30px;
            animation: fadeInUp 0.5s ease forwards;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @media (max-width: 768px) {
            .product-details {
                grid-template-columns: 1fr;
                padding: 20px;
                gap: 20px;
            }
        }
        
        /* ===== قسم الصور المحسن ===== */
        .product-gallery {
            position: relative;
            width: 100%;
        }
        
        .main-image-container {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            background: #f5f5f5;
            border: 1px solid #eee;
            /* تكبير حجم الإطار */
            height: 500px; /* تمت الزيادة من 400px */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: zoom-in; /* مؤشر للتكبير */
        }
        
        .main-image-container img {
            max-width: 100%;
            max-height: 100%;
            width: auto; /* يضمن عدم تمدد الصورة */
            height: auto; /* يضمن عدم تمدد الصورة */
            object-fit: contain; /* للحفاظ على أبعاد الصورة */
            transition: transform 0.3s ease;
        }
        
        /* تأثير التكبير عند المرور بالماوس (لأجهزة الكمبيوتر) */
        .main-image-container:hover img {
            transform: scale(1.5);
        }
        
        .gallery-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 45px; /* تكبير الأزرار قليلاً */
            height: 45px;
            background: rgba(33, 150, 243, 0.8);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px; /* تكبير الأيقونة */
            transition: var(--transition);
            z-index: 10;
        }
        
        .gallery-arrow:hover {
            background: var(--blue-dark);
            transform: translateY(-50%) scale(1.1);
        }
        
        .gallery-arrow.right {
            left: 15px; /* تعديل المسافة */
        }
        
        .gallery-arrow.left {
            right: 15px; /* تعديل المسافة */
        }
        
        .thumbnail-gallery {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            overflow-x: auto;
            padding: 10px 5px;
            position: relative;
            /* تحسين شريط التمرير */
            scrollbar-width: thin;
            scrollbar-color: var(--blue-color) #f0f0f0;
        }
        
        /* تخصيص شريط التمرير للمتصفحات التي تدعم webkit (كروم، سفاري) */
        .thumbnail-gallery::-webkit-scrollbar {
            height: 6px;
        }
        
        .thumbnail-gallery::-webkit-scrollbar-track {
            background: #f0f0f0;
            border-radius: 10px;
        }
        
        .thumbnail-gallery::-webkit-scrollbar-thumb {
            background-color: var(--blue-color);
            border-radius: 10px;
        }
        
        .thumbnail-item {
            /* تكبير الصور المصغرة */
            width: 90px; /* تمت الزيادة من 70px */
            height: 90px; /* تمت الزيادة من 70px */
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }
        
        .thumbnail-item.active {
            border-color: var(--blue-color);
        }
        
        .thumbnail-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* لجعل الصورة المصغرة تغطي الإطار */
        }
        
        /* تكبير الصور على الشاشات الصغيرة جداً */
        @media (max-width: 480px) {
            .main-image-container {
                height: 350px; /* تكبير مناسب للهواتف */
            }
            .thumbnail-item {
                width: 70px; /* تصغير طفيف للصور المصغرة على الهاتف لتوفير مساحة */
                height: 70px;
            }
        }
        /* ===== نهاية قسم الصور المحسن ===== */
        
        /* Product Info */
        .product-info {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .product-title {
            font-size: 28px;
            color: var(--secondary-color);
            font-weight: 700;
            line-height: 1.3;
        }
        
        .product-description-box {
            background: #f9f9f9;
            border-radius: 10px;
            padding: 20px;
            border: 1px solid #eee;
        }
        
        .product-description-box h3 {
            color: var(--secondary-color);
            margin-bottom: 10px;
            font-size: 18px;
        }
        
        .product-description-box p {
            color: #555;
            line-height: 1.7;
        }
        
        /* Out of Stock Message */
        .out-of-stock-message {
            background: linear-gradient(135deg, #ffebee, #ffcdd2);
            border: 2px solid #f44336;
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            margin: 20px 0;
        }
        
        .out-of-stock-message i {
            font-size: 48px;
            color: #f44336;
            margin-bottom: 15px;
        }
        
        .out-of-stock-message h3 {
            color: #d32f2f;
            margin-bottom: 10px;
            font-size: 20px;
        }
        
        .out-of-stock-message p {
            color: #666;
            font-size: 16px;
        }
        
        /* Variant Selector */
        .variant-selector {
            background: #f9f9f9;
            border-radius: 10px;
            padding: 20px;
            border: 1px solid #eee;
        }
        
        .variant-option {
            margin-bottom: 20px;
        }
        
        .variant-option label {
            display: block;
            margin-bottom: 10px;
            color: var(--secondary-color);
            font-weight: 600;
        }
        
        .variant-values {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .variant-value {
            padding: 10px 18px;
            border: 2px solid #ddd;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
            font-weight: 500;
            color: #555;
        }
        
        .variant-value:hover {
            border-color: var(--blue-color);
            color: var(--blue-color);
        }
        
        .variant-value.selected {
            border-color: var(--blue-color);
            background: var(--blue-color);
            color: white;
        }
        
        .variant-value.out-of-stock {
            opacity: 0.5;
            cursor: not-allowed;
            text-decoration: line-through;
            position: relative;
        }
        
        .variant-value.out-of-stock::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background: #f44336;
            transform: rotate(-45deg);
        }
        
        /* Price Section - ALWAYS VISIBLE NOW */
        .price-section {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-radius: 12px;
            padding: 20px;
            border: 2px solid var(--blue-color);
            text-align: center;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .price-display {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            margin: 15px 0;
        }
        
        .current-price {
            font-size: 36px;
            font-weight: 800;
            color: var(--blue-color);
        }
        
        .old-price {
            font-size: 24px;
            color: #999;
            text-decoration: line-through;
        }
        
        .discount-percent {
            background: #f44336;
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
        }
        
        /* Select Attribute Message - HIDDEN NOW */
        .select-attribute-message {
            background: #fff3e0;
            border: 2px dashed #ffb74d;
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            margin: 20px 0;
            display: none;
        }
        
        .select-attribute-message i {
            font-size: 48px;
            color: #ff9800;
            margin-bottom: 15px;
        }
        
        .select-attribute-message h3 {
            color: #e65100;
            margin-bottom: 10px;
            font-size: 20px;
        }
        
        .select-attribute-message p {
            color: #666;
            font-size: 16px;
        }
        
        /* Order Now Button - FIXED */
        .order-now-btn-container {
            position: fixed;
            bottom: 80px;
            left: 20px;
            right: 20px;
            z-index: 999;
            text-align: center;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease;
        }
        
        .order-now-btn-container.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        .order-now-btn {
            background: linear-gradient(135deg, var(--blue-color), var(--blue-dark));
            color: white;
            border: none;
            padding: 20px 40px;
            font-size: 20px;
            font-weight: 700;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(33, 150, 243, 0.3);
            animation: pulse 2s infinite;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            max-width: 400px;
            justify-content: center;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 5px 20px rgba(33, 150, 243, 0.3);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 10px 30px rgba(33, 150, 243, 0.5);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 5px 20px rgba(33, 150, 243, 0.3);
            }
        }
        
        .order-now-btn:hover {
            background: linear-gradient(135deg, var(--blue-dark), #0b5e9e);
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 10px 30px rgba(33, 150, 243, 0.5);
            animation: none;
        }
        
        .order-now-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            animation: none;
            transform: none;
            box-shadow: none;
        }
        
        /* Direct Order Container */
        .direct-order-container {
            background: white;
            border-radius: var(--border-radius);
            padding: 30px;
            margin: 40px 0;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-light);
        }
        
        .direct-order-title {
            text-align: center;
            margin-bottom: 25px;
            color: var(--secondary-color);
            font-size: 24px;
            font-weight: 700;
        }
        
        .order-summary {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 25px;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 10px;
            border: 1px solid #eee;
        }
        
        @media (max-width: 576px) {
            .order-summary {
                grid-template-columns: 1fr;
            }
        }
        
        .summary-item {
            text-align: center;
        }
        
        .summary-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .summary-value {
            font-size: 24px;
            font-weight: 800;
            color: var(--blue-color);
        }
        
        .quantity-selector {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }
        
        .quantity-btn {
            background: var(--blue-color);
            border: none;
            width: 45px;
            height: 45px;
            font-size: 20px;
            cursor: pointer;
            border-radius: 8px;
            color: white;
            transition: var(--transition);
        }
        
        .quantity-btn:hover {
            background: var(--blue-dark);
        }
        
        .quantity-input {
            width: 70px;
            height: 45px;
            text-align: center;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 600;
        }
        
        /* Form Styles */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: var(--dark-color);
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 14px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: var(--transition);
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--blue-color);
            outline: none;
        }
        
        .form-group small {
            color: #666;
            display: block;
            margin-top: 5px;
            font-size: 13px;
        }
        
        .btn-primary {
            background: var(--blue-color);
            color: white;
            border: none;
            padding: 18px 30px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 18px;
            width: 100%;
            font-weight: 700;
            transition: var(--transition);
        }
        
        .btn-primary:hover {
            background: var(--blue-dark);
        }
        
        .btn-primary:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        
        /* Related Products Section */
        .related-products-section {
            margin: 50px 0;
        }
        
        .section-title {
            text-align: center;
            margin: 40px 0 30px;
            position: relative;
        }
        
        .section-title h2 {
            font-size: 32px;
            color: var(--secondary-color);
            margin-bottom: 10px;
            position: relative;
            display: inline-block;
            padding-bottom: 10px;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 50%;
            transform: translateX(50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, var(--blue-color), var(--blue-dark));
            border-radius: 2px;
        }
        
        .related-products-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
        }
        
        @media (max-width: 992px) {
            .related-products-container {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .related-products-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 480px) {
            .related-products-container {
                grid-template-columns: 1fr;
            }
        }
        
        .related-product-card {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-light);
            transition: var(--transition);
            border: 1px solid var(--border-color);
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            display: block;
        }
        
        .related-product-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-heavy);
            border-color: var(--blue-color);
        }
        
        .related-product-img-container {
            height: 200px;
            overflow: hidden;
            background: var(--light-color);
        }
        
        .related-product-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .related-product-card:hover .related-product-img {
            transform: scale(1.05);
        }
        
        .related-product-content {
            padding: 15px;
        }
        
        .related-product-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--secondary-color);
            margin-bottom: 10px;
            height: 45px;
            overflow: hidden;
        }
        
        .related-product-price {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .related-current-price {
            font-size: 18px;
            font-weight: 800;
            color: var(--blue-color);
        }
        
        .related-old-price {
            font-size: 14px;
            color: var(--gray-color);
            text-decoration: line-through;
        }
        
        .related-action-btn {
            background: linear-gradient(135deg, var(--blue-color), var(--blue-dark));
            color: white;
            border: none;
            padding: 10px;
            border-radius: var(--border-radius-sm);
            cursor: pointer;
            transition: var(--transition);
            font-weight: 600;
            text-align: center;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            margin-top: 15px;
        }
        
        .related-action-btn:hover {
            background: linear-gradient(135deg, var(--blue-dark), #0b5e9e);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3);
        }
        
        /* 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;
        }
        
        /* Footer */
        .footer {
            background: var(--secondary-color);
            color: white;
            padding: 50px 0 20px;
            margin-top: 60px;
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,0.1);
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .navbar {
                display: none;
            }
            
            .mobile-nav {
                display: block;
            }
            
            .order-now-btn-container {
                bottom: 70px;
                left: 15px;
                right: 15px;
            }
            
            .order-now-btn {
                padding: 18px 30px;
                font-size: 18px;
            }
            
            .product-title {
                font-size: 22px;
            }
            
            .current-price {
                font-size: 28px;
            }
        }
        
        @media (max-width: 480px) {
            .order-now-btn {
                padding: 16px 20px;
                font-size: 16px;
            }
        }
    </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">
                <div class="logo-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; ?>
                </div>
                
                <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">طلباتك</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>
    
    <!-- Product Details -->
    <main class="container">
        <div class="product-details">
            <!-- Left Column: Gallery (كما هو) -->
            <div class="product-gallery">
                <div class="main-image-container" id="mainImageContainer">
                    <button class="gallery-arrow right" onclick="prevImage()"><i class="fas fa-chevron-left"></i></button>
                    <img id="mainImage" 
                         src="<?php echo BASE_URL . 'admin/' . htmlspecialchars($main_image_url); ?>" 
                         alt="<?php echo htmlspecialchars($product['name']); ?>">
                    <button class="gallery-arrow left" onclick="nextImage()"><i class="fas fa-chevron-right"></i></button>
                </div>
                
                <div class="thumbnail-gallery" id="thumbnailGallery">
                    <?php
                    if (!empty($all_images)) {
                        foreach ($all_images as $index => $image) {
                            $image_url = !empty($image['image_url']) ? $image['image_url'] : '';
                            $active = $index === 0 ? 'active' : '';
                            if ($image_url) {
                                echo '<div class="thumbnail-item ' . $active . '" data-index="' . $index . '" onclick="changeMainImage(\'' . BASE_URL . 'admin/' . htmlspecialchars($image_url) . '\', ' . $index . ')">
                                    <img src="' . BASE_URL . 'admin/' . htmlspecialchars($image_url) . '" 
                                         alt="صورة ' . ($index + 1) . '">
                                </div>';
                            }
                        }
                    }
                    ?>
                </div>
            </div>
            
            <!-- Right Column: Info (كما هو) -->
            <div class="product-info">
                <h1 class="product-title"><?php echo htmlspecialchars($product['name']); ?></h1>
                
                <div class="product-description-box">
                    <h3>وصف المنتج</h3>
                    <p><?php echo nl2br(htmlspecialchars($product['description'])); ?></p>
                </div>
                
                <?php if (!$is_product_available): ?>
                <div class="out-of-stock-message">
                    <i class="fas fa-times-circle"></i>
                    <h3>نعتذر، المنتج غير متوفر حالياً</h3>
                    <p>تم نفاد الكمية من هذا المنتج. نعمل على تجديد المخزون قريباً.</p>
                </div>
                <?php endif; ?>
                
                <?php if ($is_product_available && !empty($variant_attributes)): ?>
                <div class="variant-selector">
                    <?php foreach ($variant_attributes as $attr_name => $attr_values): ?>
                    <div class="variant-option">
                        <label><?php echo htmlspecialchars($attr_name); ?></label>
                        <div class="variant-values">
                            <?php foreach ($attr_values as $value): ?>
                            <div class="variant-value" 
                                 data-attribute="<?php echo htmlspecialchars($attr_name); ?>" 
                                 data-value="<?php echo htmlspecialchars($value); ?>">
                                <?php echo htmlspecialchars($value); ?>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
                <?php endif; ?>
                
                <?php if ($is_product_available): ?>
                <div class="price-section" id="priceSection">
                    <div class="price-display">
                        <span class="current-price" id="variantPriceDisplay"><?php echo number_format($default_price_for_display, 2); ?> دج</span>
                        <?php if ($product['discounted_price'] && $product['discounted_price'] < $product['price']): ?>
                        <span class="old-price" id="oldPriceDisplay"><?php echo number_format($product['price'], 2); ?> دج</span>
                        <span class="discount-percent" id="discountPercent">-<?php echo round(($product['price'] - $product['discounted_price']) / $product['price'] * 100); ?>%</span>
                        <?php endif; ?>
                    </div>
                    <div style="margin-top: 15px; color: #666;">
                        السعر يشمل الضريبة
                    </div>
                </div>
                <?php endif; ?>
                
                <?php if ($is_product_available && !empty($variant_attributes)): ?>
                <div class="select-attribute-message" id="selectAttributeMessage">
                    <i class="fas fa-mouse-pointer"></i>
                    <h3>اختر الخصائص أولاً</h3>
                    <p>يرجى اختيار الخصائص أعلاه لرؤية السعر والتفاصيل</p>
                </div>
                <?php endif; ?>
            </div>
        </div>
        
        <!-- Fixed Order Now Button -->
        <div class="order-now-btn-container" id="orderNowBtnContainer">
            <button class="order-now-btn" id="orderNowBtn">
                <i class="fas fa-shopping-bag"></i>
                اطلب الآن
            </button>
        </div>
        
        <!-- Direct Order Form -->
        <div class="direct-order-container" id="directOrderContainer">
            <h3 class="direct-order-title">أكمل طلبك</h3>
            
            <form id="orderForm" action="submit_order.php" method="POST">
                <div class="form-group">
                    <label>الخصائص المختارة:</label>
                    <div id="selectedAttributesDisplay" style="padding: 15px; background: #f5f5f5; border-radius: 8px; font-weight: 600; color: var(--blue-color);">
                        <?php if (empty($variant_attributes)): ?>
                            المنتج الأساسي
                        <?php else: ?>
                            يرجى اختيار الخصائص
                        <?php endif; ?>
                    </div>
                    <input type="hidden" id="selectedAttributesInput" name="selected_attributes" value="<?php echo empty($variant_attributes) ? '[]' : ''; ?>">
                </div>
                
                <div class="form-group">
                    <label for="customer_name">الاسم الكامل:</label>
                    <input type="text" id="customer_name" name="customer_name" required placeholder="أدخل اسمك الكامل">
                </div>
                
                <div class="form-group">
                    <label for="phone">رقم الهاتف الأساسي:</label>
                    <input type="tel" id="phone" name="phone" required placeholder="أدخل رقم هاتفك الأساسي">
                </div>
                
                <div class="form-group">
                    <label for="phone2">رقم هاتف إضافي (اختياري):</label>
                    <input type="tel" id="phone2" name="phone2" placeholder="أدخل رقم هاتف إضافي للتواصل">
                    <small>اختياري - يمكنك تركه فارغاً</small>
                </div>
                
                <!-- قسم الولاية - مع تنسيق العرض للعميل فقط -->
                <div class="form-group">
                    <label for="wilaya-select-form">الولاية:</label>
                    <select id="wilaya-select-form" name="wilaya_id" required>
                        <option value="">-- اختر ولايتك --</option>
                        <?php foreach ($wilayas as $wilaya): ?>
                            <option value="<?php echo $wilaya['id']; ?>" data-code="<?php echo str_pad($wilaya['id'], 2, '0', STR_PAD_LEFT); ?>">
                                <?php echo formatWilayaForDisplay($wilaya['id'], $wilaya['name']); ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                
                <!-- ===== التعديل: قسم البلدية - يعتمد على ملف JSON ===== -->
                <div class="form-group" id="commune-group" style="display: none;">
                    <label for="commune-select-form">البلدية:</label>
                    <select id="commune-select-form" name="commune_id">
                        <option value="">-- اختر بلديتك --</option>
                    </select>
                    <small>اختر البلدية لتحديد العنوان بدقة</small>
                </div>
                
                <div class="form-group">
                    <label for="address">العنوان بالتفصيل:</label>
                    <textarea id="address" name="address" placeholder="أدخل عنوانك بالتفصيل (اختياري)"></textarea>
                    <small><i class="fas fa-info-circle"></i> اختياري - يمكنك تركه فارغاً</small>
                </div>
                
                <div class="form-group">
                    <label>نوع التوصيل:</label>
                    <div style="display: flex; gap: 15px; margin-top: 10px;">
                        <label style="flex: 1; text-align: center;">
                            <input type="radio" name="delivery_type" value="home" style="margin-left: 5px;" checked>
                            المنزل
                        </label>
                        <label style="flex: 1; text-align: center;">
                            <input type="radio" name="delivery_type" value="office" style="margin-left: 5px;">
                            المكتب
                        </label>
                    </div>
                </div>
                
                <div class="order-summary">
                    <div class="summary-item">
                        <div class="summary-label">الكمية</div>
                        <div class="quantity-selector">
                            <button type="button" class="quantity-btn minus">-</button>
                            <input type="number" class="quantity-input" id="quantity" name="quantity" value="1" min="1" max="<?php echo $available_stock; ?>">
                            <button type="button" class="quantity-btn plus">+</button>
                        </div>
                    </div>
                    
                    <div class="summary-item">
                        <div class="summary-label">سعر التوصيل</div>
                        <div class="summary-value" id="deliveryPriceDisplay">0.00 دج</div>
                    </div>
                    
                    <div class="summary-item">
                        <div class="summary-label">السعر الإجمالي</div>
                        <div class="summary-value" id="orderTotalPrice">
                            <?php echo number_format($default_price_for_display, 2); ?> دج
                        </div>
                    </div>
                </div>
                
                <input type="hidden" name="product_id" value="<?php echo $product_id; ?>">
                <input type="hidden" id="variantIdInput" name="variant_id" value="<?php echo $default_variant['id'] ?? ''; ?>">
                <input type="hidden" name="delivery_company_id" value="<?php echo $delivery_info['id'] ?? ''; ?>">
                <input type="hidden" id="deliveryPriceInput" name="delivery_price" value="0">
                
                <button type="submit" class="btn-primary" id="submitOrderBtn" <?php echo !$is_product_available ? 'disabled' : ''; ?>>
                    <i class="fas fa-check-circle"></i> تأكيد الطلب
                </button>
                
                <div style="text-align: center; color: #4CAF50; margin-top: 15px; padding: 10px; background: #e8f5e9; border-radius: 8px;">
                    <i class="fas fa-info-circle"></i> سنتصل بكم على الرقم الذي أدخلتموه لتأكيد الطلب وتحديد العنوان
                </div>
            </form>
        </div>
        
        <!-- Related Products Section (كما هو) -->
        <?php if (!empty($related_products)): ?>
        <section class="related-products-section">
            <div class="section-title">
                <h2>منتجات مشابهة</h2>
                <p>قد تعجبك أيضاً هذه المنتجات</p>
            </div>
            
            <div class="related-products-container">
                <?php foreach ($related_products as $related): ?>
                    <?php
                    $related_image = !empty($related['image']) ? BASE_URL . 'admin/' . $related['image'] : '';
                    $related_price = $related['discounted_price'] ?? $related['price'];
                    $related_old_price = $related['discounted_price'] ? $related['price'] : null;
                    ?>
                    <a href="det.php?id=<?php echo $related['id']; ?>" class="related-product-card">
                        <div class="related-product-img-container">
                            <?php if ($related_image): ?>
                                <img src="<?php echo $related_image; ?>" alt="<?php echo htmlspecialchars($related['name']); ?>" class="related-product-img">
                            <?php else: ?>
                                <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f5f5f5;">
                                    <i class="fas fa-image" style="font-size: 40px; color: #ccc;"></i>
                                </div>
                            <?php endif; ?>
                        </div>
                        <div class="related-product-content">
                            <h3 class="related-product-title"><?php echo htmlspecialchars($related['name']); ?></h3>
                            <div class="related-product-price">
                                <span class="related-current-price"><?php echo number_format($related_price, 2); ?> دج</span>
                                <?php if ($related_old_price): ?>
                                    <span class="related-old-price"><?php echo number_format($related_old_price, 2); ?> دج</span>
                                <?php endif; ?>
                            </div>
                            <button class="related-action-btn" onclick="event.preventDefault(); window.location.href='det.php?id=<?php echo $related['id']; ?>'">
                                <i class="fas fa-eye"></i> عرض المنتج
                            </button>
                        </div>
                    </a>
                <?php endforeach; ?>
            </div>
        </section>
        <?php endif; ?>
    </main>
    
    <footer class="footer">
        <div class="container">
            <div class="footer-bottom">
                <p>
                    <i class="far fa-copyright"></i>
                    جميع الحقوق محفوظة © <?php echo date('Y'); ?> 
                    <?php echo htmlspecialchars($store['name']); ?>
                </p>
            </div>
        </div>
    </footer>
    
    <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>
    const allImages = <?php echo json_encode($all_images); ?>;
    let currentImageIndex = 0;
    
    function changeMainImage(imageUrl, index) {
        document.getElementById('mainImage').src = imageUrl;
        currentImageIndex = index;
        
        document.querySelectorAll('.thumbnail-item').forEach(item => {
            item.classList.remove('active');
        });
        document.querySelectorAll('.thumbnail-item')[index].classList.add('active');
    }
    
    function nextImage() {
        currentImageIndex = (currentImageIndex + 1) % allImages.length;
        const imageUrl = '<?php echo BASE_URL; ?>admin/' + allImages[currentImageIndex].image_url;
        changeMainImage(imageUrl, currentImageIndex);
    }
    
    function prevImage() {
        currentImageIndex = (currentImageIndex - 1 + allImages.length) % allImages.length;
        const imageUrl = '<?php echo BASE_URL; ?>admin/' + allImages[currentImageIndex].image_url;
        changeMainImage(imageUrl, currentImageIndex);
    }
    
    $(document).ready(function() {
        const productVariants = <?php echo json_encode($product_variants); ?>;
        const deliveryPricesHome = <?php echo json_encode($delivery_prices_home); ?>;
        const deliveryPricesOffice = <?php echo json_encode($delivery_prices_office); ?>;
        
        // ===== التعديل: تمرير بيانات JSON للبلديات إلى JavaScript =====
        const communesData = <?php echo json_encode($communes_data); ?>;
        
        // التحقق من بيانات البلديات
        console.log('Communes data loaded:', communesData);
        if (communesData && communesData.length > 0) {
            console.log('Example commune:', communesData[0]);
            console.log('Total communes:', communesData.length);
        } else {
            console.warn('Warning: No communes data available');
        }
        
        let selectedAttributes = {};
        let currentVariant = <?php echo json_encode($default_variant); ?>;
        let defaultPrice = <?php echo $default_price_for_display; ?>;
        
        const variantPriceDisplay = $('#variantPriceDisplay');
        const oldPriceDisplay = $('#oldPriceDisplay');
        const discountPercent = $('#discountPercent');
        const selectedAttributesDisplay = $('#selectedAttributesDisplay');
        const selectedAttributesInput = $('#selectedAttributesInput');
        const orderNowBtn = $('#orderNowBtn');
        const orderNowBtnContainer = $('#orderNowBtnContainer');
        const directOrderContainer = $('#directOrderContainer');
        const variantIdInput = $('#variantIdInput');
        const orderTotalPrice = $('#orderTotalPrice');
        const quantityInput = $('#quantity');
        const submitOrderBtn = $('#submitOrderBtn');
        const variantValues = $('.variant-value');
        const wilayaSelect = $('#wilaya-select-form');
        const deliveryTypeRadios = $('input[name="delivery_type"]');
        const deliveryPriceDisplay = $('#deliveryPriceDisplay');
        const deliveryPriceInput = $('#deliveryPriceInput');
        
        variantPriceDisplay.text(defaultPrice.toFixed(2) + ' دج');
        
        function initializeVariantAttributes() {
            if (!<?php echo $is_product_available ? 'true' : 'false'; ?>) {
                $('.variant-selector').hide();
                $('.price-section').hide();
                orderNowBtn.prop('disabled', true).text('غير متوفر');
                submitOrderBtn.prop('disabled', true);
                return;
            }
            
            if (Object.keys(<?php echo json_encode($variant_attributes); ?>).length === 0) {
                orderNowBtn.prop('disabled', false);
                submitOrderBtn.prop('disabled', false);
                updateTotalPrice();
            } else {
                orderNowBtn.prop('disabled', true);
                submitOrderBtn.prop('disabled', true);
            }
        }
        
        variantValues.on('click', function() {
            if ($(this).hasClass('out-of-stock')) return;
            
            const attribute = $(this).data('attribute');
            const value = $(this).data('value');
            
            $(`.variant-value[data-attribute="${attribute}"]`).removeClass('selected');
            $(this).addClass('selected');
            selectedAttributes[attribute] = value;
            
            findMatchingVariant();
            updateSelectedAttributesDisplay();
            checkAttributesComplete();
        });
        
        function findMatchingVariant() {
            if (Object.keys(selectedAttributes).length === 0) {
                currentVariant = null;
                return;
            }
            
            const matchingVariant = productVariants.find(variant => {
                return Object.keys(selectedAttributes).every(attr => {
                    return variant.variant_attrs.some(va => 
                        va.attribute_name === attr && va.attribute_value === selectedAttributes[attr]
                    );
                }) && variant.stock > 0;
            });
            
            if (matchingVariant) {
                currentVariant = matchingVariant;
                updateVariantDetails(matchingVariant);
                updateVariantImages(matchingVariant.id);
            } else {
                currentVariant = null;
            }
        }
        
        function updateVariantDetails(variant) {
            variantPriceDisplay.text(Number(variant.price).toFixed(2) + ' دج');
            variantIdInput.val(variant.id);
            quantityInput.attr('max', variant.stock);
            updateTotalPrice();
        }
        
        function updateVariantImages(variantId) {
            const variant = productVariants.find(v => v.id === variantId);
            if (variant && variant.variant_images && variant.variant_images.length > 0) {
                const newImages = variant.variant_images;
                if (newImages.length > 0) {
                    const firstImage = '<?php echo BASE_URL; ?>admin/' + newImages[0].image_url;
                    $('#mainImage').attr('src', firstImage);
                    
                    $('#thumbnailGallery').empty();
                    newImages.forEach((image, index) => {
                        const imageUrl = '<?php echo BASE_URL; ?>admin/' + image.image_url;
                        const thumbnail = $(`
                            <div class="thumbnail-item ${index === 0 ? 'active' : ''}" data-index="${index}" onclick="changeMainImage('${imageUrl}', ${index})">
                                <img src="${imageUrl}" alt="صورة ${index + 1}">
                            </div>
                        `);
                        $('#thumbnailGallery').append(thumbnail);
                    });
                    
                    currentImageIndex = 0;
                }
            }
        }
        
        function checkAttributesComplete() {
            const allAttributes = Object.keys(<?php echo json_encode($variant_attributes); ?>);
            
            if (Object.keys(selectedAttributes).length === allAttributes.length) {
                orderNowBtn.prop('disabled', false);
                submitOrderBtn.prop('disabled', false);
            } else {
                orderNowBtn.prop('disabled', true);
                submitOrderBtn.prop('disabled', true);
            }
        }
        
        function updateSelectedAttributesDisplay() {
            if (Object.keys(selectedAttributes).length === 0) {
                selectedAttributesDisplay.text('يرجى اختيار الخصائص');
                selectedAttributesInput.val('');
                return;
            }
            
            let displayText = '';
            for (const [key, value] of Object.entries(selectedAttributes)) {
                displayText += `${key}: ${value} | `;
            }
            displayText = displayText.slice(0, -2);
            
            selectedAttributesDisplay.text(displayText);
            selectedAttributesInput.val(JSON.stringify(selectedAttributes));
        }
        
        // ===== التعديل: دالة جلب البلديات من ملف JSON (المعدلة) =====
        function loadCommunesFromJson(wilayaId) {
            if (!wilayaId) {
                $('#commune-group').hide();
                $('#commune-select-form').html('<option value="">-- اختر بلديتك --</option>');
                return;
            }

            // تحويل رقم الولاية (مثل 16) إلى كود الولاية بصيغة رقم بدون أصفار
            // لأن ملف JSON قد يستخدم أرقام بدون padding
            
            // تصفية البلديات التي تنتمي لهذا الكود
            const filtered = communesData.filter(commune => {
                // تأكد من أن wilaya_code موجود وقارنه مع wilayaId كرقم
                // هذا يحل مشكلة المقارنة بين "16" و 16
                return commune.wilaya_code && parseInt(commune.wilaya_code) === parseInt(wilayaId);
            });

            if (filtered.length > 0) {
                // ترتيب البلديات حسب الاسم الفرنسي
                filtered.sort((a, b) => (a.commune_name_ascii || '').localeCompare(b.commune_name_ascii || ''));

                let options = '<option value="">-- اختر بلديتك --</option>';
                
                filtered.forEach(function(commune) {
                    // تنسيق العرض: الاسم الفرنسي / الاسم العربي
                    let frenchName = commune.commune_name_ascii || '';
                    let arabicName = commune.commune_name || '';
                    
                    let displayName = frenchName;
                    if (frenchName && arabicName && frenchName !== arabicName) {
                        displayName = frenchName + ' / ' + arabicName;
                    } else if (arabicName) {
                        displayName = arabicName;
                    }
                    
                    // القيمة المخزنة هي id فقط (رقم)
                    options += `<option value="${commune.id}">${displayName}</option>`;
                });
                
                $('#commune-select-form').html(options);
                $('#commune-group').show();
            } else {
                // إذا لم يتم العثور على بلديات، عرض رسالة وجعل الحقل إلزامي
                $('#commune-select-form').html('<option value="">لا توجد بلديات مسجلة لهذه الولاية</option>');
                $('#commune-group').show();
                
                // يمكنك إضافة خيار لإدخال البلدية يدوياً
                if ($('#manual-commune-group').length === 0) {
                    $('#commune-group').after(`
                        <div class="form-group" id="manual-commune-group">
                            <label for="manual_commune">أدخل اسم البلدية يدوياً:</label>
                            <input type="text" id="manual_commune" name="manual_commune" placeholder="أدخل اسم بلديتك">
                        </div>
                    `);
                }
            }
        }
        
        function updateDeliveryPrice() {
            const wilayaId = wilayaSelect.val();
            const deliveryType = $('input[name="delivery_type"]:checked').val();
            
            if (!wilayaId) {
                deliveryPriceDisplay.text('0.00 دج');
                deliveryPriceInput.val('0');
                updateTotalPrice();
                return;
            }
            
            const priceArray = deliveryType === 'home' ? deliveryPricesHome : deliveryPricesOffice;
            const foundPrice = priceArray.find(item => item.wilaya_id == wilayaId);
            
            if (foundPrice) {
                const price = parseFloat(foundPrice.price);
                deliveryPriceDisplay.text(price.toFixed(2) + ' دج');
                deliveryPriceInput.val(price);
            } else {
                deliveryPriceDisplay.text('غير متوفر');
                deliveryPriceInput.val('0');
            }
            
            updateTotalPrice();
        }
        
        function updateTotalPrice() {
            const quantity = parseInt(quantityInput.val()) || 1;
            let productPrice = defaultPrice;
            
            if (currentVariant) {
                productPrice = parseFloat(currentVariant.price);
            }
            
            const deliveryPrice = parseFloat(deliveryPriceInput.val()) || 0;
            const total = (productPrice * quantity) + deliveryPrice;
            orderTotalPrice.text(total.toFixed(2) + ' دج');
        }
        
        orderNowBtn.on('click', function() {
            if (Object.keys(<?php echo json_encode($variant_attributes); ?>).length > 0 && !currentVariant) {
                alert('يرجى اختيار جميع الخصائص أولاً');
                return;
            }
            
            if (typeof fbq !== 'undefined' && currentVariant) {
                fbq('track', 'AddToCart', {
                    content_ids: [currentVariant.id],
                    content_name: '<?php echo addslashes($product['name']); ?>',
                    content_type: 'product',
                    value: currentVariant.price,
                    currency: 'DZD'
                });
            }
            
            $('html, body').animate({
                scrollTop: directOrderContainer.offset().top - 20
            }, 800);
        });
        
        $('.quantity-btn.minus').on('click', function() {
            let value = parseInt(quantityInput.val());
            if (value > 1) {
                quantityInput.val(value - 1);
                updateTotalPrice();
            }
        });
        
        $('.quantity-btn.plus').on('click', function() {
            let value = parseInt(quantityInput.val());
            const max = parseInt(quantityInput.attr('max')) || 100;
            if (value < max) {
                quantityInput.val(value + 1);
                updateTotalPrice();
            }
        });
        
        quantityInput.on('change', function() {
            let value = parseInt($(this).val());
            const max = parseInt($(this).attr('max')) || 100;
            
            if (isNaN(value) || value < 1) {
                value = 1;
            }
            
            if (value > max) {
                value = max;
                alert('الكمية المطلوبة تتجاوز المخزون المتاح!');
            }
            
            $(this).val(value);
            updateTotalPrice();
        });
        
        // ربط حدث اختيار الولاية لجلب البلديات من JSON
        wilayaSelect.on('change', function() {
            const wilayaId = $(this).val();
            // استدعاء الدالة الجديدة التي تعتمد على JSON
            loadCommunesFromJson(wilayaId);
            updateDeliveryPrice();
        });
        
        deliveryTypeRadios.on('change', updateDeliveryPrice);
        
        $('#orderForm').on('submit', function(e) {
            if (Object.keys(<?php echo json_encode($variant_attributes); ?>).length > 0 && !currentVariant) {
                e.preventDefault();
                alert('يرجى اختيار خصائص المنتج أولاً');
                return false;
            }
            
            const customerName = $('#customer_name').val().trim();
            const phone = $('#phone').val().trim();
            const wilayaId = $('#wilaya-select-form').val();
            const communeId = $('#commune-select-form').val();
            const manualCommune = $('#manual_commune').val();
            
            if (!customerName) {
                e.preventDefault();
                alert('يرجى إدخال الاسم الكامل');
                return false;
            }
            
            if (!phone) {
                e.preventDefault();
                alert('يرجى إدخال رقم الهاتف الأساسي');
                return false;
            }
            
            if (!/^\d+$/.test(phone)) {
                e.preventDefault();
                alert('رقم الهاتف يجب أن يحتوي على أرقام فقط');
                return false;
            }
            
            const phone2 = $('#phone2').val().trim();
            if (phone2 && !/^\d+$/.test(phone2)) {
                e.preventDefault();
                alert('رقم الهاتف الإضافي يجب أن يحتوي على أرقام فقط');
                return false;
            }
            
            if (!wilayaId) {
                e.preventDefault();
                alert('يرجى اختيار الولاية');
                return false;
            }
            
            // التحقق من اختيار البلدية
            if (wilayaId) {
                if ($('#commune-group').is(':visible') && !communeId && !manualCommune) {
                    e.preventDefault();
                    alert('يرجى اختيار أو إدخال اسم البلدية');
                    return false;
                }
            }
            
            if (typeof fbq !== 'undefined') {
                const quantity = parseInt(quantityInput.val()) || 1;
                let price = currentVariant ? parseFloat(currentVariant.price) : defaultPrice;
                const total = (price * quantity) + (parseFloat(deliveryPriceInput.val()) || 0);
                
                fbq('track', 'InitiateCheckout', {
                    content_ids: [currentVariant ? currentVariant.id : <?php echo $product['id']; ?>],
                    content_name: '<?php echo addslashes($product['name']); ?>',
                    content_type: 'product',
                    value: total,
                    currency: 'DZD',
                    num_items: quantity
                });
            }
            
            return true;
        });
        
        $('#address').removeAttr('required');
        
        $('#searchForm').on('submit', function() {
            const searchInput = $(this).find('input[name="search"]');
            if (searchInput.val().trim() && typeof fbq !== 'undefined') {
                fbq('track', 'Search', {
                    search_string: searchInput.val().trim()
                });
            }
        });
        
        function handleOrderNowButtonVisibility() {
            const scrollPosition = $(window).scrollTop();
            const containerTop = directOrderContainer.offset().top;
            
            if (scrollPosition + $(window).height() > containerTop) {
                orderNowBtnContainer.removeClass('show');
            } else {
                orderNowBtnContainer.addClass('show');
            }
        }
        
        $(window).on('scroll resize', handleOrderNowButtonVisibility);
        
        function handleResponsiveNav() {
            if ($(window).width() <= 768) {
                $('.navbar').hide();
                $('.mobile-nav').show();
            } else {
                $('.navbar').show();
                $('.mobile-nav').hide();
            }
        }
        
        $(window).on('resize', handleResponsiveNav);
        handleResponsiveNav();
        
        initializeVariantAttributes();
        handleOrderNowButtonVisibility();
        updateDeliveryPrice();
        
        $('.mobile-nav-item').on('click', function() {
            $('.mobile-nav-item').removeClass('active');
            $(this).addClass('active');
        });
    });
    </script>
</body>
</html>