let data = [
    {
        price: 7300000,
        size: 2378,
        beds: 3,
        baths: 4,
        img: ['/img/42119127_1920_q70.jpg'],

        location: 'One River Point',
        city: 'Business Bay',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id15'
    },
    {
        price: 14800000,
        size: 3233,
        beds: 3,
        baths: 4,
        img: ['/img/42192027_1920_q70.jpg'],


        location: 'Ellington Beach House',
        city: 'Palm Jumeirah',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id3'
    },
    {
        price: 9835000,
        size: 1945,
        beds: 3,
        baths: 3,
        img: ['/img/42101490_1920.png'],


        location: 'Address Residences The Bay',
        city: 'Dubai Harbour',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id9'
    },
    {
        price: 115000000,
        size: 25514,
        beds: 5,
        baths: 7,
        img: ['/img/42301461_1920.png'],


        location: 'Six Senses Residences',
        city: 'Palm Jumeirah',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id4'


    },
    {
        price: 25000000,
        size: 10492,
        beds: 6,
        baths: 7,
        img: ['/img/42102391_1920.png'],

        location: 'Serenity Mansions',
        city: 'Tilal Al Ghaf',
        type: 'Villa',
        link: 'https://ocleygroup.com/property_id10'
    },
    {
        price: 38000000,
        size: 14606,
        beds: 6,
        baths: 7,
        img: ['/img/42192044_1920_q70.jpg'],

        location: 'The Sanctuary',
        city: 'MBR City',
        type: 'Villa',
        link: 'https://ocleygroup.com/property_id5'
    },
    {
        price: 2150000,
        size: 1233,
        beds: 2,
        baths: 3,
        img: ['/img/42108407_1920_q70.jpg'],

        location: 'Hillmont Residences',
        city: 'JVC',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id11'

    },

    {
        price: 5450000,
        size: 2133,	
        beds: 3,
        baths: 3,
        img: ['/img/42301645_1920_q70.jpg'],

        location: 'Mercer House',
        city: 'JLT',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id12'
    },
    {
        price: 9000000,
        size: 1636,
        beds: 2,
        baths: 3,
        img: ['/img/42111464_1920_q70.jpg'],

        location: 'Ocean House',
        city: 'Palm Jumeirah',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id13'
    },
    {
        price: 15000000,
        size: 5141,
        beds: 5,
        baths: 5,
        img: ['/img/42301748_1920_q70.jpg'],

        location: 'The Highbury',
        city: 'MBR City',
        type: 'Penthouse',
        link: 'https://ocleygroup.com/property_id14'

    },

    {
        price: 78000000,
        size: 8398,
        beds: 5,
        baths: 4,
        img: ['/img/42301751_1920.png'],

        location: 'Ava by Omniyat',
        city: 'Palm Jumeirah',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id6'
    },
    {
        price: 5000000,
        size: 1692,
        beds: 3,
        baths: 4,
        img: ['/img/42301752_1920_q70.jpg'],

        location: 'The Crestmark',
        city: 'Business Bay',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id16'
    },
    {
        price: 1920000,
        size: 888,
        beds: 1,
        baths: 2,
        img: ['/img/42134131_1920_q70.jpg'],

        location: 'Art Bay',
        city: 'Al Jaddaf',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id17'

    },
    {
        price: 2000000,
        size: 1393,
        beds: 2,
        baths: 4,
        img: ['/img/42301784_1920_q70.jpg'],

        location: 'Harrington House',
        city: 'JVC',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id18'

    },
    {
        price: 330000000,
        size: 21934,
        beds: 7,
        baths: 13,
        img: ['/img/42301787_1920_q70.jpg'],

        location: 'Ellington Villa Collection',
        city: 'La Mer',
        type: 'Villa',
        link: 'https://ocleygroup.com/property_id1'

    },
    {
        price: 53000000,
        size: 9823,
        beds: 4,
        baths: 5,
        img: ['/img/42191965_1920_q70.jpg'],

        location: 'Como Residences',
        city: 'Palm Jumeirah',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id2'

    },
    {
        price: 3400000,
        size: 1389,
        beds: 2,
        baths: 3,
        img: ['/img/42301851_1920_q70.jpg'],

        location: 'The Quayside',
        city: 'Business Bay',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id19'

    },
    {
        price: 3000000,
        size: 1302,
        beds: 2,
        baths: 3,
        img: ['/img/42301861_1920_q70.jpg'],

        location: 'Ellington House',
        city: 'Dubai Hills Estate',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id20'

    },
    {
        price: 10000000,
        size: 2536,
        beds: 3,
        baths: 5,
        img: ['/img/42142862_1920_q70.jpg'],

        location: 'DT1',
        city: 'Downtown Dubai',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id21'

    },
    {
        price: 1650000,
        size: 871,
        beds: 1,
        baths: 2,
        img: ['/img/42144259_1920_q70.jpg'],

        location: 'Kensington Waters',
        city: 'MBR City',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id23'

    },
    {
        price: 2350000,
        size: 1186,
        beds: 2,
        baths: 3,
        img: ['/img/42143926_1920_q70.jpg'],

        location: 'Berkeley Place',
        city: 'MBR City',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id22'

    },
    {
        price: 6000000,
        size: 4449,
        beds: 4,
        baths: 5,
        img: ['/img/42146331_1920_q70.jpg'],

        location: 'The Watercrest',
        city: 'MBR City',
        type: 'Villa',
        link: 'https://ocleygroup.com/property_id24'

    },
    {
        price: 8000000,
        size: 4875,
        beds: 5,
        baths: 6,
        img: ['/img/42301955_1920_q70.jpg'],

        location: 'The Acres',
        city: 'Dubai Land',
        type: 'Villa',
        link: 'https://ocleygroup.com/property_id25'

    },
    {
        price: 17000000,
        size: 2716,
        beds: 4,
        baths: 5,
        img: ['/img/42191966_1920_q70.jpg'],

        location: 'Bluewaters Residential',
        city: 'Bluewaters',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id26'

    },
    {
        price: 4500000,
        size: 1414,
        beds: 2,
        baths: 3,
        img: ['/img/42155609_1920_q70.jpg'],

        location: 'Northline',
        city: 'Citywalk',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id27'

    },
    {
        price: 2500000,
        size: 877,
        beds: 1,
        baths: 2,
        img: ['/img/42164875_1920_q70.jpg'],

        location: 'Riwa',
        city: 'Madinat Jumeirah',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id28'

    },
    {
        price: 3600000,
        size: 1197,
        beds: 2,
        baths: 2,
        img: ['/img/42302011_1920_q70.jpg'],

        location: 'Lamaa',
        city: 'Madinat Jumeirah',
        type: 'Apartment',
        link: 'https://ocleygroup.com/property_id29'

    },









]


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.city)) &&
                (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.city)) &&
                (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.city)) &&
            (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,
    });
}