{{ enablePlugins('rickshaw,nvd3,flot,sparkline,jvectormap,simpleweather,prettify') }}
{% set title = "Dashboard" %}
{% set sidebar_classes = "yay-shrink yay-hide-to-small yay-gestures yay-light yay-static" %}

{% extends "layouts/application.html" %}


{% block content %}
  {% include "shared/page-title.html" %}

  <!-- Stats Panels -->
  <div class="row">
    <div class="col l4 s12">
      <a href="#" class="card-panel stats-card indigo lighten-2 indigo-text text-lighten-5">
        <i class="fa fa-comments-o"></i>
        <span class="count">145</span>
        <div class="name">Feedbacks</div>
      </a>
    </div>
    <div class="col l4 s12">
      <a href="#" class="card-panel stats-card blue lighten-2 blue-text text-lighten-5">
        <i class="fa fa-send"></i>

        <div class="graph">
          <div id="sparkcard1"></div>
        </div>

        <span class="count">342</span>
        <div class="name">Posts</div>
      </a>
    </div>
    <div class="col l4 s12">
      <div class="card-panel stats-card teal lighten-2 green-text text-lighten-5">
        <div class="progress small teal lighten-1">
          <div class="teal darken-1" style="width: 42%"></div>
        </div>

        <i class="fa fa-spinner"></i>
        <span class="count">42%</span>
        <div class="name">Server Load</div>
      </div>
    </div>
  </div>
  <!-- /Stats Panels -->

  <div class="row">
    <!-- Weather -->
    <div class="col l4 s12">
      <div class="card-panel weather-card-static indigo lighten-2 white-text">
        <div class="row">
          <div class="temp col s7">19°C <span class="alt">66°F</span></div>
          <div class="city col s5"><i class="fa fa-map-marker"></i> Seatle</div>
        </div>
        <div class="icon"><i class="wi wi-day-sunny"></i></div>
        <div class="currently">Sunny</div>
      </div>
    </div>
    <!-- /Weather -->

    <!-- Chart with Visits -->
    <div class="col l4 s12">
      <div class="card" id="rickshawStackedArea" style="height: 191px;"></div>
    </div>
    <!-- /Chart with Visits -->

    <!-- Chart with Visits -->
    <div class="col l4 s12">
      <div class="card" id="rickshawStackedBars" style="height: 191px;"></div>
    </div>
    <!-- /Chart with Visits -->
  </div>

  <div class="row sortable">
    <!-- Stacked Area Chart -->
    <div class="col s12 l7">
      <div class="card">
        <div class="title">
          <h5>Statistics</h5>
          <a class="close" href="#">
            <i class="mdi-content-clear"></i>
          </a>
          <a class="minimize" href="#">
            <i class="mdi-navigation-expand-less"></i>
          </a>
        </div>
        <div class="content">
          <div id="flotLineChart" style="height: 300px"></div>
        </div>
      </div>
    </div>
    <!-- /Stacked Area Chart -->

    <!-- Pie Chart -->
    <div class="col s12 l5">
      <div class="card">
        <div class="title">
          <h5>Browsers</h5>
          <a class="close" href="#">
            <i class="mdi-content-clear"></i>
          </a>
          <a class="minimize" href="#">
            <i class="mdi-navigation-expand-less"></i>
          </a>
        </div>
        <div class="content">
          <div id="flotPieChart" style="height: 300px"></div>
        </div>
      </div>
    </div>
    <!-- /Pie Chart -->
  </div>

  <div class="row sortable">
    <!-- Orders Card -->
    <div class="col l4 s12">
      <div class="card">
        <div class="title">
          <h5>Orders</h5>
          <a class="close" href="#">
            <i class="mdi-content-clear"></i>
          </a>
          <a class="minimize" href="#">
            <i class="mdi-navigation-expand-less"></i>
          </a>
        </div>
        <div class="content orders-card">

          <h4>3,729</h4>
          <div class="row">
            <div class="col s6">
              <small>Total Orders</small>
            </div>
            <div class="col s6 right-align">
              77% <i class="fa fa-level-down red-text"></i>
            </div>
          </div>
          <div class="progress small">
            <div class="determinate" style="width: 77%"></div>
          </div>

          <h4>$7,180</h4>
          <div class="row">
            <div class="col s6">
              <small>Total Income</small>
            </div>
            <div class="col s6 right-align">
              43% <i class="fa fa-level-up green-text"></i>
            </div>
          </div>
          <div class="progress small">
            <div class="determinate" style="width: 43%"></div>
          </div>

          <h4>27</h4>
          <div class="row">
            <div class="col s6">
              <small>Total Refunds</small>
            </div>
            <div class="col s6 right-align">
              7%
            </div>
          </div>
          <div class="progress small">
            <div class="determinate" style="width: 7%"></div>
          </div>

        </div>
      </div>
    </div>
    <!-- /Orders Card -->

    <!-- ToDo Card -->
    <div class="col l4 s12">
      <div class="card">
        <div class="title">
          <h5>Todo</h5>
          <a class="close" href="#">
            <i class="mdi-content-clear"></i>
          </a>
          <a class="minimize" href="#">
            <i class="mdi-navigation-expand-less"></i>
          </a>
        </div>
        

        <div class="content todo-card">
          <div class="todo-task">
            <input type="checkbox" id="checkbox1" checked />
            <label for="checkbox1">Transfer projects to the Gulp <span class="todo-remove mdi-action-delete"></span></label>
          </div>

          <div class="todo-task">
            <input type="checkbox" id="checkbox2">
            <label for="checkbox2">Make video for Youtube <span class="todo-remove mdi-action-delete"></span></label>
          </div>

          <div class="todo-task">
            <input type="checkbox" id="checkbox4">
            <label for="checkbox4">Learn Meteor.js <span class="todo-remove mdi-action-delete"></span></label>
          </div>

          <div class="input-field">
            <input id="todo-add" type="text">
            <label for="todo-add">Add New</label>
          </div>
        </div>

      </div>
    </div>
    <!-- /ToDo Card -->

    <!-- Image Card -->
    <div class="col l4 s12">
      <div class="card small of-h">
        <div class="card-image waves-effect waves-block waves-light">
          <img class="activator" src="assets/_con/images/image-4.jpg">
        </div>
        <div class="content">
          <span class="card-title activator grey-text text-darken-4">Gallery<i class="mdi-navigation-more-vert right"></i></span>
          <p><a href="media-gallery.html">Go to Gallery</a></p>
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">Gallery <i class="mdi-content-clear right"></i></span>
          <p class="flow-text">Gallery used PhotoSwipe and Isotope plugins.</p>
        </div>
      </div>
    </div>
    <!-- /Image Card -->
  </div>

  <div class="row">
    <!-- map -->
    <div class="col s12 l8">
      <div class="card">
        <div id="map1" class="map" style="height: 300px;"></div>
      </div>
    </div>
    <!-- /map -->

    <!-- rickshaw -->
    <div class="col s12 l4">
      <div class="card">

        <div class="title">
          <h5>Server Load</h5>
        </div>

        <div id="rickshawGraph"></div>
      </div>
    </div>
    <!-- /rickshaw -->
  </div>

