var mediaTr;
var delMedia;

$(document).ready(function () {
    delMedia = '';

    loadMedia();
    loadKolMakeupCheckboxItem();
    loadKolStyleCheckboxItem();
    loadKolFansTypeCheckboxItem();

    $('#kolSaveBtn').on('click', function () {
        var method = $('#method').val();
        var kol_uid = $('#kol_uid').val();
        var kol_name = $('#kol_name').val();
        var kol_descript = $('#kol_descript').val();
        var kol_contact1 = $('#kol_contact1').val();
        var kol_contact2 = $('#kol_contact2').val();
        var kol_men_ratio = $('#kol_men_ratio').val();
        var kol_women_ratio = $('#kol_women_ratio').val();
        var kol_13_17 = $('#kol_13_17').val();
        var kol_18_24 = $('#kol_18_24').val();
        var kol_25_34 = $('#kol_25_34').val();
        var kol_35_44 = $('#kol_35_44').val();
        var kol_45_54 = $('#kol_45_54').val();
        var kol_55_64 = $('#kol_55_64').val();
        var kol_65 = $('#kol_65').val();
        var kol_photo = ""
        var kolMakeupStr = "";
        var kolStyleStr = "";
        var kolFansType = "";
        var mediaArray = [];

        var src = $('#fileupload-avatar').parent().children('img').prop('src');
        var origin = location.origin;
        src = src.replace(origin, '');
        kol_photo = src;


        $.each($('input[name="kolMakeup[]"]:checked'), function () {
            kolMakeupStr = kolMakeupStr + $(this).val() + ",";
        });

        $.each($('input[name="kolStyle[]"]:checked'), function () {
            kolStyleStr = kolStyleStr + $(this).val() + ",";
        });

        $.each($('input[name="fansType[]"]:checked'), function () {
            kolFansType = kolFansType + $(this).val() + ",";
        });

        $('#media_table tbody tr').each(function () {
            var item = {
                kolMedia_uid: $(this).find('td').eq(5).children('button').eq(0).attr('data-uid'),
                option_uid: 'media',
                optionItem_uid: $(this).find('td').eq(5).children('button').eq(0).attr('media-uid'),
                kolMedia_url: $(this).find('td').eq(1).text().trim(),
                kolMedia_displayName: $(this).find('td').eq(3).text().trim(),
                kolMedia_accountName: $(this).find('td').eq(2).text().trim(),
                kolMedia_fansNum: $(this).find('td').eq(4).text().trim()
            }

            mediaArray.push(item);
        });

        var err_msg = "";

        if (kol_name == "") {
            err_msg += "KOL頻道名稱未填!\n";
        }

        if (kolMakeupStr == "") {
            err_msg += "未勾選成員\n";
        }

        if (kolStyleStr == "") {
            err_msg += "未勾選KOL 類型\n";
        }

        if (kolFansType == "") {
            err_msg += "未勾選粉絲輪廓\n";
        }

        if (mediaArray.length == 0) {
            err_msg += "無此KOL社群平台資料!";
        }

        if (err_msg != "") {
            alert(err_msg);
            return;
        }

        var formData = {
            method: method,
            kol_uid: kol_uid,
            kol_name: kol_name,
            kol_descript: kol_descript,
            kol_contact1: kol_contact1,
            kol_contact2: kol_contact2,
            kol_men_ratio: kol_men_ratio,
            kol_women_ratio: kol_women_ratio,
            kol_13_17: kol_13_17,
            kol_18_24: kol_18_24,
            kol_25_34: kol_25_34,
            kol_35_44: kol_35_44,
            kol_45_54: kol_45_54,
            kol_55_64: kol_55_64,
            kol_65: kol_65,
            kol_photo: kol_photo,
            kolMakeupStr: kolMakeupStr,
            kolStyleStr: kolStyleStr,
            kolFansType: kolFansType,
            mediaArrayJson: JSON.stringify(mediaArray)
        }

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

                } else {
                    alert(data.message);

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

    });

    $('#optionItemDialogSaveBtn').on('click', function () {
        var method = $('#media_method').val();
        var option_uid = 'media';
        var kolMedia_name = $("#media_select option:selected").text();
        var optionItem_uid = $("#media_select").val();
        var media_uid = $('#media_select').val();
        var kolMedia_url = $('#kolMedia_url').val();
        var kolMedia_accountName = $('#kolMedia_accountName').val();
        var kolMedia_displayName = $('#kolMedia_displayName').val();
        var kolMedia_fansNum = $('#kolMedia_fansNum').val();

        var err_msg = "";

        if (optionItem_uid == "") {
            err_msg += "請選擇社群平台\n";
        }

        if (kolMedia_url == "") {
            err_msg += "請填入KOL的社群平台網址!\n";
        }

        if (checkUrl(kolMedia_url) == false) {
            err_msg += "請填入正確的社群平台網址!\n";
        }

        if (kolMedia_fansNum.isNumber() == false) {
            kolMedia_fansNum = 0;
        }

        if (err_msg != "") {
            alert(err_msg);
            return;
        }

        if (method == "add") {
            var trHtml = "";
            trHtml += '<tr>';
            trHtml += '     <td class="align-middle">  ' + kolMedia_name + ' </td>';
            trHtml += '     <td class="align-middle"> ' + kolMedia_url + ' </td>';
            trHtml += '     <td class="align-middle"> ' + kolMedia_accountName + ' </td>';
            trHtml += '     <td class="align-middle"> ' + kolMedia_displayName + ' </td>';
            trHtml += '     <td class="align-middle"> ' + kolMedia_fansNum + ' </td>';
            trHtml += '     <td class="align-middle text-right">';
            trHtml += '         <button type="button" data-uid="" media-uid="' + optionItem_uid + '" data-method="edit" onclick="buttonClick(this);" class="btn btn-sm btn-icon btn-secondary" data-toggle="modal" data-target="#clientContactEditModal"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button>'; 
            trHtml += '         <button type="button" data-uid="" media-uid="' + optionItem_uid + '" data-method="del" onclick="buttonClick(this);" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>';
            trHtml += '     </td>';
            trHtml += '</tr>';

            $('#media_table tbody').append(trHtml);
            $('#socialItemModal').modal('toggle');

        }

        if (method == "edit") {
            mediaTr.find('td').eq(0).text(kolMedia_name);
            mediaTr.find('td').eq(1).text(kolMedia_url);
            mediaTr.find('td').eq(2).text(kolMedia_accountName);
            mediaTr.find('td').eq(3).text(kolMedia_displayName);
            mediaTr.find('td').eq(4).text(kolMedia_fansNum);
            var method1 = mediaTr.find('td').eq(5).children('button').eq(0).attr('media-uid', optionItem_uid);
            var mehtod2 = mediaTr.find('td').eq(5).children('button').eq(1).attr('media-uid', optionItem_uid);

            $('#socialItemModal').modal('toggle');
        }

        
    });

    $('#socialNewBtn').on('click', function () {
        //var src = $('#fileupload-avatar').parent().children('img').prop('src');
        //var origin = location.origin;
        //src = src.replace(origin, '');
        //alert(src);
        $('#media_method').val('add');
        $('#socialItemModal').modal('toggle');
    });

    $('#kolNewModal').on('click', function () {



        cleanModalData();

        $('#method').val('add');
   
        $('#clientNewModal').modal('toggle');
    });


    var url = "/Api/KolPhotoUpload";

    // =============================================================

    $('#fileupload-avatar').fileupload({
        url: url,
        dropZone: null,
        dataType: 'json',
        autoUpload: true,
        acceptFileTypes: /(\.|\/)(jpe?g|png)$/i,
        maxFileSize: 5000000
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index;
        var file = data.files[index];
        $('#avatar-warning-container').removeClass('show').text('');

        if (file.error) {
            $('#avatar-warning-container').addClass('show').text(file.error);
        }
    }).on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress-avatar').addClass('show').children().css('width', progress + '%');
    }).on('fileuploaddone', function (e, data) {
        var file = data.result.files[0];
        var $img = $(this).parent().children('img');
        var $old = $img.prop('src');

        if (file.url) {
            $img.prop('src', file.url);
        } else if (file.error) {
            $('#avatar-warning-container').addClass('show').text(file.error);
        }

        $('#progress-avatar').removeClass('show').children().css('width', 0);
    }); // File upload using button
    // =============================================================
});

