$(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;
}


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]);
}