<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$language.lblBusiness} : {$language.lblAnalyticsReport} : {$language.lblAgeGenderReport}</title>
{include file='CommonJavaScript.tpl'}
{include file='CommonStyles.tpl'}
<link rel="stylesheet" type="text/css" href="{$view_styles}/analytics.css" />
<link rel="stylesheet" type="text/css" href="{$view_styles}/right-menu.css" />
 <link rel="stylesheet" type="text/css" href="{$view_styles}/listing.css" />

<link href="{$view_styles}/jqueryui.plugin.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="{$view_styles}/chosen.css" />
<link rel="stylesheet" type="text/css" href="{$view_styles}/analytics/ui.daterangepicker.css" />
<link rel="stylesheet" type="text/css" href="{$view_styles}/analytics/jquery-ui-1.8.19.custom.css" />
{include file='CommonCustomStyles.tpl'}
{form->basepath_script}
{form->rootpath_script}
</head>
<body class="{$languageDirection}">
<div class="outer" id="main">
  {include file='CommonHeader.tpl'}
  <!--End:Header Container--> 
  <!--***********************************************************************END HEADER CONTAINER******************************************************-->
 <div class="content-wrapper">
    <!-- left wrapper starts-->
    <div class="container-fluid">
    <div class="content_wrapper"> 
     
      <!-- Inner Content Container starts-->
       
      <div class="container-section status-01"> 
           <h3 class="border-bottom">{$language.lblAgeGenderDistribution|default:''}</h3>
	  <!-- Search container starts -->
      <div class="search_container content-block"> 
          {form->start name="frmSearchHourly" action="" method="post"}
            <div class="inner">
             <div class="row">
            	<div class="form-group col-xs-12 col-sm-3">
                	<label class="label-field01">{$language.lblGender}</label>
                    <span class="form-field01 heightauto"> {form->select class="chzn-select" id="searchGender"  name="searchGender" options="Male->{$language.lblMale}~*Female->{$language.lblFemale}~*Not Specified->{$language.lblNotSpecified}" multiple="multiple" style="width:100%;" value=$searchGenderSelect}</span>
                 </div>
               <div class="form-group col-xs-12 col-sm-3">
                	<label class="label-field01">{$language.lblAge}</label>
                   <span class="form-field01 heightauto">  {form->select id="searchAge"  name="searchAge" class="chzn-select"  multiple="multiple" options="below17->0-17~*18-24->18-24~*25-34->25-34~*35-54->35-54~*above55->{$language.lbl55plus}~*notage->{$language.lblNotSpecified}" style="width:100%;" value=$searchAgeSelect}</span>
                 </div>
                <div class="form-group col-xs-12 col-sm-3">
                	<label class="label-field01">{$language.lblDate}</label>
                   <span class="form-field01"> <div class="text-box-div-date">{form->textbox name="date" readonly="readonly" class="date-field form-control"}</div></span>
                 </div>        
                 <div class="col-xs-12 ">
                
                   <span class="form-field01">  {form->submit name="submitSearch" id="submit" class="btn btn-sm btn-primary"  value=$language.lblSearch}
                  {html->anchor href="/analytics/agegender/" class="action-link" content=$language.lblListAll}</span>
                 </div>
                </ul>
            </div>
            {form->close}
          </div>
      <!-- Search container ends --> 
      
      <!---Grid starts------>
              <div class="box-content margin-top row">
                 <ul class="clearfix col-xs-12 col-sm-10 col-md-6 rmv-padding">
                  <li class="col-xs-12 col-sm-4">
                     <div class="grey-box-content">
                       {$language.lblVisits} 
                       <p>{$totalResults.totalCustomers}</p>                      
                     </div>
                   </li>
                 
                   <li class="col-xs-12 col-sm-4">
                     <div class="grey-box-content">
                      {$language.lblNewVisits}
                       <p>{$totalResults.newVisit}</p>                       
                     </div>
                   </li>  
                   <li class="col-xs-12 col-sm-4">
                     <div class="grey-box-content">
                       {$language.lblReturningVisits}
                       <p>{$totalResults.returnVisit}</p>                       
                     </div>
                   </li>   
                                     
                 </ul>
              </div>
       
        </div>
        </div>
      {if $resultLog|@count>0} 
     <div class="row">
          <div class="col-sm-6 col-xs-12">
          <div class="container-section">
