let data= [
   
{
        price: 19000000,
        size: 21934,
        beds: 11,
        baths: 5,
        img:['https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://static.realting.com/uploads/images/3f1/445e22c2280ba1273ef81a36f446a.webp'],


        location: 'La Mer',
        city:'Dubai',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id1'
    },
{
        price: 777,
        size: 21934,
        beds: 99,
        baths: 11,
        img:['https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1'],


        location: 'Palma',
        city:'Dubai',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id1'
    },
    {
        price: 19000000,
        size: 21934,
        beds: 11,
        baths: 5,
        img:['https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://static.realting.com/uploads/images/3f1/445e22c2280ba1273ef81a36f446a.webp'],


        location: 'Mykonos',
        city:'Dubai',
        type: 'Villa' ,
        link: 'https://ocleygroup.com/property_id1'


        },
        {
            price: 12000000,
            size: 21934,
            beds: 10,
            baths: 5,
            img:['https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://static.realting.com/uploads/images/3f1/445e22c2280ba1273ef81a36f446a.webp'],
    
            location: 'Crete',
            city:'Dubai',
            type: 'Apartment',
            link: 'https://ocleygroup.com/property_id1'
        },
    {
            price: 19000000,
            size: 21934,
            beds: 11,
            baths: 5,
            img:['https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://static.realting.com/uploads/images/3f1/445e22c2280ba1273ef81a36f446a.webp'],
    
            location: 'La Mer',
            city:'Dubai',
            type: 'Villa',
            link: 'https://ocleygroup.com/property_id1'
        },
        {
            price: 19000000,
            size: 21934,
            beds: 11,
            baths: 5,
            img:['https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://static.realting.com/uploads/images/3f1/445e22c2280ba1273ef81a36f446a.webp'],
    
            location: 'Downtown',
            city:'Dubai',
            type: 'Villa' ,
            link: 'https://ocleygroup.com/property_id1'
    
            },
 
            {
                price: 12000000,
                size: 21934,
                beds: 10,
                baths: 5,
                img:['https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://static.realting.com/uploads/images/3f1/445e22c2280ba1273ef81a36f446a.webp'],
        
                location: 'Dubai Marina',
                city:'Dubai',
                type: 'Apartment',
                link: 'https://ocleygroup.com/property_id1'
            },
        {
                price: 19000000,
                size: 21934,
                beds: 11,
                baths: 5,
                img:['https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://static.realting.com/uploads/images/3f1/445e22c2280ba1273ef81a36f446a.webp'],
        
                location: 'Downtown',
                city:'Dubai',
                type: 'Apartment',
                link: 'https://ocleygroup.com/property_id1'
            },
            {
                price: 19000000,
                size: 21934,
                beds: 11,
                baths: 5,
                img:['https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://static.realting.com/uploads/images/3f1/445e22c2280ba1273ef81a36f446a.webp'],
        
                location: 'La Mer',
                city:'Dubai',
                type: 'Villa' ,
                link: 'https://ocleygroup.com/property_id1'
        
                },
 
                {
                    price: 12000000,
                    size: 21934,
                    beds: 10,
                    baths: 5,
                    img:['https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://static.realting.com/uploads/images/3f1/445e22c2280ba1273ef81a36f446a.webp'],
            
                    location: 'La Mer',
                    city:'Dubai',
                    type: 'Apartment',
                    link: 'https://ocleygroup.com/property_id1'
                },
            {
                    price: 19000000,
                    size: 21934,
                    beds: 11,
                    baths: 5,
                    img:['https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://static.realting.com/uploads/images/3f1/445e22c2280ba1273ef81a36f446a.webp'],
            
                    location: 'Downtown',
                    city:'Dubai',
                    type: 'Apartment',
                    link: 'https://ocleygroup.com/property_id1'
                },
                {
                    price: 19000000,
                    size: 21934,
                    beds: 11,
                    baths: 5,
                    img:['https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://static.realting.com/uploads/images/3f1/445e22c2280ba1273ef81a36f446a.webp'],
            
                    location: 'Crete',
                    city:'Dubai',
                    type: 'Villa' ,
                    link: 'https://ocleygroup.com/property_id1'
            
                    },
                {
                    price: 19000000,
                    size: 21934,
                    beds: 11,
                    baths: 5,
                    img:['https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://static.realting.com/uploads/images/3f1/445e22c2280ba1273ef81a36f446a.webp'],
            
                    location: 'Mykonos',
                    city:'Dubai',
                    type: 'Villa' ,
                    link: 'https://ocleygroup.com/property_id1'
            
                    },
                {
                    price: 231312312,
                    size: 21934,
                    beds: 11,
                    baths: 5,
                    img:['https://www.dropbox.com/scl/fi/vgycihxw40qtpu9tsoydt/uudise-pilt-13-1.png?rlkey=f8spr11gmszulazbicn1jhyfk&st=zj93d43l&raw=1','https://static.realting.com/uploads/images/3f1/445e22c2280ba1273ef81a36f446a.webp'],
            
                    location: 'Santorini',
                    city:'Dubai',
                    type: 'Villa' ,
                    link: 'https://ocleygroup.com/property_id1'
            
                    },
             
 


]


