<!DOCTYPE html>
<html lang="en">
    @include("layout.head")
    <script>
        /**
         *	This script should be placed right after the body tag for fast execution 
         *	Note: the script is written in pure javascript and does not depend on thirdparty library
         **/
        'use strict';

        var classHolder = document.getElementsByTagName("BODY")[0],
            /** 
             * Load from localstorage
             **/
            themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
            {},
            themeURL = themeSettings.themeURL || '',
            themeOptions = themeSettings.themeOptions || '';
        /** 
         * Load theme options
         **/
        if (themeSettings.themeOptions)
        {
            classHolder.className = themeSettings.themeOptions;
            console.log("%c✔ Theme settings loaded", "color: #148f32");
        }
        else
        {
            console.log("Heads up! Theme settings is empty or does not exist, loading default settings...");
        }
        if (themeSettings.themeURL && !document.getElementById('mytheme'))
        {
            var cssfile = document.createElement('link');
            cssfile.id = 'mytheme';
            cssfile.rel = 'stylesheet';
            cssfile.href = themeURL;
            document.getElementsByTagName('head')[0].appendChild(cssfile);
        }
        /** 
         * Save to localstorage 
         **/
        var saveSettings = function()
        {
            themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function(item)
            {
                return /^(nav|header|mod|display)-/i.test(item);
            }).join(' ');
            if (document.getElementById('mytheme'))
            {
                themeSettings.themeURL = document.getElementById('mytheme').getAttribute("href");
            };
            localStorage.setItem('themeSettings', JSON.stringify(themeSettings));
        }
        /** 
         * Reset settings
         **/
        var resetSettings = function()
        {
            localStorage.setItem("themeSettings", "");
        }

    </script>
    <div class="page-wrapper">
        <div class="page-inner">
            @include("layout.sidebar")
            <div class="page-content-wrapper">
                @include("layout.navbar")
                
                <main id="js-page-content" role="main" class="page-content">
                   
                    @yield("content")
                    
                </main>
                <div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div> <!-- END Page Content -->
                @include('layout.footer')
                @include('layout.shortcuts')
            </div>
        </div>
    </div>
    @include('layout.quickmenu')
    @include('layout.messenger')
    @include('layout.pageset')
    @include('layout.script')
    <script>
        $(document).ready(function()
        {
            //$('#js-page-content').smartPanel(); 

            //
            //
            var dataSetPie = [
            {
                label: "Asia",
                data: 4119630000,
                color: myapp_get_color.primary_500
            },
            {
                label: "Latin America",
                data: 590950000,
                color: myapp_get_color.info_500
            },
            {
                label: "Africa",
                data: 1012960000,
                color: myapp_get_color.warning_500
            },
            {
                label: "Oceania",
                data: 95100000,
                color: myapp_get_color.danger_500
            },
            {
                label: "Europe",
                data: 727080000,
                color: myapp_get_color.success_500
            },
            {
                label: "North America",
                data: 344120000,
                color: myapp_get_color.fusion_400
            }];


            $.plot($("#flotPie"), dataSetPie,
            {
                series:
                {
                    pie:
                    {
                        innerRadius: 0.5,
                        show: true,
                        radius: 1,
                        label:
                        {
                            show: true,
                            radius: 2 / 3,
                            threshold: 0.1
                        }
                    }
                },
                legend:
                {
                    show: false
                }
            });


            $.plot('#flotBar1', [
            {
                data: [
                    [1, 0],
                    [2, 0],
                    [3, 0],
                    [4, 1],
                    [5, 3],
                    [6, 3],
                    [7, 10],
                    [8, 11],
                    [9, 10],
                    [10, 9],
                    [11, 12],
                    [12, 8],
                    [13, 10],
                    [14, 6],
                    [15, 3]
                ],
                bars:
                {
                    show: true,
                    lineWidth: 0,
                    fillColor: myapp_get_color.fusion_50,
                    barWidth: .3,
                    order: 'left'
                }
            },
            {
                data: [
                    [1, 0],
                    [2, 0],
                    [3, 1],
                    [4, 2],
                    [5, 2],
                    [6, 5],
                    [7, 8],
                    [8, 12],
                    [9, 10],
                    [10, 11],
                    [11, 3]
                ],
                bars:
                {
                    show: true,
                    lineWidth: 0,
                    fillColor: myapp_get_color.success_500,
                    barWidth: .3,
                    align: 'right'
                }
            }],
            {
                grid:
                {
                    borderWidth: 0,
                },
                yaxis:
                {
                    min: 0,
                    max: 15,
                    tickColor: '#F0F0F0',
                    ticks: [
                        [0, ''],
                        [5, '$5000'],
                        [10, '$25000'],
                        [15, '$45000']
                    ],
                    font:
                    {
                        color: '#444',
                        size: 10
                    }
                },
                xaxis:
                {
                    mode: 'categories',
                    tickColor: '#F0F0F0',
                    ticks: [
                        [0, '3am'],
                        [1, '4am'],
                        [2, '5am'],
                        [3, '6am'],
                        [4, '7am'],
                        [5, '8am'],
                        [6, '9am'],
                        [7, '10am'],
                        [8, '11am'],
                        [9, '12nn'],
                        [10, '1pm'],
                        [11, '2pm'],
                        [12, '3pm'],
                        [13, '4pm'],
                        [14, '5pm']
                    ],
                    font:
                    {
                        color: '#999',
                        size: 9
                    }
                }
            });


            /*
             * VECTOR MAP
             */

            var data_array = {
                "af": "16.63",
                "al": "0",
                "dz": "158.97",
                "ao": "85.81",
                "ag": "1.1",
                "ar": "351.02",
                "am": "8.83",
                "au": "1219.72",
                "at": "366.26",
                "az": "52.17",
                "bs": "7.54",
                "bh": "21.73",
                "bd": "105.4",
                "bb": "3.96",
                "by": "52.89",
                "be": "461.33",
                "bz": "1.43",
                "bj": "6.49",
                "bt": "1.4",
                "bo": "19.18",
                "ba": "16.2",
                "bw": "12.5",
                "br": "2023.53",
                "bn": "11.96",
                "bg": "44.84",
                "bf": "8.67",
                "bi": "1.47",
                "kh": "11.36",
                "cm": "21.88",
                "ca": "1563.66",
                "cv": "1.57",
                "cf": "2.11",
                "td": "7.59",
                "cl": "199.18",
                "cn": "5745.13",
                "co": "283.11",
                "km": "0.56",
                "cd": "12.6",
                "cg": "11.88",
                "cr": "35.02",
                "ci": "22.38",
                "hr": "59.92",
                "cy": "22.75",
                "cz": "195.23",
                "dk": "304.56",
                "dj": "1.14",
                "dm": "0.38",
                "do": "50.87",
                "ec": "61.49",
                "eg": "216.83",
                "sv": "21.8",
                "gq": "14.55",
                "er": "2.25",
                "ee": "19.22",
                "et": "30.94",
                "fj": "3.15",
                "fi": "231.98",
                "fr": "2555.44",
                "ga": "12.56",
                "gm": "1.04",
                "ge": "11.23",
                "de": "3305.9",
                "gh": "18.06",
                "gr": "305.01",
                "gd": "0.65",
                "gt": "40.77",
                "gn": "4.34",
                "gw": "0.83",
                "gy": "2.2",
                "ht": "6.5",
                "hn": "15.34",
                "hk": "226.49",
                "hu": "132.28",
                "is": "0",
                "in": "1430.02",
                "id": "695.06",
                "ir": "337.9",
                "iq": "84.14",
                "ie": "204.14",
                "il": "201.25",
                "it": "2036.69",
                "jm": "13.74",
                "jp": "5390.9",
                "jo": "27.13",
                "kz": "129.76",
                "ke": "32.42",
                "ki": "0.15",
                "kw": "117.32",
                "kg": "4.44",
                "la": "6.34",
                "lv": "23.39",
                "lb": "39.15",
                "ls": "1.8",
                "lr": "0.98",
                "lt": "35.73",
                "lu": "52.43",
                "mk": "9.58",
                "mg": "8.33",
                "mw": "5.04",
                "my": "218.95",
                "mv": "1.43",
                "ml": "9.08",
                "mt": "7.8",
                "mr": "3.49",
                "mu": "9.43",
                "mx": "1004.04",
                "md": "5.36",
                "rw": "5.69",
                "ws": "0.55",
                "st": "0.19",
                "sa": "434.44",
                "sn": "12.66",
                "rs": "38.92",
                "sc": "0.92",
                "sl": "1.9",
                "sg": "217.38",
                "sk": "86.26",
                "si": "46.44",
                "sb": "0.67",
                "za": "354.41",
                "es": "1374.78",
                "lk": "48.24",
                "kn": "0.56",
                "lc": "1",
                "vc": "0.58",
                "sd": "65.93",
                "sr": "3.3",
                "sz": "3.17",
                "se": "444.59",
                "ch": "522.44",
                "sy": "59.63",
                "tw": "426.98",
                "tj": "5.58",
                "tz": "22.43",
                "th": "312.61",
                "tl": "0.62",
                "tg": "3.07",
                "to": "0.3",
                "tt": "21.2",
                "tn": "43.86",
                "tr": "729.05",
                "tm": "0",
                "ug": "17.12",
                "ua": "136.56",
                "ae": "239.65",
                "gb": "2258.57",
                "us": "14624.18",
                "uy": "40.71",
                "uz": "37.72",
                "vu": "0.72",
                "ve": "285.21",
                "vn": "101.99",
                "ye": "30.02",
                "zm": "15.69",
                "zw": "0"
            };

            $('#vector-map').vectorMap(
            {
                map: 'world_en',
                backgroundColor: 'transparent',
                color: myapp_get_color.warning_50,
                borderOpacity: 0.5,
                borderWidth: 1,
                hoverColor: myapp_get_color.success_300,
                hoverOpacity: null,
                selectedColor: myapp_get_color.success_500,
                selectedRegions: ['US'],
                enableZoom: true,
                showTooltip: true,
                scaleColors: [myapp_get_color.primary_400, myapp_get_color.primary_50],
                values: data_array,
                normalizeFunction: 'polynomial',
                onRegionClick: function(element, code, region)
                {
                    /*var message = 'You clicked "'
                    + region
                    + '" which has the code: '
                    + code.toLowerCase();
         
                console.log(message);*/

                    var randomNumber = Math.floor(Math.random() * 10000000);
                    var arrow;

                    if (Math.random() >= 0.5 == true)
                    {
                        arrow = '<div class="ml-2 d-inline-flex"><i class="fal fa-caret-up text-success fs-xs"></i></div>'
                    }
                    else
                    {
                        arrow = '<div class="ml-2 d-inline-flex"><i class="fal fa-caret-down text-danger fs-xs"></i></div>'
                    }

                    $('.js-jqvmap-flag').attr('src', 'https://lipis.github.io/flag-icon-css/flags/4x3/' + code.toLowerCase() + '.svg');
                    $('.js-jqvmap-country').html(region + ' - ' + '$' + randomNumber.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") + arrow);
                }
            });


            /* TAB 1: UPDATING CHART */
            var data = [],
                totalPoints = 200;
            var getRandomData = function()
            {
                if (data.length > 0)
                    data = data.slice(1);

                // do a random walk
                while (data.length < totalPoints)
                {
                    var prev = data.length > 0 ? data[data.length - 1] : 50;
                    var y = prev + Math.random() * 10 - 5;
                    if (y < 0)
                        y = 0;
                    if (y > 100)
                        y = 100;
                    data.push(y);
                }

                // zip the generated y values with the x values
                var res = [];
                for (var i = 0; i < data.length; ++i)
                    res.push([i, data[i]])
                return res;
            }
            // setup control widget
            var updateInterval = 1500;
            $("#updating-chart").val(updateInterval).change(function()
            {

                var v = $(this).val();
                if (v && !isNaN(+v))
                {
                    updateInterval = +v;
                    $(this).val("" + updateInterval);
                }

            });
            // setup plot
            var options = {
                colors: [myapp_get_color.primary_700],
                series:
                {
                    lines:
                    {
                        show: true,
                        lineWidth: 0.5,
                        fill: 0.9,
                        fillColor:
                        {
                            colors: [
                            {
                                opacity: 0.6
                            },
                            {
                                opacity: 0
                            }]
                        },
                    },

                    shadowSize: 0 // Drawing is faster without shadows
                },
                grid:
                {
                    borderColor: '#F0F0F0',
                    borderWidth: 1,
                    labelMargin: 5
                },
                xaxis:
                {
                    color: '#F0F0F0',
                    font:
                    {
                        size: 10,
                        color: '#999'
                    }
                },
                yaxis:
                {
                    min: 0,
                    max: 100,
                    color: '#F0F0F0',
                    font:
                    {
                        size: 10,
                        color: '#999'
                    }
                }
            };
            var plot = $.plot($("#updating-chart"), [getRandomData()], options);
            /* live switch */
            $('input[type="checkbox"]#start_interval').click(function()
            {
                if ($(this).prop('checked'))
                {
                    $on = true;
                    updateInterval = 1500;
                    update();
                }
                else
                {
                    clearInterval(updateInterval);
                    $on = false;
                }
            });
            var update = function()
            {
                if ($on == true)
                {
                    plot.setData([getRandomData()]);
                    plot.draw();
                    setTimeout(update, updateInterval);

                }
                else
                {
                    clearInterval(updateInterval)
                }

            }



            /*calendar */
            var todayDate = moment().startOf('day');
            var YM = todayDate.format('YYYY-MM');
            var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
            var TODAY = todayDate.format('YYYY-MM-DD');
            var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');


            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl,
            {
                plugins: ['dayGrid', 'list', 'timeGrid', 'interaction', 'bootstrap'],
                themeSystem: 'bootstrap',
                timeZone: 'UTC',
                dateAlignment: "month", //week, month
                buttonText:
                {
                    today: 'today',
                    month: 'month',
                    week: 'week',
                    day: 'day',
                    list: 'list'
                },
                eventTimeFormat:
                {
                    hour: 'numeric',
                    minute: '2-digit',
                    meridiem: 'short'
                },
                navLinks: true,
                header:
                {
                    left: 'title',
                    center: '',
                    right: 'today prev,next'
                },
                footer:
                {
                    left: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
                    center: '',
                    right: ''
                },
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                events: [
                {
                    title: 'All Day Event',
                    start: YM + '-01',
                    description: 'This is a test description', //this is currently bugged: https://github.com/fullcalendar/fullcalendar/issues/1795
                    className: "border-warning bg-warning text-dark"
                },
                {
                    title: 'Reporting',
                    start: YM + '-14T13:30:00',
                    end: YM + '-14',
                    className: "bg-white border-primary text-primary"
                },
                {
                    title: 'Surgery oncall',
                    start: YM + '-02',
                    end: YM + '-03',
                    className: "bg-primary border-primary text-white"
                },
                {
                    title: 'NextGen Expo 2019 - Product Release',
                    start: YM + '-03',
                    end: YM + '-05',
                    className: "bg-info border-info text-white"
                },
                {
                    title: 'Dinner',
                    start: YM + '-12',
                    end: YM + '-10'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: YM + '-09T16:00:00',
                    className: "bg-danger border-danger text-white"
                },
                {
                    id: 1000,
                    title: 'Repeating Event',
                    start: YM + '-16T16:00:00'
                },
                {
                    title: 'Conference',
                    start: YESTERDAY,
                    end: TOMORROW,
                    className: "bg-success border-success text-white"
                },
                {
                    title: 'Meeting',
                    start: TODAY + 'T10:30:00',
                    end: TODAY + 'T12:30:00',
                    className: "bg-primary text-white border-primary"
                },
                {
                    title: 'Lunch',
                    start: TODAY + 'T12:00:00',
                    className: "bg-info border-info"
                },
                {
                    title: 'Meeting',
                    start: TODAY + 'T14:30:00',
                    className: "bg-warning text-dark border-warning"
                },
                {
                    title: 'Happy Hour',
                    start: TODAY + 'T17:30:00',
                    className: "bg-success border-success text-white"
                },
                {
                    title: 'Dinner',
                    start: TODAY + 'T20:00:00',
                    className: "bg-danger border-danger text-white"
                },
                {
                    title: 'Birthday Party',
                    start: TOMORROW + 'T07:00:00',
                    className: "bg-primary text-white border-primary text-white"
                },
                {
                    title: 'Gotbootstrap Meeting',
                    url: 'http://gotbootstrap.com/',
                    start: YM + '-28',
                    className: "bg-info border-info text-white"
                }],
                viewSkeletonRender: function()
                {
                    $('.fc-toolbar .btn-default').addClass('btn-sm');
                    $('.fc-header-toolbar h2').addClass('fs-md');
                    $('#calendar').addClass('fc-reset-order')
                },

            });

            calendar.render();
        });

    </script>
</html>