hotels.js

let userName = localStorage.getItem("userName") || "x";
    console.log(userName);
   
    if(userName=="x"){
        window.location.href = "login-signup.html";
        alert("Please login First!!!");
}
    
//<<<<<<<<<<<<<<<<<<<<<<User Login Validation>>>>>>>>>>>>>>>>>>>>>>

//  -----------------------------date------------------------------------ --

// Get tomorrow's date
let tomorrow = new Date();
tomorrow.setDate(new Date().getDate() + 1);
let tomorrowISO = tomorrow.toISOString().substr(0, 10);

// Set the default value of the date input field to tomorrow's date
document.getElementById("tom_date").defaultValue = tomorrowISO;

//Get today's date
let today = new Date();
today.setDate(new Date().getDate());
let todayISO = today.toISOString().substr(0, 10);

// Set the default value of the date input field to today's date
document.getElementById("tod_date").defaultValue = todayISO;

//  -----------------------------date end------------------------------------ --

//  -----------------------------Card Container------------------------------------ --

let HotelData =[]

let HotelLS = JSON.parse(localStorage.getItem("hotel")) || [];

window.addEventListener("load",()=>{
    fetchAndRenderHotels(1)
})

let mainDiv = document.getElementById("data-list-wrapper")
let paginationWapper = document.getElementById("pagination-wrapper")

function fetchAndRenderHotels(){
    fetch(`https://api-by-alisha-khan.onrender.com/hotels`)
    .then(res =>{
        // let totalPosts = res.headers.get("X-Total-Count")
        // let totalBtn = Math.ceil(totalPosts/10)
        // paginationWapper.innerHTML = null;
        // for(let i=1;i<=totalBtn;i++){
        //     paginationWapper.append(getAsBtn(i,i))
        // }
        return res.json();
    })
    .then(data =>{
        console.log(data);
        HotelData = data;
       showData(HotelData);
    })
    .catch(err => {console.log(err)})
}

    //  -----------------------------Show Data Function------------------------------------ --

        function showData(data){
            mainDiv.innerHTML = null;
        
            let cardList = getCardList(data);
            mainDiv.append(cardList);
        }

        // function pagination(data){
        //     console.log(data.length)
           
        //     let totalPosts = data.length;
        //     let totalBtn = Math.ceil(totalPosts/10)
        //     paginationWapper.innerHTML = null;
        //     for(let i=1;i<=totalBtn;i++){
        //         paginationWapper.append(getAsBtn(i,i))
        //     }
        //     showData(data)
        // }

      
    //  -----------------------------Button Data------------------------------------ --

// function getAsBtn(text,dataId){
//     let btn = document.createElement("button");
//     btn.innerHTML = text;
//     btn.setAttribute("data-id",dataId);
//     btn.addEventListener("click",(e)=>{
//         console.log(e.target.dataset.id)
//         fetchAndRenderHotels(e.target.dataset.id);
//     });
//     return btn;
// }
    //  -----------------------------Card List Data------------------------------------ --

function getCardList(data){
    let cardList = document.createElement("div");
    cardList.className = "card-list"

    data.forEach((item)=>{
        let card = getCard(item.name,item.location,item.price,item.image,item.rating,item.id,item.description)
        cardList.append(card);
    })
    return cardList;
}
    //  -----------------------------Card Data------------------------------------ --

