/* Add custom Js code below */ 

// Create a new <script> element
var script = document.createElement("script");

// Set the source of the script to the Font Awesome CDN
script.src = "https://kit.fontawesome.com/d633f21f4a.js";

// Set the crossorigin attribute to "anonymous"
script.setAttribute("crossorigin", "anonymous");

// Add the script to the HTML
document.head.appendChild(script);

// Create a new <i> element
var icon = document.createElement("i");

// Add the Font Awesome classes to the element
 
//icon.classList.add("fa-solid", "fa-bars");
icon.classList.add("fa", "fa-angle-double-left");

// Add the element to the HTML
 const header =document.getElementById("site-header-outer");
header.appendChild(icon);


document.querySelector(".nav-mobile").appendChild(icon);


// Get the toggle button and navigation elements
var toggleBtn = document.querySelector("i.fa.fa-angle-double-left");
var navMobile = document.querySelector(".nav-mobile .main-nav");
var menuMobile = document.querySelector(".nav-mobile");

// Add a click event listener to the toggle button
toggleBtn.addEventListener("click", function () {
    // Toggle the "hidden" class on the navigation elements
    navMobile.classList.toggle("block");
    menuMobile .classList.toggle("active");

});

//asmaa edit
 console.log('yeees');
 var language = document.getElementsByTagName('html')[0].getAttribute('lang');
 if(language=='en'){

 //const title = document.querySelector('.tab-head');
const title = document.querySelectorAll('.tab-head');
 const title1=document.querySelectorAll('.tab-head');
     title[0].innerHTML = `<button class="btn btn--oval btn--padded btn--grey active" data-tab-target="#featured_tab_pNZZA_1">
Latest offers
</button>`;
 title[1].innerHTML = `<button class="btn btn--oval btn--padded btn--grey active" data-tab-target="#featured_tab_pNZZA_1">
latest products
</button>`;

 title[2].innerHTML = `<button class="btn btn--oval btn--padded btn--grey active" data-tab-target="#featured_tab_pNZZA_1">
latest products
</button>`;
 title[3].innerHTML = `<button class="btn btn--oval btn--padded btn--grey active" data-tab-target="#featured_tab_pNZZA_1">
Spices and grains
</button>`;
 title[4].innerHTML = `<button class="btn btn--oval btn--padded btn--grey active" data-tab-target="#featured_tab_pNZZA_1">
dried fruit
</button>`;
 title[5].innerHTML = `<button class="btn btn--oval btn--padded btn--grey active" data-tab-target="#featured_tab_pNZZA_1">
Amlou
</button>`;
 title[6].innerHTML = `<button class="btn btn--oval btn--padded btn--grey active" data-tab-target="#featured_tab_pNZZA_1">
 Edible oils
</button>`;
}



 //works IE/SAFARI/CHROME/FF
window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.querySelector(".nav-mobile").classList.add("bg-dark");
  } 
}





 //responsive card splide
 

         var splide = new Splide(".splide-products", {
              type: "loop",
              autoplay:true,
              
              perPage: 5,
               gap: '.2rem',
              breakpoints: {
                1024: {
                  perPage: 3,
                 
                },
                768: {
                  perPage: 2,
              
                },
                640: {
                  perPage: 1,
                   heightRatio: 0.1,
                    gap: '.3em',
            
                },
                360: {
                  perPage:1,
                   heightRatio: 0.1
            
                },
              },
              focus: "center",
              gap: '.2rem',
              updateOnMove : true,
              pagination: false,
              
            }).mount();