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

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> 帳號 </th>";
    html += "                       <th class=\"text-right\"> 訂閱數 </th>";
    html += "                       <th class=\"text-right\"> 平均觀看數(近5) </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\"> " + item.youtube_account + " </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\">";
    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;
}