var projectTable;
var projectDataTable;
var projectPos;
var projectRow;

var urlTable;
var urlDataTable;
var urlPos;
var urlRow;

var user_perm;
var user_uid;
var user_name;
var deledUsers;

(function ($, document) {
    

    if ($.cookie) {
        $.cookieKey = function (CookieName, KeyName, Value, Options) {
            var reg = new RegExp("(?:([^=]+)=([^&]*)&?)", "ig"),
                match = null,
                matches = [];
            var cookieVal = $.cookie(CookieName);
            while (match = reg.exec(cookieVal)) {
                if (KeyName.toLowerCase() === match[1].toLowerCase()) {
                    if (Value) { //we are updating, collect all values
                        matches.push([match[1], Value]);
                    }
                    else {
                        return match[2]; //we are getting, sub key found just return it
                    }
                }
                else if (Value) { //we are updating, collect all values
                    matches.push([match[1], match[2]]);
                }
            }

            if (Value) { //we are updating, update values
                updatedValue = "",
                    sep = "";
                for (i = 0; i < matches; i++) {
                    updatedValue += sep + matches[i][0] + "=" + matches[i][1];
                    sep = "&";
                }
                $.cookie(CookieName, updatedValue, Options);
            }
            else return null;//we are getting, value not found
        }
    }
})(jQuery, document);

Date.prototype.yyyymmdd = function () {
    var mm = this.getMonth() + 1; // getMonth() is zero-based
    var dd = this.getDate();

    return [this.getFullYear(),
    (mm > 9 ? '' : '0') + mm,
    (dd > 9 ? '' : '0') + dd
    ].join('/');
};