function buttonClick(obj) {
    mediaTr = $(obj).closest('tr');

    var dataMethod = obj.getAttribute('data-method');
    var dataUid = obj.getAttribute('data-uid');
    var mediaUid = obj.getAttribute('media-uid');
    var kolMedia_url = mediaTr.find('td').eq(1).text().trim();
    var kolMedia_accountName = mediaTr.find('td').eq(2).text().trim();
    var kolMedia_displayName = mediaTr.find('td').eq(3).text().trim();
    var kolMedia_fansNum = mediaTr.find('td').eq(4).text().trim();

    if (dataMethod == 'edit') {
        $('#media_method').val('edit');
        $('#option_uid').val('media');
        $('#optionItem_uid').val(mediaUid);
        $('#kolMedia_uid').val(dataUid);
        $('#media_select').val(mediaUid);
        $('#kolMedia_url').val(kolMedia_url).trigger('change');
        $('#kolMedia_accountName').val(kolMedia_accountName).trigger('change');
        $('#kolMedia_displayName').val(kolMedia_displayName).trigger('change');
        $('#kolMedia_fansNum').val(kolMedia_fansNum).trigger('change');

        $('#socialItemModal').modal('toggle');
    }

    if (dataMethod == "del") {
        if (confirm('確定刪除此筆資料?')) {
            var kolMedia_uid = mediaTr.find('td').eq(5).children('button').eq(0).attr('data-uid');

            if (kolMedia_uid != "") {
                delMedia += kolMedia_uid + ",";
            }

            mediaTr.remove();
        }
    }

}
function cleanModalData() {
    $("#method").val("");
    $("#kol_uid").val("");
    $("#kol_name").val("");
    $("#kol_descript").val("");
    $("input[type=checkbox]").each(function (index, checkbox) {
        checkbox.checked = false;
    });

    $('#fileupload-avatar').parent().children('img').prop('src', '/assets/images/avatars/unknown-profile.jpg');
    $("input[type=text][data-toggle=touchspin]").each(function (index, input) {
        if ($(input).prop("id") == "kol_men_ratio" || $(input).prop("id") == "kol_women_ratio") {
            $(input).val("50").trigger("change");
        } else {
            $(input).val("0").trigger("change");
        }
    });

    var trList = $("#media_table").find("tbody").find("tr");
    $.each(trList, function (index, item) {
        $(item).remove();
    });


}