function getCard(name,loc,price,image,rating,id,des){
    let card = document.createElement("div");
    card.className = "card"
    card.setAttribute("data-id",id);

    let mainCard = document.createElement("div")
    mainCard.className = "main-card"
    //-----------------------------------------------
       let cardDetails = document.createElement("div");
    cardDetails.className = "card-details"
    
    let description = document.createElement("span")
    description.className = "card_description"
    description.innerHTML = `<strong>Description</strong> <br> ${des}` 

    let amenities = document.createElement("div")
    amenities.className = "amenities";
    let ac = document.createElement("p")
    ac.innerText = "❄️ Air Conditioner"
    let tv = document.createElement("p")
    tv.innerText = "📺 Televison"
    let freeWifi = document.createElement("p");
    freeWifi.innerText = "📲 Free Wifi";
    let kingbed = document.createElement("p")
    kingbed.innerText = "🛏️ King Sized Bed";
    let parking = document.createElement("p")
    parking.innerText = "🚗 Parking facility";

    amenities.append(ac,tv,freeWifi,kingbed,parking)

    cardDetails.append(description,amenities);
  
    //--------------------------------------------



    let imgDiv = document.createElement("div")
    imgDiv.className = "main-card-img";

    let img = document.createElement("img");
    img.src = image;
    img.setAttribute("alt",`${name} image`);

    imgDiv.append(img);

    let cardBody = document.createElement("div");
    cardBody.className ="main-card-body";

    let h3 = document.createElement("h3");
    h3.className = "card_title"
    h3.innerText = name;

    let location = document.createElement("span");
    location.className = "card_location";
    location.innerText = loc;

    let ratingDiv = document.createElement("div")
    ratingDiv.className = "ratingDiv"

    let stars = document.createElement("h4");
    stars.classList = "rating_stars"
    stars.innerText = `${rating}⭐`;
    
    let totRating = document.createElement("span")
    totRating.className = "total_rating"
    totRating.innerText = `(${Math.floor(100 + Math.random() * 2000)} Ratings)`

    ratingDiv.append(stars,totRating);

    let totprice = document.createElement("h3")
    totprice.className = "price"
    totprice.innerText = `₹ ${price}  `

    let btns = document.createElement("div")
    btns.className ="card_btns"

    let viewbtn = document.createElement("button")
    viewbtn.className = "view_details"
    viewbtn.innerText = "View Details ▼"

    viewbtn.addEventListener("click",()=>{
        if(viewbtn.innerText == "View Details ▼"){
            viewbtn.innerText = "Hide Details ▲";
            cardDetails.style.display = "flex";
        }
        else{
            viewbtn.innerText = "View Details ▼"
            cardDetails.style.display = "none"
        }
    })

    let bookbtn = document.createElement("button")
    bookbtn.className = "book_btn"
    bookbtn.textContent = "Book Now"

    bookbtn.addEventListener("click",()=>{
        //name,loc,price,image,rating,id,des      -------------------> check-in check-out date left
        
        let checkInDate = document.getElementById("tod_date").value;
        let checkOutDate = document.getElementById("tom_date").value;
        console.log(checkInDate);
        console.log(checkOutDate);

        HotelLS =[]                   
        HotelLS.push({ name : name,
                    location : loc,
                    rating : rating,
                    description : des,
                    price : price,
                    image: image,
                    check_in : checkInDate,
                    check_out : checkOutDate
                     
         })                       
        localStorage.setItem("hotel",JSON.stringify(HotelLS));
                                    // -----------------------------> add payment location here
        window.location.href = "hotelbooking.html"
    })

    btns.append(viewbtn,bookbtn)

cardBody.append(h3,location,ratingDiv,totprice,btns);


mainCard.append(imgDiv,cardBody)
card.append(mainCard,cardDetails);
return card;
}





