<!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.lblAffiliate} : {$language.lblWidgets}</title>
{include file='CommonStyles.tpl'}
<link rel="stylesheet" type="text/css" href="{$view_styles}/create-widget.css"/>
<link rel="stylesheet" type="text/css" href="{$view_styles}/widget-page.css" />
<link rel="stylesheet" type="text/css" href="{$view_styles}/colorbox.css"/>
<link rel="stylesheet" type="text/css" href="{$view_styles}/ui.daterangepicker.css" />
{include file='CommonJavaScript.tpl'}
<style>
#cboxLoadedContent{
	padding-top:25px;
}
</style>
</head>
<body>
<!-- Outer container starts-->
<div class="outer_container"> 
  <!-- Header Container starts--> 
  {include file='CommonTop.tpl'} 
  <!-- Header Container ends--> 
  <!-- Content Container starts-->
  <div class="content_container2"> 
    <!-- left wrapper starts-->
    <div class="left_wrapper">
      <div class="content_wrapper"> {if $resWidgetDetails}
      <div class="submit-block  fixing_right"> {html->anchor id="editWidget" class="curve-3" caption=$language.lblEdit href="/widget/edit/id/$affiliateWidgetDetailID/"}
      </div>
        {form->hidden id="affiliateWidgetDetailID" name="affiliateWidgetDetailID"}
        {form->hidden id="location" name="location"}
        {form->hidden id="widgetType" name="widgetType"}
        {form->hidden id="widgetIDEncrypted" name="widgetIDEncrypted"}
        {html->anchor  href="/widget/ajaxWidget/$widgetIDEncrypted/" class="widget-preview-btn fixing_right" caption=$language.lblWidgetPreview id="widget_preview"}{/if}
        <h2>{$resWidgetDetails.widgetName} {if $resWidgetDetails.widgetStatus=='Active'}<span class="status_approved">{$language.lblActive}</span>{/if}{if $resWidgetDetails.widgetStatus=='Inactive'}<span class="status_suspended">{$language.lblInactive}</span>{/if}</h2>
        <!-- Inner Content Container starts--> 
        {if $resWidgetDetails}
        <div class="widget-listing clearfix">
          <div class="widgetGeneratorHolder">
            <div class="widgetGenerator">
              <ul>
                <li>
                  <div class="widgetExpand expand"><span>{$language.lblBasicInfo} </span></div>
                  <div class="widgetSections widgetExpandSection ">
                    <ul>
                      <li class="clearfix">
                        <div class="left fixing_left"> {$language.lblCreatedDate} </div>
                        <div class="right fixing_left"><strong>{$resWidgetDetails.affiliateWidgetCreatedDate|date_format:$settingsDateFormat} {$resWidgetDetails.affiliateWidgetCreatedDate|date_format:$settingsTimeFormat}</strong></div>
                      </li>
                      <li class="clearfix">
                        <div class="left fixing_left"> {$language.lblProductCategory} </div>
                        <div class="right fixing_left">{$resCategoryTree}</div>
                      </li>
					  <li class="clearfix">
                        <div class="left fixing_left"> {$language.lblFilters} </div>
                        <div class="right fixing_left">{$resWidgetFilters[$resWidgetDetails.widgetFilter]}</div>
                      </li>
                    </ul>
                  </div>
                </li>
                <li>
                  <div class="widgetExpand "><span>{$language.lblSettings} </span></div>
                  <ul class="widgetSections widgetExpandSection" style="display:none">
                    <li class="clearfix">
                      <div class="left fixing_left">{$language.lblWidgetContentType} </div>
                      <div class="right fixing_left combowrap"> {$resWidgetDetails.affiliateWidgetContentType} </div>
                    </li>
                    <li class="clearfix">
                      <div class="left fixing_left"> {$language.lblWidgetType} </div>
                      <div class="right fixing_left combowrap">{$resWidgetDetails.widgetType} </div>
                    </li>
                    <li class="clearfix">
                      <div class="left fixing_left"> {$language.lblLanguage} </div>
                      <div class="right fixing_left ">{$resLanguage.languageName} </div>
                    </li>
                  </ul>
                </li>
                <li>
                  <div class="widgetExpand "><span>{$language.lblAppearance} </span> {assign var="widgetColor" value=$widgetColor}</div>
                  <div class="widgetSections widgetExpandSection clearfix" style="display:none">
                    <ul class="appearance fixing_left">
                      <li class="clearfix">
                        <div class="left01 fixing_left"> {$language.lblTextColor} </div>
                        <div class="right01 fixing_left">
                          <div  style="background-color: {$widgetColor['textColor']};  width:30%; height:20px; border:solid 1px #000;"></div>
                        </div>
                      </li>
                      <li class="clearfix">
                        <div class="left01 fixing_left"> {$language.lblHeaderColor} </div>
                        <div class="right01 fixing_left">
                          <div  style="background-color: {$widgetColor['headerColor']}; width:30%; border:solid 1px #000; height:20px;"> </div>
                        </div>
                      </li>
                      <li class="clearfix">
                        <div class="left01 fixing_left"> {$language.lblRegualarPriceTextColor}</div>
                        <div class="right01 fixing_left">
                          <div  style="background-color: {$widgetColor['regualarPriceTextColor']};  width:30%;border:solid 1px #000; height:20px;"></div>
                        </div>
                      </li>
                      <!-- <li class="clearfix">
                        <div class="left01 fixing_left"> {$language.lblDiscountTextColor} </div>
                        <div class="right01 fixing_left">
                          <div  style="background-color: {$widgetColor['discountTextColor']|default:''};  width:30%; height:20px; border:solid 1px #000;"></div>
                        </div>
                      </li> -->
					  {if $resWidgetDetails.widget_format eq 'Large'}
						 <li class="clearfix">
							<div class="left01 fixing_left"> {$language.lblBackgroundColor} </div>
							<div class="right01 fixing_left">
							  <div  style="background-color: {$widgetColor['backgroundColor']};  width:30%;border:solid 1px #000; height:20px;"></div>
							</div>
						  </li>
					  {/if}
                    </ul>
                    <ul class="appearance fixing_left">
					{if $resWidgetDetails.widget_format neq 'Large'}
                      <li class="clearfix">
                        <div class="left01 fixing_left"> {$language.lblBackgroundColor} </div>
                        <div class="right01 fixing_left">
                          <div  style="background-color: {$widgetColor['backgroundColor']};  width:30%;border:solid 1px #000; height:20px;"></div>
                        </div>
                      </li>
					  {/if}
					  {if $resWidgetDetails.widget_format eq 'Large'}
                      <li class="clearfix">
                        <div class="left01 fixing_left"> {$language.lblGrabButtonColor} </div>
                        <div class="right01 fixing_left">
                          <div  style="background-color: {$widgetColor['grabButtonColor']};  width:30%;border:solid 1px #000; height:20px;"></div>
                        </div>
                      </li>
                      <li class="clearfix">
                        <div class="left01 fixing_left"> {$language.lblGrabButtonTextColor} </div>
                        <div class="right01 fixing_left">
                          <div  style="background-color: {$widgetColor['grabButtonTextColor']};  width:30%;border:solid 1px #000; height:20px;"></div>
                        </div>
                      </li>
					  {/if}
                      <li class="clearfix">
                        <div class="left01 fixing_left"> {$language.lblProductPriceTextColor} </div>
                        <div class="right01 fixing_left">
                          <div  style="background-color: {$widgetColor['productPriceTextColor']};  width:30%; height:20px; border:solid 1px #000;"></div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </li>
                <li>
                  <div class="widgetExpand "><span>{$language.lblDimensions} </span></div>
                  <ul class="widgetSections widgetExpandSection" style="display:none">
                    <li id="tabs" class="clearfix">
                      <div class="tabsHeader">
                        <ul>
                          <li class="clearfix">
                            <div class="tabContents" id="tab-1">
                              <ul class="WidgetSize">
                                {if $resWidgetDetails.widget_format == "Sidebar"}
                                <li class="WidgetSizeInd active" id="WidgetSize_160*400" style="cursor:default;"><img height="46" width="27" src="{$view_images}/widget-sidebar.gif" hspace="0" vspace="0" /> {/if}
                                  {if $resWidgetDetails.widget_format == "Large"} <img src="{$view_images}/widget-large.gif" width="60" height="48" /> {/if}
                                  {if $resWidgetDetails.widget_format == "Banner"} <img src="{$view_images}/widget-banner.gif" width="60" height="19" /> {/if} <br />
                                  {$resWidgetDetails.affiliateProductSizeID} </li>
                              </ul>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="getCodeButton" onclick="show_getCode()">{$language.lblGetCode}</div>
            <div class="getWidgetCode" id="getWidgetCode" style="display:none;">{$language.lblGetCode}
            <a style="float:right; font-weight:bolder; cursor:pointer;" onclick = "hide_getCode()" title={$language.lblClose}>X</a>
              {form->textarea name="copyCode" readonly='true'} </div>
          </div>
          <div class="search_container">
            <div class="inner">
             {form->start  method="post"}
			  <table width="50%" border="0" cellspacing="0" cellpadding="0" >
                <tr>
                  <td  align="left" valign="middle" class="left">{$language.lbldate}</td>
                  <td align="left" valign="middle"><div class="textfield">
                      <div class="text-box-div-date"> {form->textbox name="daterange" type="text" id="daterange" class="date-field" readonly="true"} </div>
                    </div></td>
                  <td>{form->submit name="trafficButton"  value=$language.lblSearch class="button01"}
				  {html->anchor href={$link} caption=$language.lblResetFields class="action-link"}</td>
                  <td><span id="loadProcessImage"></span></td>
                </tr>
              </table>
           {form->close}
		    </div>
          </div>
           
          <div id="trafficDetails">
            {if $daterange || $location} <h4>{if $daterange}{$language.lblReports} : {$fromDate|date_format:$date_format}{if $toDate} - {$toDate|date_format:$date_format}{/if} {/if} {if $daterange && $location} , {/if}{if $location}  {$language.lblLocation} : {if $location=='zOthers'}Others {else}{$location} {/if}{/if}</h4> {/if}
            {assign var="zeroValue" value=0}
            <h5> {$language.lblTrafficRevenueDetails}</h5>
            <div class="grid01">
            <table width="100%" border="0" cellpadding="0" cellspacing="0" class="grid_table00">
              <tr>
                <th  align="left" valign="middle" scope="col" width="20%">{$language.lblHits} </th>
                <th  align="left" valign="middle" scope="col" width="20%">{$language.lblRevenue} </th>
                <th  align="left" valign="middle" scope="col" width="20%">{$language.lblSubscriptions} </th>
                <th  align="left" valign="middle" scope="col" width="20%">{$language.lblRegistrations}</th>
                <th align="left" valign="middle" scope="col" width="20%">{$language.lblOrders}</th>
              </tr>
              <tr>
                <td align="left" valign="middle">{if $resWidgetTraffic.hits}{$resWidgetTraffic.hits}{else}{$zeroValue}{/if}</td>
                <td align="right" valign="middle">{if $resWidgetTraffic.revenueAmount}{$resWidgetTraffic.revenueAmount|price}{else}{$zeroValue|price}{/if}</td>
                <td align="right" valign="middle">{if $resWidgetTraffic.countSubscription}{$resWidgetTraffic.countSubscription}{else}{$zeroValue}{/if}</td>
                <td align="right" valign="middle">{if $resWidgetTraffic.countRegistration}{$resWidgetTraffic.countRegistration}{else}{$zeroValue}{/if}</td>
                <td align="right" valign="middle">{if $resWidgetTraffic.countOrder}{$resWidgetTraffic.countOrder}{else}{$zeroValue}{/if}</td>
              </tr>
            </table>
          </div>
          </div>
         
          <h5>{$language.lblPerformanceReport}</h5>
          {if $widgetPerformance}
          <div class="grid01">
          <table width="100%" border="0" cellpadding="0" cellspacing="0" class="grid_table00">
            <thead>
              <tr>
                <th  align="left" valign="middle" scope="col" width="20%">{$language.lblDates}</th>
                <th  align="left" valign="middle" scope="col" width="20%">{$language.lblTraffic} </th>
                <th  align="left" valign="middle" scope="col" width="20%">{$language.lblSubscriptions}</th>
                <th  align="left" valign="middle" scope="col" width="20%">{$language.lblRegistrations}</th>
                <th  align="left" valign="middle" scope="col" width="20%">{$language.lblOrders}</th>
              </tr>
            </thead>
            <tbody>
            {assign  var='hitsTotal' value=0}
            {assign var='subscriptionTotal' value=0}
            {assign var='registrationTotal' value=0}
            {assign var='orderTotal' value=0}
            {foreach from=$widgetPerformance item="widgetPerformanceDetails" key="key1"}
            {$hitsTotal = $hitsTotal+$widgetPerformanceDetails.hits}
            {$subscriptionTotal = $subscriptionTotal+$widgetPerformanceDetails.countOfSubscription}
            {$registrationTotal = $registrationTotal+$widgetPerformanceDetails.countOfRegistration}
            {$orderTotal = $orderTotal+$widgetPerformanceDetails.countOfOrder}
            <tr>
              <td align="left" valign="middle" >{$widgetPerformanceDetails.createdDate|date_format:$settingsDateFormat} <br /></td>
              <td align="right" valign="middle" >{$widgetPerformanceDetails.hits}</td>
              <td align="right" valign="middle" >{$widgetPerformanceDetails.countOfSubscription} </td>
              <td align="right" valign="middle" >{$widgetPerformanceDetails.countOfRegistration}</td>
              <td align="right" valign="middle" >{$widgetPerformanceDetails.countOfOrder}</td>
            </tr>
            {/foreach}
              </tbody>
            <tfoot>
              <tr>
                <td align="left" valign="middle">{$language.lblTotal}</td>
                <td align="right" valign="middle">{$hitsTotal}</td>
                <td align="right" valign="middle">{$subscriptionTotal} </td>
                <td align="right" valign="middle">{$registrationTotal}</td>
                <td align="right" valign="middle">{$orderTotal}</td>
              </tr>
            </tfoot>
          </table>
          </div>
          <div class="pagination_outer fixing_right">{paginate->layout  key="page" label_record="{$language.lblRecorsFound}" label_pages="{$language.lblPages}"}</div>
          {else}
          <div class="grid01 message_info"> {$language.msgNoRecords} </div>
          {/if} </div>
        <!-- Inner Content Container ends--> 
        {else}
        <div class="clear"></div>
        <div class="grid01 message_info"> {$language.msgNoRecords} </div>
        {/if}
        <div class="clear"></div>
      </div>
    </div>
    <!-- left wrapper ends--> 
    <!-- right side bar starts-->
    <div class="right-sidebar">
      <div class="side_wrapper"> {html->anchor class="create-widjet" href="/widget/create/" caption="<span class='plus-v'></span><span class='plus-h'></span><strong>"|cat:$language.lblCreateWidget|cat:"</strong>"} 
        <!-- right side menu starts--> 
        {include file="WidgetManagementSideMenu.tpl"} 
        <!-- right side menu ends--> 
      </div>
    </div>
    <!-- right side bar ends-->
    <div class="clear"></div>
  </div>
  <!-- Content Container ends--> 
  <!-- Footer starts--> 
  {include file='CommonBottom.tpl'} 
  <!-- Footer ends--> 
