{% set active_page = "Ecommerce" -%}

{% extends "layouts/" + layout + ".html" %}

{% block styles %}
<style>
  #map {
    height: 100%;
    width: 100%;
    min-height: 400px;
  }
  .portal-table-widget {
    overflow: auto;
  }
  .map-container {
    flex: 1 1 100%;
  }
</style>
{% endblock %}

{% block content %}
  <div class="mdc-layout-grid portal-dashboard">
    <div class="mdc-layout-grid__inner">
      <div class="portal-widget mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">

        <div class="portal-widget__card portal-widget__card--rounded portal-widget__card--minigraphs">
          <div class="portal-widget__card-content portal-widget__card-content--extra">
            <h4 class="mdc-typography--caption portal-margin-none">
              Recent Sales
            </h4>
            <div class="portal-display-flex">
              <i class="material-icons mdc-tab__portal-stat-caption--trend-up">trending_up</i>
              <h2 class="mdc-typography--display1 portal-margin-none">
                94
              </h2>
            </div>
          </div>
          <div class="portal-widget__canvas">
            <canvas id="recentSalesChart"></canvas>
          </div>
        </div>
      </div>
      <div class="portal-widget mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
        <div class="portal-widget__card portal-widget__card--rounded portal-widget__card--minigraphs">
          <div class="portal-widget__card-content portal-widget__card-content--extra">
            <h4 class="mdc-typography--caption portal-margin-none">
              New Customers
            </h4>
            <div class="portal-display-flex">
              <i class="material-icons mdc-tab__portal-stat-caption--trend-up">trending_up</i>
              <h2 class="mdc-typography--display1 portal-margin-none">
                258
              </h2>
            </div>
          </div>
          <div class="portal-widget__canvas">
            <canvas id="newCustomersChart"></canvas>
          </div>
        </div>
      </div>
      <div class="portal-widget mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
        <div class="portal-widget__card portal-widget__card--rounded portal-widget__card--minigraphs">
          <div class="portal-widget__card-content portal-widget__card-content--extra">
            <h4 class="mdc-typography--caption portal-margin-none">
              Active Users
            </h4>
            <div class="portal-display-flex">
              <i class="material-icons mdc-tab__portal-stat-caption--trend-up">trending_up</i>
              <h2 class="mdc-typography--display1 portal-margin-none">
                117
              </h2>
            </div>
          </div>
          <div class="portal-widget__canvas">
            <canvas id="activeUsersChart"></canvas>
          </div>
        </div>
      </div>
    </div>
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell--span-8-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
        <div class="portal-widget">
          <div class="mdc-card portal-widget__card portal-widget__card--rounded">
            <div class="portal-widget__card-content portal-widget__card-content--extra portal-display-flex">
              <div class="portal-display-flex__flexed">
                <h2 class="mdc-typography--subheading2 portal-margin-none portal-text-medium">
                  Daily Sales
                </h2>
                <h4 class="mdc-typography--caption portal-margin-none">
                  Week 21 compared to week 20
                </h4>
              </div>
              <div id="daily-sales-menu-button" class="mdc-menu-anchor mdc-icon-toggle material-icons portal-widget__menu-icon" aria-label="Sales/Product">
                more_vert
                <div class="mdc-menu" id="daily-sales-menu">
                  <div class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
                    <a href="dashboard-commerce.html" class="mdc-list-item" role="menuitem">Month</a>
                    <a href="dashboard-commerce.html" class="mdc-list-item" role="menuitem">Week</a>
                    <a href="dashboard-commerce.html" class="mdc-list-item" role="menuitem">Day</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="portal-widget__canvas">
              <canvas id="dailySalesChart"></canvas>
            </div>
          </div>
        </div>
        <div class="portal-widget">
          <div class="mdc-card portal-widget__card portal-widget__card--rounded mdc-card--portal-fullheight mdc-card--portal-space-between">
            <div class="portal-widget__card-content portal-widget__card-content--extra portal-display-flex">
              <div class="portal-display-flex__flexed">
                <h2 class="mdc-typography--subheading2 portal-margin-none portal-text-medium">
                  Sales Per Product
                </h2>
                <h4 class="mdc-typography--caption portal-margin-none">
                  Top 4 products of the month
                </h4>
              </div>
              <div id="table-widget-menu-button" class="mdc-menu-anchor mdc-icon-toggle material-icons portal-widget__menu-icon" aria-label="Sales/Product">
                more_vert
                <div class="mdc-menu" id="table-widget-menu">
                  <div class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
                    <a href="dashboard-commerce.html" class="mdc-list-item" role="menuitem">Month</a>
                    <a href="dashboard-commerce.html" class="mdc-list-item" role="menuitem">Week</a>
                    <a href="dashboard-commerce.html" class="mdc-list-item" role="menuitem">Day</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="portal-table-widget">
              <table class="mdl-data-table">
                <thead>
                  <tr>
                    <th></th>
                    <th class="mdl-data-table__cell--non-numeric">Product</th>
                    <th>Sales Increase</th>
                    <th>Sale Volume</th>
                    <th>Discount</th>
                    <th>Stock</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><img src="{{ base }}assets/images/product-01.jpg" class="portal-table-widget--thumbnail"alt="product"></td>
                    <td class="mdl-data-table__cell--non-numeric">White Skirt</td>
                    <td>11%</td>
                    <td>12</td>
                    <td>12%</td>
                    <td>125</td>
                  </tr>
                  <tr>
                    <td><img src="{{ base }}assets/images/product-02.jpg" class="portal-table-widget--thumbnail"alt="product"></td>
                    <td class="mdl-data-table__cell--non-numeric">Bomber Jacket</td>
                    <td>10%</td>
                    <td>45</td>
                    <td>19%</td>
                    <td>25</td>
                  </tr>
                  <tr>
                    <td><img src="{{ base }}assets/images/product-03.jpg" class="portal-table-widget--thumbnail"alt="product"></td>
                    <td class="mdl-data-table__cell--non-numeric">Luxury Black Shirt</td>
                    <td>8%</td>
                    <td>48</td>
                    <td>11%</td>
                    <td>568</td>
                  </tr>
                  <tr>
                    <td><img src="{{ base }}assets/images/product-04.jpg" class="portal-table-widget--thumbnail"alt="product"></td>
                    <td class="mdl-data-table__cell--non-numeric">Sporty Hoodie</td>
                    <td>4%</td>
                    <td>12</td>
                    <td>7%</td>
                    <td>115</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="portal-widget mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">

        <div class="mdc-card portal-widget__card portal-widget__card--rounded mdc-card--portal-fullheight mdc-card--portal-space-between">
            <div class="portal-widget__card-content portal-widget__card-content--extra portal-display-flex">
              <div class="portal-display-flex__flexed">
                <h2 class="mdc-typography--subheading2 portal-margin-none portal-text-medium">
                  Sales By Region
                </h2>
                <h4 class="mdc-typography--caption portal-margin-none">
                  Shop distribution
                </h4>
              </div>
              <div id="region-sales-menu-button" class="mdc-menu-anchor mdc-icon-toggle material-icons portal-widget__menu-icon" aria-label="Sales/Product">
                more_vert
                <div class="mdc-menu" id="region-sales-menu">
                  <div class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
                    <a href="dashboard-commerce.html" class="mdc-list-item" role="menuitem">Month</a>
                    <a href="dashboard-commerce.html" class="mdc-list-item" role="menuitem">Week</a>
                    <a href="dashboard-commerce.html" class="mdc-list-item" role="menuitem">Day</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="map-container">
              <div id="map"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
{% endblock %}

