var oTable;
var oPos;

$(document).ready(function () {
    var actualDate = new Date(); // convert to actual date
    var prevDate = new Date(actualDate.getFullYear(), actualDate.getMonth() - 6, actualDate.getDate());

    var startTxt = prevDate.getFullYear().toString() + "/" + padding(prevDate.getMonth() + 1, 2) + "/01";
    var endTxt = actualDate.getFullYear().toString() + "/" + padding(actualDate.getMonth() + 1, 2) + "/" + padding(actualDate.getDate(), 2);

    $("#startDate").val(startTxt);
    $("#endDate").val(endTxt);
    $(".input-daterange").datepicker({
        format: "yyyy/mm/dd",
        minViewMode: 0,
        maxViewMode: 2,
        orientation: "bottom auto",
        language: "zh-TW",
        autoclose: true
    });

    var start = $("#startDate").val();
    var end = $("#endDate").val();
    var gender = $("#gender_select").val();
    var min_age = $("#age_start").val();
    var max_age = $("#age_end").val();

    $('#search_btn').click(function () {
        $('#myTable').DataTable().ajax.reload();
    });

    $('#export_btn').click(function () {
        var start = $("#startDate").val();
        var end = $("#endDate").val();
        var gender = $("#gender_select").val();
        var min_age = $("#age_start").val();
        var max_age = $("#age_end").val();

        var url = "api/exportExcel.ashx?start=" + start + "&end=" + end + "&gender=" + gender + "&min_age=" + min_age + "&max_age=" + max_age;
        window.open(url);
    });

    //$.ajax({
    //    url: "api/userList.ashx",
    //    type: "POST",
    //    data: formData,
    //    success: function (data, textStatus, jqXHR) {
    //        if (data.ret == "yes") {
    //            location.href = "userList.aspx";
    //        } else {
    //            alert(data.message);
    //        }
    //    },
    //    error: function (jqXHR, textStatus, errorThrown) {
    //        alert('网絡或伺服器发生错误，请稍后重试!');
    //    }
    //});


    loadDataTable();

    initSubTable();


    $('#baby_select').on('change', function () {
        loadBabyRec();
    });

    $('#downloadBtn').click(function () {
        var line_uid = $('#line_uid_data').val();
        var baby_uid = $('#baby_select').val();


        var url = "api/exportBabyRec.ashx?line_uid=" + line_uid + "&baby_uid=" + baby_uid;
        window.open(url);

    });

});

