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

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



function get_data() {
    $.ajax({
        method: "GET",
        // url: `json/cases-${id}.json`,
        // url: `json/cases-${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);

        



    });
}
get_data();