(function ($) {
    "use strict";
    $(function () {
        if ($("#order-chart").length) {
            var areaData = {
                labels: [
                    "10",
                    "",
                    "",
                    "20",
                    "",
                    "",
                    "30",
                    "",
                    "",
                    "40",
                    "",
                    "",
                    "50",
                    "",
                    "",
                    "60",
                    "",
                    "",
                    "70",
                ],
                datasets: [
                    {
                        data: [
                            200,
                            480,
                            700,
                            600,
                            620,
                            350,
                            380,
                            350,
                            850,
                            "600",
                            "650",
                            "350",
                            "590",
                            "350",
                            "620",
                            "500",
                            "990",
                            "780",
                            "650",
                        ],
                        borderColor: ["#4747A1"],
                        borderWidth: 2,
                        fill: false,
                        label: "Orders",
                    },
                    {
                        data: [
                            400,
                            450,
                            410,
                            500,
                            480,
                            600,
                            450,
                            550,
                            460,
                            "560",
                            "450",
                            "700",
                            "450",
                            "640",
                            "550",
                            "650",
                            "400",
                            "850",
                            "800",
                        ],
                        borderColor: ["#F09397"],
                        borderWidth: 2,
                        fill: false,
                        label: "Downloads",
                    },
                ],
            };
            var areaOptions = {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    filler: {
                        propagate: false,
                    },
                },
                scales: {
                    xAxes: [
                        {
                            display: true,
                            ticks: {
                                display: true,
                                padding: 10,
                                fontColor: "#6C7383",
                            },
                            gridLines: {
                                display: false,
                                drawBorder: false,
                                color: "transparent",
                                zeroLineColor: "#eeeeee",
                            },
                        },
                    ],
                    yAxes: [
                        {
                            display: true,
                            ticks: {
                                display: true,
                                autoSkip: false,
                                maxRotation: 0,
                                stepSize: 200,
                                min: 200,
                                max: 1200,
                                padding: 18,
                                fontColor: "#6C7383",
                            },
                            gridLines: {
                                display: true,
                                color: "#f2f2f2",
                                drawBorder: false,
                            },
                        },
                    ],
                },
                legend: {
                    display: false,
                },
                tooltips: {
                    enabled: true,
                },
                elements: {
                    line: {
                        tension: 0.35,
                    },
                    point: {
                        radius: 0,
                    },
                },
            };
            var revenueChartCanvas = $("#order-chart").get(0).getContext("2d");
            var revenueChart = new Chart(revenueChartCanvas, {
                type: "line",
                data: areaData,
                options: areaOptions,
            });
        }
        if ($("#order-chart-dark").length) {
            var areaData = {
                labels: [
                    "10",
                    "",
                    "",
                    "20",
                    "",
                    "",
                    "30",
                    "",
                    "",
                    "40",
                    "",
                    "",
                    "50",
                    "",
                    "",
                    "60",
                    "",
                    "",
                    "70",
                ],
                datasets: [
                    {
                        data: [
                            200,
                            480,
                            700,
                            600,
                            620,
                            350,
                            380,
                            350,
                            850,
                            "600",
                            "650",
                            "350",
                            "590",
                            "350",
                            "620",
                            "500",
                            "990",
                            "780",
                            "650",
                        ],
                        borderColor: ["#4747A1"],
                        borderWidth: 2,
                        fill: false,
                        label: "Orders",
                    },
                    {
                        data: [
                            400,
                            450,
                            410,
                            500,
                            480,
                            600,
                            450,
                            550,
                            460,
                            "560",
                            "450",
                            "700",
                            "450",
                            "640",
                            "550",
                            "650",
                            "400",
                            "850",
                            "800",
                        ],
                        borderColor: ["#F09397"],
                        borderWidth: 2,
                        fill: false,
                        label: "Downloads",
                    },
                ],
            };
            var areaOptions = {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    filler: {
                        propagate: false,
                    },
                },
                scales: {
                    xAxes: [
                        {
                            display: true,
                            ticks: {
                                display: true,
                                padding: 10,
                                fontColor: "#fff",
                            },
                            gridLines: {
                                display: false,
                                drawBorder: false,
                                color: "transparent",
                                zeroLineColor: "#575757",
                            },
                        },
                    ],
                    yAxes: [
                        {
                            display: true,
                            ticks: {
                                display: true,
                                autoSkip: false,
                                maxRotation: 0,
                                stepSize: 200,
                                min: 200,
                                max: 1200,
                                padding: 18,
                                fontColor: "#fff",
                            },
                            gridLines: {
                                display: true,
                                color: "#575757",
                                drawBorder: false,
                            },
                        },
                    ],
                },
                legend: {
                    display: false,
                },
                tooltips: {
                    enabled: true,
                },
                elements: {
                    line: {
                        tension: 0.35,
                    },
                    point: {
                        radius: 0,
                    },
                },
            };
            var revenueChartCanvas = $("#order-chart-dark")
                .get(0)
                .getContext("2d");
            var revenueChart = new Chart(revenueChartCanvas, {
                type: "line",
                data: areaData,
                options: areaOptions,
            });
        }
        if ($("#sales-chart").length) {
            var SalesChartCanvas = $("#sales-chart").get(0).getContext("2d");
            var SalesChart = new Chart(SalesChartCanvas, {
                type: "bar",
                data: {
                    labels: ["Jan", "Feb", "Mar", "Apr", "May"],
                    datasets: [
                        {
                            label: "Offline Sales",
                            data: [480, 230, 470, 210, 330],
                            backgroundColor: "#98BDFF",
                        },
                        {
                            label: "Online Sales",
                            data: [400, 340, 550, 480, 170],
                            backgroundColor: "#4B49AC",
                        },
                    ],
                },
                options: {
                    cornerRadius: 5,
                    responsive: true,
                    maintainAspectRatio: true,
                    layout: {
                        padding: {
                            left: 0,
                            right: 0,
                            top: 20,
                            bottom: 0,
                        },
                    },
                    scales: {
                        yAxes: [
                            {
                                display: true,
                                gridLines: {
                                    display: true,
                                    drawBorder: false,
                                    color: "#F2F2F2",
                                },
                                ticks: {
                                    display: true,
                                    min: 0,
                                    max: 560,
                                    callback: function (value, index, values) {
                                        return value + "$";
                                    },
                                    autoSkip: true,
                                    maxTicksLimit: 10,
                                    fontColor: "#6C7383",
                                },
                            },
                        ],
                        xAxes: [
                            {
                                stacked: false,
                                ticks: {
                                    beginAtZero: true,
                                    fontColor: "#6C7383",
                                },
                                gridLines: {
                                    color: "rgba(0, 0, 0, 0)",
                                    display: false,
                                },
                                barPercentage: 1,
                            },
                        ],
                    },
                    legend: {
                        display: false,
                    },
                    elements: {
                        point: {
                            radius: 0,
                        },
                    },
                },
            });
            document.getElementById("sales-legend").innerHTML =
                SalesChart.generateLegend();
        }
        if ($("#sales-chart-dark").length) {
            var SalesChartCanvas = $("#sales-chart-dark")
                .get(0)
                .getContext("2d");
            var SalesChart = new Chart(SalesChartCanvas, {
                type: "bar",
                data: {
                    labels: ["Jan", "Feb", "Mar", "Apr", "May"],
                    datasets: [
                        {
                            label: "Offline Sales",
                            data: [480, 230, 470, 210, 330],
                            backgroundColor: "#98BDFF",
                        },
                        {
                            label: "Online Sales",
                            data: [400, 340, 550, 480, 170],
                            backgroundColor: "#4B49AC",
                        },
                    ],
                },
                options: {
                    cornerRadius: 5,
                    responsive: true,
                    maintainAspectRatio: true,
                    layout: {
                        padding: {
                            left: 0,
                            right: 0,
                            top: 20,
                            bottom: 0,
                        },
                    },
                    scales: {
                        yAxes: [
                            {
                                display: true,
                                gridLines: {
                                    display: true,
                                    drawBorder: false,
                                    color: "#575757",
                                },
                                ticks: {
                                    display: true,
                                    min: 0,
                                    max: 500,
                                    callback: function (value, index, values) {
                                        return value + "$";
                                    },
                                    autoSkip: true,
                                    maxTicksLimit: 10,
                                    fontColor: "#F0F0F0",
                                },
                            },
                        ],
                        xAxes: [
                            {
                                stacked: false,
                                ticks: {
                                    beginAtZero: true,
                                    fontColor: "#F0F0F0",
                                },
                                gridLines: {
                                    color: "#575757",
                                    display: false,
                                },
                                barPercentage: 1,
                            },
                        ],
                    },
                    legend: {
                        display: false,
                    },
                    elements: {
                        point: {
                            radius: 0,
                        },
                    },
                },
            });
            document.getElementById("sales-legend").innerHTML =
                SalesChart.generateLegend();
        }
        if ($("#north-america-chart").length) {
            var areaData = {
                labels: ["Jan", "Feb", "Mar"],
                datasets: [
                    {
                        data: [100, 50, 50],
                        backgroundColor: ["#4B49AC", "#FFC100", "#248AFD"],
                        borderColor: "rgba(0,0,0,0)",
                    },
                ],
            };
            var areaOptions = {
                responsive: true,
                maintainAspectRatio: true,
                segmentShowStroke: false,
                cutoutPercentage: 78,
                elements: {
                    arc: {
                        borderWidth: 4,
                    },
                },
                legend: {
                    display: false,
                },
                tooltips: {
                    enabled: true,
                },
                legendCallback: function (chart) {
                    var text = [];
                    text.push('<div class="report-chart">');
                    text.push(
                        '<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' +
                            chart.data.datasets[0].backgroundColor[0] +
                            '"></div><p class="mb-0">Offline sales</p></div>'
                    );
                    text.push('<p class="mb-0">88333</p>');
                    text.push("</div>");
                    text.push(
                        '<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' +
                            chart.data.datasets[0].backgroundColor[1] +
                            '"></div><p class="mb-0">Online sales</p></div>'
                    );
                    text.push('<p class="mb-0">66093</p>');
                    text.push("</div>");
                    text.push(
                        '<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' +
                            chart.data.datasets[0].backgroundColor[2] +
                            '"></div><p class="mb-0">Returns</p></div>'
                    );
                    text.push('<p class="mb-0">39836</p>');
                    text.push("</div>");
                    text.push("</div>");
                    return text.join("");
                },
            };
            var northAmericaChartPlugins = {
                beforeDraw: function (chart) {
                    var width = chart.chart.width,
                        height = chart.chart.height,
                        ctx = chart.chart.ctx;

                    ctx.restore();
                    var fontSize = 3.125;
                    ctx.font = "500 " + fontSize + "em sans-serif";
                    ctx.textBaseline = "middle";
                    ctx.fillStyle = "#13381B";

                    var text = "90",
                        textX = Math.round(
                            (width - ctx.measureText(text).width) / 2
                        ),
                        textY = height / 2;

                    ctx.fillText(text, textX, textY);
                    ctx.save();
                },
            };
            var northAmericaChartCanvas = $("#north-america-chart")
                .get(0)
                .getContext("2d");
            var northAmericaChart = new Chart(northAmericaChartCanvas, {
                type: "doughnut",
                data: areaData,
                options: areaOptions,
                plugins: northAmericaChartPlugins,
            });
            document.getElementById("north-america-legend").innerHTML =
                northAmericaChart.generateLegend();
        }
        if ($("#north-america-chart-dark").length) {
            var areaData = {
                labels: ["Jan", "Feb", "Mar"],
                datasets: [
                    {
                        data: [100, 50, 50],
                        backgroundColor: ["#4B49AC", "#FFC100", "#248AFD"],
                        borderColor: "rgba(0,0,0,0)",
                    },
                ],
            };
            var areaOptions = {
                responsive: true,
                maintainAspectRatio: true,
                segmentShowStroke: false,
                cutoutPercentage: 78,
                elements: {
                    arc: {
                        borderWidth: 4,
                    },
                },
                legend: {
                    display: false,
                },
                tooltips: {
                    enabled: true,
                },
                legendCallback: function (chart) {
                    var text = [];
                    text.push('<div class="report-chart">');
                    text.push(
                        '<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' +
                            chart.data.datasets[0].backgroundColor[0] +
                            '"></div><p class="mb-0">Offline sales</p></div>'
                    );
                    text.push('<p class="mb-0">88333</p>');
                    text.push("</div>");
                    text.push(
                        '<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' +
                            chart.data.datasets[0].backgroundColor[1] +
                            '"></div><p class="mb-0">Online sales</p></div>'
                    );
                    text.push('<p class="mb-0">66093</p>');
                    text.push("</div>");
                    text.push(
                        '<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' +
                            chart.data.datasets[0].backgroundColor[2] +
                            '"></div><p class="mb-0">Returns</p></div>'
                    );
                    text.push('<p class="mb-0">39836</p>');
                    text.push("</div>");
                    text.push("</div>");
                    return text.join("");
                },
            };
            var northAmericaChartPlugins = {
                beforeDraw: function (chart) {
                    var width = chart.chart.width,
                        height = chart.chart.height,
                        ctx = chart.chart.ctx;

                    ctx.restore();
                    var fontSize = 3.125;
                    ctx.font = "500 " + fontSize + "em sans-serif";
                    ctx.textBaseline = "middle";
                    ctx.fillStyle = "#fff";

                    var text = "90",
                        textX = Math.round(
                            (width - ctx.measureText(text).width) / 2
                        ),
                        textY = height / 2;

                    ctx.fillText(text, textX, textY);
                    ctx.save();
                },
            };
            var northAmericaChartCanvas = $("#north-america-chart-dark")
                .get(0)
                .getContext("2d");
            var northAmericaChart = new Chart(northAmericaChartCanvas, {
                type: "doughnut",
                data: areaData,
                options: areaOptions,
                plugins: northAmericaChartPlugins,
            });
            document.getElementById("north-america-legend").innerHTML =
                northAmericaChart.generateLegend();
        }

        if ($("#south-america-chart").length) {
            var areaData = {
                labels: ["Jan", "Feb", "Mar"],
                datasets: [
                    {
                        data: [60, 70, 70],
                        backgroundColor: ["#4B49AC", "#FFC100", "#248AFD"],
                        borderColor: "rgba(0,0,0,0)",
                    },
                ],
            };
            var areaOptions = {
                responsive: true,
                maintainAspectRatio: true,
                segmentShowStroke: false,
                cutoutPercentage: 78,
                elements: {
                    arc: {
                        borderWidth: 4,
                    },
                },
                legend: {
                    display: false,
                },
                tooltips: {
                    enabled: true,
                },
                legendCallback: function (chart) {
                    var text = [];
                    text.push('<div class="report-chart">');
                    text.push(
                        '<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' +
                            chart.data.datasets[0].backgroundColor[0] +
                            '"></div><p class="mb-0">Offline sales</p></div>'
                    );
                    text.push('<p class="mb-0">495343</p>');
                    text.push("</div>");
                    text.push(
                        '<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' +
                            chart.data.datasets[0].backgroundColor[1] +
                            '"></div><p class="mb-0">Online sales</p></div>'
                    );
                    text.push('<p class="mb-0">630983</p>');
                    text.push("</div>");
                    text.push(
                        '<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' +
                            chart.data.datasets[0].backgroundColor[2] +
                            '"></div><p class="mb-0">Returns</p></div>'
                    );
                    text.push('<p class="mb-0">290831</p>');
                    text.push("</div>");
                    text.push("</div>");
                    return text.join("");
                },
            };
            var southAmericaChartPlugins = {
                beforeDraw: function (chart) {
                    var width = chart.chart.width,
                        height = chart.chart.height,
                        ctx = chart.chart.ctx;

                    ctx.restore();
                    var fontSize = 3.125;
                    ctx.font = "600 " + fontSize + "em sans-serif";
                    ctx.textBaseline = "middle";
                    ctx.fillStyle = "#000";

                    var text = "76",
                        textX = Math.round(
                            (width - ctx.measureText(text).width) / 2
                        ),
                        textY = height / 2;

                    ctx.fillText(text, textX, textY);
                    ctx.save();
                },
            };
            var southAmericaChartCanvas = $("#south-america-chart")
                .get(0)
                .getContext("2d");
            var southAmericaChart = new Chart(southAmericaChartCanvas, {
                type: "doughnut",
                data: areaData,
                options: areaOptions,
                plugins: southAmericaChartPlugins,
            });
            document.getElementById("south-america-legend").innerHTML =
                southAmericaChart.generateLegend();
        }
        if ($("#south-america-chart-dark").length) {
            var areaData = {
                labels: ["Jan", "Feb", "Mar"],
                datasets: [
                    {
                        data: [60, 70, 70],
                        backgroundColor: ["#4B49AC", "#FFC100", "#248AFD"],
                        borderColor: "rgba(0,0,0,0)",
                    },
                ],
            };
            var areaOptions = {
                responsive: true,
                maintainAspectRatio: true,
                segmentShowStroke: false,
                cutoutPercentage: 78,
                elements: {
                    arc: {
                        borderWidth: 4,
                    },
                },
                legend: {
                    display: false,
                },
                tooltips: {
                    enabled: true,
                },
                legendCallback: function (chart) {
                    var text = [];
                    text.push('<div class="report-chart">');
                    text.push(
                        '<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' +
                            chart.data.datasets[0].backgroundColor[0] +
                            '"></div><p class="mb-0">Offline sales</p></div>'
                    );
                    text.push('<p class="mb-0">495343</p>');
                    text.push("</div>");
                    text.push(
                        '<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' +
                            chart.data.datasets[0].backgroundColor[1] +
                            '"></div><p class="mb-0">Online sales</p></div>'
                    );
                    text.push('<p class="mb-0">630983</p>');
                    text.push("</div>");
                    text.push(
                        '<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' +
                            chart.data.datasets[0].backgroundColor[2] +
                            '"></div><p class="mb-0">Returns</p></div>'
                    );
                    text.push('<p class="mb-0">290831</p>');
                    text.push("</div>");
                    text.push("</div>");
                    return text.join("");
                },
            };
            var southAmericaChartPlugins = {
                beforeDraw: function (chart) {
                    var width = chart.chart.width,
                        height = chart.chart.height,
                        ctx = chart.chart.ctx;

                    ctx.restore();
                    var fontSize = 3.125;
                    ctx.font = "600 " + fontSize + "em sans-serif";
                    ctx.textBaseline = "middle";
                    ctx.fillStyle = "#fff";

                    var text = "76",
                        textX = Math.round(
                            (width - ctx.measureText(text).width) / 2
                        ),
                        textY = height / 2;

                    ctx.fillText(text, textX, textY);
                    ctx.save();
                },
            };
            var southAmericaChartCanvas = $("#south-america-chart-dark")
                .get(0)
                .getContext("2d");
            var southAmericaChart = new Chart(southAmericaChartCanvas, {
                type: "doughnut",
                data: areaData,
                options: areaOptions,
                plugins: southAmericaChartPlugins,
            });
            document.getElementById("south-america-legend").innerHTML =
                southAmericaChart.generateLegend();
        }

        function format(d) {
            // `d` is the original data object for the row
            return (
                '<table cellpadding="5" cellspacing="0" border="0" style="width:100%;">' +
                '<tr class="expanded-row">' +
                '<td colspan="8" class="row-bg"><div><div class="d-flex justify-content-between"><div class="cell-hilighted"><div class="d-flex mb-2"><div class="mr-2 min-width-cell"><p>Policy start date</p><h6>25/04/2020</h6></div><div class="min-width-cell"><p>Policy end date</p><h6>24/04/2021</h6></div></div><div class="d-flex"><div class="mr-2 min-width-cell"><p>Sum insured</p><h5>$26,000</h5></div><div class="min-width-cell"><p>Premium</p><h5>$1200</h5></div></div></div><div class="expanded-table-normal-cell"><div class="mr-2 mb-4"><p>Quote no.</p><h6>Incs234</h6></div><div class="mr-2"><p>Vehicle Reg. No.</p><h6>KL-65-A-7004</h6></div></div><div class="expanded-table-normal-cell"><div class="mr-2 mb-4"><p>Policy number</p><h6>Incsq123456</h6></div><div class="mr-2"><p>Policy number</p><h6>Incsq123456</h6></div></div><div class="expanded-table-normal-cell"><div class="mr-2 mb-3 d-flex"><div class="highlighted-alpha"> A</div><div><p>Agent / Broker</p><h6>Abcd Enterprices</h6></div></div><div class="mr-2 d-flex"> <img src="../../images/faces/face5.jpg" alt="profile"/><div><p>Policy holder Name & ID Number</p><h6>Phillip Harris / 1234567</h6></div></div></div><div class="expanded-table-normal-cell"><div class="mr-2 mb-4"><p>Branch</p><h6>Koramangala, Bangalore</h6></div></div><div class="expanded-table-normal-cell"><div class="mr-2 mb-4"><p>Channel</p><h6>Online</h6></div></div></div></div></td>'
            );
            "</tr>" + "</table>";
        }
        var table = $("#example").DataTable({
            ajax: "js/data.txt",
            columns: [
                { data: "Quote" },
                { data: "Product" },
                { data: "Business" },
                { data: "Policy" },
                { data: "Premium" },
                { data: "Status" },
                { data: "Updated" },
                {
                    className: "details-control",
                    orderable: false,
                    data: null,
                    defaultContent: "",
                },
            ],
            order: [[1, "asc"]],
            paging: false,
            ordering: true,
            info: false,
            filter: false,
            columnDefs: [
                {
                    orderable: false,
                    className: "select-checkbox",
                    targets: 0,
                },
            ],
            select: {
                style: "os",
                selector: "td:first-child",
            },
        });
        $("#example tbody").on("click", "td.details-control", function () {
            var tr = $(this).closest("tr");
            var row = table.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass("shown");
            } else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass("shown");
            }
        });
    });
})(jQuery);