{% endblock %}


{% block javascript %}
  <script>

  /*
   * Sparkline in Card panel
   */
  (function() {
    $("#sparkcard1").conSparkline([76,78,87,65,43,35,23,25,12,14,27,35,32,37,31,46,43,32,36,57,78,87,82,75,58,54,70,23,54,67,34,23,87,12,43,65,23,76,32,55], {
      type: 'bar',
      width: '100%',
      height: 20,
      barColor: '#2196f3'
    });
  }());


  var rickshawLine1 = [{"x":0,"y":13},{"x":1,"y":12},{"x":2,"y":24},{"x":3,"y":25},{"x":4,"y":12},{"x":5,"y":16},{"x":6,"y":24},{"x":7,"y":13},{"x":8,"y":12},{"x":9,"y":11}];
  var rickshawLine2 = [{"x":0,"y":16},{"x":1,"y":23},{"x":2,"y":17},{"x":3,"y":16},{"x":4,"y":22},{"x":5,"y":25},{"x":6,"y":21},{"x":7,"y":22},{"x":8,"y":12},{"x":9,"y":13}];

  /*
   * Rickshaw Stacked Area Chart
   */
  (function() {
    var element = $("#rickshawStackedArea");
    var graph = new Rickshaw.Graph( {
      element: element[0],
      renderer: 'area',
      stroke: false,
      series: [ {
        data: rickshawLine1,
        color: '#42a5f5',
        name: 'Visits'
      }, {    
        data: rickshawLine2,
        color: '#90caf9',
        name: 'Views'
      } ]
    } );
    graph.render();

    var hoverDetail = new Rickshaw.Graph.HoverDetail({
      graph: graph,
      xFormatter: function(x) { return x },
      yFormatter: function(y) { return y }
    });

    // responsive
    $(window).on('resize', function() {
      graph.configure({
        width: element.width()
      });
      graph.render();
    });
  }());


  /*
   * Rickshaw Stacked Bars
   */
  (function() {
    var element = $("#rickshawStackedBars");
    var graph = new Rickshaw.Graph( {
      element: element[0],
      renderer: 'bar',
      series: [ {
        data: rickshawLine1,
        color: '#26a69a',
        name: 'Visits'
      }, {    
        data: rickshawLine2,
        color: '#80cbc4',
        name: 'Views'
      } ]
    } );
    graph.render();

    var hoverDetail = new Rickshaw.Graph.HoverDetail({
      graph: graph,
      xFormatter: function(x) { return x },
      yFormatter: function(y) { return y }
    });

    // responsive
    $(window).on('resize', function() {
      graph.configure({
        width: element.width()
      });
      graph.render();
    });
  }());



  /*
   * Flot Line Chart
   */
  (function() {
    var chart = $("#flotLineChart");
    var data1 = {
      data: [[1, 50], [2, 58], [3, 45], [4, 62],[5, 55],[6, 65],[7, 61],[8, 70],[9, 65],[10, 70],[11, 53],[12, 49]],
      label: "Mails"
    };
    var data2 = {
      data: [[1, 25], [2, 31], [3, 23], [4, 48],[5, 38],[6, 40],[7, 47],[8, 55],[9, 43],[10,50],[11,37],[12, 29]],
      label: "SMS"
    };
    var data3 = {
      data: [[1, 4], [2, 13], [3, 7], [4, 17],[5, 20],[6, 24],[7, 13],[8, 17],[9, 10],[10,17],[11,6],[12, 3]],
      label: "Invoices"
    };
    var options = {
      series: {
        lines: {
          show: true,
          lineWidth: 1,
          fill: true, 
          fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.13 } ] }
        },
        points: {
          show: true, 
          lineWidth: 2,
          radius: 3
        },
        shadowSize: 0,
        stack: true
      },
      grid: {
        hoverable: true, 
        clickable: true, 
        tickColor: "#f9f9f9",
        borderWidth: 0
      },
      legend: {
        // show: false
        backgroundOpacity: 0,
        labelBoxBorderColor: "#fff"
      },  
      colors: ["#3f51b5", "#009688", "#2196f3"],
      xaxis: {
        ticks: [[1, "Jan"], [2, "Feb"], [3, "Mar"], [4,"Apr"], [5,"May"], [6,"Jun"], 
                   [7,"Jul"], [8,"Aug"], [9,"Sep"], [10,"Oct"], [11,"Nov"], [12,"Dec"]],
        font: {
          family: "Roboto,sans-serif",
          color: "#ccc"
        }
      },
      yaxis: {
        ticks:7, 
        tickDecimals: 0,
        font: {color: "#ccc"}
      }
    };
    
    function initFlot() {
      $.plot(chart, [data1, data2, data3], options);
      chart.find('.legend table').css('width', 'auto')
           .find('td').css('padding', 5);
    }
    initFlot();
    $(window).on('resize', initFlot);

    function showTooltip(x, y, contents) {
      $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y - 40,
        left: x - 55,
        color: "#fff",
        padding: '5px 10px',
        'border-radius': '3px',
        'background-color': 'rgba(0,0,0,0.6)'
      }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    chart.bind("plothover", function (event, pos, item) {
      if (item) {
        if (previousPoint != item.dataIndex) {
          previousPoint = item.dataIndex;

          $("#tooltip").remove();
          var x = item.datapoint[0].toFixed(0),
              y = item.datapoint[1].toFixed(0);

          var month = item.series.xaxis.ticks[item.dataIndex].label;

          showTooltip(item.pageX, item.pageY,
                      item.series.label + " of " + month + ": " + y);
        }
      }
      else {
        $("#tooltip").remove();
        previousPoint = null;
      }
    });
  }());



  /*
   * Flot Pie Chart
   */
  (function() {
    var chart = $("#flotPieChart");
    var data = [
        { label: "IE",  data: 19.5, color: "#90a4ae"},
        { label: "Safari",  data: 4.5, color: "#7986cb"},
        { label: "Opera",  data: 2.3, color: "#9575cd"},
        { label: "Firefox",  data: 36.6, color: "#4db6ac"},
        { label: "Chrome",  data: 36.3, color: "#64b5f6"}
    ];
    var options = {
      series: {
        pie: {
          innerRadius: 0.5,
          show: true
        }
      },
      grid: {
        hoverable: true
      },
      legend: {
        backgroundOpacity: 0,
        labelBoxBorderColor: "#fff"
      },
      tooltip: true,
      tooltipOpts: {
        content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
        shifts: {
          x: 20,
          y: 0
        },
        defaultTheme: false
      }
    };

    function initFlot() {
      $.plot(chart, data, options);
      chart.find('.legend table').css('width', 'auto')
           .find('td').css('padding', 5);
    }
    initFlot();
    $(window).on('resize', initFlot);

  }());


  /*
   * MAP 1
   */
  (function() {
    $('#map1').vectorMap({
      map: 'world_mill_en',
      zoom: 2,
      series: {
        regions: [{
          values: gdpData,
          scale: ['#e3f2fd', '#2196f3'],
          normalizeFunction: 'polynomial'
        }]
      },
      backgroundColor: '#fff',
      onRegionTipShow: function(e, el, code){
        el.html(el.html()+' (GDP - '+gdpData[code]+')');
      }
    });
  }());




  /*
   * Rickshaw
   */
  (function() {
    var rickshawSeries = [[], []];

    // Create random data
    var randomData = new Rickshaw.Fixtures.RandomData(50);
    for (var i = 0; i < 40; i++) {
      randomData.addData(rickshawSeries);
    }

    // Init Richshaw graph
    var element = $("#rickshawGraph");
    var graph = new Rickshaw.Graph({
      element: element[0],
      height: 253,
      interpolation: 'cardinal',
      renderer: 'area',
      series: [
        {
          data: rickshawSeries[0],
          color: '#4db6ac',
          name: 'HDD'
        }, {
          data: rickshawSeries[1],
          color: '#b2dfdb',
          name: 'CPU'
        }
      ]
    });

    // Add hover info
    new Rickshaw.Graph.HoverDetail({
      graph: graph
    });

    // Render graph
    graph.render();

    // Live Update
    setInterval(function () {
      randomData.removeData(rickshawSeries);
      randomData.addData(rickshawSeries);
      graph.update();
    }, 1000);

    // Responsive
    $(window).on('resize', function() {
      graph.configure({
        width: element.width()
      });
      graph.render();
    });

  }());


  setTimeout(function() {
    Materialize.toast('Welcome to Con!', 1000);
  }, 1000);

  </script>
{% endblock %}