//  ----------------------------------Filter Functionality------------------------------------ --

    //  ----------------------------------Sort Data------------------------------------ --

    let FiltersortAtoZ = document.getElementById("sort");
    FiltersortAtoZ.addEventListener("change",()=>{
        if(FiltersortAtoZ.value == ""){
            // showData(HotelData)
            fetchAndRenderHotels(1);
        }
        else if(FiltersortAtoZ.value == "rating"){
                let filterData = HotelData.sort((a,b)=>{
                    return a.rating - b.rating;
                })
                console.log(filterData)
                showData(filterData);
        }

        else if(FiltersortAtoZ.value == "price_lowtoHigh"){
            let filterData = HotelData.sort((a,b)=>{
                return a.price - b.price;
            })
            console.log(filterData)
            showData(filterData);
        }

        else if(FiltersortAtoZ.value == "price_hightoLow"){
            let filterData = HotelData.sort((a,b)=>{
                return b.price - a.price;
            })
            console.log(filterData)
             showData(filterData);   
            //pagination(filterData)
        }
    })

    //  ----------------------------------Filter Data------------------------------------ --
       
    //  ---------------------Filter Accomodation------------------ --
    let villasCheckbox = document.getElementById("Vilas");
    let HotelsCheckbox = document.getElementById("Hotel");
    let ResortsCheckbox = document.getElementById("Resort");
    let HomestaysCheckbox = document.getElementById("Homestay");

    
    villasCheckbox.addEventListener("change",()=>{filterCheck()});
    HomestaysCheckbox.addEventListener("change",()=>{filterCheck()});
    ResortsCheckbox.addEventListener("change",()=>{filterCheck()});
    HomestaysCheckbox.addEventListener("change",()=>{filterCheck()})

    //  ---------------------Filter category------------------ --
    let classicChecked = document.getElementById("classic");
    let premiumChecked = document.getElementById("premium");
    let luxuryChecked = document.getElementById("luxury");

    classicChecked.addEventListener("change",()=>{filterCheck()});
    premiumChecked.addEventListener("change",()=>{filterCheck()});
    luxuryChecked.addEventListener("change",()=>{filterCheck()});
    
    //  ---------------------Filter Rating------------------ --
    let fivestarChecked = document.getElementById("rating-5");
    let fourstarChecked = document.getElementById("rating-4");
    let threestarChecked = document.getElementById("rating-3");
    let twostarChecked = document.getElementById("rating-2");
    let onestarChecked = document.getElementById("rating-1");

    fivestarChecked.addEventListener("change",()=>{filterCheck()});
    fourstarChecked.addEventListener("change",()=>{filterCheck()});
    threestarChecked.addEventListener("change",()=>{filterCheck()});
    twostarChecked.addEventListener("change",()=>{filterCheck()});
    onestarChecked.addEventListener("change",()=>{filterCheck()});

    //  ---------------------Filter Price------------------ --

    let price1Checkbox = document.getElementById("500to2000");
    let price2Checkbox = document.getElementById("2000to5000");
    let price3Checkbox = document.getElementById("5000to10000");
    let price4Checkbox = document.getElementById("10000to40000");

    price1Checkbox.addEventListener("change",()=>{filterCheck()});
    price2Checkbox.addEventListener("change",()=>{filterCheck()});
    price3Checkbox.addEventListener("change",()=>{filterCheck()});
    price4Checkbox.addEventListener("change",()=>{filterCheck()})




   function filterCheck(){
    console.log("filterAccomodation");
     let filterData = HotelData.filter((ele)=>{
        if((villasCheckbox.checked && ele.category === 'Vilas') || (HotelsCheckbox.checked && ele.category === 'Hotel') || (HomestaysCheckbox.checked && ele.category === 'Homestay') ||(ResortsCheckbox.checked && ele.category === "Resort")){
            console.log(ele.id);
            return true;
        }
        if (classicChecked.checked && ele.price <= 5000 || premiumChecked.checked && (ele.price > 5000 && ele.price <= 10000 ) || luxuryChecked.checked && ele.price > 10000 ) {
            console.log(ele.id)
            return true;
          }
          if (fivestarChecked.checked && ele.rating >= 5 || fourstarChecked.checked && (ele.rating >= 4 && ele.rating < 5) || threestarChecked.checked && (ele.rating >= 3 && ele.rating < 4) || twostarChecked.checked && (ele.rating >= 2 && ele.rating < 3) || onestarChecked.checked && (ele.rating >= 1 && ele.rating < 2) ) {
            console.log(ele.id)
            return true;
            
          }
          if (price1Checkbox.checked && (ele.price >=500 && ele.price <=2000) ||  price2Checkbox.checked && (ele.price >2000 && ele.price <=5000) ||  price3Checkbox.checked && (ele.price >5000 && ele.price <=10000) ||  price4Checkbox.checked && (ele.price >10000 && ele.price <=40000)) {
            console.log(ele.id)
            
            return true;
          }
        //   if (ResortsCheckbox.checked && ele.category === 'Resort') {
        //     console.log(ele.id)
        //     return true;
        //   }
          return false;
    });

    if (!villasCheckbox.checked && !HotelsCheckbox.checked && !HomestaysCheckbox.checked && !ResortsCheckbox.checked && !classicChecked.checked && !premiumChecked.checked && !luxuryChecked.checked &&
        !fivestarChecked.checked && !fourstarChecked.checked && !threestarChecked.checked && !twostarChecked.checked && !onestarChecked.checked &&
        !price1Checkbox.checked && !price2Checkbox.checked && !price3Checkbox.checked && !price4Checkbox.checked) {
        fetchAndRenderHotels(1)
      } else {
         showData(filterData); 
       // pagination(filterData)

      }
   
   }

   
//  ------------------------------------------Search Data------------------------------------ --

//    let Searchinput = document.getElementsByClassName("searchContainer_input");
   
    let Searchinput = document.querySelector(".searchContainer_input");
//    let Searchbtn = document.getElementsByClassName("searchbtn")
   let Searchbtn = document.querySelector(".searchbtn")


   Searchbtn.addEventListener("click",()=>{
    let filter ;
    if(Searchinput == null){
        fetchAndRenderHotels()
    }
    else{
        filter = HotelData.filter((ele)=>{
            if(ele.location.toUpperCase().includes(Searchinput.value.toUpperCase())){
                return true
            }
            if(ele.name.toUpperCase().includes(Searchinput.value.toUpperCase())){
                return true
            }
            else{
                return false
            }
        })
        console.log(filter)
        showData(filter);
    }
   })
   
    //  ----------------------------------Filter Category Data------------------------------------ --

  
let userLogOut = document.querySelector("#logOutButton");
    userLogOut.addEventListener("click",function(){
    localStorage.removeItem("userName");
    localStorage.removeItem("userPass");
    window.location.href = "login-signup.html";
})