{% block scripts %}
  <script>
    (function() {
      function setupDashboardCharts() {
        const recentSalesCtx = document.getElementById('recentSalesChart') ? document.getElementById('recentSalesChart').getContext('2d') : '';
        const newCustomersCtx = document.getElementById('newCustomersChart') ? document.getElementById('newCustomersChart').getContext('2d') : '';
        const activeUsersCtx = document.getElementById('activeUsersChart') ? document.getElementById('activeUsersChart').getContext('2d') : '';
        const dailySalesCtx = document.getElementById('dailySalesChart') ? document.getElementById('dailySalesChart').getContext('2d') : '';

        let primaryColor = window.getComputedStyle(document.documentElement).getPropertyValue('--mdc-theme-primary');
        let primaryDarkColor = window.getComputedStyle(document.documentElement).getPropertyValue('--mdc-theme-primary-dark');
        let secondaryColor = window.getComputedStyle(document.documentElement).getPropertyValue('--mdc-theme-secondary');
        let secondaryLightColor = window.getComputedStyle(document.documentElement).getPropertyValue('--mdc-theme-secondary-light');
        let secondaryDarkColor = window.getComputedStyle(document.documentElement).getPropertyValue('--mdc-theme-secondary-dark');

        // Fallback for IE11, whereby getPropertyValue returns an empty string.
        primaryColor = '' === primaryColor ? '#03A9F4' : primaryColor;
        primaryDarkColor = '' === primaryDarkColor ? '#424242' : primaryDarkColor;
        secondaryColor = '' === secondaryColor ? '#FF4081' : secondaryColor;
        secondaryLightColor = '' === secondaryLightColor ? '#ff87b0' : secondaryLightColor;
        secondaryDarkColor = '' === secondaryDarkColor ? '#f80054' : secondaryDarkColor;

        const lineChartConfig = {
          type: 'line',
          data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
            datasets: [{
              label: false,
              data: randomData(100, 7, true),
              backgroundColor: secondaryColor,
              borderColor: secondaryColor,
              borderWidth: 1,
              pointBackgroundColor: primaryColor,
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: secondaryColor,
              pointHoverBorderColor: secondaryColor,
              lineTension: 0.0001,
              fill: 'origin',
              pointBorderWidth: 2,
              pointRadius: 3
            }]
          },
          options: {
            legend: {
              display: false
            },
            tooltips: {
              enabled: true,
              xPadding: 20,
              yPadding: 10,
              displayColors: false,
              backgroundColor: primaryColor
            },
            scales: {
              xAxes: [{
                display: false
              }],
              yAxes: [{
                display: false
              }]
            },
            responsive: true,
            maintainAspectRatio: false
          }
        };

        // Recent Sales Chart
        let recentSalesChart;
        if (recentSalesCtx) {
          recentSalesChart = new Chart(recentSalesCtx, lineChartConfig);
        }

        const areaChartConfig = {
          type: 'line',
          data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
            datasets: [{
              label: false,
              data: randomData(100, 7, true),
              backgroundColor: primaryColor,
              borderColor: primaryColor,
              borderWidth: 2,
              pointRadius: 0,
              lineTension: 0.45,
              fill: 'start'
            }]
          },
          options: {
            legend: {
              display: false
            },
            tooltips: {
              enabled: true,
              xPadding: 5,
              yPadding: 5,
              displayColors: false
            },
            scales: {
              xAxes: [{
                display: false
              }],
              yAxes: [{
                display: false
              }]
            },
            responsive: true,
            maintainAspectRatio: false
          }
        };

        // New Customers Chart
        let newCustomersChart;
        if (newCustomersCtx) {
          newCustomersChart = new Chart(newCustomersCtx, areaChartConfig);
        }

        const usersBarChartConfig = {
          type: 'bar',
          data: {
            labels: ['15 minutes ago', '30 minutes ago', '45 minutes ago', '60 minutes ago', '75 minutes ago', '90 minutes ago', '1 hour ago', '2 hours ago', '3 hours ago', '4 hours ago', '5 hours ago', '6 hours ago', '7 hours ago', '8 hours ago', '9 hours ago', '12 hours ago'],
            datasets: [{
              label: 'Views',
              data: randomData(100, 16),
              backgroundColor: [primaryColor, primaryColor, primaryColor, primaryColor, primaryColor, primaryColor, primaryColor, primaryColor, primaryColor, primaryColor, primaryColor, primaryColor, primaryColor, primaryColor, primaryColor, secondaryColor],
              borderColor: primaryColor,
              hoverBackgroundColor: secondaryColor
            }]
          },
          options: {
            legend: {
              display: false
            },
            animation: false,
            responsive: false,
            tooltips: {
              enabled: false,
              xPadding: 5,
              yPadding: 5,
              displayColors: false
            },
            scales: {
              xAxes: [{
                display: false
              }],
              yAxes: [{
                display: false
              }]
            }
          }
        };

        // Users bar chart.
        let activeUsersChart;
        if (activeUsersCtx) {
          activeUsersChart = new Chart(activeUsersCtx, usersBarChartConfig);
        }

        const dailySalesBarChartConfig = {
          type: 'bar',
          data: {
            labels: ['15 minutes ago', '30 minutes ago', '45 minutes ago', '60 minutes ago', '75 minutes ago', '90 minutes ago', '1 hour ago', '2 hours ago', '3 hours ago', '4 hours ago', '5 hours ago', '6 hours ago', '7 hours ago', '8 hours ago', '9 hours ago', '12 hours ago'],
            datasets: [{
              label: 'Views',
              data: randomData(100, 16),
              backgroundColor: primaryColor,
              borderColor: primaryColor,
              hoverBackgroundColor: primaryColor
            }, {
              label: 'Sales',
              data: randomData(100, 16),
              backgroundColor: secondaryColor,
              borderColor: secondaryColor,
              hoverBackgroundColor: secondaryColor
            }]
          },
          options: {
            legend: {
              display: false
            },
            animation: false,
            responsive: true,
            tooltips: {
              enabled: true,
              xPadding: 20,
              yPadding: 10,
              displayColors: false,
              backgroundColor: primaryColor
            },
            scales: {
              xAxes: [{
                display: false,
                stacked: true
              }],
              yAxes: [{
                display: false,
                stacked: true
              }]
            }
          }
        };

        // Users bar chart.
        let dailySalesChart;
        if (dailySalesCtx) {
          dailySalesChart = new Chart(dailySalesCtx, dailySalesBarChartConfig);
        }

        const body = document.getElementsByTagName('body').item(0);
        body.addEventListener('portalThemeChanged', () =>
          {
            // Clean up any references stored to the chart object.
            recentSalesChart.destroy();
            newCustomersChart.destroy();
            activeUsersChart.destroy();
            dailySalesChart.destroy();
            setupDashboardCharts();
          }
        );
      }
      function randomData(max, count, firstZero) {
        const data = [];
        for (let x = 0; x < count; x++) {
          const element = data[x];
          data[x] = Math.round(Math.random() * max);
        }
        if (firstZero === true) {
          data[0] = 0;
        }
        return data;
      }
      // Wait 1sec before initializing the charts so the switcher CSS works.
      setTimeout(setupDashboardCharts, 1000);

      // Menu button on table widget
      const tableWidgetMenuEl = document.querySelector('#table-widget-menu');
      if (tableWidgetMenuEl !== null) {
        // Create layout menu.
        const tableWidgetMenu = new mdc.menu.MDCMenu(tableWidgetMenuEl);
        tableWidgetMenu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.BOTTOM_START);
        // Set listener for opening menu.
        document.querySelector('#table-widget-menu-button').addEventListener('click', function() {
          tableWidgetMenu.open = !tableWidgetMenu.open;
        });
      }

      // Menu button on daily sales widget
      const dailySalesMenuEl = document.querySelector('#daily-sales-menu');
      if (dailySalesMenuEl !== null) {
        // Create layout menu.
        const dailySalesMenu = new mdc.menu.MDCMenu(dailySalesMenuEl);
        dailySalesMenu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.BOTTOM_START);
        // Set listener for opening menu.
        document.querySelector('#daily-sales-menu-button').addEventListener('click', function() {
          dailySalesMenu.open = !dailySalesMenu.open;
        });
      }

      // Menu button on region sales widget
      const regionSalesMenuEl = document.querySelector('#region-sales-menu');
      if (regionSalesMenuEl !== null) {
        // Create layout menu.
        const regionSalesMenu = new mdc.menu.MDCMenu(regionSalesMenuEl);
        regionSalesMenu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.BOTTOM_START);
        // Set listener for opening menu.
        document.querySelector('#region-sales-menu-button').addEventListener('click', function() {
          regionSalesMenu.open = !regionSalesMenu.open;
        });
      }
    })();
  </script>

  <script>
    function initMap() {

      let position = {lat: 40.748817, lng: -73.935242};
      let map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: position,
        zoomControl: false,
        scrollwheel: false,
        mapTypeControl: false,
        fullscreenControl: false,
        styles: [
        {
          'featureType': 'administrative.country',
          'elementType': 'geometry',
          'stylers': [
            {
              'visibility': 'simplified'
            },
            {
              'hue': '#ff0000'
            }
          ]
        }]
      });
      let marker = new google.maps.Marker({
        position: position,
        map: map
      });
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDXVUKDvaxn13Atl_SPuQj2g5MK-C1RYRs&callback=initMap"></script>
{% endblock %}