<style type="text/css">
{literal}
	.buttons {
		padding-top: 20px;
	}

	table tr td {
		padding: 5px;
	}
{/literal}
</style>
<script type="text/javascript" src="modules/EcmCharts/javascript/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
{literal}
$(document).ready(function(){
	function listenerFunction() {
		 //location.reload(); 
	};

	$("#chartTypeSelector").change(function() {
		if( $(this).val() == 'pie' )
		{
			$("#documentTypeSelector").val("normal");
		}
	});

	$("#documentTypeSelector").change(function(){
		if( $(this).val() == 'correct' && $("#chartTypeSelector").val() == 'pie' )
		{
			$("#chartTypeSelector").val("column");
		}
	});
});
{/literal}
</script>

<ul class="tablist" style="width:100%;">
	<li>
		<a class="current" href="#">{$LANG.LBL_CHARTOPTIONS}</a>
	</li>		
</ul>
<form action="index.php" method="get" name="AnnualSalesChartOptions">
	<input type="hidden" name="module" value="EcmCharts" />
	<input type="hidden" name="action" value="AnnualSalesChart" />
	<table style="border-top: 0px none; margin-bottom: 4px;width:100%" class="tabForm" border="0" cellpadding="0" cellspacing="0">

			<tbody>
			<tr>
				<td>{$LANG.LBL_SELECT_YEAR}: </td>
				<td>
					<select name="year">
						{foreach from=$years item=y}
							<option value="{$y}" { if $y == $year || $year == ""} selected="true" {/if}>{$y}</option>
						{/foreach}
					</select>
				</td>
			</tr>
			<tr>
				<td>{$LANG.LBL_INCLUDED_DOCUMENT_TYPE}: </td>
				<td>
					<select id="documentTypeSelector" name="type">
						<option value="%" { if $type == "%" || $type == ""} selected="true" {/if}>{$LANG.LBL_NORMAL_AND_CORRECT}</option>
						<option value="normal" { if $type == "normal"} selected="true" {/if}>{$LANG.LBL_NORMAL_ONLY}</option>
						<option value="correct" { if $type == "correct"} selected="true" {/if}>{$LANG.LBL_CORRECT_ONLY}</option>			
					</select>
				</td>
			</tr>
			<tr>
				{* Search by contractor *}
				<td>{$LANG.LBL_CONTRACTOR}</td>
				<td>
					<input id="search_account_name" type="text" value="{$contractor_name}" name="account_name">
					<input id="search_account_id" type="hidden" value="{$contractor_id}" name="account_id">
					<input class="button" type="button" value="{$LANG.LBL_SELECT}" accesskey="T" title="Select [Alt+T]" value="" name="btn_account_name" onClick="getContractor()">
							
							{* Open popup window to select contractor *}
							<script type="text/javascript">
								function getContractor()
								{ldelim}
									open_popup("Accounts", 600, 400, "", true, false, 
										{ldelim}
											  "call_back_function":"set_return","form_name":"AnnualSalesChartOptions","field_to_name_array":
											  {ldelim}"id":"search_account_id","name":"search_account_name"{rdelim}
										{rdelim}, "single", true);
								{rdelim};
							</script>	
				</td>
			</tr>
			<tr>
				<tr>
					<td>Typ wykresu: </td>
					<td>
						<select id="chartTypeSelector" name="chartType">
							<option value="column" { if $chartType == "column" || $chartType == ""} selected="true" {/if}>{$LANG.LBL_CHARTTYPECOLUMN}</option>
							<option value="pie" { if $chartType == "pie"} selected="true" {/if}>{$LANG.LBL_CHARTTYPEPIE}</option>
							<option value="area" { if $chartType == "area"} selected="true" {/if}>{$LANG.LBL_CHARTTYPEAREA}</option>
						</select>
					</td>
				</tr>
			</tr>
			<tr>
				<td>{$LANG.LBL_VIEW_COMPARATIVE_DATA}: </td>
				<td>
					<input type="radio" name="comparativeData" value="enabled" { if $comparativeData == "enabled" || $comparativeData == "" } checked {/if}> {$LANG.LBL_YES}
					<input type="radio" name="comparativeData" style="margin-left: 20px" value="disabled" { if $comparativeData == "disabled" || $comparativeData == "" } checked {/if}> {$LANG.LBL_NO}
				</td>
			</tr>
			</tbody>
			</table>

			<input class="button" name="submit" value="{$LANG.LBL_GENERATECHART}" type="submit">
			<input class="button" name="clear" value="{$LANG.LBL_RESTOREDEFAULTPARAMETERS}" type="button" onclick="location.href='index.php?module=EcmCharts&action=AnnualSalesChart';">

	</form>


	{*********************************************************************}
	{*************************** CHART TPL} ******************************}
	{*********************************************************************}

