/* Add custom CSS styles below */ 

.iti-mobile .iti--container {
	z-index: 9999999;
}

/*أيقونة البحث + تسجيل الدخول + الجرس*/
.sicon-search:before {
    content:  "\ef09";
     font-size: 25px;
    color: darkorange;
}
.sicon-user:before {
    content: "\f078";
    font-size: 25px;
    color: darkorange;
}
.sicon-bell:before {
    font-size: 25px;
    color: #78705c;
     width: 100px;
}

/*ايقونة السلة*/
.header-row > .circle-action > .sicon-cart:before {
    font-family: FontAwesome;
    content: "\f291";
    font-size: 25px;
    color: darkorange;
    width: 100px;
}

/* start fav */
.theme-icon-star:before {font:normal normal normal 20px/1 FontAwesome;content: '\f004';color:#5dd5c4}
.sicon-star:before{font:normal normal normal 20px/1 FontAwesome;content: '\f004';color:#d2d2d2}
.fa-star:before{font:normal normal normal 20px/1 FontAwesome; content: '\f004'; }
.star-on { color: #dc143c;}
.br-theme-fontawesome-stars .br-widget a:after {font:normal normal normal 20px/1 FontAwesome;content: '\f164';}
.br-theme-fontawesome-stars .br-widget a.br-active::after,.br-theme-fontawesome-stars .br-widget a.br-selected::after{color:#5dd5c4!important;content: '\f164'}
/* end fav */
 
 *,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    width: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:
  ]
  
 document.addEventListener('DOMContentLoaded', () => {
    const productId = document.getElementById('current-product').dataset.id;
    const recommendationsContainer = document.getElementById('recommendations-list');

    if (!productId || !recommendationsContainer) return;

    // وظيفة جلب التوصيات من الخادم
    async function fetchRecommendations(id) {
        try {
            // **ملاحظة:** استبدل هذا المسار برابط API الخاص بمتجرك
            const response = await fetch(`/api/products/${id}/recommendations`);
            
            if (!response.ok) throw new Error('فشل في جلب التوصيات.');

            const products = await response.json();
            displayRecommendations(products);

        } catch (error) {
            console.error('خطأ في التوصيات:', error);
            recommendationsContainer.innerHTML = '<p class="text-error">عذراً، لم نتمكن من عرض التوصيات حالياً.</p>';
        }
    }

    // وظيفة عرض المنتجات في الواجهة
    function displayRecommendations(products) {
        if (products.length === 0) {
            recommendationsContainer.innerHTML = '<p>لا توجد منتجات مقترحة حالياً.</p>';
            return;
        }

        const htmlContent = products.map(product => `
            <div class="recommended-item">
                <a href="/product/${product.id}">
                    <img src="${product.imageUrl}" alt="${product.name}">
                    <h4>${product.name}</h4>
                    <p class="price">${product.price} ر.س</p>
                </a>
            </div>
        `).join('');

        recommendationsContainer.innerHTML = `<h3 class="section-title">قد يعجبك أيضاً</h3><div class="items-grid">${htmlContent}</div>`;
    }

    fetchRecommendations(productId);
});