</div>
<!-- Outer container ends--> 
{form->basepath_script}
{form->rootpath_script} 
<script type="text/javascript" >
{literal}
var d 		= new Date();
var nd 		= new Date(d.getFullYear(),d.getMonth(),d.getDate(),d.getHours()-1,d.getMinutes(),d.getSeconds());	
 $(function(){	  
	 $('#daterange').daterangepicker({arrows: false,presets:{		
			specificDate: 'Specific Date', 
			dateRange: 'Date Range'
		},presetRanges: [
			{text: 'Today', dateStart: 'today', dateEnd: 'today' },
			{text: 'Last 7 days', dateStart: 'today-7days', dateEnd: 'today' },
			{text: 'Month to date', dateStart: function(){ return Date.parse('today').moveToFirstDayOfMonth();  }, dateEnd: 'today' },
			{text: 'Previous Month', dateStart: function(){ return Date.parse('1 month ago').moveToFirstDayOfMonth();  }, dateEnd: function(){ return Date.parse('1 month ago').moveToLastDayOfMonth();  } }

		],latestDate:nd,dateFormat:datePickerDateFormat,placeHolder:'dateOverView',rangeDays:90,rangeSplitter:'-',datepickerOptions: {maxDate:nd}});
	});
	
$('.ui-daterangepicker-dateRange').addClass('ui-state-active');	
{/literal}

 $(document).ready(function() {
	$(".widgetExpandSection:first").show();
	$(document).on("click",".widgetExpand",function()
	{
		//$(".widgetExpand").removeClass("expand");
    	$(this).toggleClass("expand");
		//$(".widgetExpandSection").slideUp();
		$(this).next(".widgetExpandSection").slideToggle();	
	});
	$('.side_menu').find("a[rel='widget']").addClass('selected').removeBorder();
	$('.main_menu').find("a[rel='manageWidget']").addClass('active');
 });
</script> 
<script type="text/javascript">
var siteUrl = "{$siteUrl}";
var httpsSiteUrl = "{$httpsSiteUrl}";
var iwidth = "{$iWidth}";
var iheight = "{$iHeight}";
</script> 
<script type="text/javascript" src="{$view_javascript}/jquery.colorbox.js"></script> 
<script type="text/javascript" src="{$view_javascript}/widgetview.page.js"></script>
</body>
</html>