<%= stylesheet_link_tag "css/main.css","css/bootstrap.css" %>
<%= render :partial=>"visitor_details/calender" %>
<%= render :partial=>"visitor_details/tag_selection" %>
<div id="chart_div" style="width: 900px; height: 500px;" data-post-url="<%=url_for({:controller=>'visitor_details',:action=>'visitors_bar_chart'})%>">
  <%=image_tag("dashboard_spinner.gif",:id=>"dashboard_spinner",:style=>"display:none")%>
</div>

<div id="visitors_unique_return" data-post-url="<%=url_for({:controller=>'visitor_details',:action=>'visitors_unique_return'})%>">
  <%=image_tag("dashboard_spinner.gif",:id=>"unique_return_spin",:style=>"display:none")%>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

<%= javascript_include_tag "multiselect/jquery.multiselect.js","dashboard.js","datepicker/daterangepicker.js","datepicker/moment.js","highchart/highcharts.js" %>
<!-- <script type="text/javascript" src="https://www.google.com/jsapi"></script> -->
<script type="text/javascript">
  // google.load('visualization', '1', {packages: ['corechart']});
  $(document).ready(function(){
    $("select").multiselect()
    jQuery("select option[value='<%=@loc_id%>']").prop("selected", "selected");
    $("select").multiselect('refresh');
      dashboard.visitors_bar_chart('<%=@startDate%>','<%=@endDate%>')
      dashboard.visitors_unique_return('<%=@loc_id%>','<%=@startDate%>','<%=@endDate%>')
  })

  $('#datepicker').daterangepicker({
      ranges: {
       'Today': [moment(), moment()],
       'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
       'Last 7 Days': [moment().subtract('days', 6), moment()],
       'Last 30 Days': [moment().subtract('days', 29), moment()],
       'This Month': [moment().startOf('month'), moment().endOf('month')],
       'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')],
       'This Year': [moment().startOf('year'), moment().endOf('year')],
       'Last Year': [moment().subtract('year', 1).startOf('year'), moment().subtract('year', 1).endOf('year')]
      },
      startDate: moment().subtract('days', 6),
      endDate: moment()
    },
    function(start, end) {
      $('#start_date').val(start.format('D MMM,YYYY 00:00:00'));
      $('#end_date').val(end.format('D MMM,YYYY 23:59:59'));
      $('#datepicker span').html(start.format('D MMM,YYYY') + ' - ' + end.format('D MMM,YYYY'));
      // document.forms[0].submit()
       dashboard.visitors_bar_chart($('#start_date').val(),$('#end_date').val())
       dashboard.visitors_unique_return('<%=@loc_id%>',$('#start_date').val(),$('#end_date').val())
    }
  )
  $(".dropdown-menu").hide()
</script>