<!--           <h3 >{$language.lblAgeGender|default:''}</h3>-->
          <div class="graph-container box-row01" >
          <div class="clearfix">
          <!--<div id="ageGenderDistributionLegend"> </div>-->
           <div class="ageGenderDistributiongraphTotalHolder" id="ageGenderDistributiongraphTotalHolder"></div>
            <div id="ageGenderDistribution" style="height:205px;width:99%">
            
            	{$graphData}
 
           </div>
  
            </div>
          </div>
             
              <div class="grid_table01">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <th align="left" valign="middle" >{$language.lblGender}</th>
                    {foreach from=$ages item="age" key="key1"}
                <th align="left" valign="middle">{$age}</th>
             {/foreach} </tr>
                 {foreach from=$genderTypes item="item" key="key2"}
              <tr >
               <td align="left" valign="middle" >{$item}</td>
                {foreach from=$ages item="age" key="key3"}
                <td align="left" valign="middle">{if $resultLog[$key2][$key3].graphY >0}{$resultLog[$key2][$key3].graphY}{else}0{/if}</td>
                {/foreach}
              </tr>
              {/foreach}
                </table>

                 </div>
             
              </div>
                  </div>
          
            <div class="col-sm-6 col-xs-12">
             <div class="container-section">
      <!---Grid ends--->
<!--      <h3 class="topspace">{$language.lblAgeWeek|default:''}</h3>-->
       <div class="graph-container box-row01" >
        <div class="listing_overview">
        <!-- <div id="weeklyReportLegend" ></div>-->
        <div class="weeklyReportgraphTotalHolder" id="weeklyReportgraphTotalHolder"></div>
            <div id="weeklyReport" style="width:99%; height:205px;">
            
            	{$weeklyReport}
            
            </div>
           
          </div>
          	 
       </div>
         </div>
         </div>
          </div>
       {else}
            <div  class="message_info"> {$language.msgNoRecords}</div>
            {/if}
     
      <!-- Inner Content Container ends-->
 
   
    <!-- left wrapper ends-->
    <!-- right side bar starts-->
    <div class="right-sidebar">
    <div class="side_wrapper">    
    <!-- right side menu starts-->
    {*{include file='AnalyticsSideMenu.tpl'} *}
    <!-- right side menu ends-->
    </div>
    </div>
    <!-- right side bar ends-->
    <div class="clear"></div>
  </div>
  <!--End:Content Container--> 
  {include file='CommonFooter.tpl'}
</div>
<!--End:Outer Container--> 
{include file='CommonJavaScriptBottom.tpl'} 
<script type="text/javascript" src="{$common_js}/date.js"></script>
<script type="text/javascript" src="{$view_javascript}/analytics/daterangepicker.jQuery.js"></script>
<script type="text/javascript" src="{$view_javascript}/analyticsDetail.page.js"></script>
<script type="text/javascript" src="{$view_javascript}/chosen.jquery.min.js"></script>
<script type="text/javascript">
 {literal}
 $(".chzn-select").chosen(); $(".chzn-single").chosen({allow_single_deselect:true}); 
 //expandable collapsable table  :: Starts
 {/literal}
 $('.side_wrapper div ul li a[rel=analytics_agegender]').addClass('selected');
 $('.side_wrapper div ul li a[rel=analytics_location]').addClass('removeborder');
 var lblNoMatch   =   '{$language.lblNoMatch}';
</script>
{html->messages_script id="common_message"}
</body>
</html>