$(".popular").hide();

$(document).on("click", ".likeSee__state__filter--item", function (event) {
    $(".News").toggle();
    $(".popular").toggle();
    $(".likeSee__state__filter--item").removeClass('active');
    $(this).addClass("active");
});

const urlParams = new URLSearchParams(window.location.search);
let id = urlParams.get('cid');
console.log(id);

function get_data() {
    $.ajax({
        method: "GET",
        url: `json/Columns-${id}.json`,
        // url:`json/Columns.json`,
        dataType: "json",
    })

    .done(function (msg) {
        console.log(msg);
            
        let ColumnsContent="";
        let ColumnsTag="";
        let breadcrumbTitle="";
        let article_info="";
        let OtherColumns="";
        let PopularColumns="";



        breadcrumbTitle=`<a href="#">${msg[0].Columnstitle}</a>`

        article_info=`
        <h1 class="article__title mt-4">${msg[0].Columnstitle}</h1>
        <div class="small">${msg[0].ColumnsDate}｜ 人氣:${msg[0].ColumnsViews}</div>
        `;


        ColumnsContent=`${msg[0].ColumnsContent}`;

        for (let j = 0; j < msg[0].ColumnsTag.length; j++) {
            ColumnsTag += ' \
                <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[0].ColumnsTag[j].Tag + '-keyword/" \
                class="btn btn-outline-custom rounded-0">'
                + msg[0].ColumnsTag[j].Tag + '</a>';
        }


        for(let i=0; i<msg[0].OtherColumns.length; i++){
            OtherColumns+=
            '<div class="col-12 col-md-4 ps-0"><div class="cardList__items">\
                <a target="_blank" href="https://hhh.com.tw/columns/detail/'+msg[0].OtherColumns[i].Columnsid+'/"> <img src="'+msg[0].OtherColumns[i].ColumnsCoverImg+'" alt="">\
            <div class="cardList__items__content">\
                <a href="https://hhh.com.tw/columns/detail/'+msg[0].OtherColumns[i].Columnsid+'/"" target="_blank">\
                    <div class="cardList__items--title cardList__items--ellipse">\
                        '+msg[0].OtherColumns[i].Columnstitle+'\
                    </div>\
                </a>'
                OtherColumns+='<p>'
                for(k=0; k<msg[0].OtherColumns[i].ColumnsTag.length; k++){
                    OtherColumns+='\
                    <a class="likeSee__tag--item" href="https://hhh.com.tw/columns/lists/'+msg[0].OtherColumns[i].ColumnsTag[k].tag+'-keyword/all-columntypea/" arget="_blank">'+msg[0].OtherColumns[i].ColumnsTag[k].Tag+'</a>'
                }
                OtherColumns+='</p>'
            OtherColumns+='</div></div></div>'
            
        }


        // for(let i=0; i<msg[0].PopularColumns.length; i++){
        //     PopularColumns+=
        //     '<div class="col-12 col-md-4 ps-0"><div class="cardList__items">\
        //         <a target="_blank" href="https://hhh.com.tw/columns/detail/'+msg[0].PopularColumns[i].Columnsid+'/"> <img src="'+msg[0].PopularColumns[i].ColumnsCoverImg+'" alt="">\
        //     <div class="cardList__items__content">\
        //         <a href="https://hhh.com.tw/columns/detail/'+msg[0].PopularColumns[i].Columnsid+'/"" target="_blank">\
        //             <div class="cardList__items--title cardList__items--ellipse">\
        //                 '+msg[0].PopularColumns[i].Columnstitle+'\
        //             </div>\
        //         </a>'
        //         PopularColumns+='<p>'
        //         for(k=0; k<msg[0].PopularColumns[i].ColumnsTag.length; k++){
        //             PopularColumns+='\
        //             <a class="likeSee__tag--item" href="https://hhh.com.tw/columns/lists/'+msg[0].PopularColumns[i].ColumnsTag[k].tag+'-keyword/all-columntypea/" arget="_blank">'+msg[0].PopularColumns[i].ColumnsTag[k].Tag+'</a>'
        //         }
        //         PopularColumns+='</p>'
        //         PopularColumns+='</div></div></div>'
            
        // }

       


        $('.article_info').html(article_info);

        $('.breadcrumb-title').html(breadcrumbTitle);

        $('.ColumnsContent').html(ColumnsContent);

        $('.ColumnsTag').html(ColumnsTag);

        $('.OtherColumns').html(OtherColumns);

        // $('.PopularColumns').html(PopularColumns);

        



    });
}

function renderSec07() {
    $.ajax({
        method: "GET",
        // url: `json/bannerAds-${id}.json`,
        url:`json/bannerAds.json`,
        dataType: "json",
    })
    .done(function(msg){
        console.log(msg);
        let str = '';
        for(let i = 0; i < msg[0].data.length; i++){
            console.log(msg[i])
            str+= `<div class="sec-07__slider-${i+1} slide-item" onclick="window.open('${msg[0].data[i].link}');" data-bg="${msg[0].data[i].imgUrl}"><img class="img-fluid" src="${msg[0].data[i].imgUrl}"></div>`
        }
        $(`.sec-07__slider`).html(str);
        $(".sec-07__slider").slick({
            dots: false,
            autoplay: true,
            arrows: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplaySpeed: 7000,
            initialSlide: 0,
            infinite: true,
            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
        });
    });

}
get_data();
renderSec07();