function loadMedia() {
    var formData = {
        option_uid: 'media'
    }

    $.ajax({
        url: "/Api/optionItemList",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.optionItems;
 
                $.each(obj, function (i, item) {
                    $("#media_select").append($("<option>", {
                        value: item.optionItem_uid,
                        text: item.optionItem_name 
                    }));
                });

                
            } else {
                alert(data.message);

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

function loadKolFansTypeCheckboxItem() {
    var formData = {
        option_uid: 'fansType'
    }

    $.ajax({
        url: "/Api/optionItemList",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.optionItems;
                var items = "";
                $.each(obj, function (index, item) {
                    items += optionItemHtml(item);
                });

                items = "<label class=\"d-block\">粉絲輪廓</label>" + items;


                $('#kolFansType_div').children().first().html(items);

            } else {
                alert(data.message);

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

function loadKolStyleCheckboxItem() {
    var formData = {
        option_uid: 'kolStyle'
    }

    $.ajax({
        url: "/Api/optionItemList",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.optionItems;
                var items = "";
                $.each(obj, function (index, item) {
                    items += optionItemHtml(item);
                });

                items = "<label class=\"d-block\">KOL 類型</label>" + items;


                $('#kolStyle_div').children().html(items);

            } else {
                alert(data.message);

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

function loadKolMakeupCheckboxItem() {
    var formData = {
        option_uid: 'kolMakeup'
    }

    $.ajax({
        url: "/Api/optionItemList",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.optionItems;
                var items = "";
                $.each(obj, function (index, item) {
                    items += optionItemHtml(item);
                });

                items = "<label class=\"d-block\">成員</label>" + items;


                $('#kolMakeup_div').children().html(items);

            } else {
                alert(data.message);

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

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

    html += "<div class=\"custom-control custom-control-inline custom-checkbox\">";
    html += "   <input type=\"checkbox\" class=\"custom-control-input\" name=\"" + item.option_uid + "[]\" value=\"" + item.optionItem_uid + "\" id=\"" + item.optionItem_uid + "\"> <label class=\"custom-control-label\" for=\"" + item.optionItem_uid + "\">" + item.optionItem_name + "</label>";
    html += "</div>";

    return html;
}