<?php
session_start();
require_once 'config/database.php';

// جلب المنتجات
$stmt = $pdo->prepare("SELECT * FROM products WHERE is_active = 1 ORDER BY category, name");
$stmt->execute();
$products = $stmt->fetchAll();

// جلب الفئات
$stmt = $pdo->prepare("SELECT DISTINCT category FROM products WHERE is_active = 1");
$stmt->execute();
$categories = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo SITE_NAME; ?></title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/animations.css">
    <link rel="stylesheet" href="assets/css/polish.css">
    <link rel="stylesheet" href="assets/css/smooth.css">
    <link rel="stylesheet" href="assets/css/enhanced.css">
    <link rel="stylesheet" href="assets/css/mobile-responsive.css">
    <link rel="stylesheet" href="assets/css/mobile-viewport-fix.css">
    <link rel="stylesheet" href="assets/css/mobile-cart-fix.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
    <!-- الهيدر -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <h1><?php echo SITE_NAME; ?></h1>
                    <p><?php echo SITE_DESCRIPTION; ?></p>
                </div>
                <div class="header-actions">
                    <button class="whatsapp-btn btn-hover-effect" onclick="openWhatsApp()">
                        <i class="fab fa-whatsapp"></i>
                        اطلب عبر الواتساب
                        <span class="min-order"><?php echo MIN_ORDER_AMOUNT . ' ' . CURRENCY; ?></span>
                    </button>
                    <button class="cart-btn btn-hover-effect" onclick="toggleCart()">
                        <i class="fas fa-shopping-cart"></i>
                        السلة
                        <span class="cart-count" id="cartCount">0</span>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- البحث والفئات -->
    <section class="search-section">
        <div class="container">
            <div class="search-content">
                <h2>اكتشف منتجاتنا المتنوعة</h2>
                <p>جودة عالية وأسعار منافسة</p>
                <div class="search-bar">
                    <input type="text" id="searchInput" placeholder="ابحث عن المنتجات...">
                    <button onclick="searchProducts()">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                <div class="categories">
                    <button class="category-btn active" data-category="all">جميع الأقسام</button>
                    <?php foreach($categories as $category): ?>
                    <button class="category-btn" data-category="<?php echo htmlspecialchars($category['category']); ?>">
                        <?php echo htmlspecialchars($category['category']); ?>
                    </button>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </section>

    <!-- المنتجات -->
    <main class="main-content">
        <div class="container">
            <div class="products-grid" id="productsGrid">
                <?php foreach($products as $product): ?>
                <div class="product-card card-hover-effect" data-category="<?php echo htmlspecialchars($product['category']); ?>">
                    <div class="product-image">
                        <img src="<?php echo $product['image'] ?: 'assets/images/placeholder.jpg'; ?>" 
                             alt="<?php echo htmlspecialchars($product['name']); ?>" 
                             class="image-zoom">
                    </div>
                    <div class="product-info">
                        <h3 class="text-shadow"><?php echo htmlspecialchars($product['name']); ?></h3>
                        <p><?php echo htmlspecialchars($product['description']); ?></p>
                        <div class="product-price">
                            <span class="price text-glow"><?php echo number_format($product['price'], 2); ?> <?php echo CURRENCY; ?></span>
                        </div>
                        <button class="add-to-cart-btn btn-hover-effect" onclick="addToCart(<?php echo $product['id']; ?>, '<?php echo htmlspecialchars($product['name']); ?>', <?php echo $product['price']; ?>)">
                            <i class="fas fa-plus"></i>
                            إضافة
                        </button>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </main>

    <!-- سلة التسوق -->
    <div class="cart-overlay" id="cartOverlay" onclick="closeCart()"></div>
    <div class="cart" id="cart">
        <div class="cart-header">
            <h3>سلة المشتريات</h3>
            <button class="close-cart" onclick="closeCart()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="cart-items" id="cartItems">
            <!-- العناصر ستظهر هنا -->
        </div>
        <div class="cart-footer">
            <div class="cart-total">
                <span>المجموع الكلي:</span>
                <span id="cartTotal">0.00 <?php echo CURRENCY; ?></span>
            </div>
            <button class="whatsapp-order-btn" onclick="sendWhatsAppOrder()">
                <i class="fab fa-whatsapp"></i>
                إرسال الطلب عبر واتساب
            </button>
            <button class="continue-shopping-btn" onclick="closeCart()">
                متابعة التسوق
            </button>
        </div>
    </div>

    <!-- نافذة تفاصيل الطلب -->
    <div class="order-modal" id="orderModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>تفاصيل الطلب</h3>
                <button class="close-modal" onclick="closeOrderModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <form id="orderForm">
                    <div class="form-group">
                        <label for="customerName">الاسم الكامل:</label>
                        <input type="text" id="customerName" name="customerName" required>
                    </div>
                    <div class="form-group">
                        <label for="customerPhone">رقم الهاتف:</label>
                        <input type="tel" id="customerPhone" name="customerPhone" required>
                    </div>
                    <div class="form-group">
                        <label for="customerAddress">العنوان (اختياري):</label>
                        <textarea id="customerAddress" name="customerAddress" rows="3"></textarea>
                    </div>
                    <div class="order-summary">
                        <h4>ملخص الطلب:</h4>
                        <div id="orderSummary"></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="cancel-btn" onclick="closeOrderModal()">إلغاء</button>
                <button type="button" class="confirm-order-btn" onclick="confirmOrder()">
                    <i class="fab fa-whatsapp"></i>
                    تأكيد الطلب وإرساله عبر واتساب
                </button>
            </div>
        </div>
    </div>

    <script>
        // Load settings dynamically from database
        async function loadSettings() {
            try {
                const response = await fetch('get_settings.php');
                const settings = await response.json();
                
                window.SITE_NAME = settings.site_name;
                window.WHATSAPP_NUMBER = settings.whatsapp_number;
                window.CURRENCY = settings.currency;
                window.MIN_ORDER_AMOUNT = parseFloat(settings.min_order_amount);
                window.SETTINGS_LOADED = true;
                
                console.log('Settings loaded:', settings);
                console.log('WhatsApp number:', window.WHATSAPP_NUMBER);
                
                // Update global variables immediately
                if (typeof updateSettings === 'function') {
                    updateSettings();
                }
            } catch (error) {
                console.error('Error loading settings:', error);
                // Fallback values
                window.SITE_NAME = 'مطعم الذوق الرفيع';
                window.WHATSAPP_NUMBER = '962791234561';
                window.CURRENCY = 'د.أ';
                window.MIN_ORDER_AMOUNT = 5;
                window.SETTINGS_LOADED = true;
            }
        }
        
        // Load settings when page loads
        loadSettings();
        
        // Also reload settings every 5 seconds to ensure we have the latest
        setInterval(loadSettings, 5000);
    </script>
            <script src="assets/js/script.js"></script>
            <script src="assets/js/mobile-optimized.js"></script>
            <script src="assets/js/mobile-screen-fix.js"></script>
            <script src="assets/js/mobile-cart-fix.js"></script>
        </body>
        </html>