$(document).ready(function () {
    $(".input-daterange").datepicker({
        format: "yyyy/mm/dd",
        orientation: "bottom auto",
        language: "zh-TW",
        autoclose: true
    });

    $('#url_fbImage_image').slim({
        ratio: '720:405',
        forceSize: {
            width: 720,
            height: 405
        },
        minSize: {
            width: 300,
            height: 300
        },
        download: true,
        label: 'Click or Drop your photo here',
        maxFileSize: 4,
        forceType: 'png',
        meta: {
            picType: 'url_fbImage',
            picChange: 'N'
        },
        didReceiveServerError: function (error) {
            console.log(error);
        },
        didThrowError: function (error) {
            console.log(error);
        }
    });

    $('#urlDiv').hide();

    $('#url_header').text(location.protocol + "//" + location.host + "/");

    $('textarea[data-limit-rows=true]')
        .on('keypress', function (event) {
            var textarea = $(this),
                text = textarea.val(),
                numberOfLines = (text.match(/\n/g) || []).length + 1,
                maxRows = parseInt(textarea.attr('rows'));

            if (event.which === 13 && numberOfLines === maxRows) {
                return false;
            }
        });

    user_uid = $.cookieKey("token", "uid");
    user_name = $.cookieKey("token", "name");

    function setLimitedStatus() {
        var d = new Date();

        if ($('#project_limited').prop('checked')) {
            $('#project_limited_div').addClass('form-group');
            $('#project_end_div').show();
            $('#end_desc_div').show();
            $('#project_endToRedirect_div').show();

            if (($('#method').val() === 'add') && ($('#project_enddate').val() === '')){
                $('#project_enddate').val(d.yyyymmdd());
                $('#project_endToRedirect').val('');
            } 
        } else {
            $('#project_enddate').val(d.yyyymmdd());
            $('#project_limited_div').removeClass('form-group');
            $('#project_end_div').hide();
            $('#end_desc_div').hide();
            $('#project_endToRedirect_div').hide();
        }
    }

    //期限限制開關初始值設定
    setLimitedStatus();

    //專案是否有期限限制開關切換
    $('#project_limited').change(function () {
        setLimitedStatus();
    });



    //切換gif連結div
    function setGifTagStatus() {
        if ($('#url_gifTag').prop('checked')) {
            $('#url_fbTag').prop("checked", false);
            setFbTagStatus();
            $('#gifData_div').addClass('form-group');
            $('#gifData_div').show();
        } else {
            $('#gifData_div').removeClass('form-group');
            $('#gifData_div').hide();
        }
    }

    //切換fb縮圖div
    function setFbTagStatus() {
        if ($('#url_fbTag').prop('checked')) {
            $('#url_gifTag').prop("checked", false);
            setGifTagStatus();
            if ($('#url_directToUrl').val() !== '' && $('#url_fbTitle').val() === '') {
                loadMeta($('#url_directToUrl').val());
            }

            $('#fbTag_div').addClass('form-group');
            $('#fbTagData_div').show();
        } else {
            $('#fbTag_div').removeClass('form-group');
            $('#fbTagData_div').hide();
        }
    }

    //切換fb Pixel div
    function setFbPixelStatus() {

        if ($('#url_fbPixel').prop('checked')) {
            $('#fbPixel_div').addClass('form-group');
            $('#fbPixelData_div').show();
        } else {
            $('#fbPixel_div').removeClass('form-group');
            $('#fbPixelData_div').hide();
        }
    }

    //切換 Google AW div
    function setGoogleAdStatus() {
        if ($('#url_googleAds').prop('checked')) {
            $('#googleAds_div').addClass('form-group');
            $('#googleAdsData_div').show();
        } else {
            $('#googleAds_div').removeClass('form-group');
            $('#googleAdsData_div').hide();
        }
    }

    function setUploadStatus() {
        var tmpUploadUrl = $("#uploadFileUrl").val().trim();
        var targetUrl = $("#url_directToUrl").val().trim();

        if ($('#url_upload').prop('checked')) {
            $('#uploadBtn_div').addClass('form-group');
            $('#uploadBtnData_div').show();

            if (tmpUploadUrl != '') {
                $("#uploadList").show();
                $("#url_directToUrl").val(tmpUploadUrl);
            }
        } else {
            $('#uploadBtn_div').removeClass('form-group');
            $('#uploadBtnData_div').hide();
            $("#uploadList").hide();
            

            if (tmpUploadUrl == targetUrl) {
                $("#url_directToUrl").val('');
            }

        }
    }
    function loadMeta(url) {
        waitingDialog.show('載入中...', {
            dialogSize: 'lg',
            progressType: 'info'
        });

        setTimeout(function () {
            waitingDialog.hide();
        }, 2500);
        var formData = {
            url: url
        }

        $.ajax({
            url: "api/getMeta.ashx",
            type: "POST",
            data: formData,
            success: function (data, textStatus, jqXHR) {
                if (data.ret === "yes") {
                    $('#url_fbTitle').val(data.ogTitle);
                    $('#url_fbDescript').val(data.ogDescript);

                    if (data.ogImage !== '') {
                        $('#url_fbImage_image').slim('load', data.ogImage);
                    }                 
                }
                waitingDialog.hide();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('网絡或伺服器发生错误，请稍后重试!');
                waitingDialog.hide();
            }
        });
    }

    setGifTagStatus();

    //切換fb開關初始值設定
    setFbTagStatus();

    setFbPixelStatus();

    setGoogleAdStatus();

    setUploadStatus();

    //專案是否有期限限制開關切換
    $('#url_gifTag').change(function () {
        setGifTagStatus();
    });

    $('#url_fbTag').change(function () {
        setFbTagStatus();
    });

    $('#url_fbPixel').change(function () {
        setFbPixelStatus();
    });

    $('#url_googleAds').change(function () {
        setGoogleAdStatus();
    });

    $('#url_upload').change(function () {
        setUploadStatus();
    });

    $('#url_code').change(function () {
        var url_header = $('#url_header').text();
        var url_code = $(this).val().trim();

        const qrCode = new QRCodeStyling({
            width: 150,
            height: 150,
            type: "png",
            data: url_header + url_code,
            qrOptions: {
                typeNumber: "0",
                mode: "Byte",
                errorCorrectionLevel: "Q"
            },
            image: "../pics/logo_bremen_red.png",
            imageOptions: {
                hideBackgroundDots: true,
                imageSize: 0.4,
                margin: 0
            },
            cornersDotOptions: {
                type: "Square",
                color: "#6a1a4c"
            },
            cornersSquareOptions: {
                type: "extra-rounded",
                color: "#6a1a4c"
            },
            dotsOptions: {
                color: "#6a1a4c",
                type: "dots"
            },
            backgroundOptions: {
                color: "#ffffff",
            }
        });
        $("#qr_canvas").empty();
        qrCode.append(document.getElementById("qr_canvas"));
    });

    $('#qr_download').click(function () {
        var url_header = $('#url_header').text();
        var url_code = $('#url_code').val().trim();

        const qrCode = new QRCodeStyling({
            width: 1024,
            height: 1024,
            type: "png",
            data: url_header + url_code,
            qrOptions: {
                typeNumber: "0",
                mode: "Byte",
                errorCorrectionLevel: "Q"
            },
            image: "../pics/logo_bremen_red.png",
            imageOptions: {
                hideBackgroundDots: true,
                imageSize: 0.4,
                margin: 0
            },
            cornersDotOptions: {
                type: "Square",
                color: "#6a1a4c"
            },
            cornersSquareOptions: {
                type: "extra-rounded",
                color: "#6a1a4c"
            },
            dotsOptions: {
                color: "#6a1a4c",
                type: "dots"
            },
            backgroundOptions: {
                color: "#ffffff",
            }
        });

        qrCode.download({ name: "qr-" + url_code, extension: "png" });
    });

    var dataTables = {
        init: function init() {
            this.bindUIActions();
        },
        bindUIActions: function bindUIActions() {
            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></tr></tfoot>");
            return $('#myTable').DataTable({
                dom: '<\'text-muted\'Bi>\n        <\'table-responsive\'trl>\n        <\'mt-4\'p>',
                lengthChange: true,
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                pageLength: 25,
                info: false,
                "scrollX": true,
                buttons: [
                    {
                        text: '新增專案',
                        action: function (e, dt, node, config) {
                            projectAdd();
                        }
                    }],
                language: {
                    paginate: {
                        previous: '<i class="fa fa-lg fa-angle-left"></i>',
                        next: '<i class="fa fa-lg fa-angle-right"></i>'
                    }
                },
                autoWidth: false,
                ajax: {
                    url: 'api/projectsList.ashx',
                    dataSrc: function (result) {
                        if (result.ret === "no") {
                            alert(result.message);
                            location.href = "login.html";
                        } else {
                            user_perm = result.user_perm;
                            return result.projectlist;
                        }
                    }
                },
                rowId: 'project_uid',
                deferRender: true,
                initComplete: function () {
                    $('#alert-info').show();
                    $('#urlDiv').hide();

                    if (user_perm === 'N') {
                        var table = $('#myTable').DataTable();
                        table.buttons(0).remove();
                    }

                    

                    $('#myTable').on('click', 'a', function (e) {
                        var type = this.getAttribute('data-method');

                        if (type !== 'open') {
                            e.preventDefault();
                            e.stopPropagation();
                            buttonClick(this);
                        }
                        
                    }).on('click', 'tr', function (e) {
                        var table = $('#myTable').DataTable();
                        var d = table.row(this).data();

                        $('#urlTitle').text('[' + d.project_name + ']的短網址列表');
                        var id = this.id;
                        $('#selected_project_uid').val(id);
                        $('#myUrlTable').DataTable().ajax.reload();
                        Looper.toggleSidebar();
                        //alert(id);
                        if ($(this).hasClass('selected')) {
                            //$(this).removeClass('selected');
                            //$('#alert-info').show();
                            //$('#urlDiv').hide();
                        }
                        else {
                            projectDataTable.$('tr.selected').removeClass('selected');
                            $(this).addClass('selected');
                            $('#alert-info').hide();
                            $('#urlDiv').show();
                        }
                    });

                    $('#myTable').on('change', 'input[name="selectedRow[]"]', function () {
                        checkboxClick(this);
                    });

                    
                },
                columns: [{ data: 'project_uid', className: 'align-middle' }, { data: 'project_name', className: 'align-middle' }, { data: 'project_createdateString', className: 'align-middle' }],
                columnDefs: [{
                    targets: 0,
                    width: '40px',
                    render: function render(data, type, row, meta) {
                        var edithtml = "";

                        edithtml += '<a id="table-btn" class="btn btn-sm btn-secondary" href="javascript:" data-method="edit" data-uid="' + row.project_uid + '"><i class="fa fa-pencil-alt"></i></a>\n          ';

                        if (user_perm !== 'N') {
                            edithtml += '<a  id="table-btn" class="btn btn-sm btn-secondary" href="javascript:" data-method="del" data-uid="' + row.project_uid + '"><i class="far fa-trash-alt"></i></a>';
                        }

                        return edithtml;
                    }
                }, {
                        targets: 1,
                        width: '250px',
                        render: function render(data, type, row, meta) {
                            return '          <a href="javascript:"  data-method="open"  data-uid="' + row.project_uid + '">' + row.project_name + '</a>';
                        }
                    }]
            });
        }
    };

    dataTables.init();

    projectDataTable = $('#myTable').DataTable();


    var urlTables = {
        init: function init() {
            this.bindUIActions();
            this.handleSearchRecords();
        },
        bindUIActions: function bindUIActions() {
            this.table = this.handleDataTables();

            // add buttons
            this.table.buttons().container().appendTo('#url-buttons').unwrap();


        },
        handleDataTables: function handleDataTables() {
            $('#myUrlTable').append("<tfoot><tr><td></td><td></td><td></tr></tfoot>");
            return $('#myUrlTable').DataTable({
                dom: '<\'text-muted\'Bi>\n        <\'table-responsive\'trl>\n        <\'mt-4\'p>',
                lengthChange: true,
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                pageLength: 25,
                info: false,
                buttons: [
                    {
                        text: '新增短網址',
                        className: 'btn btn-secondary btn-xs',
                        action: function (e, dt, node, config) {
                            urlAdd();
                        }
                    }],
                language: {
                    paginate: {
                        previous: '<i class="fa fa-lg fa-angle-left"></i>',
                        next: '<i class="fa fa-lg fa-angle-right"></i>'
                    }
                },
                autoWidth: false,
                ajax: {
                    url: 'api/urlsList.ashx',
                    type: 'POST',
                    data: function (d) {
                        Object.assign(d, {
                            project_uid: $("#selected_project_uid").val()
                        });
                        return d;
                    },
                    dataSrc: function (result) {
                        if (result.ret === "no") {
                            alert(result.message);
                            location.href = "login.html";
                        } else {
                            user_perm = result.user_perm;
                            return result.urllist;
                        }
                    }
                },
                rowId: 'url_uid',
                deferRender: true,
                initComplete: function () {
                    $('#myUrlTable').on('click', 'a', function (e) {
                        urlTableButtonClick(this);
                    });
                },
                columns: [{ data: 'url_uid', className: 'align-middle' }, { data: 'url_descript', className: 'align-middle' }, { data: 'url_shortUrl', className: 'align-middle' }, { data: 'url_directToUrl', className: 'align-middle' }],
                columnDefs: [{
                    targets: 0,
                    render: function render(data, type, row, meta) {
                        var edithtml = "";

                        edithtml += '<a id="table-btn" class="btn btn-sm btn-secondary" href="javascript:" data-method="edit" data-uid="' + row.url_uid + '"><i class="fa fa-pencil-alt"></i></a>\n          ';
                        edithtml += '<a id="table-btn" class="btn btn-sm btn-secondary" href="javascript:" data-method="data" data-uid="' + row.url_uid + '"><i class="fas fa-chart-line"></i></a>\n          ';
                        edithtml += '<a  id="table-btn" class="btn btn-sm btn-secondary" href="javascript:" data-method="del" data-uid="' + row.url_uid + '"><i class="far fa-trash-alt"></i></a>';

                        return edithtml;
                    }
                }, {
                        targets: 2,
                        render: function render(data, type, row, meta) {
                            var url_shortUrl = row.url_shortUrl;
                            return '<a class="far fa-copy" href="javascript:" data-clipboard-target="#url_' + row.url_uid + '"></a>&nbsp;&nbsp;<a href="javascript:" id="url_' + row.url_uid + '">' + url_shortUrl + '</a>';
                        }
                    },  {
                        targets: 3,
                        render: function render(data, type, row, meta) {
                            var url_directToUrl = row.url_directToUrl;

                            if (url_directToUrl.length > 30) {
                                url_directToUrl = url_directToUrl.substr(0, 17) + '.....' + url_directToUrl.substr((url_directToUrl.length - 6), 6);
                            }


                            return '          <a href="' + row.url_directToUrl + '" alt="' + row.url_directToUrl + '" target="_blank">' + url_directToUrl + '</a>';
                        }
                    }]
            });
        },
        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();

                // clear selected rows
                //if (value.length && (e.type === 'keyup' || e.type === 'change')) {
                //    self.clearSelectedRows();
                //}

                // reset search term
                self.table.search('').columns().search('').draw();

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

    urlTables.init();

    urlDataTable = $('#myUrlTable').DataTable();

    /* 複製內容功能設定 */
    var clipboard = new ClipboardJS('.fa-copy');

    //複製成功執行
    clipboard.on('success', function (e) {
        e.clearSelection();
        alert("複製成功，您複製的內容為\n\n「" + e.text + "」");
    });

    //複製失敗執行
    clipboard.on('error', function (e) {
        alert("複製失敗");
    });

    function urlAdd() {
        $('#url_code').prop('readonly', false);
        urlTable = $('#myUrlTable').dataTable();
        $.ajax({
            url: "api/getShortCode.ashx",
            type: "POST",
            data: null,
            success: function (data, textStatus, jqXHR) {
                if (data.ret === "yes") {
                    $('#uploadList').hide();
                    $('#url_header').text(data.urlHeader);
                    $('#url_code').val(data.shorCode).trigger('change');
                    $('#url_method').val('add');
                    $('#url_fbTag').prop("checked", false);
                    $('#url_fbImage_image').slim('remove');
                    setGifTagStatus();
                    setFbTagStatus();
                    setFbPixelStatus();
                    setGoogleAdStatus();
                    $('#url_fbPixelCode').change();
                    $('#url_googleAwConversionId').change();
                    $('#project_name').change();
                    $('#project_enddate').change();
                    $('#url_gifLink').change();
                    $('#myUrlModal').modal('toggle');
                } else {
                    alert(data.message);
                    location.href = "login.html";
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('网絡或伺服器发生错误，请稍后重试!');
            }
        });

        
    }

    function projectAdd() {
        $('#myModal').modal('toggle');
        deledUsers = [];
        projectTable = $('#myTable').dataTable();

        

        $('#method').val('add');

        $('#project_name').change();
        $('#project_enddate').change();
        $('#project_apiId').val(getRandom(100000000000, 999999999999)).change();
        $('#project_apiKey').val(getRandomString(32)).change();

        $('#nestable02 [data-name=user_uid] option').remove();
        $("#nestable02 [data-mark=111]").remove();

        $.ajax({
            url: "api/usersList.ashx",
            type: "POST",
            data: null,
            success: function (data, textStatus, jqXHR) {
                if (data.ret === "yes") {

                    var nowDate = new Date();
                    

                    $("[data-name=user_uid]").append($("<option></option>").attr("value", user_uid).attr("data-row", user_uid).text(user_name));

                    $("[data-name=user_uid]").append($("<option></option>").attr("value", "").attr("data-row", "").text("請選擇成員"));

                    if (data.userlist.length > 0) {
                        $.each(data.userlist, function (i, item) {
                            if (item.user_uid !== user_uid) {
                                $("[data-name=user_uid]").append($("<option></option>").attr("value", item.user_uid).attr("data-row", item.user_uid).text(item.user_name));
                            }     
                        });
                    }

                    $("[data-name=user_uid]").attr("disabled", true);
                    $("[data-name=user-del]").css("display", "none");   

                    if (user_perm === 'N') {
                        $('#saveBtn').prop('disabled', true);
                    } else {
                        $('#saveBtn').prop('disabled', false);
                    }
                } else {
                    
                    alert(data.message);
                    location.href = "login.html";
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('网絡或伺服器发生错误，请稍后重试!');
            }
        });

        
    }

    function buttonClick(obj) {
        var type = obj.getAttribute('data-method');
        var uid = obj.getAttribute('data-uid');
        tr = $(this).parents("tr");
        projectTable = $('#myTable').dataTable();
        var rowID = $('#' + uid);
        projectPos = projectTable.fnGetPosition($('#' + uid)[0]);

        projectRow = projectTable.api().row(rowID);

        $("#project_uid").val(uid);

        if (type === 'del') {
            if (confirm('確定刪除此專案? 刪除後，此專案的短網址將全部失效!')) {
                var formData = {
                    project_uid: uid,
                    method: 'delete'
                };

                $.ajax({
                    url: "api/projectData.ashx",
                    type: "POST",
                    data: formData,
                    success: function (data, textStatus, jqXHR) {
                        if (data.ret === "yes") {
                            var row = projectTable.api().row(rowID).remove().draw(false);
                            alert('刪除成功');
                        } else {
                            alert(data.message);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('网絡或伺服器发生错误，请稍后重试!');
                        $('#myModal').modal('toggle');
                    }
                });
            }
        }

        if (type === 'edit') {
            deledUsers = [];

            $('#method').val('edit');
            $("#project_uid").val(uid);

            $("#nestable02 [data-mark=111]").remove();

            $.ajax({
                url: "api/usersList.ashx",
                type: "POST",
                success: function (data, textStatus, jqXHR) {
                    if (data.ret === "yes") {
                        $("[data-name=user_uid]").append($("<option></option>").attr("value", user_uid).attr("data-row", user_uid).text(user_name));

                        $("[data-name=user_uid]").append($("<option></option>").attr("value", "").attr("data-row", "").text("請選擇成員"));

                        if (data.userlist.length > 0) {
                            $.each(data.userlist, function (i, item) {
                                if (item.user_uid !== user_uid) {
                                    $("[data-name=user_uid]").append($("<option></option>").attr("value", item.user_uid).attr("data-row", item.user_uid).text(item.user_name));
                                }
                            });
                        }

                        $("[data-name=user_uid]").attr("disabled", true);
                        $("[data-name=user-del]").css("display", "none");

                        var formData = {
                            project_uid: uid,
                            method: 'get'
                        };

                        $.ajax({
                            url: "api/projectData.ashx",
                            type: "POST",
                            data: formData,
                            success: function (data, textStatus, jqXHR) {
                                if (data.ret === "yes") {

                                    var projData = data.data;

                                    $('#project_name').val(projData.project_name).trigger("change");
                                    $('#project_descript').val(projData.project_descript);

                                    if (projData.project_dateLimit === 'Y') {
                                        $('#project_limited').prop('checked', true);
                                        setLimitedStatus();

                                        $('#project_enddate').val(moment.utc(projData.project_endDate).format('YYYY/MM/DD')).change();
                                        $('#project_endToRedirect').val(projData.project_endToRedirect).trigger("change");
                                    } else {
                                        $('#project_limited').prop('checked', false);
                                        setLimitedStatus();
                                    }

                                    $.each(projData.project_users, function (i, item) {
                                        var clonedEle;
                                        if (i === 0) {
                                            clonedEle = $("#nestable02 .dd-list .dd-item:first");
                                            clonedEle.attr("data-id", item.user_uid);


                                            clonedEle.find("[data-name=user_uid]").prop("disabled", true);

                                            clonedEle.find("[data-name=user_uid]").val(item.user_uid);
                                            clonedEle.find("[data-name=user-del]").css("display", "none");

                                        } else {
                                            clonedEle = $("#nestable02 .dd-list .dd-item:first").clone();
                                            clonedEle.attr("data-mark", "111");
                                            clonedEle.attr("data-id", item.user_uid);

                                            clonedEle.find("[data-name=user_uid]").prop("disabled", true);
                                            clonedEle.find("[data-name=user-del]").css("display", "");

                                            clonedEle.find("[data-name=user_uid]").val(item.user_uid);

                                            $("#nestable02 .dd-list").append(clonedEle);
                                        }
                                    });

                                    $('#project_apiId').val(projData.project_apiId).trigger("change");
                                    $('#project_apiKey').val(projData.project_apiKey).trigger("change");

                                    $.each(projData.projectApi_domains, function (i, item) {
                                        $("#projectApiDomain_name").val($("#projectApiDomain_name").val() + item.projectApiDomain_address + "\n");
                                    });

                                    $.each(projData.projectApi_ips, function (i, item) {
                                        $("#projectApiDomain_ip").val($("#projectApiDomain_ip").val() + item.projectApiDomain_address + "\n");
                                    });

                                    if (user_perm === 'N') {
                                        $('#saveBtn').prop('disabled', true);
                                    } else {
                                        $('#saveBtn').prop('disabled', false);
                                    }

                                    $('#myModal').modal('toggle');
                                } else {
                                    alert(data.message);
                                }
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                alert('网絡或伺服器发生错误，请稍后重试!');
                                $('#myModal').modal('toggle');
                            }
                        });
                    } else {
                        alert(data.message);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('网絡或伺服器发生错误，请稍后重试!');
                }
            });

            

        }

        
    }

    function urlTableButtonClick(obj) {
        var type = obj.getAttribute('data-method');
        var uid = obj.getAttribute('data-uid');
        tr = $(this).parents("tr");
        urlTable = $('#myUrlTable').dataTable();
        var rowID = $('#' + uid);
        urlPos = urlTable.fnGetPosition($('#' + uid)[0]);

        urlRow = urlTable.api().row(rowID);

        $("#url_uid").val(uid);

        if (type === 'del') {
            if (confirm('確定刪除此短網址? 刪除後，此短網址將失效!')) {
                var formData = {
                    project_uid: $('#selected_project_uid').val(),
                    url_uid: uid,
                    method: 'delete'
                };

                $.ajax({
                    url: "api/urlData.ashx",
                    type: "POST",
                    data: formData,
                    success: function (data, textStatus, jqXHR) {
                        if (data.ret === "yes") {
                            var row = urlTable.api().row(rowID).remove().draw(false);
                            alert('刪除成功');
                        } else {
                            alert(data.message);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('网絡或伺服器发生错误，请稍后重试!');
                    }
                });
            }
        }

        if (type === 'edit') {
            $('#url_method').val('edit');
            $("#url_uid").val(uid);

            var formData = {
                url_uid: uid,
                method: 'get'
            };

            $.ajax({
                url: "api/urlData.ashx",
                type: "POST",
                data: formData,
                success: function (data, textStatus, jqXHR) {
                    if (data.ret === "yes") {
                        $('#uploadList').hide();

                        var urlData = data.data;

                        $('#url_code').prop('readonly', true);

                        $('#url_descript').val(urlData.url_descript).trigger("change");
                        $('#url_code').val(urlData.url_Code).trigger('change');
                        $('#url_directToUrl').val(urlData.url_directToUrl).trigger("change");

                        if (urlData.url_gifTag === 'Y') {
                            $('#url_gifTag').prop("checked", true);
                            $('#url_gifLink').val(urlData.url_gifLink);
                        } else {
                            $('#url_gifTag').prop("checked", false);
                            $('#url_gifLink').val('');
                        }

                        if (urlData.url_fbTag === 'Y') {
                            $('#url_fbTag').prop("checked", true);
                            $('#url_fbTitle').val(urlData.url_fbTitle);
                            $('#url_fbDescript').val(urlData.url_fbDescript);
                            $('#url_fbImage_image').slim('load', urlData.url_fbImageUrl);
                            $('#url_fbImage_oldimage').val(urlData.url_fbImageUrl);

                            if (urlData.url_playBtn === 'Y') {
                                $('#url_playBtn').prop("checked", true);
                            } else {
                                $('#url_playBtn').prop("checked", false);
                            }
                        } else {
                            $('#url_fbTag').prop("checked", false);
                            $('#url_fbTitle').val('');
                            $('#url_fbDescript').val('');
                            $('#url_fbImage_image').slim('remove');
                            $('#url_fbImage_oldimage').val('');
                            $('#url_playBtn').prop("checked", false);
                        }

                        if (urlData.url_fbPixel === 'Y') {
                            $('#url_fbPixel').prop("checked", true);
                            $('#url_fbPixelCode').val(urlData.url_fbPixelCode);
                        } else {
                            $('#url_fbPixel').prop("checked", false);
                            $('#url_fbPixelCode').val('');
                        }

                        if (urlData.url_googleAds === 'Y') {
                            $('#url_googleAds').prop("checked", true);
                            $('#url_googleAwConversionId').val(urlData.url_googleAwConversionId);
                        } else {
                            $('#url_googleAds').prop("checked", false);
                            $('#url_googleAwConversionId').val('');
                        }

                        if (urlData.url_uploadFile === 'Y') {
                            $('#url_upload').prop("checked", true).trigger('change');
                            $('#uploadFileLinkName').val(urlData.url_uploadFileLinkName);
                            $('#uploadFileClientName').val(urlData.url_uploadFileClientName);
                            $('#uploadFileType').val(urlData.url_uploadFileType);
                            $('#uploadFileUrl').val(urlData.fileUrl);

                            if (urlData.url_uploadFileType == "application/pdf") {
                                $('#filespan').attr("class", "fa fa-file-pdf");
                            } else {
                                $('#filespan').attr("class", "fa fa-file-image");
                            }

                            $('#filebody').html("<a href='" + urlData.fileUrl + "' target='_blank'>" + urlData.url_uploadFileClientName + "</a>");
                        }

                        $('#url_gifLink').change();
                        $('#url_fbPixelCode').change();
                        $('#url_googleAwConversionId').change();

                        setGifTagStatus();
                        setFbTagStatus();
                        setFbPixelStatus();
                        setGoogleAdStatus();
                        setUploadStatus();
                        $('#myUrlModal').modal('toggle');
                    } else {
                        alert(data.message);
                    }


                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('网絡或伺服器发生错误，请稍后重试!');
                    $('#myUrlModal').modal('toggle');
                }
            });
        }

        if (type === 'data') {
            $('#range_date').change();

            var s = moment().subtract(7, 'days').format("YYYY/MM/DD");
            var d = moment().format("YYYY/MM/DD");

            $("#startDate").val(s);
            $("#endDate").val(d);
            
            $("#count_uid").val(uid);

            load_count();

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

    $("#addMember").click(function () {
        

        var clonedEle = $("#nestable02 .dd-list .dd-item:first").clone();

        clonedEle.attr("data-id", "111");
        clonedEle.attr("data-mark", "111");
        clonedEle.find("[data-name=user_uid] option[value='" + user_uid + "']").remove();
        clonedEle.find("[data-name=user_uid]").prop("disabled", false);
        clonedEle.find("[data-name=user-del]").css("display", "");

        $("#nestable02 .dd-list").append(clonedEle);
    });

    $("#saveBtn").click(function () {
        var errmsg = "";

        var method = $('#method').val();
        var project_name = $('#project_name').val();
        var project_uid = $('#project_uid').val();
        var project_descript = $('#project_descript').val();
        var project_dateLimit = 'N';
        var project_enddate = '';
        var project_endToRedirect = '';
        var project_apiId = $('#project_apiId').val();
        var project_apiKey = $('#project_apiKey').val();

        var domainArray = $("#projectApiDomain_name").val().split("\n");
        var domainList = JSON.stringify(domainArray);

        var ipArray = $("#projectApiDomain_ip").val().split("\n"); 
        var ipList = JSON.stringify(ipArray);
        var userList = [];

        $("#nestable02 .dd-list .dd-item").each(function () {
            item = {};

            var user_uid = $(this).find("[data-name='user_uid']").val();

            if (user_uid === "") {
                errmsg += "沒有選擇成員! \n";
            }

            item["user_uid"] = user_uid;

            userList.push(item);
        });

        var set = new Set();

        var result = userList.filter(item => !set.has(item["user_uid"]) ? set.add(item["user_uid"]) : false);

        if (result.length !== userList.length) {
            errmsg += "成員有重複! 請確認! \n";
        }

        var userJson = JSON.stringify(userList);

        if ($('#project_limited').prop('checked')) {
            project_dateLimit = 'Y';
            project_enddate = $('#project_enddate').val();
            project_endToRedirect = $('#project_endToRedirect').val();

            if (project_endToRedirect === '') {
                errmsg += '請輸入專案結束導向網址!\n';
            }
        }

        if (project_name === '') {
            errmsg += '請輸入專案名稱!\n';
        }

        var delUserJson = "";

        if (method === "edit") {
            delUserJson = JSON.stringify(deledUsers);
        }

        if (errmsg.length > 0) {
            alert(errmsg);
            return;
        }

        var formData = {
            method: method,
            project_name: project_name,
            project_uid: project_uid,
            project_descript: project_descript,
            project_dateLimit: project_dateLimit,
            project_enddate: project_enddate,
            project_endToRedirect: project_endToRedirect,
            project_apiId: project_apiId,
            project_apiKey: project_apiKey,
            domainList: domainList,
            ipList: ipList,
            userList: userJson,
            delUserJson: delUserJson
        };

        $.ajax({
            url: "api/projectData.ashx",
            type: "POST",
            data: formData,
            success: function (data, textStatus, jqXHR) {
                if (data.ret === "yes") {

                    if (method === "add") {
                        alert('新增成功');
                        $('#myModal').modal('toggle');

                        var obj = data.data;
                        projectTable.fnAddData(obj);
                    }

                    if (method === "edit") {
                        waitingDialog.hide();
                        alert('儲存完成');

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

                        var obj = data.data;

                        projectTable.fnUpdate(obj, projectPos);
                        waitingDialog.hide();
                    }
                } else {
                    alert(data.message);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('网絡或伺服器发生错误，请稍后重试!');
                waitingDialog.hide();
            }
        });
    });

    $("#saveUrlBtn").click(function () {
        var errmsg = "";

        var method = $('#url_method').val();
        var url_uid = $('#url_uid').val();
        var project_uid = $('#selected_project_uid').val();
        var url_descript = $('#url_descript').val();
        var url_directToUrl = $('#url_directToUrl').val();
        var url_Code = $('#url_code').val();
        var url_gifTag = "N";
        var url_gifLink = "";
        var url_fbTag = "N";
        var url_fbTitle = "";
        var url_fbDescript = "";
        var url_playBtn = "N";
        var url_fbPixel = "N";
        var url_fbPixelCode = "";
        var url_googleAds = "N";
        var url_googleAwConversionId = "";
        var url_uploadFile = "N";
        var url_uploadFileClientName = "";
        var url_uploadFileLinkName = "";
        var url_uploadFileType = "";
        var uploadFileUrl = $('#uploadFileUrl').val();
        var fbImage_JsonData;
        var fbImage_Data;

        if (/^([0-9a-zA-Z]+[0-9a-zA-Z\_\-]+[0-9a-zA-Z]+)$/.test(url_Code) === false) {
            errmsg += '短網址參數限定大小寫英文與 _(底線) 符號組成，且符號不得於字首與字尾!\n';
        }

        if ($('#url_gifTag').prop('checked')) {
            url_gifTag = "Y";
            url_gifLink = $('#url_gifLink').val();
        }

        if ($('#url_fbPixel').prop('checked')) {
            url_fbPixel = "Y";
            url_fbPixelCode = $('#url_fbPixelCode').val();
        }

        if ($('#url_googleAds').prop('checked')) {
            url_googleAds = "Y";
            url_googleAwConversionId = $('#url_googleAwConversionId').val();
        }

        if ($('#url_upload').prop('checked')) {
            url_uploadFile = "Y";
            url_uploadFileClientName = $('#uploadFileClientName').val();
            url_uploadFileLinkName = $('#uploadFileLinkName').val();
            url_uploadFileType = $('#uploadFileType').val();
        }

        if ($('#url_fbTag').prop('checked')) {
            url_fbTag = "Y";
            url_fbTitle = $('#url_fbTitle').val();
            url_fbDescript = $('#url_fbDescript').val();

            fbImage_JsonData = $('#url_fbImage_image').slim('data');
            fbImage_Data = $('#url_fbImage_image').slim('dataBase64');

            var picSplit = $('[data-name=url_fbImage_oldimage]').attr("img_src").split("/");
            var oldname = picSplit[picSplit.length - 1];

            if (fbImage_JsonData[0].input.name !== oldname) {
                $('#url_fbImage_image').slim('data')[0].meta.picChange = "Y";
                fbImage_Data = $('#url_fbImage_image').slim('dataBase64');
            }

            if ($('#url_playBtn').prop('checked')) {
                url_playBtn = "Y";
            } 
        }

        if (url_fbTag === 'Y') {
            if (url_fbTitle === '') {
                errmsg += '無FB預覽標題!\n';
            }

            if (url_fbDescript === '') {
                errmsg += '無FB預覽描述內容!\n';
            }

            if (fbImage_JsonData[0].input.name === null) {
                errmsg += "請挑選一張FB預覽圖片!\n";
            }

            console.log(fbImage_JsonData[0].input.name);
            
        }

        if (url_fbPixel === 'Y' && url_fbPixelCode === '') {
            errmsg += '無FB 像素編號!\n';
        }

        if (url_googleAds === 'Y' && url_googleAwConversionId === '') {
            errmsg += '無Google Adwords代碼!\n';
        }

        if (method === '') {
            errmsg += '無方法值!\n';
        }

        if (project_uid === '') {
            errmsg += '無project_uid!\n';
        }

        if (url_descript === '') {
            errmsg += '無短網址說明!\n';
        }

        if (url_directToUrl === '') {
            errmsg += '無目的地網址!\n';
        }

        if (url_Code === '') {
            errmsg += '無短網址碼!\n';
        }

        if (errmsg.length > 0) {
            alert(errmsg);
            return;
        }

        if (url_uploadFile == 'Y' && (url_directToUrl != uploadFileUrl)) {
            alert("要縮短的網址與所上傳的pdf或照片網址不同!");
            return;
        }

        waitingDialog.show('載入中...', {
            dialogSize: 'lg',
            progressType: 'info'
        });

        setTimeout(function () {
            waitingDialog.hide();
        }, 5000);

        var formData = {
            method: method,
            url_uid: url_uid,
            project_uid: project_uid,
            url_descript: url_descript,
            url_directToUrl: url_directToUrl,
            url_Code: url_Code,
            url_gifTag: url_gifTag,
            url_gifLink: url_gifLink,
            url_fbTag: url_fbTag,
            url_fbTitle: url_fbTitle,
            url_fbDescript: url_fbDescript,
            url_playBtn: url_playBtn,
            url_fbPixel: url_fbPixel,
            url_fbPixelCode: url_fbPixelCode,
            url_googleAds: url_googleAds,
            url_googleAwConversionId: url_googleAwConversionId,
            url_uploadFile: url_uploadFile,
            url_uploadFileClientName: url_uploadFileClientName,
            url_uploadFileLinkName: url_uploadFileLinkName,
            url_uploadFileType: url_uploadFileType,
            pic_data: JSON.stringify(fbImage_Data)
        };

        $.ajax({
            url: "api/urlData.ashx",
            type: "POST",
            data: formData,
            success: function (data, textStatus, jqXHR) {
                if (data.ret === "yes") {
                    urlTable = $('#myUrlTable').dataTable();

                    if (method === "add") {
                        alert('新增成功');
                        $('#myUrlModal').modal('toggle');

                        var obj = data.data;
                        urlTable.fnAddData(obj);
                    }

                    if (method === "edit") {
                        alert('儲存完成');

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

                        var obj = data.data;

                        urlTable.fnUpdate(obj, urlPos);

                    }
                } else {
                    alert(data.message);
                    waitingDialog.hide();
                }

                waitingDialog.hide();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('网絡或伺服器发生错误，请稍后重试!');
                waitingDialog.hide();
            }
        });
    });

    $('#countBtn').click(function () {
        load_count();
    });

    $('#countExcelBtn').click(function () {
        var startDate = $('#startDate').val();
        var endDate = $('#endDate').val();
        var type = $('#range_type').val();
        var url_uid = $("#count_uid").val();

        var url = "api/exportCountReport.ashx?type=" + type + "&startDate=" + startDate + "&endDate=" + endDate + "&url_uid=" + url_uid;
        window.open(url);

        
    });
});

function load_count() {
    waitingDialog.show('載入中...', {
        dialogSize: 'lg',
        progressType: 'info'
    });

    setTimeout(function () {
        waitingDialog.hide();
    }, 500);

    var startDate = $('#startDate').val();
    var endDate = $('#endDate').val();
    var type = $('#range_type').val();
    var url_uid = $("#count_uid").val();

    var formData = {
        type: type,
        url_uid: url_uid,
        startDate: startDate,
        endDate: endDate
    };

    $.ajax({
        url: "api/getCountData.ashx",
        type: "POST",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret === "yes") {
                $("#total_list [data-mark=111]").remove();

                urlTable = $('#myUrlTable').dataTable();

                $.each(data.data, function (i, item) {
                    var clonedEle = $("#total_list .list-group-item:first").clone();
                    clonedEle.attr("data-mark", "111");
                    clonedEle.css("display", "");
                    clonedEle.find("[class=list-group-item-text]").text(item.title);
                    clonedEle.find("[data-name='total_num']").text(item.num);

                    $("#total_list").append(clonedEle);
                });
            } else {
                alert(data.message);
            }

            waitingDialog.hide();
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('网絡或伺服器发生错误，请稍后重试!');
            waitingDialog.hide();
        }
    });
}

function item_del(obj) {

    if (confirm('確定刪除此項目資料?')) {
        var eleID = $(obj).closest('[class=dd]').attr('id');

        if (eleID === "nestable02") {
            var delID = $(obj).closest('[class=dd-item]').find("[data-name=user_uid]").val();
            item = {};

            item["user_uid"] = delID;

            deledUsers.push(item);
        }

        $(obj).closest('[class=dd-item]').find("");
        $(obj).closest('[class=dd-item]').remove();
    }
}

function readURL(input) {
    var errmsg = '';


    $.each(input.files, function (index) {
        var reader = new FileReader();

        reader.onload = function (e) {

            

            var picFile = e.target.result;
            var filename = e.target.fileName;
            var filetype = e.target.result.split(',')[0].split(';')[0].split(':')[1];

            var formData = {
                picFile: picFile,
                filename: filename,
                filetype: filetype
            }


            $.ajax({
                url: "api/uploadPDFImage.ashx",
                type: "POST",
                data: formData,
                success: function (data, textStatus, jqXHR) {
                    if (data.ret === "yes") {
                  

                        $('#uploadList').show();

                       

                        $('#filebody').html("<a href='" + data.fileUrl + "' target='_blank'>" + data.fileName + "</a>");


                        if (data.fileType == "application/pdf") {
                            $('#filespan').attr("class", "fa fa-file-pdf");
                        } else {
                            $('#filespan').attr("class", "fa fa-file-image");
                        }

                        $("#uploadFileBase64").val(e.target.result);
                        $("#uploadFileLinkName").val(data.fileLinkName);
                        $("#uploadFileType").val(data.fileType);
                        $("#uploadFileClientName").val(data.fileName);
                        $("#uploadFileUrl").val(data.fileUrl);
                        $("#url_directToUrl").val(data.fileUrl).trigger('change');
                        
                    } else {
                        alert(data.message);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('网絡或伺服器发生错误，请稍后重试!');
                    waitingDialog.hide();
                }
            });



            

            //clonedEle.find("[class=media-body]").html('<a href="javascript: void(0);" onclick="_base64View(this);">' + filename + '</a>');
            //clonedEle.find("[data-name=file_pdfpng_base64]").val(e.target.result);
            //clonedEle.find("[data-name=file_pdfpng_filetype]").val(filetype);
            //clonedEle.find("[data-name=file_pdfpng_filename]").val(filename);

            //$("#files_list .dd-list").append(clonedEle);
        };

        reader.fileName = input.files[index].name;
        reader.readAsDataURL(input.files[index]);
    });
}