function renders(base) {
    let container = document.getElementById('filter_data');
    container.innerHTML = '';
    base.forEach(prop => {
        let imgSlides = prop.img.map(imgUrl => `
            <div class="swiper-slide">
                <img src="${imgUrl}" alt="">
            </div>
        `).join('');


        container.innerHTML += `
            <div class="data">
                <div class="data_card">
                    <a href="${prop.link}" target="_blank">
                        <div class="swiper-container data_card_img">
                            <div class="swiper-wrapper">
                                ${imgSlides}
                            </div>
                            <div class="swiper-pagination"></div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                        <div class="global_data">
                            <div class="data_card_price">
                                <span class="sum"> AED ${prop.price.toLocaleString('en-US').replace(/ /g, ',')}</span>
                            </div>
                            <div class="data_card_location">
                                <span>${prop.location}, ${prop.city}</span>
                            </div>
                            <div class="other_data_card">
                                <div class="allData">
                                    <span class="type">${prop.type}</span> • <span class="bed">${prop.beds} Beds</span> • <span class="bath">${prop.baths} Bath</span> • <span class="sq">${prop.size.toLocaleString('en-US').replace(/ /g, ',')} sq. ft.</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>`;
    });


    // Инициализируйте Swiper после добавления HTML
    new Swiper('.swiper-container', {
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        grabCursor: true,
        slidesPerView: 1,
        spaceBetween: 0,
    });
}


function rendersFilterByPrice(data) {
    let html = "";
    data.forEach(item => {
        let imgSlides = item.img.map(imgUrl => `
            <div class="swiper-slide">
                <img src="${imgUrl}" alt="">
            </div>
        `).join('');


        html += `
            <div class="data">
                <div class="data_card">
                    <a href="${item.link}" target="_blank">
                        <div class="swiper-container data_card_img">
                            <div class="swiper-wrapper">
                                ${imgSlides}
                            </div>
                            <div class="swiper-pagination"></div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                        <div class="global_data">
                            <div class="data_card_price">
                                <span class="sum"> AED ${item.price.toLocaleString('en-US').replace(/ /g, ',')}</span>
                            </div>
                            <div class="data_card_location">
                                <span>${item.location}, ${item.city}</span>
                            </div>
                            <div class="other_data_card">
                                <div class="allData">
                                    <span class="type">${item.type}</span> - <span class="bed">${item.beds} Beds</span> - <span class="bath">${item.baths} Bath</span> - <span class="sq">${item.size.toLocaleString('en-US').replace(/ /g, ',')} sq. ft.</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>`;
    });


    $("#filter_data").html(html);


    // Инициализируйте Swiper после добавления HTML
    new Swiper('.swiper-container', {
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        grabCursor: true,
        slidesPerView: 1,
        spaceBetween: 0,
    });
}


function render(datas, filters) {
    const filterData = datas.filter(item => {
             // Умова для перевірки цін
             if (filters.maxPriceValue === filters.minPriceValue) {
                return item.price < filters.minPriceValue &&
                    item.size >= filters.minSqValue &&
                    item.beds >= filters.bedValue &&
                    item.baths >= filters.bathValue &&
                    (filters.Area.includes('All') || filters.Area.includes(item.location)) &&
                    (filters.Type.includes('All') || filters.Type.includes(item.type));
            }
    
            // Умова для перевірки площі
            if (filters.maxSqValue === filters.minSqValue) {
                return item.size < filters.minSqValue &&
                    item.price >= filters.minPriceValue &&
                    item.price <= filters.maxPriceValue &&
                    item.beds >= filters.bedValue &&
                    item.baths >= filters.bathValue &&
                    (filters.Area.includes('All') || filters.Area.includes(item.location)) &&
                    (filters.Type.includes('All') || filters.Type.includes(item.type));
            }
    
            // Загальні умови для фільтрації
            const priceCondition = item.price >= filters.minPriceValue && item.price <= filters.maxPriceValue;
            let sizeCondition;
            if(filters.maxSqValue<10000){
                sizeCondition=item.size >= filters.minSqValue && item.size <= filters.maxSqValue;
            }
            else{
                sizeCondition=item.size >= filters.minSqValue;
            }
            const commonConditions = sizeCondition && item.beds >= filters.bedValue && item.baths >= filters.bathValue;
    
            return priceCondition && commonConditions &&
                (filters.Area.includes('All') || filters.Area.includes(item.location)) &&
                (filters.Type.includes('All') || filters.Type.includes(item.type));
    });


    // Отображение отфильтрованных данных
    const filter_data = document.getElementById("filter_data");
    filter_data.innerHTML = ''; // Очищение предыдущего контента
    filterData.forEach((item) => {
        const imgSlides = item.img.map(imgUrl => `
            <div class="swiper-slide">
                <img src="${imgUrl}" alt="">
            </div>
        `).join('');


        const card = document.createElement("div");
        card.classList.add("data_card");
        card.innerHTML = `
            <div class="data">
                <div class="data_card">
                    <a href="${item.link}" target="_blank">
                        <div class="swiper-container data_card_img">
                            <div class="swiper-wrapper">
                                ${imgSlides}
                            </div>
                            <div class="swiper-pagination"></div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                        <div class="global_data">
                            <div class="data_card_price">
                                <span class="sum"> AED ${item.price.toLocaleString('en-US').replace(/ /g, ',')}</span>
                            </div>
                            <div class="data_card_location">
                                <span>${item.location}, ${item.city}</span>
                            </div>
                            <div class="other_data_card">
                                <div class="allData">
                                    <span class="type">${item.type}</span> - <span class="bed">${item.beds} Beds</span> - <span class="bath">${item.baths} Bath</span> - <span class="sq">${item.size.toLocaleString('en-US').replace(/ /g, ',')} sq. ft.</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>`;
        filter_data.appendChild(card);
    });
    FiltData=filterData


    // Инициализация Swiper после добавления HTML
    new Swiper('.swiper-container', {
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        grabCursor: true,
        slidesPerView: 1,
        spaceBetween: 0,
    });
}