$(document).ready(function () {
    loadYoutubeCard();
    loadFacebookCard();
    loadInstagramCard();
});

function loadInstagramCard() {
    $.ajax({
        url: "/Api/instagramList",
        type: "post",
        data: null,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.list;
                $('#card_group2').append(instagramCardHtml(obj));




            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}

function instagramCardHtml(objItem) {
    var html = "";
    html += "<!-- grid column -->";
    html += "<div class=\"col-xl-12\">";
    html += "   <!-- .card -->";
    html += "   <div class=\"card card-fluid\">";
    html += "       <!-- .card-header -->";
    html += "       <div class=\"card-header border-0\">";
    html += "       <!-- .d-flex -->";
    html += "       <div class=\"d-flex align-items-center\">";
    html += "           <span class=\"mr-auto\">Instagram 排行</span> <!-- .card-header-control -->";
    html += "           <div class=\"card-header-control\">";
    html += "           </div><!-- /.card-header-control -->";
    html += "       </div><!-- /.d-flex -->";
    html += "       </div><!-- /.card-header -->";
    html += "       <!-- .table-responsive -->";
    html += "       <div class=\"table-responsive\">";
    html += "           <!-- .table -->";
    html += "           <table class=\"table\">";
    html += "               <!-- thead -->";
    html += "               <thead>";
    html += "                   <tr>";
    html += "                       <th style=\"min-width:259px\"> 名稱 </th>";
    html += "                       <th class=\"text-right\"> 粉絲數 </th>";
    html += "                       <th class=\"text-right\"> 貼文互動數(近6) </th>";
    html += "                       <th class=\"text-right\"> Reels預估觀看數 </th>";
    html += "                       <th> 更新日期 </th>";
    html += "                       <th>  </th>";
    html += "                   </tr>";
    html += "               </thead><!-- /thead -->";
    html += "               <!-- tbody -->";
    html += "               <tbody>";
    html += "               <!-- tr -->";

    $.each(objItem, function (index, item) {
        html += instagramSubHtml(item);
    });

    html += "               </tbody><!-- /tbody -->";
    html += "           </table><!-- /.table -->";
    html += "       </div><!-- /.table-responsive -->";
    html += "       <!-- .card-footer -->";
    html += "       <div class=\"card-footer\">";
    html += "       </div><!-- /.card-footer -->";
    html += "   </div><!-- /.card -->";
    html += "</div><!-- /grid column -->";

    return html;
}

function instagramSubHtml(item) {
    var html = "";

    var decimal = item.instagram_postActive;
    var postPercent = (decimal * 100).toFixed(2) + "%";

    var avgView = item.instagram_reelsActive.toFixed(0);

    var publishdate = new Date(item.instagram_updatedate);

    html += "               <!-- tr -->";
    html += "               <tr>";
    html += "                   <td class=\"align-middle text-truncate\">";
    html += "                       <a href=\"javascript: void(0);\" class=\"user-avatar user-avatar-lg\"><img src=\"/images/instagram/" + item.instagram_pic + "\"> </a>&nbsp;";
    html += "                       <a href=\"" + item.kolMedia_url + "\" target=\"_blank\">" + item.instagram_name + "</a>";
    html += "                   </td>";
    html += "                   <td class=\"align-middle text-right\"> " + AppendComma(item.instagram_fansNum) + " </td>";
    html += "                   <td class=\"align-middle text-right\"> " + postPercent + " </td>";
    html += "                   <td class=\"align-middle text-right\"> " + AppendComma(avgView) + " </td>";
    html += "                   <td class=\"align-middle\"> " + formatDate(publishdate, 'yyyy/MM/dd HH:mm:ss') + " </td>";
    html += "                   <td class=\"align-middle\">";
    html += "                       <button class=\"btn btn-sm btn-secondary\" data-method=\"post\" data-uid=\"" + item.instagram_uid + "\" onclick=\"instagramBtnClick(this);\">貼文</button>";
    html += "                       <button class=\"btn btn-sm btn-secondary\" data-method=\"reels\" data-uid=\"" + item.instagram_uid + "\" onclick=\"instagramBtnClick(this);\">Reels</button>";
    html += "                   </td>";
    html += "               </tr><!-- /tr -->";

    return html;
}

function loadFacebookCard() {
    $.ajax({
        url: "/Api/facebookList",
        type: "post",
        data: null,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.list;
                $('#card_group').append(facebookCardHtml(obj));




            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}

function facebookCardHtml(objItem) {
    var html = "";
    html += "<!-- grid column -->";
    html += "<div class=\"col-xl-6\">";
    html += "   <!-- .card -->";
    html += "   <div class=\"card card-fluid\">";
    html += "       <!-- .card-header -->";
    html += "       <div class=\"card-header border-0\">";
    html += "       <!-- .d-flex -->";
    html += "       <div class=\"d-flex align-items-center\">";
    html += "           <span class=\"mr-auto\">Facebook 排行</span> <!-- .card-header-control -->";
    html += "           <div class=\"card-header-control\">";
    html += "           </div><!-- /.card-header-control -->";
    html += "       </div><!-- /.d-flex -->";
    html += "       </div><!-- /.card-header -->";
    html += "       <!-- .table-responsive -->";
    html += "       <div class=\"table-responsive\">";
    html += "           <!-- .table -->";
    html += "           <table class=\"table\">";
    html += "               <!-- thead -->";
    html += "               <thead>";
    html += "                   <tr>";
    html += "                       <th style=\"min-width:259px\"> 名稱 </th>";
    html += "                       <th class=\"text-right\"> 追蹤者數 </th>";
    html += "                       <th class=\"text-right\"> 互動數(近5) </th>";
    html += "                       <th> 資料更新日期 </th>";
    html += "                       <th>  </th>";
    html += "                   </tr>";
    html += "               </thead><!-- /thead -->";
    html += "               <!-- tbody -->";
    html += "               <tbody>";
    html += "               <!-- tr -->";

    $.each(objItem, function (index, item) {
        html += facebookSubHtml(item);
    });

    html += "               </tbody><!-- /tbody -->";
    html += "           </table><!-- /.table -->";
    html += "       </div><!-- /.table-responsive -->";
    html += "       <!-- .card-footer -->";
    html += "       <div class=\"card-footer\">";
    html += "       </div><!-- /.card-footer -->";
    html += "   </div><!-- /.card -->";
    html += "</div><!-- /grid column -->";

    return html;
}

function facebookSubHtml(item) {
    var html = "";

    var decimal = item.facebook_active;
    var percent = (decimal * 100).toFixed(2) + "%";
    var publishdate = new Date(item.facebook_updatedate);

    html += "               <!-- tr -->";
    html += "               <tr>";
    html += "                   <td class=\"align-middle text-truncate\">";
    html += "                       <a href=\"javascript: void(0);\" class=\"user-avatar user-avatar-lg\"><img src=\"" + item.kol_photo + "\"> </a>&nbsp;";
    html += "                       <a href=\"" + item.kolMedia_url + "\" target=\"_blank\">" + item.facebook_name + "</a>";
    html += "                   </td>";
    html += "                   <td class=\"align-middle text-right\"> " + AppendComma(item.facebook_fansNum) + " </td>";
    html += "                   <td class=\"align-middle text-right\"> " + percent + " </td>";
    html += "                   <td class=\"align-middle\"> " + formatDate(publishdate, 'yyyy/MM/dd HH:mm:ss') + " </td>";
    html += "                   <td class=\"align-middle\">";
    html += "                       <button class=\"btn btn-sm btn-icon btn-secondary\"  data-uid=\"" + item.facebook_uid + "\" onclick=\"facebookBtnClick(this);\"> <i class=\"fa fa-ellipsis-h\"></i></button>";
    html += "                   </td>";
    html += "               </tr><!-- /tr -->";

    return html;
}


function loadYoutubeCard() {
    $.ajax({
        url: "/Api/youtubeList",
        type: "post",
        data: null,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.youtubeList;
                $('#card_group').append(youtubeCardHtml(obj));
                

                

            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}

function youtubeCardHtml(objItem) {
    var html = "";
    html += "<!-- grid column -->";
    html += "<div class=\"col-xl-6\">";
    html += "   <!-- .card -->";
    html += "   <div class=\"card card-fluid\">";
    html += "       <!-- .card-header -->";  
    html += "       <div class=\"card-header border-0\">";
    html += "       <!-- .d-flex -->";
    html += "       <div class=\"d-flex align-items-center\">";
    html += "           <span class=\"mr-auto\">Youtube 頻道排行</span> <!-- .card-header-control -->";
    html += "           <div class=\"card-header-control\">";
    html += "           </div><!-- /.card-header-control -->";
    html += "       </div><!-- /.d-flex -->";
    html += "       </div><!-- /.card-header -->";
    html += "       <!-- .table-responsive -->";
    html += "       <div class=\"table-responsive\">";
    html += "           <!-- .table -->";
    html += "           <table class=\"table\">";
    html += "               <!-- thead -->";
    html += "               <thead>";
    html += "                   <tr>";
    html += "                       <th style=\"min-width:259px\"> 頻道名稱 </th>";
    
    html += "                       <th class=\"text-right\"> 訂閱數 </th>";
    html += "                       <th class=\"text-right\"> 平均觀看數(近5) </th>";
    html += "                       <th> 資料更新日期 </th>";
    html += "                       <th>  </th>";
    html += "                   </tr>";
    html += "               </thead><!-- /thead -->";
    html += "               <!-- tbody -->";
    html += "               <tbody>";
    html += "               <!-- tr -->";

    $.each(objItem, function (index, item) {
        html += youtubeSubHtml(item);
    });

    html += "               </tbody><!-- /tbody -->";
    html += "           </table><!-- /.table -->";
    html += "       </div><!-- /.table-responsive -->";
    html += "       <!-- .card-footer -->";
    html += "       <div class=\"card-footer\">";
    html += "       </div><!-- /.card-footer -->";
    html += "   </div><!-- /.card -->";
    html += "</div><!-- /grid column -->";

    return html;
}

function youtubeSubHtml(item) {
    var html = "";

    html += "               <!-- tr -->";
    html += "               <tr>";
    html += "                   <td class=\"align-middle text-truncate\">";
    html += "                       <a href=\"javascript: void(0);\" class=\"user-avatar user-avatar-lg\"><img src=\"" + item.youtube_photo + "\"> </a>&nbsp;";
    html += "                       <a href=\"https://www.youtube.com/" + item.youtube_account + "\" target=\"_blank\">" + item.youtube_name + "</a>";
    html += "                   </td>";
   
    html += "                   <td class=\"align-middle text-right\"> " + AppendComma(item.youtube_subscriberCount) + " </td>";
    html += "                   <td class=\"align-middle text-right\"> " + AppendComma(item.youtube_avgViewCount) + " </td>";
    html += "                   <td class=\"align-middle\"> " + (new Date(item.youtube_updateTime)).format("yyyy/MM/dd hh:mm:ss") + " </td>";
    html += "                   <td class=\"align-middle\">";
    html += "                       <button class=\"btn btn-sm btn-icon btn-secondary\"  data-uid=\"" + item.youtube_uid + "\" onclick=\"youtubeBtnClick(this);\"> <i class=\"fa fa-ellipsis-h\"></i></button>";
    html += "                   </td>";
    html += "               </tr><!-- /tr -->";

    return html;
}

function instagramBtnClick(obj) {
    var dataUid = obj.getAttribute('data-uid');
    var dataType = obj.getAttribute('data-method');

    if (dataType == 'post') {
        var trList = $("#instagramPost_layout").find(".masonry-item");
        $.each(trList, function (index, item) {
            $(item).remove();
        });

        var formData = {
            instagram_uid: dataUid,
            method: 'post'
        }

        $.ajax({
            url: "/Api/instagramData",
            type: "post",
            data: formData,
            success: function (data, textStatus, jqXHR) {
                if (data.ret == "yes") {
                    var obj = data.list;

                    var html = "";

                    $.each(obj, function (index, item) {
                        html += instagramPostModalHtml(item);
                    });

                    $('#instagramPost_layout').append(html);

                    $('#InstagramPostModal').modal('toggle');


                } else {
                    alert(data.message);

                    if (data.err_code == "99999") {
                        location.href = "/Root/Login";
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('網路或伺服器發生錯誤，請稍後重試!');
            }
        });
    }

    if (dataType == 'reels') {
        var trList = $("#instagramPost_layout").find(".masonry-item");
        $.each(trList, function (index, item) {
            $(item).remove();
        });

        var formData = {
            instagram_uid: dataUid,
            method: 'reels'
        }

        $.ajax({
            url: "/Api/instagramData",
            type: "reels",
            data: formData,
            success: function (data, textStatus, jqXHR) {
                if (data.ret == "yes") {
                    var obj = data.list;

                    var html = "";

                    $.each(obj, function (index, item) {
                        html += instagramReelsModalHtml(item);
                    });

                    $('#instagramPost_layout').append(html);

                    $('#InstagramPostModal').modal('toggle');


                } else {
                    alert(data.message);

                    if (data.err_code == "99999") {
                        location.href = "/Root/Login";
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('網路或伺服器發生錯誤，請稍後重試!');
            }
        });
    }
}

function instagramReelsModalHtml(obj) {



    var html = "";
    html += "<!-- .masonry-item -->";
    html += "<div class=\"masonry-item col-lg-12\">";
    html += "   <!-- .card -->";
    html += "   <div class=\"card card-fluid\">";
    html += "   <a href=\"https://www.instagram.com/p/" + obj.instagramDetail_shortcode + "\" target=\"_blank\">";
    html += "   <img src=\"/images/instagram/" + obj.instagramDetail_photo + "\"  class=\"card-img-top img-fluid\"> <!-- .card-body -->";
    html += "   </a>";
    html += "   <div class=\"card-body pt-2\">";
    html += "       <!-- grid row -->";
    html += "       <div class=\"row align-items-center mb-3\">";
    html += "           <!-- .col -->";
    html += "           <div class=\"col\">";
    html += "               <h5 class=\"card-title\">";
    html += "                   <a href=\"https://www.instagram.com/p/" + obj.instagramDetail_shortcode + "\" target=\"_blank\">" + obj.instagramDetail_title + "</a>";
    html += "               </h5>";
    html += "               <h6 class=\"card-subtitle text-muted\"> " + obj.instagramDetail_date + " </h6>";
    html += "           </div><!-- /.col -->";
    html += "           <!-- grid column -->";
    html += "       </div><!-- /grid row -->";
    html += "   <!-- grid row -->";
    html += "   <div class=\"row text-center\">";

    html += "   <!-- grid column -->";
    html += "   <div class=\"col\">";
    html += "       <!-- .metric -->";
    html += "       <div class=\"metric\">";
    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.instagramDetail_viewNum) + " </h6>";
    html += "           <p class=\"metric-label\"> 觀看數 </p>";
    html += "       </div><!-- /.metric -->";
    html += "   </div><!-- /grid column -->";
    html += "   <!-- grid column -->";
    html += "   <div class=\"col\">";
    html += "       <!-- .metric -->";
    html += "       <div class=\"metric\">";
    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.instagramDetail_commentNum) + " </h6>";
    html += "           <p class=\"metric-label\"> 留言數 </p>";
    html += "       </div><!-- /.metric -->";
    html += "   </div><!-- /grid column -->";
    html += "   </div><!-- /grid row -->";
    html += "   </div><!-- /.card-body -->";
    html += "   </div><!-- /.card -->";
    html += "</div><!-- /.masonry-item -->";

    return html;
}

function instagramPostModalHtml(obj) {

    

    var html = "";
    html += "<!-- .masonry-item -->";
    html += "<div class=\"masonry-item col-lg-12\">";
    html += "   <!-- .card -->";
    html += "   <div class=\"card card-fluid\">";
    html += "   <a href=\"https://www.instagram.com/p/" + obj.instagramDetail_shortcode + "\" target=\"_blank\">";
    html += "   <img src=\"/images/instagram/" + obj.instagramDetail_photo + "\"  class=\"card-img-top img-fluid\"> <!-- .card-body -->";
    html += "   </a>";
    html += "   <div class=\"card-body pt-2\">";
    html += "       <!-- grid row -->";
    html += "       <div class=\"row align-items-center mb-3\">";
    html += "           <!-- .col -->";
    html += "           <div class=\"col\">";
    html += "               <h5 class=\"card-title\">";
    html += "                   <a href=\"https://www.instagram.com/p/" + obj.instagramDetail_shortcode + "\" target=\"_blank\">" + obj.instagramDetail_title + "</a>";
    html += "               </h5>";
    html += "               <h6 class=\"card-subtitle text-muted\"> " + obj.instagramDetail_date + " </h6>";
    html += "           </div><!-- /.col -->";
    html += "           <!-- grid column -->";
    html += "       </div><!-- /grid row -->";
    html += "   <!-- grid row -->";
    html += "   <div class=\"row text-center\">";
    
    html += "   <!-- grid column -->";
    html += "   <div class=\"col\">";
    html += "       <!-- .metric -->";
    html += "       <div class=\"metric\">";
    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.instagramDetail_likeNum) + " </h6>";
    html += "           <p class=\"metric-label\"> 喜歡數 </p>";
    html += "       </div><!-- /.metric -->";
    html += "   </div><!-- /grid column -->";
    html += "   <!-- grid column -->";
    html += "   <div class=\"col\">";
    html += "       <!-- .metric -->";
    html += "       <div class=\"metric\">";
    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.instagramDetail_commentNum) + " </h6>";
    html += "           <p class=\"metric-label\"> 留言數 </p>";
    html += "       </div><!-- /.metric -->";
    html += "   </div><!-- /grid column -->";
    html += "   </div><!-- /grid row -->";
    html += "   </div><!-- /.card-body -->";
    html += "   </div><!-- /.card -->";
    html += "</div><!-- /.masonry-item -->";

    return html;
}
function facebookBtnClick(obj) {
    var dataUid = obj.getAttribute('data-uid');


    var trList = $("#facebook_layout").find(".masonry-item");
    $.each(trList, function (index, item) {
        $(item).remove();
    });

    var formData = {
        facebook_uid: dataUid
    }

    $.ajax({
        url: "/Api/facebookData",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.list;

                var html = "";

                $.each(obj, function (index, item) {
                    html += facebookModalHtml(item);
                });

                $('#facebook_layout').append(html);

                $('#FacebookModal').modal('toggle');


            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}

function facebookModalHtml(obj) {

    //var publishdate = new Date(obj.youtubeDetail_publishedAt);

    var html = "";
    html += "<!-- .masonry-item -->";
    html += "<div class=\"masonry-item col-lg-12\">";
    html += "   <!-- .card -->";
    html += "   <div class=\"card card-fluid\">";
    //html += "   <a href=\"https://www.youtube.com/watch?v=" + obj.youtubeDetail_videoId + "\" target=\"_blank\">";
    //html += "   <img src=\"" + obj.youtubeDetail_thumbnails + "\"  class=\"card-img-top img-fluid\"> <!-- .card-body -->";
    //html += "   </a>";
    html += "   <div class=\"card-body pt-2\">";
    html += "       <!-- grid row -->";
    html += "       <div class=\"row align-items-center mb-3\">";
    html += "           <!-- .col -->";
    html += "           <div class=\"col\">";
    // html += "               <h5 class=\"card-title\">";
    //html += "                   <a href=\"https://www.youtube.com/watch?v=" + obj.youtubeDetail_videoId + "\" target=\"_blank\">" + obj.youtubeDetail_title + "</a>";
    //html += "               </h5>";
    //html += "               <h5 class=\"card-subtitle text-muted\"> " + obj.+ " </h6>";
    html += "           </div><!-- /.col -->";
    html += "           <!-- grid column -->";
    html += "       </div><!-- /grid row -->";
    html += "   <!-- grid row -->";
    html += "   <div class=\"row text-center\">";
    html += "   <!-- grid column -->";
    html += "   <div class=\"col\">";
    html += "       <!-- .metric -->";
    html += "       <div class=\"metric\">";
    html += "           <h8 class=\"metric-value\"> " + obj.facebookDetail_publishedAt + " </h8>";
    html += "           <p class=\"metric-label\"> 貼文發布時間 </p>";
    
    html += "       </div><!-- /.metric -->";
    html += "   </div><!-- /grid column -->";
    html += "   <!-- grid column -->";
    html += "   <div class=\"col\">";
    html += "       <!-- .metric -->";
    html += "       <div class=\"metric\">";
    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.facebookDetail_likeCount) + " </h6>";
    html += "           <p class=\"metric-label\"> 按讚數 </p>";
    html += "       </div><!-- /.metric -->";
    html += "   </div><!-- /grid column -->";
    html += "   <!-- grid column -->";
    html += "   <div class=\"col\">";
    html += "       <!-- .metric -->";
    html += "       <div class=\"metric\">";
    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.facebookDetail_msgCount) + " </h6>";
    html += "           <p class=\"metric-label\"> 留言數 </p>";
    html += "       </div><!-- /.metric -->";
    html += "   </div><!-- /grid column -->";
    html += "   <!-- grid column -->";
    html += "   <div class=\"col\">";
    html += "       <!-- .metric -->";
    html += "       <div class=\"metric\">";
    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.facebookDetail_shareCount) + " </h6>";
    html += "           <p class=\"metric-label\"> 分享數 </p>";
    html += "       </div><!-- /.metric -->";
    html += "   </div><!-- /grid column -->";
    html += "   </div><!-- /grid row -->";
    html += "   </div><!-- /.card-body -->";
    html += "   </div><!-- /.card -->";
    html += "</div><!-- /.masonry-item -->";

    return html;
}

function youtubeBtnClick(obj) {
    var dataUid = obj.getAttribute('data-uid');


    var trList = $("#youtube_layout").find(".masonry-item");
    $.each(trList, function (index, item) {
        $(item).remove();
    });

    var formData = {
        youtube_uid: dataUid
    }

    $.ajax({
        url: "/Api/youtubeData",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.data;

                var html = "";

                $.each(obj.youtubeDetails, function (index, item) {
                    html += youtubeModalHtml(item);
                });

                $('#youtube_layout').append(html);

                $('#YoutubeModal').modal('toggle');


            } else {
                alert(data.message);

                if (data.err_code == "99999") {
                    location.href = "/Root/Login";
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('網路或伺服器發生錯誤，請稍後重試!');
        }
    });
}

function youtubeModalHtml(obj) {

    var publishdate = new Date(obj.youtubeDetail_publishedAt);

    var html = "";
    html += "<!-- .masonry-item -->";
    html += "<div class=\"masonry-item col-lg-12\">";
    html += "   <!-- .card -->";
    html += "   <div class=\"card card-fluid\">";
    html += "   <a href=\"https://www.youtube.com/watch?v=" + obj.youtubeDetail_videoId + "\" target=\"_blank\">";
    html += "   <img src=\"" + obj.youtubeDetail_thumbnails + "\"  class=\"card-img-top img-fluid\"> <!-- .card-body -->";
    html += "   </a>";
    html += "   <div class=\"card-body pt-2\">";
    html += "       <!-- grid row -->";
    html += "       <div class=\"row align-items-center mb-3\">";
    html += "           <!-- .col -->";
    html += "           <div class=\"col\">";
    html += "               <h5 class=\"card-title\">";
    html += "                   <a href=\"https://www.youtube.com/watch?v=" + obj.youtubeDetail_videoId + "\" target=\"_blank\">" + obj.youtubeDetail_title + "</a>";
    html += "               </h5>";
    html += "               <h6 class=\"card-subtitle text-muted\"> " + formatDate(publishdate, 'yyyy-MM-dd HH:mm:ss') + " </h6>";
    html += "           </div><!-- /.col -->";
    html += "           <!-- grid column -->";
    html += "       </div><!-- /grid row -->";
    html += "   <!-- grid row -->";
    html += "   <div class=\"row text-center\">";
    html += "   <!-- grid column -->";
    html += "   <div class=\"col\">";
    html += "       <!-- .metric -->";
    html += "       <div class=\"metric\">";
    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.youtubeDetail_viewCount) + " </h6>";
    html += "           <p class=\"metric-label\"> 觀看數 </p>";
    html += "       </div><!-- /.metric -->";
    html += "   </div><!-- /grid column -->";
    html += "   <!-- grid column -->";
    html += "   <div class=\"col\">";
    html += "       <!-- .metric -->";
    html += "       <div class=\"metric\">";
    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.youtubeDetail_likeCount) + " </h6>";
    html += "           <p class=\"metric-label\"> 按讚數 </p>";
    html += "       </div><!-- /.metric -->";
    html += "   </div><!-- /grid column -->";
    html += "   <!-- grid column -->";
    html += "   <div class=\"col\">";
    html += "       <!-- .metric -->";
    html += "       <div class=\"metric\">";
    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.youtubeDetail_commentCount) + " </h6>";
    html += "           <p class=\"metric-label\"> 留言數 </p>";
    html += "       </div><!-- /.metric -->";
    html += "   </div><!-- /grid column -->";
    html += "   </div><!-- /grid row -->";
    html += "   </div><!-- /.card-body -->";
    html += "   </div><!-- /.card -->";
    html += "</div><!-- /.masonry-item -->";

    return html;
}

function formatDate(inputDate, format) {
    if (!inputDate) return '';

    const padZero = (value) => (value < 10 ? `0${value}` : `${value}`);
    const parts = {
        yyyy: inputDate.getFullYear(),
        MM: padZero(inputDate.getMonth() + 1),
        dd: padZero(inputDate.getDate()),
        HH: padZero(inputDate.getHours()),
        hh: padZero(inputDate.getHours() > 12 ? inputDate.getHours() - 12 : inputDate.getHours()),
        mm: padZero(inputDate.getMinutes()),
        ss: padZero(inputDate.getSeconds()),
        tt: inputDate.getHours() < 12 ? 'AM' : 'PM'
    };

    return format.replace(/yyyy|MM|dd|HH|hh|mm|ss|tt/g, (match) => parts[match]);
}