<?php
// blog.php - صفحة المدونة موحّدة مع التصميم الرئيسي
try {
    require_once 'config.php';

    if (DEBUG_MODE) {
        error_log("blog.php: Starting to load");
    }

    // إنشاء اتصال قاعدة البيانات
    $db = new Database();

    if (!$db->isConnected()) {
        throw new Exception("فشل في الاتصال بقاعدة البيانات");
    }

    // الصفحة الحالية
    $page = isset($_GET['page']) && is_numeric($_GET['page']) ? max(1, (int)$_GET['page']) : 1;

    // البحث
    $search = isset($_GET['search']) ? sanitize($_GET['search']) : null;

    // عدد المقالات في كل صفحة (10 مقالات)
    $articles_per_page = 10;
    $offset = ($page - 1) * $articles_per_page;

    // جلب المقالات المنشورة
    $articles = $db->getPublishedArticles($articles_per_page, $offset, $search);
    $total_articles = $db->countPublishedArticles($search);
    $total_pages = ceil($total_articles / $articles_per_page);

    // معلومات الصفحة للـ SEO
    $page_title = $search ? "البحث: $search - مساحة Mycalls" : "مساحة Mycalls - أحدث أخبار الذكاء الاصطناعي";
    $page_description = $search ?
        "نتائج البحث عن: $search في مساحة Mycalls" :
        "اكتشف أحدث التطورات في الذكاء الاصطناعي وخدمة العملاء الذكية مع MyCalls AI";

    if (DEBUG_MODE) {
        error_log("blog.php: Found $total_articles articles, showing " . count($articles) . " articles");
    }
} catch (Exception $e) {
    error_log("blog.php error: " . $e->getMessage());

    if (DEBUG_MODE) {
        die("خطأ في تحميل المدونة: " . $e->getMessage());
    } else {
        $articles = [];
        $total_articles = 0;
        $total_pages = 0;
        $page_title = "مساحة Mycalls";
        $page_description = "اكتشف أحدث التطورات في الذكاء الاصطناعي";
    }
}
?>

<!DOCTYPE html>
<html lang="ar" dir="rtl" id="htmlRoot">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="pageTitle">MyCalls Space - Latest AI News</title>
    <meta name="description" content="Discover the latest developments in artificial intelligence and smart customer service with MyCalls AI">
    <meta name="keywords" content="artificial intelligence, customer service, tech blog, MyCalls AI">

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="MyCalls Space - Latest AI News">
    <meta property="og:description" content="Discover the latest developments in artificial intelligence and smart customer service with MyCalls AI">
    <meta property="og:type" content="website">
    <meta property="og:url" content="<?php echo SITE_URL . '/blog.php'; ?>">
    <meta property="og:site_name" content="MyCalls AI">

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="MyCalls Space - Latest AI News">
    <meta name="twitter:description" content="Discover the latest developments in artificial intelligence and smart customer service with MyCalls AI">

    <!-- IBM Plex Sans Arabic Font for both languages -->
    <link
        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap"
        rel="stylesheet" />
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

    <!-- External CSS -->
    <link rel="stylesheet" href="css/style-blog.css" />
</head>