function loadBabyRec() {
    var baby_uid = $('#baby_select').val();

    var formData = {
        baby_uid: baby_uid
    }

    $.ajax({
        url: "api/babyRecList.ashx",
        type: "POST",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                $('#dt-responsive-baby').dataTable().fnClearTable();
                if (data.recs.length > 0) {

                    $('#dt-responsive-baby').dataTable().fnAddData(data.recs);
                }

            } else {
                alert(data.message);

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

function buttonClick(obj) {
    var uid = obj.getAttribute('data-uid');

    var formData = {
        line_uid: uid
    }

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

    $.ajax({
        url: "api/lineData.ashx",
        type: "POST",
        data: formData,
        success: function (data, textStatus, jqXHR) {
            if (data.ret == "yes") {
                $('#LineTitle').val("Line 名稱：" + data.user.line_displayName + ",  Line Uid：" + data.user.line_uid + ", 電話：" + data.user.line_phone);

                $("#baby_select option").remove();

                $.each(data.user.babyDatas, function (i, item) {

                    var gender = "";

                    if (item.baby_gender == "M") {
                        gender = "男";
                    } else {
                        gender = "女";
                    }

                    var babyTxt = item.baby_name + " (" + gender + "), 生日：" + item.baby_birthday;
                    
                    $("#baby_select").append($("<option></option>").attr("value", item.baby_uid).text(babyTxt));
                });

                loadBabyRec();

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

            } else {
                alert(data.message);

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


}

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 $('#myTable').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: 50,
                buttons: [
                    //{
                    //    text: 'Excel',
                    //    action: function (e, dt, node, config) {
                            
                    //        var start = $("#startDate").val();
                    //        var end = $("#endDate").val();
                    //        var gender = $("#gender_select").val();
                    //        var min_age = $("#age_start").val();
                    //        var max_age = $("#age_end").val();

                    //        var url = "api/exportExcel.ashx?start=" + start + "&end=" + end + "&gender=" + gender + "&min_age=" + min_age + "&max_age=" + max_age;
                    //        window.open(url);

                    //    }
                    //}
                ],
                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/userList.ashx',
                    type: 'POST',
                    data: function (d) {
                        Object.assign(d, {
                            start: $("#startDate").val(),
                            end: $("#endDate").val(),
                            gender: $("#gender_select").val(),
                            min_age: $("#age_start").val(),
                            max_age: $("#age_end").val()
                        });

                        return d;
                    },
                    dataSrc: 'datas'
                },
                rowId: 'line_uid',
                deferRender: true,
                initComplete: function () {
                    //mainItemTable = $('#dt-responsive').dataTable();
                    $('#myTable').on('click', 'a', function () {
                        buttonClick(this);
                    });

                    $('#myTable').on('click', 'button', function () {
                        buttonClick(this);
                    });


                },
                order: [[3, 'desc']],
                info: true,
                search: "搜尋:",
                searching: true,
                columns: [
                    { data: 'line_displayName', className: 'align-middle text-left', orderable: true, searchable: true },
                    { data: 'line_uid', className: 'align-middle text-left', orderable: false, searchable: true, visible: false },
                    { data: 'line_phone', className: 'align-middle text-left', orderable: false, searchable: true },
                    { data: 'testdate', className: 'align-top text-center', orderable: true, searchable: false, visible: false },
                    { data: 'line_uid', className: 'align-middle text-center', orderable: false, searchable: false },
                    { data: 'line_uid', className: 'align-middle text-center', orderable: false, searchable: false }
                ],
                columnDefs: [
                    {
                        targets: 4,
                        className: 'align-middle text-left',
                        orderable: false,
                        searchable: true,
                        render: function render(data, type, row, meta) {
                            var gender = '';
                            var inpercent = '';

                          


                            var htmlString = '';

                            $.each(row.babyDatas, function (i, item) {
                                if (item.baby_gender == 'M') {
                                    gender = '男';
                                } else {
                                    gender = '女';
                                }

                                if (item.baby_percent > 97) {
                                    inpercent = '> 97%';
                                } else {
                                    inpercent = item.baby_percent + '%';
                                }

                                switch (item.baby_percent) {
                                    case 3:
                                        {
                                            inpercent = '低於3%';
                                            break;
                                        }
                                    case 15:
                                        {
                                            inpercent = '3~14%';
                                            break;
                                        }
                                    case 25:
                                        {
                                            inpercent = '15~49%';
                                            break;
                                        }
                                    case 50:
                                        {
                                            inpercent = '15~49%';
                                            break;
                                        }
                                    case 75:
                                        {
                                            inpercent = '50%以上';
                                            break;
                                        }
                                    case 85:
                                        {
                                            inpercent = '50%以上';
                                            break;
                                        }
                                    case 97:
                                        {
                                            inpercent = '50%以上';
                                            break;
                                        }
                                    case 100:
                                        {
                                            inpercent = '50%以上';
                                            break;
                                        }

                                }

                                htmlString += "<tr>";
                                htmlString += " <td style='border: 0px;text-align:left;'>" + item.baby_name + "(" + gender + ")</td>";
                                htmlString += " <td style='border: 0px;text-align:left;'>生日：" + item.baby_birthday + "</td>";
                                htmlString += " <td style='border: 0px;text-align:left;'>測驗日期：" + item.baby_testdate + "</td>";
                                htmlString += " <td style='border: 0px;text-align:left;width:18%;'>年齡：" + item.baby_age + "</td>";
                                htmlString += " <td style='border: 0px;text-align:left;width:15%;'>身高：" + item.baby_height + " cm </td>";
                                htmlString += " <td style='border: 0px;text-align:left;'>成長百分比：" + inpercent + "</td>";
                                htmlString += "</tr>";

                            });

                            htmlString = "<table class='table table-nostriped'>" + htmlString + "</table>";

                            return htmlString;

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

                        }
                    },
                    {
                        targets: 5,
                        orderable: false,
                        searchable: false,
                        render: function render(data, type, row, meta) {
                            var ret = '';

                            ret += '<button type="button" data-uid="' + row.line_uid + '" data-method="edit" class="btn btn-sm btn-icon btn-secondary" ><i class="fas fa-th-list"></i> <span class="sr-only">View</span></button>';
                            return ret;
                        }
                    }

                ]
            });
        },
        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 initSubTable() {
    $("#dt-responsive-baby").DataTable({
        dom: '<\'text-muted\'Bi>\n        <\'table-fixed\'trl>\n        <\'mt-4\'p>',
        lengthChange: true,
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        pageLength: 25,
        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'
            }
        },
        deferRender: true,
        rowId: 'babyRec_uid',
        deferRender: true,
        order: [[0, 'desc']],
        columns: [
            { data: 'babyRec_recdate', className: 'align-middle text-left', orderable: true, searchable: false },
            { data: 'babyRec_yearMonthStr', className: 'align-middle text-left', orderable: true, searchable: false },
            { data: 'babyRec_height', className: 'align-middle text-left', orderable: true, searchable: false },
            { data: 'babyRec_inpercent', className: 'align-middle text-left', orderable: true, searchable: false },
            { data: 'utm_source', className: 'align-middle text-center', orderable: false, searchable: true },
            { data: 'utm_medium', className: 'align-middle text-center', orderable: false, searchable: true },
            { data: 'utm_campaign', className: 'align-middle text-center', orderable: false, searchable: true },
            { data: 'utm_content', className: 'align-middle text-center', orderable: false, searchable: true },
            { data: 'utm_term', className: 'align-middle text-center', orderable: false, searchable: true }
        ],
        columnDefs: [
            {
                targets: 0,
                orderable: true,
                searchable: false,
                render: function render(data, type, row, meta) {
                    tMonth = row.babyRec_recMonth;
                    tDay = row.babyRec_recDay;

                    if (tDay < 10) {
                        tDay = '0' + tDay;
                    }

                    if (tMonth < 10) {
                        tMonth = '0' + tMonth;
                    }

                    return row.babyRec_recYear + "/" + tMonth + "/" + tDay;



                }
            },
            {
                targets: 3,
                orderable: false,
                searchable: false,
                render: function render(data, type, row, meta) {
                    var inpercent = "";


                    switch (row.babyRec_inpercent) {
                        case 3:
                            {
                                inpercent = '低於3%';
                                break;
                            }
                        case 15:
                            {
                                inpercent = '3~14%';
                                break;
                            }
                        case 25:
                            {
                                inpercent = '15~49%';
                                break;
                            }
                        case 50:
                            {
                                inpercent = '15~49%';
                                break;
                            }
                        case 75:
                            {
                                inpercent = '50%以上';
                                break;
                            }
                        case 85:
                            {
                                inpercent = '50%以上';
                                break;
                            }
                        case 97:
                            {
                                inpercent = '50%以上';
                                break;
                            }
                        case 100:
                            {
                                inpercent = '50%以上';
                                break;
                            }

                    }


                    return inpercent;

                    
                }
            }
            
        ],
        initComplete: function () {
            
        },
        info: false,
        ordering: true,
        paging: true
    });
}