<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>متجر نظرة - Nadhrah Store</title>
    <script>
        // TikTok Landing Page Redirect
        if (window.location.search.includes('src=tiktok')) {
            window.location.href = '/tiktok';
        }
    </script>
    <meta name="description" content="متجر أثاث احترافي مع ميزة الواقع المعزز">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap"
        rel="stylesheet">
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/mokhtarbsaid/rare-arabic-fonts/theyearofhandicrafts/all.min.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Firebase SDK (Compat) -->
    <script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-functions-compat.js"></script>
    <!-- EmailJS SDK -->
    <script type="text/javascript" src="https://cdn.emailjs.com/dist/email.min.js"></script>
    <script type="text/javascript">
        (function () {
            // Initialize EmailJS with your Public Key
            // You will update this in main.js or config
        })();
    </script>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="auth.css">
</head>

<body>
    <!-- Navigation -->
    <nav class="navbar" style="background:#fffcf7;">
        <div class="container nav-container" style="gap:15px;">

            <!-- 1. Logo (Right in RTL) -->
            <a href="#/" class="logo" style="flex:1; display: flex; align-items: center; text-decoration: none;">
                <img src="./assets/logo-new.png" alt="نظرة" style="height: 50px; width: auto;">
            </a>

            <div class="search-bar-container" style="flex:2; display:flex; justify-content: center;">
                <div style="position:relative; width:100%; max-width: 600px;">
                    <input type="text" id="search-input" placeholder="ابحث عن اي شيء بخاطرك"
                        style="width:100%; padding:12px 45px 12px 20px; border-radius:12px; border:1px solid #e2e8f0; background:white; font-family:inherit; box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: all 0.3s ease;">
                    <i class="fa-solid fa-magnifying-glass"
                        style="position:absolute; right:15px; top:50%; transform:translateY(-50%); color:#94a3b8;"></i>
                </div>
            </div>

            <!-- 3. Icons (Left in RTL) -->
            <!-- 3. Icons (Left in RTL) -->
            <div class="nav-icons" style="flex:1;">
                <button id="nav-admin-btn" onclick="window.location.href='admin.html'" title="لوحة التحكم"
                    style="display: none; background: #fef3c7; color: #d97706; border-color: #fcd34d;">
                    <i class="fa-solid fa-lock"></i>
                </button>
                <button id="nav-login-btn" onclick="navigateTo('#/login')">
                    <i class="fa-regular fa-user"></i>
                </button>

                <div class="cart-icon" id="cart-btn" onclick="navigateTo('#/cart')">
                    <i class="fa-solid fa-cart-shopping"></i>
                    <span class="cart-count">0</span>
                </div>
            </div>

        </div>
    </nav>

    <!-- Main Content Area -->
    <main id="app">
        <!-- Content will be injected here by JavaScript -->
    </main>

    <!-- Profile Section (Hidden by default) -->
    <section id="profile-section" class="container" style="display: none; padding-top: 100px; padding-bottom: 50px;">
        <div class="profile-header">
            <div class="profile-avatar-large" id="profile-avatar-large">U</div>
            <div class="profile-info-text">
                <h2 id="profile-name">اسم المستخدم</h2>
                <p id="profile-email">email@example.com</p>
                <p id="profile-phone" style="color: #64748b; font-size: 0.9rem;"></p>
            </div>
        </div>

        <div class="profile-tabs">
            <button class="tab-btn active" onclick="switchProfileTab('orders')">طلباتي</button>
            <button class="tab-btn" onclick="switchProfileTab('wishlist')">المفضلة</button>
            <button class="tab-btn" onclick="switchProfileTab('cart')">السلة الحالية</button>
            <button class="tab-btn" onclick="switchProfileTab('settings')">الإعدادات</button>
        </div>

        <div id="orders-tab" class="profile-tab-content active">
            <h3>سجل الطلبات</h3>
            <div id="orders-list" class="orders-list">
                <!-- Orders will be injected here -->
                <div class="empty-state">
                    <i class="fa-solid fa-box-open"></i>
                    <p>لا توجد طلبات سابقة</p>
                </div>
            </div>
        </div>

        <div id="wishlist-tab" class="profile-tab-content">
            <h3>المنتجات المفضلة</h3>
            <div id="wishlist-grid" class="products-grid"
                style="grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));">
                <!-- Wishlist items will be injected here -->
                <div class="empty-state" style="grid-column: 1/-1;">
                    <i class="fa-regular fa-heart"></i>
                    <p>لم تقم بإضافة أي منتج للمفضلة</p>
                </div>
            </div>
        </div>

        <div id="cart-tab" class="profile-tab-content">
            <h3>محتويات السلة</h3>
            <div id="profile-cart-list" class="orders-list">
                <!-- Cart items will be injected here -->
                <div class="empty-state">
                    <i class="fa-solid fa-cart-shopping"></i>
                    <p>السلة فارغة</p>
                </div>
            </div>
            <div id="profile-cart-actions" style="margin-top: 20px; text-align: left; display: none;">
                <button class="btn btn-primary" onclick="handleCheckout()">إتمام الشراء</button>
            </div>
        </div>

        <div id="settings-tab" class="profile-tab-content">
            <h3>إعدادات الحساب</h3>
            <div class="settings-card">
                <div class="form-group">
                    <label>الاسم الكامل</label>
                    <input type="text" id="settings-name" class="form-input">
                </div>
                <div class="form-group">11
                    <label>رقم الجوال</label>
                    <input type="tel" id="settings-phone" class="form-input">
                </div>
                <button class="btn btn-primary" onclick="saveProfileSettings()">حفظ التغييرات</button>
                <hr style="margin: 20px 0; border: 0; border-top: 1px solid #eee;">
                <button class="btn btn-outline" onclick="auth.signOut()"
                    style="color: #ef4444; border-color: #dc7979;">تسجيل الخروج</button>
            </div>
        </div>
    </section>

    <!-- AR Modal -->
    <div id="ar-modal" class="modal">
        <div class="modal-content">
            <span class="close-modal" data-modal="ar-modal">&times;</span>
            <div class="ar-view">
                <div class="camera-feed">
                    <div class="ar-overlay">
                        <img id="ar-product-img" src="" alt="AR Product">
                        <div class="ar-controls">
                            <i class="fa-solid fa-arrows-up-down-left-right"></i>
                            <p>حرك المنتج ليناسب مساحتك</p>
                        </div>
                    </div>
                    <div class="camera-placeholder">
                        <i class="fa-solid fa-camera"></i>
                        <p>جاري تشغيل الكاميرا...</p>
                    </div>
                </div>
                <div class="ar-info">
                    <h3>تجربة في منزلك</h3>
                    <p>وجه الكاميرا نحو المساحة الفارغة لرؤية المنتج.</p>
                    <button class="btn btn-primary" id="place-item-btn">تثبيت المنتج</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Product Details Modal -->
    <div id="product-modal" class="modal">
        <div class="modal-content product-modal-content">
            <span class="close-modal" data-modal="product-modal">&times;</span>
            <div class="product-details-container">
                <div class="product-details-image">
                    <img id="detail-img" src="" alt="">
                </div>
                <div class="product-details-info">
                    <div class="detail-header">
                        <span id="detail-category" class="detail-badge"></span>
                        <h2 id="detail-title"></h2>
                        <div class="detail-price" id="detail-price"></div>
                    </div>

                    <div class="detail-description">
                        <h3>الوصف</h3>
                        <p id="detail-desc"></p>
                    </div>

                    <div class="detail-specs">
                        <div class="spec-item">
                            <i class="fa-solid fa-ruler-combined"></i>
                            <span>الأبعاد: <b id="detail-dims"></b></span>
                        </div>
                        <div class="spec-item">
                            <i class="fa-solid fa-layer-group"></i>
                            <span>الخامة: <b id="detail-material"></b></span>
                        </div>
                    </div>

                    <div class="detail-actions">
                        <div class="quantity-selector">
                            <button onclick="adjustDetailQty(-1)">-</button>
                            <span id="detail-qty">1</span>
                            <button onclick="adjustDetailQty(1)">+</button>
                        </div>
                        <button class="btn btn-primary btn-block" id="add-to-cart-detail-btn">
                            إضافة للسلة <i class="fa-solid fa-cart-plus"></i>
                        </button>
                        <button class="btn btn-outline" id="ar-detail-btn" title="جربه في بيتك">
                            <i class="fa-solid fa-cube"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Login Modal (Rebuilt) -->
    <div id="login-modal" class="modal">
        <div class="modal-content login-modal-content" style="max-width: 400px; padding: 30px; text-align: center;">
            <span class="close-modal" data-modal="login-modal"
                style="color: #333; background: none; top: 10px; left: 10px; font-size: 1.5rem;">&times;</span>

            <div style="margin-bottom: 30px;">
                <h2 style="color: var(--primary-color); margin-bottom: 10px;">تسجيل الدخول</h2>
                <p style="color: #64748b;">مرحباً بك في نظرة</p>
            </div>

            <div id="login-options">
                <!-- Google Login -->
                <button id="google-login-btn"
                    style="width: 100%; padding: 12px; border: 1px solid #ddd; background: white; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; margin-bottom: 15px; font-family: inherit; font-weight: 500;">
                    <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" alt="Google"
                        style="width: 20px;">
                    <span>المتابعة باستخدام Google</span>
                </button>

                <!-- Phone Login REMOVED / TEMPORARY MANUAL LOGIN ADDED -->
                <button id="manual-login-start-btn" onclick="showManualLoginForm()"
                    style="width: 100%; padding: 12px; border: none; background: #334155; color: white; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font-family: inherit; font-weight: 500;">
                    <i class="fa-solid fa-user-pen"></i>
                    <span>تسجيل دخول بطريقة أخرى</span>
                </button>
            </div>

            <!-- TEMPORARY MANUAL LOGIN FORM -->
            <div id="manual-login-form" style="display: none; margin-top: 20px; text-align: right;">
                <div
                    style="background: #fffbe6; border: 1px solid #ffe58f; padding: 10px; border-radius: 8px; margin-bottom: 15px; font-size: 0.85rem; color: #d48806;">
                    <i class="fa-solid fa-circle-info"></i> يرجى إدخال بياناتك الصحيحة للتواصل
                </div>

                <div class="form-group" style="margin-bottom: 15px;">
                    <label style="display:block; margin-bottom:5px; font-weight:bold; color:#334155;">الاسم
                        الكامل</label>
                    <input type="text" id="manual-name" placeholder="الاسم هنا"
                        style="width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px;">
                </div>

                <div class="form-group" style="margin-bottom: 15px;">
                    <label style="display:block; margin-bottom:5px; font-weight:bold; color:#334155;">البريد
                        الإلكتروني</label>
                    <input type="email" id="manual-email" placeholder="example@gmail.com"
                        style="width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px;">
                </div>

                <div class="form-group" style="margin-bottom: 20px;">
                    <label style="display:block; margin-bottom:5px; font-weight:bold; color:#334155;">رقم الجوال</label>
                    <div style="display:flex; direction:ltr; gap:10px;">
                        <input type="text" value="+966" disabled
                            style="width:60px; padding:10px; background:#f1f5f9; border:1px solid #e2e8f0; border-radius: 8px; text-align:center; font-weight:bold;">
                        <input type="tel" id="manual-phone" placeholder="5xxxxxxxx" maxlength="9"
                            style="flex:1; padding:10px; border:1px solid #e2e8f0; border-radius: 8px; text-align:left;">
                    </div>
                </div>

                <button onclick="handleManualLoginSubmit()" class="btn btn-primary"
                    style="width:100%; padding: 12px;">موافق</button>
                <button onclick="resetAuthViews()"
                    style="width:100%; padding:10px; background:none; border:none; color:#64748b; margin-top:5px; cursor:pointer;">إلغاء</button>
            </div>

        </div>
    </div>
    <!-- Custom Confirmation Modal (Replaces browser confirm) -->
    <div id="confirm-modal" class="modal" style="z-index: 4000;">
        <div class="modal-content" style="max-width: 350px; padding: 25px; text-align: center; border-radius: 20px;">
            <div
                style="width: 50px; height: 50px; background: #e0f2fe; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
                <i class="fa-solid fa-check" style="color: var(--primary-color); font-size: 1.5rem;"></i>
            </div>

            <h3 style="margin-bottom: 10px; color: #334155;">تأكيد البيانات</h3>
            <p style="color: #64748b; font-size: 0.9rem; margin-bottom: 20px; line-height: 1.6;">
                هل بياناتك صحيحة؟ <br>
                سنقوم بإنشاء حساب لك الآن.
            </p>

            <div
                style="background: #f8fafc; padding: 15px; border-radius: 12px; margin-bottom: 20px; text-align: right;">
                <div style="margin-bottom: 8px;">
                    <span style="color: #94a3b8; font-size: 0.8rem;">الاسم:</span>
                    <span id="confirm-name-display" style="color: #334155; font-weight: bold; float: left;"></span>
                </div>
                <div style="margin-bottom: 8px;">
                    <span style="color: #94a3b8; font-size: 0.8rem;">الجوال:</span>
                    <span id="confirm-phone-display"
                        style="color: #334155; font-weight: bold; float: left; direction: ltr;"></span>
                </div>
                <div>
                    <span style="color: #94a3b8; font-size: 0.8rem;">البريد:</span>
                    <span id="confirm-email-display"
                        style="color: #334155; font-weight: bold; float: left; font-size: 0.85rem;"></span>
                </div>
            </div>

            <div style="display: flex; gap: 10px;">
                <button id="confirm-modal-yes-btn" class="btn btn-primary"
                    style="flex: 1; padding: 12px;">تأكيد</button>
                <button onclick="document.getElementById('confirm-modal').classList.remove('active')"
                    style="flex: 1; padding: 12px; background: white; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; color: #64748b;">تعديل</button>
            </div>
        </div>
    </div>
    <!-- Payment Modal -->
    <div id="payment-modal" class="modal">
        <div class="modal-content payment-modal-content">
            <span class="close-modal" data-modal="payment-modal">&times;</span>
            <div class="payment-container">
                <div class="payment-header">
                    <h2>إتمام الدفع</h2>
                    <p>اختر طريقة الدفع المناسبة لك</p>
                </div>

                <div class="payment-methods">
                    <div class="payment-method active" onclick="selectPaymentMethod('card')">
                        <i class="fa-regular fa-credit-card"></i>
                        <span>بطاقة بنكية</span>
                    </div>
                    <div class="payment-method" onclick="selectPaymentMethod('apple')">
                        <i class="fa-brands fa-apple"></i>
                        <span>Apple Pay</span>
                    </div>
                </div>

                <!-- Credit Card Form -->
                <div id="card-form-section">
                    <form class="payment-form" onsubmit="return false;">
                        <div class="form-group">
                            <label>اسم حامل البطاقة</label>
                            <input type="text" placeholder="الاسم كما يظهر على البطاقة" class="form-input">
                        </div>
                        <div class="form-group">
                            <label>رقم البطاقة</label>
                            <input type="text" placeholder="0000 0000 0000 0000" class="form-input" dir="ltr">
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label>تاريخ الانتهاء</label>
                                <input type="text" placeholder="MM/YY" class="form-input" dir="ltr">
                            </div>
                            <div class="form-group">
                                <label>رمز التحقق (CVV)</label>
                                <input type="text" placeholder="123" class="form-input" dir="ltr">
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Apple Pay Section -->
                <div id="apple-pay-section" style="display: none; text-align: center; padding: 20px;">
                    <p>سيتم خصم المبلغ عبر Apple Pay</p>
                    <div style="font-size: 3rem; margin: 20px 0;">
                        <i class="fa-brands fa-apple"></i>
                    </div>
                </div>

                <div class="payment-summary">
                    <div class="summary-row total">
                        <span>المبلغ الإجمالي</span>
                        <span id="payment-total-amount">0 ر.س</span>
                    </div>
                </div>

                <button class="btn btn-primary btn-block" onclick="processPayment()" id="pay-now-btn">
                    دفع الآن
                </button>
            </div>
        </div>
    </div>
    </div>
    </div>

    <!-- Cart Sidebar -->
    <div class="cart-sidebar" id="cart-sidebar">
        <div class="cart-header">
            <h2>سلة المشتريات</h2>
            <span class="close-cart"><i class="fa-solid fa-xmark"></i></span>
        </div>
        <div class="cart-items" id="cart-items">
            <!-- Cart items will be here -->
            <div class="empty-cart-msg">السلة فارغة حالياً</div>
        </div>
        <div class="cart-footer">
            <div class="total">
                <span>المجموع:</span>
                <span id="cart-total">0 ر.س</span>
            </div>
            <button class="btn btn-primary btn-block">إتمام الشراء</button>
        </div>
    </div>
    <div class="overlay" id="overlay"></div>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-col">
                    <img src="./assets/logo-new.png" alt="نظرة" style="width: 120px; margin-bottom: 15px;">
                    <p>نغير مفهوم تسوق الأثاث من خلال التكنولوجيا والتصميم العصري.</p>
                </div>
                <div class="footer-col">
                    <h3>روابط سريعة</h3>
                    <ul>
                        <li><a href="#">الرئيسية</a></li>
                        <li><a href="#" data-page="shop">المتجر</a></li>
                        <li><a href="policy.html">سياسة الاستبدال والاسترجاع</a></li>
                        <li><a href="privacy.html">سياسة الخصوصية</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>تواصل معنا</h3>
                    <div class="social-links">
                        <a href="https://x.com/trynadhrah" target="_blank" title="X (Twitter)"><i
                                class="fa-brands fa-x-twitter"></i></a>
                        <a href="https://instagram.com/trynadhrah" target="_blank" title="Instagram"><i
                                class="fa-brands fa-instagram"></i></a>
                        <a href="https://tiktok.com/@trynadhrah" target="_blank" title="TikTok"><i
                                class="fa-brands fa-tiktok"></i></a>
                        <a href="https://wa.me/966553511428" target="_blank" title="WhatsApp"><i
                                class="fa-brands fa-whatsapp"></i></a>
                    </div>
                    <p style="margin-top: 15px; direction: ltr; color: #94a3b8; font-size: 0.9rem;">
                        <i class="fa-brands fa-whatsapp"></i> 055 351 1428
                    </p>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="cr-container"
                    style="margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; gap: 5px;">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <img src="./assets/cr-logo.png" alt="شعار السجل التجاري" style="width: 40px; height: auto;">
                        <span style="font-weight: bold; color: #94a3b8;">السجل التجاري</span>
                    </div>
                    <span style="color: #94a3b8; font-family: monospace; letter-spacing: 1px;">7052169161</span>
                </div>
                <p>جميع الحقوق محفوظة &copy; 2025 متجر نظرة</p>
            </div>
        </div>
    </footer>

    <!-- Toast Container -->
    <div id="toast-container"
        style="position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; width: 90%; max-width: 400px;">
    </div>

    <!-- Order Details Modal -->
    <div id="order-details-modal" class="modal">
        <div class="modal-content" style="max-width: 600px; padding: 25px;">
            <span class="close-modal" onclick="closeOrderDetailsModal()">&times;</span>
            <div id="order-details-content">
                <!-- Content injected via JS -->
            </div>
        </div>
    </div>

    <!-- Custom Confirm Modal -->
    <div id="custom-confirm-modal" class="modal"
        style="z-index: 10000; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px);">
        <div class="modal-content"
            style="max-width: 350px; text-align: center; padding: 30px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.2);">
            <i class="fa-solid fa-circle-question"
                style="font-size: 3.5rem; color: var(--primary-color); margin-bottom: 20px; display: block;"></i>
            <h3 id="confirm-title" style="margin-bottom: 10px; font-size: 1.3rem; color: #1e293b;">تأكيد الإجراء</h3>
            <p id="confirm-message" style="color: #64748b; margin-bottom: 25px; line-height: 1.6; font-size: 1rem;">هل
                أنت متأكد من هذا الإجراء؟</p>
            <div style="display: flex; gap: 12px; justify-content: center;">
                <button id="confirm-yes-btn" class="btn btn-primary"
                    style="flex: 1; padding: 12px; border-radius: 12px;">نعم</button>
                <button id="confirm-no-btn" class="btn btn-outline"
                    style="flex: 1; border: 1px solid #e2e8f0; padding: 12px; border-radius: 12px;">إلغاء</button>
            </div>
        </div>
    </div>

    <!-- Model Viewer for AR (Required) -->
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

    <!-- Core Scripts -->
    <script src="config.js?v=20260127-114500"></script>
    <script src="main.js?v=20260127-114500"></script>

</body>

</html>