var mediaTr;
var delMedia;
var mainTable;
var mainRowID;
var mainPos;
var specTr;
var linkTr;
var photoTr;

var kolProjectTable;
var kolProjectRowID;
var kolProjectPos;
$(document).ready(function () {
    delMedia = '';
    loadTagsInput();
    loadTagsInput2();
    loadMedia();
    loadKolMakeupCheckboxItem();
    loadKolStyleCheckboxItem();
    loadKolFansTypeCheckboxItem();
    loadDataTable();
    loadCooperateItem();
    loadyearmonth();
    loadprojectList();
    clearKolProjectTable();
    initSubPhotoUpload();
    loadSubDataTable();
    initFileUpload();

    $('input[type=radio][name=kolProject_isExec]').change(function () {
        if (this.value == 'Y') {
            // ...
            $('#fileDiv').show();
        }
        else {
            // ...
            $('#fileDiv').hide();
        }
    });

    $('#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 tags = $('#kol_tags').val();
        var tagsStr = "";
        var err_msg = "";
        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() + ",";
        });

        $.each(tags, function (key, value) {
            tagsStr = tagsStr + value + ",";

        });

        $('#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: RemoveComma($(this).find('td').eq(4).text().trim())
            }
            kolMedia_accountName = $(this).find('td').eq(2).text().trim();
            kolMedia_url22 = $(this).find('td').eq(1).text().trim();
            if ($(this).find('td').eq(0).text().trim() == 'YouTube') {
                if (kolMedia_accountName.substring(0, 1) != '@') {
                    err_msg += $(this).find('td').eq(3).text().trim()  + " 此YouTube頻道資料有誤，YouTube的帳號名稱第一碼應該為@字元\n";

                }

                if (kolMedia_url22.indexOf("youtube") < 0) {
                    err_msg += kolMedia_url22 + " 此Youtube網址有誤\n";

                }
            }

            if ($(this).find('td').eq(0).text().trim() == 'Facebook') {
                if (kolMedia_url22.substring(0, 4) != 'http') {
                    err_msg += $(this).find('td').eq(3).text().trim() + " 此Facebook網址有誤\n";

                }
            }

            mediaArray.push(item);
        });

        

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

        mainTable = $('#dt-responsive').dataTable();

        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,
            kolTags: tagsStr,
            mediaArrayJson: JSON.stringify(mediaArray)
        }

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

                    if (method == "add") {
                        mainTable.fnAddData(obj);
                    }

                    if (method == "edit") {
                        mainTable.fnUpdate(obj, mainPos);
                    }

                    $('#clientNewModal').modal('toggle');
                } 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 (RemoveComma(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"> ' + AppendComma(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(AppendComma(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');
    });

    $('#addCutBtn').on('click', function () {
        //var src = $('#fileupload-avatar').parent().children('img').prop('src');
        //var origin = location.origin;
        //src = src.replace(origin, '');
        //alert(src);
        $('#fileupload-subPhoto').parent().children('img').prop('src', '/assets/images/avatars/unknown-profile.jpg');

        $('#photo_method').val('add');
        $('#photo_title').val('').trigger('change');
        $('#clientCutPhotoModal').modal('toggle');
    });

    $('#addFileBtn').on('click', function () {
        $('#fileupload-uploadFile').parent().children('img').prop('src', '/assets/images/upload-file.jpg');
        $('#fileupload-uploadFile').parent().show();
        $('#file_url').remove();
        
        $('#file_method').val('add');

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

    $('#kolProjectLink_url').on('change', function () {
        if ($('#kolProjectLink_text').val() == '') { 
            $('#kolProjectLink_text').val($('#kolProjectLink_url').val()).trigger('change');
        }   
    });

    //專案合作狀況儲存
    $('#kolProjectSaveBtn').on('click', function () {
        var project_year = $('#project_year').val();
        var project_month = $('#project_month').val();
        var project_uid = $('#project_select').val();
        var kol_uid = $('#kolProject_kol_uid').val();
        var kolProject_uid = $('#kolProject_uid').val();
        var method = $('#kolProject_method').val();
        var cooperateTypeStr = "";
        var kolProjectPriceArray = [];
        var kolProject_isExec = $("input[type='radio'][name='kolProject_isExec']:checked").val();
        var kolProject_noExecReason = '';
        var kolProjectEvaluateStr = '';
        var kolProjectLinkArray = [];
        var kolProjectImageArray = [];
        var kolProjectFileArray = [];
        var kolProject_memo = $('#kolProject_memo').val();

        if (kolProject_isExec == 'N') {
            kolProject_noExecReason = $('#kolProject_noExecReason').val();
        }


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

        $('#price_table tbody tr').each(function () {
            var item = {
                optionItem_uid: $(this).find('td').eq(6).text().trim(),
                mediaItem_uid: $(this).find('td').eq(7).text().trim(),
                kolProjectPrice_other: $(this).find('td').eq(5).text().trim(),
                kolProjectPrice_num: $(this).find('td').eq(2).text().trim(),
                kolProjectPrice_cost: RemoveComma($(this).find('td').eq(3).text().trim()),
                kolProjectPrice_date: $(this).find('td').eq(4).text().trim()
            }

            kolProjectPriceArray.push(item);
        });

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

        $('#link_table tbody tr').each(function () {
            var item = {
                kolProjectLink_url: $(this).find('td').eq(1).text().trim(),
                kolProjectLink_text: $(this).find('td').eq(2).text().trim()           
            }

            kolProjectLinkArray.push(item);
        });

        $('#file_table tbody tr').each(function () {
            var item = {
                file_uid: $(this).find('td').eq(2).text().trim(),
                kolProjectFile_path: '/Api/fileService?uid=' + $(this).find('td').eq(2).text().trim(),
                kolProjectFile_originFileName: $(this).find('td').eq(3).text().trim()
            }

            kolProjectFileArray.push(item);
        });

        $('#cut_table tbody tr').each(function () {
            var tmpphoto_path = $(this).find('td').eq(0).find('img').prop('src').trim();
            tmpphoto_path = tmpphoto_path.replace(origin, '');
            
            var item = {
                kolProjectImage_photo: tmpphoto_path,
                kolProjectImage_desc: $(this).find('td').eq(1).text().trim()
            }

            kolProjectImageArray.push(item);
        });

        var kolProjectPriceArrayJson = JSON.stringify(kolProjectPriceArray);
        var kolProjectLinkArrayJson = JSON.stringify(kolProjectLinkArray);
        var kolProjectImageArrayJson = JSON.stringify(kolProjectImageArray);
        var kolProjectFileArrayJson = JSON.stringify(kolProjectFileArray);

        var err_msg = "";

        if (project_uid == "") {
            err_msg += "請選擇合作的專案!\n";
        }

        if (cooperateTypeStr == "") {
            err_msg += "請勾選合作刑式!\n";
        }
        if (kolProjectPriceArray.length == 0) {
            err_msg += "請填寫至少一項報價!\n";
        }

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

        var formData = {
            method: method,
            project_uid: project_uid,
            kol_uid: kol_uid,
            kolProject_uid: kolProject_uid,
            cooperateTypeStr: cooperateTypeStr,
            kolProjectPriceArrayJson: kolProjectPriceArrayJson,
            kolProject_isExec: kolProject_isExec,
            kolProject_noExecReason: kolProject_noExecReason,
            kolProjectEvaluateStr: kolProjectEvaluateStr,
            kolProjectLinkArrayJson: kolProjectLinkArrayJson,
            kolProjectImageArrayJson: kolProjectImageArrayJson,
            kolProjectFileArrayJson: kolProjectFileArrayJson,
            kolProject_memo: kolProject_memo
        }


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

                    if (method == "add") {
                        kolProjectTable.fnAddData(obj);
                    }

                    if (method == "edit") {
                        kolProjectTable.fnUpdate(obj, kolProjectPos);
                    }

                    $('#clientNewKolProjectModal').modal('toggle');
                } else {
                    alert(data.message);

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

    //合約儲存
    $('#clientFileSaveBtn').on('click', function () {
        var file_uid = $('#file_uid').val();
        var file_originName = $('#origin_fileName').val();
        var file_uploadName = $('#upload_fileName').val();

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

        var err_msg = "";

        if (src == '/assets/images/upload-file.jpg') {
            err_msg += "請上傳合約!\n";
        }

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

        var ret = '';

        ret += '    <a href="' + file_uploadName + '" target="_blank">' + file_originName + '</a>';
      

        var trHtml = "";
        trHtml += '<tr>';
        trHtml += '     <td class="align-middle">  ' + ret + ' </td>';

        trHtml += '     <td class="align-middle" style="display: none;"> ' + file_uid + ' </td>';
        trHtml += '     <td class="align-middle" style="display: none;"> ' + file_uid + ' </td>';
        trHtml += '     <td class="align-middle" style="display: none;"> ' + file_originName + ' </td>';
        trHtml += '     <td class="align-middle text-right">';
        //trHtml += '         <button type="button" data-uid="" media-uid="' + photo_uid + '" data-method="edit" onclick="buttonPhotoClick(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="' + file_uid + '" data-method="del" onclick="buttonFileClick(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>';

        $('#file_table tbody').append(trHtml);
        $('#clientFileModal').modal('toggle');

    });

    //截圖儲存
    $('#clientCutPhotoSaveBtn').on('click', function () {
        var method = $('#photo_method').val();
       
        var photo_uid = $('#photo_uid').val();
        var photo_title = $('#photo_title').val();
        var sub_photo = "";

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

        var err_msg = "";

        

        if (src == '/assets/images/avatars/unknown-profile.jpg') {
            err_msg += "請選擇要顯示的圖片!\n";
        }

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

        if (method == "add") {
            var ret = '';
            ret += '<div class="user-avatar user-avatar-xxl">';
            ret += '    <a href="' + sub_photo + '" target="_blank"><img style="border: 0;" src="' + sub_photo + '" alt=""></a>';
            ret += '</div>';

            var trHtml = "";
            trHtml += '<tr>';
            trHtml += '     <td class="align-middle">  ' + ret + ' </td>';

            trHtml += '     <td class="align-middle"> ' + photo_title + ' </td>';
            trHtml += '     <td class="align-middle text-right">';
            trHtml += '         <button type="button" data-uid="" media-uid="' + photo_uid + '" data-method="edit" onclick="buttonPhotoClick(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="' + photo_uid + '" data-method="del" onclick="buttonPhotoClick(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>';

            $('#cut_table tbody').append(trHtml);
            $('#clientCutPhotoModal').modal('toggle');

        }

        if (method == "edit") {
            photoTr.find('td').eq(0).find('a').prop('href', sub_photo);
            photoTr.find('td').eq(0).find('img').prop('src', sub_photo);
            photoTr.find('td').eq(1).text(photo_title);



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

    //上刊連結儲存
    $('#clientKolProjectUrlDialogSaveBtn').on('click', function () {
        var method = $('#kolProjectUrl_method').val();
        var url = $('#kolProjectLink_url').val();
        var url_text = $('#kolProjectLink_text').val();

        var err_msg = "";

        if (url == "") {
            err_msg += "請輸入網址\n";
        }

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

        if (url_text == "") {
            url_text = url;
        }

        if (method == 'add') {
            var trHtml = "";
            trHtml += '<tr>';
            trHtml += '     <td class="align-middle">  <a href="' + url + '" target="_blank" class="link">' + url_text + '</a></td>';
            trHtml += '     <td class="align-middle" style="display: none;"> ' + url + ' </td>';
            trHtml += '     <td class="align-middle" style="display: none;"> ' + url_text + ' </td>';
           
            trHtml += '     <td class="align-middle text-right">';
            trHtml += '         <button type="button" data-uid="" media-uid="" data-method="edit" onclick="linkEditClick(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="" data-method="del" onclick="linkEditClick(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>';

            $('#link_table tbody').append(trHtml);
            $('#clientKolProjectUrlModal').modal('toggle');
        }

        if (method == 'edit') {
            linkTr.find('td').eq(0).children('a').eq(0).attr('href', url).text(url_text);
            linkTr.find('td').eq(1).text(url);
            linkTr.find('td').eq(2).text(url_text);
            $('#clientKolProjectUrlModal').modal('toggle');
        }

    });

    //報價規則儲存
    $('#kolProjectPriceDialogSaveBtn').on('click', function () {
        var method = $('#kolProjectPrice_method').val();
        var kolProjectPrice_uid = $('#kolProjectPrice_uid').val();
        var kolProjectMedia_selectText = $("#kolProjectMedia_select option:selected").text();
        var kolProjectMedia_select = $("#kolProjectMedia_select").val();
        var kolProjectSpec_select = $("#kolProjectSpec_select").val();
        var kolProjectSpec_selectText = $("#kolProjectSpec_select option:selected").text();
        var optionItem_uid = $("#kolProjectPrice_optionItem_uid").val();
        var kolProjectPrice_mediaItem_uid = $("#kolProjectPrice_mediaItem_uid").val();
        var kolProjectPrice_other = $("#kolProjectPrice_other").val(); 
        var kolProjectPrice_num = $("#kolProjectPrice_num").val();
        var kolProjectPrice_cost = $("#kolProjectPrice_cost").val();
        var kolProjectPrice_date = $("#kolProjectPrice_date").val();

        var err_msg = "";

        if (kolProjectMedia_select == "") {
            err_msg += "請選擇合作平台\n";
        }

        if (kolProjectSpec_select == "") {
            err_msg += "請選擇規格\n";
        }

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

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

        if (method == 'add') {
            var trHtml = "";
            trHtml += '<tr>';
            trHtml += '     <td class="align-middle">  ' + kolProjectMedia_selectText + ' </td>';
            trHtml += '     <td class="align-middle"> ' + kolProjectSpec_selectText + ' </td>';
            trHtml += '     <td class="align-middle" style="text-align: right;"> ' + kolProjectPrice_num + ' </td>';
            trHtml += '     <td class="align-middle" style="text-align: right;"> ' + AppendComma(kolProjectPrice_cost) + ' </td>';
            trHtml += '     <td class="align-middle"> ' + kolProjectPrice_date + ' </td>';
            trHtml += '     <td class="align-middle" style="display: none;"> ' + kolProjectPrice_other + ' </td>';
            trHtml += '     <td class="align-middle" style="display: none;"> ' + kolProjectMedia_select + ' </td>';
            trHtml += '     <td class="align-middle" style="display: none;"> ' + kolProjectSpec_select + ' </td>';
            trHtml += '     <td class="align-middle text-right">';
            trHtml += '         <input type="hidden" data-name="other" style="display: none;" other-value="' + kolProjectPrice_other + '">';
            trHtml += '         <button type="button" data-uid="" media-uid="' + kolProjectMedia_select + '" mediaItem-uid="' + kolProjectSpec_select + '" data-method="edit" onclick="specButtonClick(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="' + kolProjectMedia_select + '" mediaItem-uid="' + kolProjectSpec_select + '" data-method="del" onclick="specButtonClick(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>';

            $('#price_table tbody').append(trHtml);
            $('#clientKolProjectMediaPriceEditModal').modal('toggle');
          
        }

        if (method == 'edit') {
            specTr.find('td').eq(0).text(kolProjectMedia_selectText);
            specTr.find('td').eq(1).text(kolProjectSpec_selectText);
            specTr.find('td').eq(2).text(kolProjectPrice_num);
            specTr.find('td').eq(3).text(AppendComma(kolProjectPrice_cost));
            specTr.find('td').eq(4).text(kolProjectPrice_date);
            specTr.find('td').eq(5).text(kolProjectPrice_other);
            specTr.find('td').eq(6).text(kolProjectMedia_select);
            specTr.find('td').eq(7).text(kolProjectSpec_select);
            var method1 = specTr.find('td').eq(8).children('button').eq(0).attr('media-uid', kolProjectMedia_select).attr('mediaItem-uid', kolProjectSpec_select);
            var mehtod2 = specTr.find('td').eq(8).children('button').eq(1).attr('media-uid', kolProjectMedia_select).attr('mediaItem-uid', kolProjectSpec_select);
            $('#clientKolProjectMediaPriceEditModal').modal('toggle');
        }

    });

    //重設鍵
    $('#resetBtn').on('click', function () {
        

        $.ajax({
            url: "/Api/kolList",
            type: "post",
            data: null,
            success: function (data, textStatus, jqXHR) {
                var obj = data.kolList;
                if (data.ret == "yes") {
                    $('#adv-search-btn').trigger('click');

                    $("#collapseOne1 input[type=checkbox]").each(function (index, checkbox) {
                        checkbox.checked = false;
                    });

                    $('#kol_tags2').empty();
                    $('#kol_tags2').val(null).trigger('change');

                    $('#dt-responsive').dataTable().fnClearTable();
                    if (data.kolList.length > 0) {

                        $('#dt-responsive').dataTable().fnAddData(data.kolList);


                    }
                } else {
                    alert(data.message);

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

    //篩選鍵
    $('#filiterBtn').on('click', function () {
        var kolMedia = [];
        var kolMakeup = [];
        var kolStyle = [];
        var kolFansType = [];
        var kolTags = [];
        var tags = $('#kol_tags2').val();
        var kolMediaJson = "";
        var kolMakeupJson = "";
        var kolStyleJson = "";
        var kolFansTypeJson = "";
        var kolTagsJson = "";

        $.each($('input[name="media2[]"]:checked'), function () {
            var item = {
                'optionItem': $(this).val()
            }


            kolMedia.push(item);
        });

        $.each($('input[name="kolMakeup2[]"]:checked'), function () {
            var item = {
                'optionItem': $(this).val()
            }


            kolMakeup.push(item);
        });

        $.each($('input[name="kolStyle2[]"]:checked'), function () {
            var item = {
                'optionItem': $(this).val()
            }


            kolStyle.push(item);
        });

        $.each($('input[name="fansType2[]"]:checked'), function () {
            var item = {
                'optionItem': $(this).val()
            }


            kolFansType.push(item);
        });

        $.each(tags, function (key, value) {
            var item = {
                'tag_uid': value
            }
            kolTags.push(item);
        });

        var hasFiliter = 'N';

        if (kolMedia.length > 0) {
            kolMediaJson = JSON.stringify(kolMedia);
            hasFiliter = 'Y';
        }

        if (kolMakeup.length > 0) {
            kolMakeupJson = JSON.stringify(kolMakeup);
            hasFiliter = 'Y';
        }

        if (kolStyle.length > 0) {
            kolStyleJson = JSON.stringify(kolStyle);
            hasFiliter = 'Y';
        }

        if (kolFansType.length > 0) {
            kolFansTypeJson = JSON.stringify(kolFansType);
            hasFiliter = 'Y';
        }

        if (kolTags.length > 0) {
            kolTagsJson = JSON.stringify(kolTags);
            hasFiliter = 'Y';
        }

        if (hasFiliter == 'N') {
            alert('請勾選想要篩選的條件!');
            return;
        }

        var formData = {
            is_filiter: 'Y',
            kolMediaJson: kolMediaJson,
            kolMakeupJson: kolMakeupJson,
            kolStyleJson: kolStyleJson,
            kolFansTypeJson: kolFansTypeJson,
            kolTagsJson: kolTagsJson
        }

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

                    $('#dt-responsive').dataTable().fnClearTable();
                    if (data.kolList.length > 0) {

                        $('#dt-responsive').dataTable().fnAddData(data.kolList);


                    }
                } else {
                    alert(data.message);

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

    $("#project_year").on('change', function () {
        loadprojectList();
    });

    $("#project_month").on('change', function () {
        loadprojectList();
    });

    $("#kolProjectMedia_select").on('change', function () {
        loadkolMediaSpec();

        if ($('#kolProjectMedia_select').val() == "item_other") {
            $('#kolProjectSpec_other').show();
        } else {
            $('#kolProjectSpec_other').hide();
        }
    });

    

    $('#kolProjectNewBtn').on('click', function () {
        clearKolProjectTable();
        $('#kolProject_method').val('add');
        $('#clientNewKolProjectModal').modal('toggle');
    });

    $("#addSpecBtn").on('click', function () {
        $('#kolProjectPrice_method').val('add');
        $('#kolProjectSpec_other').val('');
        $('#kolProjectSpec_other').hide();
        loadkolMediaSpec();
        $('#clientKolProjectMediaPriceEditModal').modal('toggle');
    });

    $('#addLinkBtn').on('click', function () {
        $('#kolProjectUrl_method').val('add');
        $('#kolProjectLink_url').val('').trigger('change');
        $('#kolProjectLink_text').val('').trigger('change');
        $('#clientKolProjectUrlModal').modal('toggle');
    });
    function loadDataTable() {
        var dataTables = {
            init: function init() {

                this.bindUIActions();
            },
            bindUIActions: function bindUIActions() {

                // event handlers
                this.table = this.handleDataTables();

                // add buttons
                //this.table.buttons().container().appendTo('#dt-buttons').unwrap();
            },
            handleDataTables: function handleDataTables() {
                //$('#myTable').append("<tfoot><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tfoot>");
                return $('#dt-responsive').DataTable({
                    dom: '<\'text-muted\'Bif>\n        <\'table-responsive\'trl>\n        <\'mt-4\'p>',
                    lengthChange: true,
                    lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
                    pageLength: 25,
                    buttons: [
                        // {
                        //    'text': '<i class="fa fa-id-badge fa-fw" aria-hidden="true"></i>',
                        //    'action': function (e, dt, node) {

                        //        $(dt.table().node()).toggleClass('cards');
                        //        $('.fa', node).toggleClass(['fa-table', 'fa-id-badge']);

                        //        dt.draw('page');
                        //    },
                        //    'className': 'btn-sm',
                        //    'attr': {
                        //        'title': 'Change views',
                        //    }
                        //}
                    ],
                    language: {
                        paginate: {
                            previous: '<i class="fa fa-lg fa-angle-left"></i>',
                            next: '<i class="fa fa-lg fa-angle-right"></i>'
                        },
                        buttons: {
                            copyTitle: 'Data copied',
                            copyKeys: 'Use your keyboard or menu to select the copy command'
                        }
                    },
                    autoWidth: false,
                    ajax: {
                        url: '/Api/kolList',
                        type: 'POST',
                        data: function (d) {
                            Object.assign(d, {
                                bar_area: $('#bar_area').val(),
                                is_lottery: $('#isLottery').val()
                            });

                            return d;
                        },
                        dataSrc: 'kolList'
                    },
                    rowId: 'kol_uid',
                    deferRender: true,
                    initComplete: function () {
                        $('#dt-responsive').on('click', 'a', function () {
                            buttonClick2(this);
                        });

                        $('#dt-responsive').on('click', 'button', function () {
                            buttonClick2(this);
                        });

                        $('#dt-responsive').on('click', 'input[name="selectedRow[]"]', function () {
                            checkboxClick(this);
                        });
                    },
                    order: [[5, 'desc']],
                    info: true,
                    search: "搜尋:",
                    searching: true,
                    columns: [{ data: 'kol_photo', className: 'align-middle', orderable: false, searchable: false },
                        { data: 'kol_name', className: 'align-middle text-left', orderable: true, searchable: true },
                        { data: 'kol_descript', className: 'align-middle text-left', orderable: true, searchable: true },
                        { data: 'kol_contact1', className: 'align-middle text-left', orderable: false, searchable: true },
                        { data: 'kol_contact2', className: 'align-middle text-left', orderable: false, searchable: true },
                        { data: 'kol_modifydate', className: 'align-middle text-left', orderable: false, searchable: true },
                        { data: 'kol_uid', className: 'align-middle text-center', orderable: false, searchable: false }],
                    columnDefs: [
                        {
                            targets: 0,
                            className: 'align-middle text-center',
                            orderable: false,
                            searchable: false,
                            render: function render(data, type, row, meta) {
                                var ret = '';
                                ret += '<div class="user-avatar user-avatar-xxl">';
                                ret += '    <a href="javascript: void(0);" data-uid="' + row.kol_uid + '" data-method="preview"><img src="' + row.kol_photo + '" alt=""></a>';
                                ret += '</div>';
                                return ret;
                                //return row.gift_city + row.gift_area + row.gift_address;
                                //var editRet = '<a id="table-btn" class="btn btn-sm btn-secondary" href="javascript: void(0);" data-method="edit" data-uid="' + row.quotation_serial + '"><i class="fa fa-pencil-alt"></i></a>          <a id="table-btn" class="btn btn-sm btn-secondary" href="javascript: void(0);" data-method="setting" data-uid="' + row.quotation_serial + '"><i class="fas fa-cog"></i></a>';

                                //if (row.quotationUser_perm == "A" || row.quotationUser_perm == "D" || row.quotationUser_perm == "admin" || row.quotationUser_perm == "pro") {
                                //    editRet = editRet + '          <a  id="table-btn" class="btn btn-sm btn-secondary" href="javascript: void(0);" data-method="del" data-uid="' + row.quotation_serial + '"><i class="far fa-trash-alt"></i></a>';
                                //}
                                //return editRet;
                            }
                        }
                        , {
                            targets: 2,
                            orderable: false,
                            searchable: false,
                            render: function render(data, type, row, meta) {
                                var ret = '';

                                $.each(row.makeups, function (key, value) {
                                    ret += value.optionItem_name + '/';
                                }); 

                                ret = ret.replace(/^\/+|\/+$/g, '');

                                return ret;

                                //return '<a href="javascript: void(0); " data-method="edit" data-uid="' + row.company_uid + '">' + row.company_name + '</a>';
                            }
                        }
                        , {
                            targets: 4,
                            orderable: false,
                            searchable: true,
                            render: function render(data, type, row, meta) {
                                var ret = '';

                                $.each(row.tags, function (key, value) {
                                    ret += '<span class="badge badge-pill badge-info">#' + value.tag_text + '</span>&nbsp;';
                                });

                                return ret;
                            }
                        }
                        , {
                            targets: 5,
                            orderable: false,
                            searchable: false,
                            render: function render(data, type, row, meta) {
                                return (new Date(row.kol_modifydate)).format("yyyy/MM/dd hh:mm:ss");
                            }
                        }
                        , {
                            targets: 6,
                            orderable: false,
                            searchable: false,
                            render: function render(data, type, row, meta) {
                                var ret = '';
                                ret += '<button type="button" data-uid="' + row.kol_uid + '" data-method="case" class="btn btn-sm btn-icon btn-secondary" ><i class="fa fa-briefcase"></i> <span class="sr-only">Case</span></button>';
                                ret += '<button type="button" data-uid="' + row.kol_uid + '" data-method="edit" class="btn btn-sm btn-icon btn-secondary" ><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button>';
                                ret += '<button type="button" data-uid="' + row.kol_uid + '" data-method="del" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>';
                                return ret;
                            }
                        }
                        //, {
                        //    targets: 2,
                        //    orderable: false,
                        //    searchable: false,
                        //    render: function render(data, type, row, meta) {
                        //        return row.company_serial;
                        //    }
                        //}, {
                        //    targets: 3,
                        //    orderable: false,
                        //    searchable: false,
                        //    render: function render(data, type, row, meta) {

                        //        if (row.company_enabled == "Y") {
                        //            return '<label class="switcher-control switcher-control-lg"><input type="checkbox" class="switcher-input" checked disabled> <span class="switcher-indicator"></span> <span class="switcher-label-on">啟用</span> <span class="switcher-label-off">停用</span></label>';
                        //        } else {
                        //            return '<label class="switcher-control switcher-control-lg"><input type="checkbox" class="switcher-input" disabled> <span class="switcher-indicator"></span> <span class="switcher-label-on">啟用</span> <span class="switcher-label-off">停用</span></label>';
                        //        }
                        //    }
                        //}, {
                        //    targets: 4,
                        //    orderable: false,
                        //    searchable: false,
                        //    render: function render(data, type, row, meta) {
                        //        return (new Date(row.company_createdate)).format("yyyy/MM/dd hh:mm:ss");
                        //    }
                        //}, {
                        //    targets: 5,
                        //    orderable: false,
                        //    searchable: false,
                        //    render: function render(data, type, row, meta) {
                        //        var editRet = '<a class="btn btn-sm btn-secondary" href="javascript: void(0);" data-method="edit" data-uid="' + row.company_uid + '" ><i class="fa fa-pencil-alt"></i></a>          <a  class="btn btn-sm btn-secondary" style="display: none;" href="javascript: void(0);" data-method="del" data-uid="' + row.company_uid + '" ><i class="far fa-trash-alt"></i></a>';


                        //        return editRet;
                        //    }
                        //}

                    ],
                    responsive: {
                        details: {
                            display: $.fn.dataTable.Responsive.display.childRowImmediate,
                            type: ''
                        }
                    }
                });
            },
            handleSearchRecords: function handleSearchRecords() {
                var self = this;

                $('#table-search, #filterBy').on('keyup change focus', function (e) {
                    var filterBy = $('#filterBy').val();
                    var hasFilter = filterBy !== '';
                    var value = $('#table-search').val();

                    self.table.search('').columns().search('').draw();

                    if (hasFilter) {
                        self.table.columns(filterBy).search(value).draw();
                    } else {
                        self.table.search(value).draw();
                    }

                });
            }
        }

        dataTables.init();
    }

    function loadSubDataTable() {
        var dataTablesKolProject = {
            init: function init() {

                this.bindUIActions();
            },
            bindUIActions: function bindUIActions() {

                // event handlers
                this.table = this.handleDataTables();

                // add buttons
                //this.table.buttons().container().appendTo('#dt-buttons').unwrap();
            },
            handleDataTables: function handleDataTables() {
                //$('#myTable').append("<tfoot><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tfoot>");
                return $('#dt-responsive-kolProject').DataTable({
                    dom: '<\'text-muted\'Bif>\n        <\'table-responsive\'trl>\n        <\'mt-4\'p>',
                    lengthChange: false,
                    lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
                    pageLength: 25,
                    paging: false,
                    buttons: [
                    ],
                    language: {
                        paginate: {
                            previous: '<i class="fa fa-lg fa-angle-left"></i>',
                            next: '<i class="fa fa-lg fa-angle-right"></i>'
                        },
                        buttons: {
                            copyTitle: 'Data copied',
                            copyKeys: 'Use your keyboard or menu to select the copy command'
                        }
                    },
                    autoWidth: false,
                    rowId: 'kolProject.kolProject_uid',
                    deferRender: true,
                    initComplete: function () {
                        $('#dt-responsive-kolProject').on('click', 'button', function () {
                            kolProjectTableButtonClick(this);
                        });
                        $('#dt-responsive-kolProject').on('click', 'a', function () {
                            kolProjectTableButtonClick(this);
                        });
                    },
                    order: [[4, 'desc']],
                    info: false,
                    search: "搜尋:",
                    searching: false,                  
                    columnDefs: [
                        {
                            targets: 0,
                            className: 'align-middle text-left',
                            orderable: false,
                            searchable: true,
                            render: function render(data, type, row, meta) {

                                
                                return '<a href="javascript: void(0);" data-uid="' + row.kolProject.kolProject_uid + '" data-method="preview" >' + row.project.project_name + '</a>';

                            }
                        },
                        {
                            targets: 1,
                            className: 'align-middle text-left',
                            orderable: false,
                            searchable: false,
                            render: function render(data, type, row, meta) {

                                if (row.kolProject.kolProject_isExec == 'Y') {
                                    return '合作執行';
                                }

                                if (row.kolProject.kolProject_isExec == 'N') {
                                    if (row.kolProject.kolProject_noExecReason == '') {
                                        return '未合作';
                                    } else {
                                        return '未合作 (' + row.kolProject.kolProject_noExecReason + ')';
                                    }
                                }

                                return '';
                                
                            }
                        }, {
                            targets: 2,
                            orderable: false,
                            searchable: true,
                            render: function render(data, type, row, meta) {
                                var retTxt = '';
                                $.each(row.kolProjectEvaluates, function () {
                                    retTxt = retTxt + this.kolProjectEvaluate_text + ", ";
                                });

                                retTxt = retTxt.replace(/,\s*$/, "");

                                return retTxt;
                            }
                        }, {
                            targets: 3,
                            orderable: false,
                            searchable: true,
                            render: function render(data, type, row, meta) {
                                

                                return row.kolProject.user_name;
                            }
                        }, {
                            targets: 4,
                            orderable: false,
                            searchable: true,
                            render: function render(data, type, row, meta) {

                                return (new Date(row.kolProject.kolProject_modifydate)).format("yyyy/MM/dd hh:mm:ss");
                            
                            }
                        }, {
                            targets: 5,
                            orderable: false,
                            searchable: false,
                            render: function render(data, type, row, meta) {
                                var ret = '';

                                ret += '<button type="button" data-uid="' + row.kolProject.kolProject_uid + '" data-method="edit" class="btn btn-sm btn-icon btn-secondary" ><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button>';
                                ret += '<button type="button" data-uid="' + row.kolProject.kolProject_uid + '" data-method="del" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>';
                                return ret;
                            }
                        }

                    ],
                    responsive: {
                        details: {
                            display: $.fn.dataTable.Responsive.display.childRowImmediate,
                            type: ''
                        }
                    }
                });
            },
            handleSearchRecords: function handleSearchRecords() {
                var self = this;

                $('#table-search, #filterBy').on('keyup change focus', function (e) {
                    var filterBy = $('#filterBy').val();
                    var hasFilter = filterBy !== '';
                    var value = $('#table-search').val();

                    self.table.search('').columns().search('').draw();

                    if (hasFilter) {
                        self.table.columns(filterBy).search(value).draw();
                    } else {
                        self.table.search(value).draw();
                    }

                });
            }
        }

        dataTablesKolProject.init();
    }

    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 loadTagsInput() {
        $('#kol_tags').select2({
            width: '100%',
            tags: true,
            tokenSeparators: [',', ' '],
            multiple: true,
            minimumInputLength: 2,
            placeholder: '輸入Tag用空白或逗號分隔關鍵字',
            ajax: {
                url: '/Api/queryTags',
                dataType: 'json',
                delay: 500,
                type: 'post',       
                // 要送出的資料
                data: function (params) {
                    // 在伺服器會得到一個 POST 'search' 
                    return {
                        search: params.term
                    };
                },
                processResults: function (data, params) {
                    console.log(data.data)

                    // 一定要返回 results 物件
                    return {
                        results: data.data,
                        
                    }
                }
            },
            createTag: function (params) {
                let term = $.trim(params.term);
                if (term.length < 2) {
                    return null
                }

                return {
                    id: term,
                    text: term,
                    // add indicator:
                    isNew: true
                };

                
            }
        });

        $('#kol_tags').on('select2:select', function (e) {
            let tag = e.params.data;
            var formData = {
                search: tag.text
            }

            $.ajax({
                url: "/Api/updateTags",
                type: "post",
                data: formData,
                success: function (data, textStatus, jqXHR) {
                    var obj = data.data;
                    if (data.ret == "yes") {
                        $('#kol_tags').find('[value="' + tag.text + '"]').replaceWith('<option selected value="' + obj.id + '">' + obj.text + '</option>');

                        
                    } else {
                        alert(data.message);

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

    function loadTagsInput2() {
        $('#kol_tags2').select2({
            width: '100%',
            tags: true,
            tokenSeparators: [',', ' '],
            multiple: true,
            minimumInputLength: 0,
            placeholder: '輸入Tag用空白或逗號分隔關鍵字',
            ajax: {
                url: '/Api/queryTags',
                dataType: 'json',
                delay: 500,
                type: 'post',
                // 要送出的資料
                data: function (params) {
                    // 在伺服器會得到一個 POST 'search' 
                    return {
                        search: params.term
                    };
                },
                processResults: function (data, params) {
                    console.log(data.data)

                    // 一定要返回 results 物件
                    return {
                        results: data.data,

                    }
                }
            },
            createTag: function (params) {
                return null;
                let term = $.trim(params.term);
                if (term.length < 2) {
                    return null
                }

                return {
                    id: term,
                    text: term,
                    // add indicator:
                    isNew: true
                };


            }
        });

        $('#kol_tags2').on('select2:select', function (e) {
            let tag = e.params.data;
            var formData = {
                search: tag.text
            }

            $.ajax({
                url: "/Api/updateTags",
                type: "post",
                data: formData,
                success: function (data, textStatus, jqXHR) {
                    var obj = data.data;
                    if (data.ret == "yes") {
                        $('#kol_tags').find('[value="' + tag.text + '"]').replaceWith('<option selected value="' + obj.id + '">' + obj.text + '</option>');


                    } else {
                        alert(data.message);

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

function loadCooperateItem() {
    var formData = {
        option_uid: 'cooperateType'
    }

    $.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 = "<h2 class=\"card-title\">合作形式</h2>" + items;


                $('#cooperateType_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 kolProjectTableButtonClick(obj) {
    var type = obj.getAttribute('data-method');
    var uid = obj.getAttribute('data-uid');

    kolProjectTable = $('#dt-responsive-kolProject').dataTable();
    kolProjectRowID = $('#' + uid);
    kolProjectPos = kolProjectTable.fnGetPosition($('#' + uid)[0]);

    if (type == "preview") {
        var formData = {
            method: "get",
            kolProject_uid: uid
        }

        $.ajax({
            url: "/Api/kolProjectAddEditDelGet",
            type: "post",
            data: formData,
            success: function (data, textStatus, jqXHR) {
                if (data.ret == "yes") {
                    var trList = $("#previewPrice_table").find("tbody").find("tr");
                    $.each(trList, function (index, item) {
                        $(item).remove();
                    });

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

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

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

                    var obj = data.data;


                    $('#previewProject_name').val('(' + obj.project.project_year + '年度' + obj.project.project_month + '月) ' + obj.project.project_name);

                    var cooperStr = '';

                    $.each(obj.kolCooperateTypeDetails, function () {
                        cooperStr += this.optionItem_name + '/';
                    });

                    cooperStr = cooperStr.replace(/\/+$/, '');

                    $('#previewProject_Cooper').val(cooperStr);

                    $.each(obj.kolProjectPrices, function () {
                        var trHtml = "";
                        trHtml += '<tr>';
                        trHtml += '     <td class="align-middle">  ' + this.optionItem_name + ' </td>';
                        trHtml += '     <td class="align-middle"> ' + this.mediaItem_name + ' </td>';
                        trHtml += '     <td class="align-middle" style="text-align: right;"> ' + this.kolProjectPrice_num + ' </td>';
                        trHtml += '     <td class="align-middle" style="text-align: right;"> ' + AppendComma(this.kolProjectPrice_cost) + ' </td>';
                        trHtml += '     <td class="align-middle"> ' + this.kolProjectPrice_date + ' </td>';
                        
                        trHtml += '</tr>';

                        $('#previewPrice_table tbody').append(trHtml);
                    });

                    if (obj.kolProject.kolProject_isExec == 'Y') {
                        $('#previewProject_isCooper').val('是');
                    } else {
                        $('#previewProject_isCooper').val('否');

                        if (obj.kolProject.kolProject_noExecReason != '') {
                            $('#previewProject_isCooper').val('否，原因【' + obj.kolProject.kolProject_noExecReason + '】');
                        }
                    }

                    $.each(obj.kolProjectFiles, function () {
                        var ret = '';

                        ret += '    <a href="' + this.kolProjectFile_path + '" target="_blank">' + this.kolProjectFile_originFileName + '</a>';


                        var trHtml = "";
                        trHtml += '<tr>';
                        trHtml += '     <td class="align-middle">  ' + ret + ' </td>';
                        trHtml += '</tr>';

                        $('#previewFile_table tbody').append(trHtml);
                    });

                    var qualityStr = '';

                    $.each(obj.kolProjectEvaluates, function (key, value) {
                        qualityStr += value.kolProjectEvaluate_text + "/";
                    });

                    qualityStr = qualityStr.replace(/\/+$/, '');

                    $('#previewProject_Quality').val(qualityStr);

                    $.each(obj.kolProjectLinks, function () {
                        var trHtml = "";
                        trHtml += '<tr>';
                        trHtml += '     <td class="align-middle">  <a href="' + this.kolProjectLink_url + '" target="_blank" class="link">' + this.kolProjectLink_text + '</a></td>';
                        
                        trHtml += '</tr>';

                        $('#previewLink_table tbody').append(trHtml);
                    });

                    $.each(obj.kolProjectImages, function () {
                        var ret = '';
                        ret += '<div class="user-avatar user-avatar-xxl">';
                        ret += '    <a href="' + this.kolProjectImage_photo + '" target="_blank"><img style="border: 0;" src="' + this.kolProjectImage_photo + '" alt=""></a>';
                        ret += '</div>';

                        var trHtml = "";
                        trHtml += '<tr>';
                        trHtml += '     <td class="align-middle">  ' + ret + ' </td>';

                        trHtml += '     <td class="align-middle"> ' + this.kolProjectImage_desc + ' </td>';
                        
                        trHtml += '</tr>';

                        $('#previewCut_table tbody').append(trHtml);
                    });


                    $('#previewkolProject_memo').val(obj.kolProject.kolProject_memo);

                    

                    

                    $('#clientCasePreviewModal').modal('toggle');
                } else {
                    alert(data.message);

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

    if (type == "edit") {
        $('#kolProject_method').val('edit');
        $('#kolProject_uid').val(uid);

        var formData = {
            method: "get",
            kolProject_uid: uid
        }

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

                    var obj = data.data;
                    $('#kolProject_method').val('edit');
                    $('#kolProject_uid').val(uid);
                    $('#project_year').val(obj.project.project_year).trigger('change');
                    $('#project_month').val(obj.project.project_month).trigger('change');

                    setTimeout(function () { $('#project_select').val(obj.project.project_uid).trigger('change'); }, 500);

                    $.each(obj.kolCooperateTypes, function () {
                        $("input:checkbox[value='" + this.optionItem_uid + "']").prop('checked', true);
                    });

                    $.each(obj.kolProjectPrices, function () {
                        var trHtml = "";
                        trHtml += '<tr>';
                        trHtml += '     <td class="align-middle">  ' + this.optionItem_name + ' </td>';
                        trHtml += '     <td class="align-middle"> ' + this.mediaItem_name + ' </td>';
                        trHtml += '     <td class="align-middle" style="text-align: right;"> ' + this.kolProjectPrice_num + ' </td>';
                        trHtml += '     <td class="align-middle" style="text-align: right;"> ' + AppendComma(this.kolProjectPrice_cost) + ' </td>';
                        trHtml += '     <td class="align-middle"> ' + this.kolProjectPrice_date + ' </td>';
                        trHtml += '     <td class="align-middle" style="display: none;"> ' + this.kolProjectPrice_other + ' </td>';
                        trHtml += '     <td class="align-middle" style="display: none;"> ' + this.optionItem_uid + ' </td>';
                        trHtml += '     <td class="align-middle" style="display: none;"> ' + this.mediaItem_uid + ' </td>';
                        trHtml += '     <td class="align-middle text-right">';
                        trHtml += '         <input type="hidden" data-name="other" style="display: none;" other-value="' + this.kolProjectPrice_other + '">';
                        trHtml += '         <button type="button" data-uid="" media-uid="' + this.optionItem_uid + '" mediaItem-uid="' + this.mediaItem_uid + '" data-method="edit" onclick="specButtonClick(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="' + this.optionItem_uid + '" mediaItem-uid="' + this.mediaItem_uid + '" data-method="del" onclick="specButtonClick(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>';

                        $('#price_table tbody').append(trHtml);
                    });

                    $.each(obj.kolProjectFiles, function () {
                        var ret = '';

                        ret += '    <a href="' + this.kolProjectFile_path + '" target="_blank">' + this.kolProjectFile_originFileName + '</a>';


                        var trHtml = "";
                        trHtml += '<tr>';
                        trHtml += '     <td class="align-middle">  ' + ret + ' </td>';

                        trHtml += '     <td class="align-middle" style="display: none;"> ' + this.file_uid + ' </td>';
                        trHtml += '     <td class="align-middle" style="display: none;"> ' + this.file_uid + ' </td>';
                        trHtml += '     <td class="align-middle" style="display: none;"> ' + this.kolProjectFile_originFileName + ' </td>';
                        trHtml += '     <td class="align-middle text-right">';
                        //trHtml += '         <button type="button" data-uid="" media-uid="' + photo_uid + '" data-method="edit" onclick="buttonPhotoClick(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="' + this.file_uid + '" data-method="del" onclick="buttonFileClick(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>';

                        $('#file_table tbody').append(trHtml);
                    });

                    $("input[name=kolProject_isExec][value=" + obj.kolProject.kolProject_isExec + "]").prop('checked', true).trigger('change');
                    $('#kolProject_noExecReason').val(obj.kolProject.kolProject_noExecReason);

                    $.each(obj.kolProjectEvaluates, function (key, value) {
                        $("input:checkbox[value='" + value.kolProjectEvaluate_text + "']").prop('checked', true);
                    });

                    $.each(obj.kolProjectLinks, function () {
                        var trHtml = "";
                        trHtml += '<tr>';
                        trHtml += '     <td class="align-middle">  <a href="' + this.kolProjectLink_url + '" target="_blank" class="link">' + this.kolProjectLink_text + '</a></td>';
                        trHtml += '     <td class="align-middle" style="display: none;"> ' + this.kolProjectLink_url + ' </td>';
                        trHtml += '     <td class="align-middle" style="display: none;"> ' + this.kolProjectLink_text + ' </td>';

                        trHtml += '     <td class="align-middle text-right">';
                        trHtml += '         <button type="button" data-uid="" media-uid="" data-method="edit" onclick="linkEditClick(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="" data-method="del" onclick="linkEditClick(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>';

                        $('#link_table tbody').append(trHtml);
                    });

                    $.each(obj.kolProjectImages, function () {
                        var ret = '';
                        ret += '<div class="user-avatar user-avatar-xxl">';
                        ret += '    <a href="' + this.kolProjectImage_photo + '" target="_blank"><img style="border: 0;" src="' + this.kolProjectImage_photo + '" alt=""></a>';
                        ret += '</div>';

                        var trHtml = "";
                        trHtml += '<tr>';
                        trHtml += '     <td class="align-middle">  ' + ret + ' </td>';

                        trHtml += '     <td class="align-middle"> ' + this.kolProjectImage_desc + ' </td>';
                        trHtml += '     <td class="align-middle text-right">';
                        trHtml += '         <button type="button" data-uid="" media-uid="' + this.kolProjectImage_uid + '" data-method="edit" onclick="buttonPhotoClick(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="' + this.kolProjectImage_uid + '" data-method="del" onclick="buttonPhotoClick(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>';

                        $('#cut_table tbody').append(trHtml);
                    });

                    $('#kolProject_memo').val(obj.kolProject.kolProject_memo);

                    

                    $('#clientNewKolProjectModal').modal('toggle');
                } else {
                    alert(data.message);

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

    if (type == "del") {
        if (confirm('確定刪除此筆資料? 刪除後將無任何方法回復!')) {
         

            var formData = {
                method: "del",
                kolProject_uid: uid
            }

            $.ajax({
                url: "/Api/kolProjectAddEditDelGet",
                type: "post",
                data: formData,
                success: function (data, textStatus, jqXHR) {
                    if (data.ret == "yes") {
                        var row = kolProjectTable.api().row(kolProjectRowID).remove().draw(false);
                        alert('刪除完成!');

                    } else {
                        alert(data.message);

                        if (data.err_code == "9999") {
                            location.href = "/Home/Index";
                        }
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('網路或伺服器發生錯誤，請稍後重試!');
                }
            });
        }
    }
}
function buttonPhotoClick(obj) {
    photoTr = $(obj).closest('tr');

    var dataMethod = obj.getAttribute('data-method');
    var dataUid = obj.getAttribute('data-uid');
    var photo_uid = obj.getAttribute('media-uid');
    var photo_src = photoTr.find('td').eq(0).find('img').prop('src').trim();
    var photo_title = photoTr.find('td').eq(1).text().trim();

    var origin = location.origin;
    photo_src = photo_src.replace(origin, '');

    if (dataMethod == 'edit') {
        $('#photo_method').val('edit');
        $('#photo_uid').val(photo_uid);

        $('#fileupload-subPhoto').parent().children('img').prop('src', photo_src);

        $('#photo_title').val(photo_title).trigger('change');

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

    if (dataMethod == "del") {
        if (confirm('確定刪除此筆資料?')) {


            photoTr.remove();
        }
    }
}
function linkEditClick(obj) {
    linkTr = $(obj).closest('tr');
    var dataMethod = obj.getAttribute('data-method');
    var url = linkTr.find('td').eq(1).text().trim();
    var url_text = linkTr.find('td').eq(2).text().trim();

    if (dataMethod == 'edit') {
        $('#kolProjectUrl_method').val('edit');
        $('#kolProjectLink_url').val(url).trigger('change');
        $('#kolProjectLink_text').val(url_text).trigger('change');
        $('#clientKolProjectUrlModal').modal('toggle');
    }

    if (dataMethod == "del") {
        if (confirm('確定刪除此筆資料?')) {
            
            linkTr.remove();
        }
    }
}

function buttonFileClick(obj) {
    linkTr = $(obj).closest('tr');
    var dataMethod = obj.getAttribute('data-method');
    if (dataMethod == "del") {
        if (confirm('確定刪除此筆資料?')) {

            linkTr.remove();
        }
    }
}
function specButtonClick(obj) {
    specTr = $(obj).closest('tr');

    var dataMethod = obj.getAttribute('data-method');
    var mediaItem_uid = obj.getAttribute('mediaItem-uid');
    var mediaUid = obj.getAttribute('media-uid');
    var other = specTr.find('td').eq(5).text().trim();
    var kolProjectMedia_selectText = specTr.find('td').eq(0).text().trim();
    var kolProjectSpec_selectText = specTr.find('td').eq(1).text().trim();
    var kolProjectPrice_num = specTr.find('td').eq(2).text().trim();
    var kolProjectPrice_cost = RemoveComma(specTr.find('td').eq(3).text().trim());
    var kolProjectPrice_date = specTr.find('td').eq(4).text().trim();

    if (dataMethod == 'edit') {
        $('#kolProjectPrice_method').val('edit');
        $('#k#lProjectPrice_optionItem_uid').val(mediaUid);
        $('#kolProjectPrice_mediaItem_uid').val(mediaItem_uid);

        $('#kolProjectMedia_select').val(mediaUid).trigger('change');
        $('#kolProjectPrice_other').val(other).trigger('change');
        $('#kolProjectPrice_num').val(kolProjectPrice_num).trigger('change');
        $('#kolProjectPrice_cost').val(kolProjectPrice_cost).trigger('change');
        $('#kolProjectPrice_date').val(kolProjectPrice_date).trigger('change');
        

        setTimeout(function () { $('#kolProjectSpec_select').val(mediaItem_uid); }, 500);

        $('#clientKolProjectMediaPriceEditModal').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 + ",";
            //}

            specTr.remove();
        }
    }
}
function buttonClick2(obj) {
    var type = obj.getAttribute('data-method');
    var uid = obj.getAttribute('data-uid');

    mainTable = $('#dt-responsive').dataTable();
    mainRowID = $('#' + uid);

    mainPos = mainTable.fnGetPosition($('#' + uid)[0]);

    if (type == "preview") {

        var formData = {
            method: "get",
            kol_uid: uid
        }

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

                    var obj = data.kol;
                   
                  
                    $('#previewKol_name').val(obj.kol_name).trigger('change');
                    $('#previewKol_descript').val(obj.kol_descript).trigger('change');
                    $('#previewKol_contact').html(obj.kol_contact1 + ' / ' + obj.kol_contact2).trigger('change');

                    var makeupStr = '';

                    $.each(obj.makeups, function (key, value) {
                        makeupStr += value.optionItem_name + ", ";
                    });

                    makeupStr = makeupStr.trim().replace(/,+$/, '');


                    $('#previewKol_member').html(makeupStr).trigger('change');

                    var kol_typestr = '';

                    $.each(obj.styles, function (key, value) {
                        kol_typestr += value.optionItem_name + ", ";
                    });

                    kol_typestr = kol_typestr.trim().replace(/,+$/, '');

                    $('#previewKol_type').html(makeupStr).trigger('change');

                    var Kol_fansstr = '';

                    $.each(obj.fansTypes, function (key, value) {
                        Kol_fansstr += value.optionItem_name + ", ";
                    });

                    Kol_fansstr = Kol_fansstr.trim().replace(/,+$/, '');

                    $('#previewKol_fans').html(Kol_fansstr).trigger('change');

                    $('#previewKol_sexualRatio').html(obj.kol_men_ratio + '% : ' + obj.kol_women_ratio + '%').trigger('change');
                    $('#13to17').html(obj.kol_13_17 + '%').trigger('change');
                    $('#18to24').html(obj.kol_18_24 + '%').trigger('change');
                    $('#25to34').html(obj.kol_25_34 + '%').trigger('change');
                    $('#35to44').html(obj.kol_35_44 + '%').trigger('change');
                    $('#45to54').html(obj.kol_45_54 + '%').trigger('change');
                    $('#55to64').html(obj.kol_55_64 + '%').trigger('change');
                    $('#64up').html(obj.kol_65 + '%').trigger('change');

                    $.each(obj.medias, function (key, value) {
                        var trHtml = "";
                        trHtml += '<tr>';
                        trHtml += '     <td class="align-middle">  ' + value.optionItem_name + ' </td>';
                        trHtml += '     <td class="align-middle"> <a href="' + value.kolMedia_url + '" target="_blank"> ' + value.kolMedia_url + '</a> </td>';
                        trHtml += '     <td class="align-middle"> ' + AppendComma(value.kolMedia_fansNum) + ' </td>';
                        trHtml += '</tr>';

                        $('#preview_media_table tbody').append(trHtml);
                        //$("input:checkbox[value='" + value.optionItem_uid + "']").prop('checked', true);
                    });

                    var ret = '';

                    $.each(obj.tags, function (key, value) {
                        ret += '<span class="badge badge-pill badge-info">#' + value.tag_text + '</span>&nbsp;';
                    });

                    $('#previewKol_tags').html(ret);

                    


                    $('#clientPreviewModal').modal('toggle');
                } else {
                    alert(data.message);

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

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

    if (type == "case") {

       
        $('#kolProject_kol_uid').val(uid);
        

        var formData = {
            kol_uid: uid
        }

        $.ajax({
            url: "/Api/kolProjectList",
            type: "post",
            data: formData,
            success: function (data, textStatus, jqXHR) {
                if (data.ret == "yes") {
                    $('#dt-responsive-kolProject').dataTable().fnClearTable();
                    if (data.datas.length > 0) {

                        $('#dt-responsive-kolProject').dataTable().fnAddData(data.datas);

                        
                    }

                    kolProjectTable = $('#dt-responsive-kolProject').dataTable();
                    $('#clientProjectModal').modal('toggle');
                } else {
                    alert(data.message);

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

    if (type == "del") {
        if (confirm('確定刪除此筆資料? 刪除後將無任何方法回復!')) {
            var formData = {
                method: "del",
                kol_uid: uid
            }

            $.ajax({
                url: "/Api/kolAddEditDelGet",
                type: "post",
                data: formData,
                success: function (data, textStatus, jqXHR) {
                    if (data.ret == "yes") {
                        var row = mainTable.api().row(mainRowID).remove().draw(false);
                        alert('刪除完成!');

                    } else {
                        alert(data.message);

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

    if (type == "edit") {
        $('#method').val('edit');
        $('#kol_uid').val(uid);

        var formData = {
            method: "get",
            kol_uid: uid
        }

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

                    var obj = data.kol;
                    $('#method').val('edit');
                    $('#kol_uid').val(uid);
                    $('#kol_name').val(obj.kol_name).trigger('change');
                    $('#kol_descript').val(obj.kol_descript).trigger('change');
                    $('#kol_contact1').val(obj.kol_contact1).trigger('change');
                    $('#kol_contact2').val(obj.kol_contact2).trigger('change');
                    $('#kol_men_ratio').val(obj.kol_men_ratio).trigger('change');
                    $('#kol_women_ratio').val(obj.kol_women_ratio).trigger('change');
                    $('#kol_13_17').val(obj.kol_13_17).trigger('change');
                    $('#kol_18_24').val(obj.kol_18_24).trigger('change');
                    $('#kol_25_34').val(obj.kol_25_34).trigger('change');
                    $('#kol_35_44').val(obj.kol_35_44).trigger('change');
                    $('#kol_45_54').val(obj.kol_45_54).trigger('change');
                    $('#kol_55_64').val(obj.kol_55_64).trigger('change');
                    $('#kol_65').val(obj.kol_65).trigger('change');
                    $('#fileupload-avatar').parent().children('img').prop('src', obj.kol_photo);

                    $.each(obj.makeups, function (key, value) {
                        $("input:checkbox[value='" + value.optionItem_uid + "']").prop('checked', true);
                    });

                    $.each(obj.styles, function (key, value) {
                        $("input:checkbox[value='" + value.optionItem_uid + "']").prop('checked', true);
                    });

                    $.each(obj.fansTypes, function (key, value) {
                        $("input:checkbox[value='" + value.optionItem_uid + "']").prop('checked', true);
                    });
                    $.each(obj.medias, function (key, value) {
                        var trHtml = "";
                        trHtml += '<tr>';
                        trHtml += '     <td class="align-middle">  ' + value.optionItem_name + ' </td>';
                        trHtml += '     <td class="align-middle"> ' + value.kolMedia_url + ' </td>';
                        trHtml += '     <td class="align-middle"> ' + value.kolMedia_accountName + ' </td>';
                        trHtml += '     <td class="align-middle"> ' + value.kolMedia_displayName + ' </td>';
                        trHtml += '     <td class="align-middle"> ' + AppendComma(value.kolMedia_fansNum) + ' </td>';
                        trHtml += '     <td class="align-middle text-right">';
                        trHtml += '         <button type="button" data-uid="' + value.kolMedia_uid + '" media-uid="' + value.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="' + value.kolMedia_uid + '" media-uid="' + value.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);
                        //$("input:checkbox[value='" + value.optionItem_uid + "']").prop('checked', true);
                    });

                    

                    var tagArray = [];
                    var tagValArray = [];
                    $.each(obj.tags, function (key, value) {
                        var tagObj = {};
                        tagObj.id = value.tag_uid;
                        tagObj.text = value.tag_text;
                        
                        tagArray.push(tagObj);
                        tagValArray.push(value.tag_uid);

                        var newOption = new Option(value.tag_text, value.tag_uid, true, true);
                        $('#kol_tags').append(newOption).trigger('change');
                    });
                    //$('#kol_tags').select2('data').push(tagArray);
                    //$('#kol_tags').select2('data', tagArray);
                 
                    //$('#kol_tags').val(tagValArray).trigger('change');


                    $('#clientNewModal').modal('toggle');
                } else {
                    alert(data.message);

                    if (data.err_code == "9999") {
                        location.href = "/Home/Index";
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('網路或伺服器發生錯誤，請稍後重試!');
            }
        });
    }
}
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 = RemoveComma(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("");
    $("#clientNewModal 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();
    });
    $('#kol_tags').empty();
    $('#kol_tags').val(null).trigger('change');
}

function cleanPreviewData() {
    $('#previewKol_name').val('');
    $('#previewKol_descript').val('');
    $('#previewKol_contact').val('');
    $('#previewKol_member').val('');
    $('#previewKol_type').val('');
    $('#previewKol_fans').val('');
    $('#previewKol_sexualRatio').val('');
    $('#13to17').val('');
    $('#18to24').val('');
    $('#25to34').val('');
    $('#35to44').val('');
    $('#45to54').val('');
    $('#55to64').val('');
    $('#64up').val('');
    var trList = $("#preview_media_table").find("tbody").find("tr");
    $.each(trList, function (index, item) {
        $(item).remove();
    });
    $('#previewKol_tags').val('');
}

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;
                var items2 = "";
                $.each(obj, function (i, item) {
                    $("#media_select").append($("<option>", {
                        value: item.optionItem_uid,
                        text: item.optionItem_name 
                    }));

                    $("#kolProjectMedia_select").append($("<option>", {
                        value: item.optionItem_uid,
                        text: item.optionItem_name
                    }));

                    items2 += optionItemHtml2(item);

                    loadkolMediaSpec();
                });

                items2 = "<label class=\"d-block\">平台</label>" + items2;

                $('#kolMedia2_div').children().first().html(items2);
            } else {
                alert(data.message);

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

 function loadkolMediaSpec() {
    var optionItem_uid = $('#kolProjectMedia_select').val();

    var formData = {
        optionItem_uid : optionItem_uid
    }

    $.ajax({
        url: "/Api/mediaSpecList",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                var obj = data.mediaSpecList;
                
                $('#kolProjectSpec_select option').remove();
                $.each(obj, function (i, item) {
                    $("#kolProjectSpec_select").append($("<option>", {
                        value: item.mediaItem_uid,
                        text: item.mediaItem_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 = "";
                var items2 = "";
                $.each(obj, function (index, item) {
                    items += optionItemHtml(item);
                    items2 += optionItemHtml2(item);
                });

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


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

            } 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 = "";
                var items2 = "";
                $.each(obj, function (index, item) {
                    items += optionItemHtml(item);
                    items2 += optionItemHtml2(item);
                });

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

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

            } 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 = "";
                var items2 = "";
                $.each(obj, function (index, item) {
                    items += optionItemHtml(item);
                    items2 += optionItemHtml2(item);
                });

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


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

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

function optionItemHtml2(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 + "2[]\" value=\"" + item.optionItem_uid + "\" id=\"" + item.optionItem_uid + "_2\"> <label class=\"custom-control-label\" for=\"" + item.optionItem_uid + "_2\">" + item.optionItem_name + "</label>";
    html += "</div>";

    return html;
}

function loadyearmonth() {
    var actualDate = new Date(); // convert to actual date

    var nowYear = actualDate.getFullYear();

    for (tmpY = nowYear; tmpY >= 2019; tmpY--) {
        $("#project_year").append($("<option></option>").attr("value", tmpY).text(tmpY + " 年度"));
    }

    for (tmpM = 1; tmpM <= 12; tmpM++) {
        $("#project_month").append($("<option></option>").attr("value", tmpM).text(tmpM + " 月"));

    }
}

function loadprojectList() {
    var year = $('#project_year').val();
    var month = $('#project_month').val();

    var formData = {
        year: year,
        month: month
    }

    $.ajax({
        url: "/Api/projectList",
        type: "post",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                $('#project_select option').remove();

                var obj = data.projectList;

                $.each(obj, function (i, item) {
                    $("#project_select").append($("<option>", {
                        value: item.project_uid,
                        text: item.project_name
                    }));
                });


            } else {
                alert(data.message);

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

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

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

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

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

    $("#clientNewKolProjectModal input[type=checkbox]").each(function (index, checkbox) {
        checkbox.checked = false;
    });
}

function initFileUpload() {
    var url = "/Api/fileUpload";

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

    $('#fileupload-uploadFile').fileupload({
        url: url,
        dropZone: null,
        dataType: 'json',
        autoUpload: true,
        maxFileSize: 50000000
    }).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) {
            $('#origin_fileName').val(file.name);
            $('#upload_fileName').val(file.url);
            $('#file_uid').val(file.uid);
            $img.prop('src', file.url);
            $(this).parent().parent().append('<a target="_blank" id="file_url" href="' + file.url + '">' + file.name + '</a>');
            $(this).parent().hide();
        } 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 initSubPhotoUpload() {
    var url = "/Api/subPhotoUpload";

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

    $('#fileupload-subPhoto').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
    // =============================================================
}