<div class="dashboard-wrapper">
<!-- Main Container Start -->
<div id="change_network" url-link="<%= url_for({:controller=>'visitor_details',:action=>'change_network', :id=>''}) %>">
    <%=render :partial=>"shared/top_bar"%>
  </div>
  <div class="main-container">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12 col-xs-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <i class="icon-dashboard"></i>
              <h3 class="panel-title">Store Hour Optimization</h3>
            </div>
            <div class="panel-body">
              <%= form_for :store_hour_optimization, :url => {:controller=>:visitor_details, :action=>:store_hour_optimization},:html=>{}  do %>
                <!-- <div class="container"> -->
                  <%= render :partial=>"visitor_details/calender" %>
                  <%= render :partial=>"visitor_details/tag_selection" %><br />
                  <%= render :partial=>"visitor_details/dashboard_store_hrs_opt" %>
                <!-- </div> -->
              <% end %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function(){
  $("#aps_tokenfield").tokenInput(JSON.parse(lists("<%= @aps%>")), {
    theme: "facebook",
    prePopulate: JSON.parse(lists("<%= @existing_aps %>"))
  });
  loc_ids = selected_values($("#aps_tokenfield").tokenInput("get"))
  dashboard.visitors_bar_chart(loc_ids,'<%=@startDate%>','<%=@endDate%>')
  })

  function selected_values(selectedValues){
    loc_ids = ""
    jQuery.each(selectedValues, function(i){
      loc_ids += selectedValues[i].id+"--"+selectedValues[i].name+"&&"
    })
    return loc_ids
  }
  
  function lists(myArray){
    myArray=myArray.replace(/&quot;/gi,'"');
    myArray=myArray.replace(/=&gt;/gi,":");
    return myArray.replace(/\s+/g, '')
  }

  $('#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'));
      $('#mac_ids').val( selected_values($("#aps_tokenfield").tokenInput("get")) )
      $('#datepicker span').html(start.format('D MMM,YYYY') + ' - ' + end.format('D MMM,YYYY'));
       document.forms[0].submit()
    }
  )
</script>