{if $chartOptions == ''}
{literal}
	<style type="text/css">
		.no-data {
			display: table;
			width: 100%;
			height: 100%;
		}

		.textCenter {
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}
			.textCenter span {
				font-size: 16px;
				border: 1px dashed #E03E3E;
				padding: 10px;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				box-shadow: 10px 10px 5px #AAAAAA;
				background-color: #FFDEDE;
				color: #E03E3E;
			}

	</style>
{/literal}
{/if}

       	{if $chartOptions == ''}
        <div id="annual_sales_chart" style="width: 100%; height: 400px;">
       		<div class="no-data">
       			<div class="textCenter">
	       			<span>
	       					{$LANG.LBL_NO_DATA_CHANGE_FILTER}
	       			</span>
	       		</div>
       		</div>
       </div>
       {else}
         <div id="annual_sales_chart" style="width: 100%; height: 1000px;"></div>
       {/if}

<!-- GOOGLE CHARTS API -->
{if $chartOptions != ''}
	{literal}
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript" src="modules/EcmCharts/Dashlets/MyChartsSalesDashlet/js/salesChart.js"></script>
		<script type="text/javascript">

	    // Load the Visualization API and the piechart package.
	    google.load('visualization', '1', {'packages':['corechart','geochart','table']});

		function drawChart() {
		  var data = google.visualization.arrayToDataTable([
		    ['Rok', {/literal}'{$LANG.LBL_SALE}'
		    	{if $comparativeData == 'enabled'} , '{$LANG.LBL_SALE_IN_PAST_YEAR}'{/if}
		    {literal}],

		    {/literal}
		  		{$chartOptions}	  
		  	{literal}
		  ]);

		  var options = {
		  	{/literal}
		    title: '{ $LANG.LBL_SALES_CHART_IN }{$year}',
		    {literal}
		    legend: {position: 'bottom', textStyle: {fontSize: 10}},
		    tooltip:{textStyle:{fontSize:'12'}},
		    vAxis:{title: {/literal}'{$LANG.LBL_VALUEOFSALES}'{literal},textStyle:{color: '#000000',fontSize: '13', paddingRight: '100',marginRight: '100'}},
		    hAxis:{title:'',textStyle:{color: '#000000',fontSize: '13', paddingRight: '100',marginRight: '100'}}
		  };

		  {/literal}
		  {if $chartType == 'column' or $chartType == ''}
		  	var chart = new google.visualization.ColumnChart(document.getElementById('annual_sales_chart'));
		  {elseif $chartType == 'pie'}
		  	var chart = new google.visualization.PieChart(document.getElementById('annual_sales_chart'));
		  {else}
		  	var chart = new google.visualization.AreaChart(document.getElementById('annual_sales_chart'));
		  {/if}
		  {literal}

		  chart.draw(data, options);
		}

		// sekunda opóźnienia, żeby zdążył wczytać się moduł "visualization"
		setTimeout(drawChart, 1000);

		</script>
	{/literal}
{/if}