<body>
    <!-- Side Strips -->
    <div class="side-strip left"></div>
    <div class="side-strip right"></div>
    <div class="bottom-strip"></div>

    <!-- Background Animation -->
    <div class="bg-animation">
        <div class="floating-shape shape-1"></div>
        <div class="floating-shape shape-2"></div>
        <div class="floating-shape shape-3"></div>
    </div>

    <!-- Header -->
    <header>
        <div class="header-content">
            <a href="index.html" class="logo">
                <img src="image/logo.PNG" alt="MyCalls" />
            </a>

            <nav class="nav-menu">
                <a
                    href="index.html"
                    class="nav-item"
                    data-en="Home"
                    data-ar="الرئيسية">Home</a>
                <a
                    href="about.html"
                    class="nav-item"
                    data-en="How it Works"
                    data-ar="كيف يعمل؟">How it Works</a>
                <a href="team.html" class="nav-item" data-en="Team" data-ar="الفريق">Team</a>
                <a
                    href="features.html"
                    class="nav-item"
                    data-en="Features"
                    data-ar="المزايا">Features</a>
                <a
                    href="blog.php"
                    class="nav-item active"
                    data-en="MyCalls Space"
                    data-ar="مساحة Mycalls">MyCalls Space</a>
                <a
                    href="contact.html"
                    class="nav-item"
                    data-en="Contact Us"
                    data-ar="تواصل معنا">Contact Us</a>
            </nav>

            <button class="mobile-menu-toggle" id="mobileMenuToggle">
                <span></span>
                <span></span>
                <span></span>
            </button>

            <div class="header-actions">
                <button class="lang-toggle" id="langToggle">
                    <i class="fas fa-globe"></i>
                    <span id="currentLang">AR</span>
                </button>

                <button
                    class="header-cta"
                    id="freeTrial"
                    data-en="Try Free Now"
                    data-ar="جرب مجاناً الآن">
                    Try Free Now
                </button>
            </div>
        </div>

        <nav class="mobile-nav" id="mobileNav">
            <a
                href="index.html"
                class="mobile-nav-item"
                data-en="Home"
                data-ar="الرئيسية">Home</a>
            <a
                href="about.html"
                class="mobile-nav-item"
                data-en="How it Works"
                data-ar="كيف يعمل">How it Works</a>
            <a
                href="team.html"
                class="mobile-nav-item"
                data-en="Team"
                data-ar="الفريق">Team</a>
            <a
                href="features.html"
                class="mobile-nav-item"
                data-en="Features"
                data-ar="المزايا">Features</a>
            <a
                href="blog.php"
                class="mobile-nav-item active"
                data-en="MyCalls Space"
                data-ar="مساحة Mycalls">MyCalls Space</a>
            <a
                href="contact.html"
                class="mobile-nav-item"
                data-en="Contact Us"
                data-ar="تواصل معنا">Contact Us</a>
            <button
                class="mobile-nav-item mobile-cta"
                id="freeTrialMobile"
                data-en="Try Free Now"
                data-ar="جرب مجاناً الآن">
                Try Free Now
            </button>
        </nav>
    </header>

    <!-- Blog Hero Section -->
    <section class="blog-hero">
        <div class="hero-content">
            <h1 class="hero-title" data-en="MyCalls Space" data-ar="مساحة Mycalls">MyCalls Space</h1>
            <p class="hero-subtitle" data-en="Discover the latest articles and news about artificial intelligence and modern communication technologies" data-ar="اكتشف أحدث المقالات والأخبار حول الذكاء الاصطناعي وتقنيات الاتصالات الحديثة">Discover the latest articles and news about artificial intelligence and modern communication technologies</p>

            <!-- Search Container -->
            <div class="search-container">
                <form class="search-form" method="GET" action="">
                    <input
                        type="text"
                        class="search-input"
                        name="search"
                        data-en-placeholder="Search in articles..."
                        data-ar-placeholder="ابحث في المقالات..."
                        placeholder="Search in articles..."
                        value="<?php echo htmlspecialchars($search ?? ''); ?>">
                    <button type="submit" class="search-btn">
                        <i class="fas fa-search"></i> <span data-en="Search" data-ar="بحث">Search</span>
                    </button>
                </form>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="main-content">
        <!-- Search Results Info -->
        <?php if ($search): ?>
            <div class="search-info">
                <h3 id="searchResultsTitle">Search results for: "<?php echo htmlspecialchars($search); ?>"</h3>
                <p id="searchResultsCount">Found <?php echo $total_articles; ?> <?php echo $total_articles == 1 ? 'article' : 'articles'; ?></p>
                <a href="blog.php" class="clear-search" id="clearSearchBtn">
                    <i class="fas fa-times"></i> <span data-en="Clear Search" data-ar="مسح البحث">Clear Search</span>
                </a>
            </div>
        <?php endif; ?>

        <?php if (empty($articles)): ?>
            <div class="empty-state">
                <i class="fas fa-search"></i>
                <h3 id="emptyStateTitle">
                    <?php if ($search): ?>
                        <span data-en="No articles found" data-ar="لم يتم العثور على مقالات">No articles found</span>
                    <?php else: ?>
                        <span data-en="No published articles" data-ar="لا توجد مقالات منشورة حالياً">No published articles</span>
                    <?php endif; ?>
                </h3>
                <p id="emptyStateDesc">
                    <?php if ($search): ?>
                        <span data-en="No articles match your search" data-ar="لا توجد مقالات تطابق بحثك">No articles match your search</span>: "<?php echo htmlspecialchars($search); ?>"
                        <br><a href="blog.php" data-en="View all articles" data-ar="عرض جميع المقالات">View all articles</a>
                    <?php else: ?>
                        <span data-en="No articles are currently published" data-ar="لا توجد مقالات منشورة حالياً">No articles are currently published</span>
                    <?php endif; ?>
                </p>
            </div>
        <?php else: ?>
            <!-- Blog Grid -->
            <div class="blog-grid">
                <?php foreach ($articles as $article): ?>
                    <article class="blog-card" onclick="location.href='article.php?id=<?php echo $article['id']; ?>'" tabindex="0" role="button">
                        <div class="blog-image">
                            <?php if ($article['imagefeatured']): ?>
                                <img
                                    src="<?php echo htmlspecialchars($article['imagefeatured']); ?>"
                                    alt="<?php echo htmlspecialchars($article['title']); ?>"
                                    loading="lazy"
                                    onerror="this.src='https://via.placeholder.com/400x220/00195e/ffffff?text=MyCalls+AI'">
                            <?php else: ?>
                                <img src="https://via.placeholder.com/400x220/00195e/ffffff?text=MyCalls+AI" alt="MyCalls AI" loading="lazy">
                            <?php endif; ?>
                        </div>
                        <div class="blog-content">
                            <h3 class="blog-title"><?php echo htmlspecialchars($article['title']); ?></h3>
                            <p class="blog-excerpt">
                                <?php echo createExcerpt($article['content']); ?>
                            </p>
                            <div class="blog-meta">
                                <div class="blog-date">
                                    <i class="far fa-calendar"></i>
                                    <span><?php echo formatDate($article['created_at']); ?></span>
                                </div>
                                <a href="article.php?id=<?php echo $article['id']; ?>" class="read-more" onclick="event.stopPropagation()" data-en="Read More" data-ar="اقرأ المزيد">
                                    Read More
                                </a>
                            </div>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>

            <!-- Enhanced Pagination -->
            <?php if ($total_pages > 1): ?>
                <div class="pagination-container">
                    <nav class="pagination">
                        <!-- Previous Page -->
                        <?php if ($page > 1): ?>
                            <a href="?page=<?php echo ($page - 1); ?><?php echo $search ? '&search=' . urlencode($search) : ''; ?>" title="Previous Page" data-en-title="Previous Page" data-ar-title="الصفحة السابقة">
                                <i class="fas fa-chevron-left"></i>
                            </a>
                        <?php else: ?>
                            <span class="disabled">
                                <i class="fas fa-chevron-left"></i>
                            </span>
                        <?php endif; ?>

                        <!-- Page Numbers -->
                        <?php
                        $start_page = max(1, $page - 2);
                        $end_page = min($total_pages, $page + 2);

                        // First page
                        if ($start_page > 1): ?>
                            <a href="?page=1<?php echo $search ? '&search=' . urlencode($search) : ''; ?>">1</a>
                            <?php if ($start_page > 2): ?>
                                <span class="dots">...</span>
                            <?php endif;
                        endif;

                        // Middle pages
                        for ($i = $start_page; $i <= $end_page; $i++):
                            if ($i == $page): ?>
                                <span class="current"><?php echo $i; ?></span>
                            <?php else: ?>
                                <a href="?page=<?php echo $i; ?><?php echo $search ? '&search=' . urlencode($search) : ''; ?>"><?php echo $i; ?></a>
                            <?php endif;
                        endfor;

                        // Last page
                        if ($end_page < $total_pages):
                            if ($end_page < $total_pages - 1): ?>
                                <span class="dots">...</span>
                            <?php endif; ?>
                            <a href="?page=<?php echo $total_pages; ?><?php echo $search ? '&search=' . urlencode($search) : ''; ?>"><?php echo $total_pages; ?></a>
                        <?php endif; ?>

                        <!-- Next Page -->
                        <?php if ($page < $total_pages): ?>
                            <a href="?page=<?php echo ($page + 1); ?><?php echo $search ? '&search=' . urlencode($search) : ''; ?>" title="Next Page" data-en-title="Next Page" data-ar-title="الصفحة التالية">
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        <?php else: ?>
                            <span class="disabled">
                                <i class="fas fa-chevron-right"></i>
                            </span>
                        <?php endif; ?>
                    </nav>
                </div>
            <?php endif; ?>
        <?php endif; ?>
    </main>

    <!-- Footer -->
    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <div class="footer-logo">
                    <img src="image/logo-footer.PNG" alt="MyCalls" />
                </div>
                <p
                    data-en="Virtual work team with human spirit and advanced artificial intelligence, serving your customers 24 hours in multiple languages, with accuracy and speed, adapting to your company's style from day one as an expert in your field."
                    data-ar="فريق عمل افتراضي بروح بشرية وذكاء اصطناعي متطور، يخدم عملاءك 24 ساعة بلغات متعددة، بدقة وسرعة، ويتأقلم مع أسلوب شركتك من أول يوم كأنه خبير في مجالك.">
                    Virtual work team with human spirit and advanced artificial
                    intelligence, serving your customers 24 hours in multiple languages,
                    with accuracy and speed, adapting to your company's style from day
                    one as an expert in your field.
                </p>
                <p>
                    <strong
                        data-en="We save your time, reduce your costs, and increase customer satisfaction"
                        data-ar="نوفر وقتك، نقلل تكاليفك، ونرفع رضا عملاءك">We save your time, reduce your costs, and increase customer
                        satisfaction</strong>
                </p>
            </div>

            <div class="footer-section">
                <h3 data-en="Contact Us" data-ar="تواصل معنا">Contact Us</h3>
                <p><i class="fas fa-phone"></i> +966590086017</p>
                <p><i class="fas fa-envelope"></i> mycalls@novayai.com</p>
                <p>
                    <i class="fas fa-map-marker-alt"></i>
                    <span
                        data-en="Riyadh - Kingdom of Saudi Arabia"
                        data-ar="الرياض- المملكة العربية السعودية">Riyadh - Kingdom of Saudi Arabia</span>
                </p>
            </div>

            <div class="footer-section">
                <h3 data-en="Our Services" data-ar="خدماتنا">Our Services</h3>
                <ul class="footer-services">
                    <li data-en="Virtual Employees" data-ar="موظفون افتراضيون">
                        Virtual Employees
                    </li>
                    <li data-en="24/7 Customer Service" data-ar="خدمة عملاء 24/7">
                        24/7 Customer Service
                    </li>
                    <li data-en="Multi-language Support" data-ar="دعم متعدد اللغات">
                        Multi-language Support
                    </li>
                    <li data-en="Customized Solutions" data-ar="حلول مخصصة">
                        Customized Solutions
                    </li>
                    <li
                        data-en="Company Systems Integration"
                        data-ar="تكامل مع أنظمة الشركة">
                        Company Systems Integration
                    </li>
                    <li>
                        <a
                            href="privacy-policy.html"
                            data-en="Privacy Policy"
                            data-ar="سياسة الخصوصية">Privacy Policy</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="footer-bottom">
            <p
                data-en="© 2025 MyCalls - All rights reserved to"
                data-ar="© 2025 جميع الحقوق محفوظة لدى شركة Mycalls">
                © 2025 MyCalls - All rights reserved to
            </p>
            <a href="https://novayai.com" target="_blank" class="novay-link">NovayAI</a>
        </div>
    </footer>

    <!-- Service Modal -->
    <div class="modal-overlay" id="serviceModal">
        <div class="modal-content">
            <div class="modal-header">
                <button class="modal-close">&times;</button>
                <h2 class="modal-title" data-en="Service Request" data-ar="طلب خدمة">
                    Service Request
                </h2>
                <p
                    class="modal-subtitle"
                    data-en="Fill in the following details and we will contact you within 24 hours"
                    data-ar="املأ البيانات التالية وسنتواصل معك خلال 24 ساعة">
                    Fill in the following details and we will contact you within 24
                    hours
                </p>
            </div>

            <div class="modal-body">
                <div class="service-info" id="serviceInfo">
                    <h3
                        class="service-title"
                        data-en="Selected Service"
                        data-ar="الخدمة المحددة">
                        Selected Service
                    </h3>
                    <p
                        class="service-description"
                        data-en="Service information will be determined here"
                        data-ar="سيتم تحديد معلومات الخدمة هنا">
                        Service information will be determined here
                    </p>
                </div>

                <form
                    id="serviceForm"
                    action="https://formspree.io/f/xblavrjz"
                    method="POST">
                    <input
                        type="hidden"
                        name="_subject"
                        value="New Request from MyCalls Website" />
                    <input
                        type="hidden"
                        name="_replyto"
                        value="ahmedyousef2003@gmail.com" />

                    <div class="form-group">
                        <label
                            class="form-label"
                            data-en="Company Name *"
                            data-ar="اسم الشركة *">Company Name *</label>
                        <input
                            type="text"
                            class="form-input"
                            name="companyName"
                            data-en-placeholder="Your Company Name"
                            data-ar-placeholder="اسم شركتك"
                            placeholder="Your Company Name"
                            required />
                    </div>

                    <div class="form-group">
                        <label
                            class="form-label"
                            data-en="Phone Number *"
                            data-ar="رقم الهاتف *">Phone Number *</label>
                        <input
                            type="tel"
                            class="form-input"
                            name="phone"
                            data-en-placeholder="+1xxxxxxxxx"
                            data-ar-placeholder="+966xxxxxxxxx"
                            placeholder="+1xxxxxxxxx"
                            required />
                    </div>

                    <div class="form-group">
                        <label
                            class="form-label"
                            data-en="Email Address *"
                            data-ar="البريد الإلكتروني *">Email Address *</label>
                        <input
                            type="email"
                            class="form-input"
                            name="email"
                            data-en-placeholder="example@company.com"
                            data-ar-placeholder="example@company.com"
                            placeholder="example@company.com"
                            required />
                    </div>

                    <div class="form-group">
                        <label
                            class="form-label"
                            data-en="Contact Person Name *"
                            data-ar="اسم الشخص المسؤول *">Contact Person Name *</label>
                        <input
                            type="text"
                            class="form-input"
                            name="contactPerson"
                            data-en-placeholder="Your Full Name"
                            data-ar-placeholder="اسمك الكامل"
                            placeholder="Your Full Name"
                            required />
                    </div>

                    <div class="form-group">
                        <label
                            class="form-label"
                            data-en="Job Title *"
                            data-ar="الوظيفة *">Job Title *</label>
                        <input
                            type="text"
                            class="form-input"
                            name="jobTitle"
                            data-en-placeholder="Manager, Director, etc."
                            data-ar-placeholder="مدير، مسؤول، إلخ"
                            placeholder="Manager, Director, etc."
                            required />
                    </div>

                    <button type="submit" class="btn-submit">
                        <span
                            class="btn-text"
                            data-en="Save Data and Send Request"
                            data-ar="حفظ البيانات وإرسال الطلب">Save Data and Send Request</span>
                        <div class="loading-spinner"></div>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Success Message -->
    <div id="successMessage" class="success-message" style="display: none">
        <h3
            data-en="Your request has been sent successfully!"
            data-ar="تم إرسال طلبك بنجاح!">
            Your request has been sent successfully!
        </h3>
        <p data-en="We will contact you soon" data-ar="سنتواصل معك قريباً">
            We will contact you soon
        </p>
    </div>

    <!-- External Scripts -->
    <script src="js/script-blog.js"></script>
    <script
        defer
        src="https://app.fastbots.ai/embed.js"
        data-bot-id="cmfslktwp0806pa1mnb512ibt"></script>
</body>

</html>