@extends('layouts.app')
@section('content')
<section class="page-header row">
    <h1> {{ $pageTitle }} <small> {{ $pageNote }} </small></h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
      <li  class="active"> {{ $pageTitle }} </li>
    </ol>
  </section>

<div class="page-content row">
  <div class="page-content-wrapper no-margin">

    <div class="sbox">
      <div class="sbox-title">
        <h1> {{ $pageTitle }} <small> {{ $pageNote }} </small></h1>
      </div>
      <div class="sbox-content">
        <form class="form-horizontal" id="form" action="#" method="post">
          <div class="form-group depen- wrap-content  " >
            <label for="select" class=" control-label col-md-3 text-left">Select</label> 
            <div class="col-md-9">
              <select id="report_for" name="report_for" class='select2 '>
                <option value="visitor_pageview">Visitors and pageviews</option>
                <option value="total_visitor_pageview">Total Visitors and pageviews</option>
                <option value="visited_pages">Most visited pages</option>
                <option value="top_referrers">Top Referrers</option>
                <option value="user_types">User Types</option>
                <option value="top_browsers">Top Browsers</option>
              </select>
            </div>  
          </div> 
          
          <div class="form-group depen- wrap-url  " > 
              <label for="text" class=" control-label col-md-3 text-left">start date</label> 
              <div class="col-md-9">             
                <input id="start_date" name="start_date" type="Date" class="form-control input-sm"> 
              </div>              
          </div>    
         
          <div class="form-group depen- wrap-url  " >    
                <label for="text1" class=" control-label col-md-3 text-left">end date</label>
                <div class="col-md-9">            
                  <input id="end_date" name="end_date" type="Date" class="form-control input-sm">  
                </div>          
          </div>  
          </div> 
        </form>
        <div class="sbox-title clearfix">
          <div class="sbox-tools" >
          <button name="submit" class="btn btn-primary" onclick="getData()">Submit</button> 
          </div>      
        </div>



      </div>
      <div id="data"></div>
    </div>
  </div>
</div>

@stop
<script>
  function getData(){
    var data = $('#form').serialize();
     
			$.ajax(
			{
        
					type: "POST",
					url: '/googlereport' ,
					data:data,
					datatype: "html",
			})
      .done(function(data)
			{
        
          $("#data").empty().html(data);
			})
      .fail(function( data ) {
        var response = JSON.parse(data.responseText);
        $.each(data.responseJSON, function (i, error) {
                var el = $(document).find('[name="'+i+'"]');
                el.after($('<span style="color: red;">'+error[0]+'</span>'));
            });
      })
			
			
}

</script>