<link rel="stylesheet" type="text/css" href="include/jQuery/jquery-table/jquery.appendGrid-1.3.1.css"/>
<link rel="stylesheet" type="text/css" href="include/jQuery/jquery-ui/themes/base/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="modules/EcmReports/TableSorter/css/theme.blue.css"/>
<link rel="stylesheet" type="text/css" href="modules/EcmReports/TableSorter/css/theme.blue2.css"/>
<!--  Tablesorter -->
<script type="text/javascript" src="modules/EcmReports/TableSorter/js/jquery.min.js"></script>
<script type="text/javascript" src="{literal}https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}{/literal}"></script>
<script type="text/javascript" src="modules/EcmReports/javascript/jquery.blockUI.js"></script>


<script type="text/javascript">
      {literal}
            google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Rok', 'Wartość'],
	{/literal}{foreach from=$TABLE key="key" item="item" name=loop}
		['{$item.payment_date}', {$item.total|number_format:2:".":""}],
	{/foreach}
{literal}
        ]);

        var options = {
          title: 'Wykres należności',
          orientation:  	'horizontal',
          hAxis: {title: 'Lata',  titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
function pdfExport() {
		var url =  $(location).attr('href');
		url = url + "&toPDF=1&to_pdf=1";

		window.location.href = url;
	}
	      {/literal}
	</script>
<style type="text/css">
        {literal}
        
		thead, tfoot {font-weight: bold;}
	
		.additionalColumn {
			background-color: #87CCED;
			border-top: 1px solid black;
		}
		
		.groupActive {
			border-top: 1px solid black;
			border-bottom: 1px solid black;
			border-left: 1px solid black;
			background-color: #87CCED;
		}
		
		.sumRow {
			background-color: #BDC7B5;
		}
                
                .sumAll td{
                    background-color: #BDC7B5;
                }
		
		table.tablesorter tbody tr:hover td {
		  background: #E8E8E8;
		  color: #343432;
		}
				
		/* Extra selectors needed to override the default styling */
		table.tablesorter tbody tr.normal-row td {
		  background: #EFEFF1;
		  color: #343432;
		}
		table.tablesorter tbody tr.alt-row td {
		  background: #FFF;
		  color: #343432;
		}
		
		/* Extra selectors needed to override the default styling */
		table.tablesorter tbody tr.normal-row:hover td {
		  background: #E8E8E8;
		  color: #343432;
		}
		table.tablesorter tbody tr.alt-row:hover td {
		  background: #E8E8E8;
		  color: #343432;
		}
		table.tablesorter tbody tr.sumAll td {
		  background: #EBEBED;
		  color: black;
		}
		table.tablesorter tbody tr.sumAll:hover td {
		  background: #E0E0E2;
		  color: black;
		  font-weight: bold;
		}
			
		table.tablesorter .sumRow, .oddListRowS1 {
			text-align: right;
		}
		
		table.tablesorter .alignLeft {
			text-align: left;
		}
		
		table.tablesorter .subcategory .alignLeft {
			padding-left: 20px;
		}
		
		table.tablesorter .contractor .alignLeft {
			padding-left: 40px;
		}
		
		.plusStyle {
			color: #abc3d7; 
			text-decoration: none; 
			cursor: pointer;
		}

	{/literal}
</style>


<table id="tableMenu" cellspacing="0" cellpadding="0" border="0">
<tbody>
	<tr>
		<td>
			<img src="themes/Sugar/images/EcmProducts.gif" style="margin-top: 3px; margin-right: 3px;" alt="EcmProducts" width="16" border="0" height="16">
		</td>
		<td>
			<h2>{$MOD.LBL_REPORT_AGREEMENT} </h2>
		</td>
	</tr>
</table>

<br />

<ul class="tablist" style="width:100%;">
	<li>
		<a class="current" href="#">Wyszukiwanie</a>
	</li>		
</ul>
<form action="index.php" method="get" name="searchReportStocks">
	<input type="hidden" name="module" value="EcmReports" />
	<input type="hidden" name="action" value="AgreementRaport" />
	<table style="border-top: 0px none; margin-bottom: 4px;width:100%" class="tabForm" border="0" cellpadding="0" cellspacing="0">
	<tr>
	<td class="dataLabel" width="1%" nowrap="nowrap">
                   {$MOD.LBL_DATE_START}
                </td>
                <td class="dataField" width="10%" nowrap="nowrap">
                    <input autocomplete="off" name="date_from" id="date_from" value="{$date_from}" title="" tabindex="" size="11" maxlength="10" type="text">
                    <img src="themes/default/images/jscalendar.gif" alt="Enter Date" id="date_from_trigger" align="absmiddle" border="0">
                    <script type="text/javascript">
                  	Calendar.setup ({ldelim}
				inputField : "date_from",
				daFormat : "{$dateFormat}",
				button : "date_from_trigger",
				singleClick : true,
				dateStr : "",
				step : 1
				{rdelim}
				);
                    </script>
                </td>
                </tr>
</tbody>
</table>

<input class="button" name="submit" value="{$MOD.LBL_EXECUTE}" type="submit">


<table id="myTable" class="tablesorter tablesorter-blue" role="grid">
    <thead>
		<tr class="tablesorter-headerRow" role="row">

            <th width="8%" class="sorter-text tablesorter-header tablesorter-headerUnSorted" data-column="0" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" style="-moz-user-select: none;" aria-sort="none" aria-label="Name: No sort applied, activate to apply an ascending sort"></th>
			<th width="15%" class="sorter-text tablesorter-header tablesorter-headerUnSorted" data-column="1" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" style="-moz-user-select: none;" aria-sort="none" aria-label="Name: No sort applied, activate to apply an ascending sort">Odsetki</th>
			<th width="8%" class="sorter-saas tablesorter-header tablesorter-headerUnSorted" data-column="5" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" style="-moz-user-select: none;" aria-sort="none" aria-label="Name: No sort applied, activate to apply an ascending sort">Prowizja</th>
			<th width="8%" class="sorter-saas tablesorter-header tablesorter-headerUnSorted" data-column="5" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" style="-moz-user-select: none;" aria-sort="none" aria-label="Name: No sort applied, activate to apply an ascending sort">Rata kapitałowa</th>
			<th width="8%" class="sorter-saas tablesorter-header tablesorter-headerUnSorted" data-column="5" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" style="-moz-user-select: none;" aria-sort="none" aria-label="Name: No sort applied, activate to apply an ascending sort">Razem</th>
		</tr>
	</thead>
	<tbody id="functions-core" class="tablesorter-infoOnly">
{foreach from=$TABLE key="key" item="item" name=loop}
    	
		<tr>
        <td class="oddListRowS1 alignLeft"><b>{$item.payment_date}</b></td>
		<td class="oddListRowS1" style="text-align:right;"><b>{$item.rate|number_format:2:",":"."}</b></td>
		 <td class="oddListRowS1 sumRow" ><b>{$item.rate2|number_format:2:",":"."}</b></td>
        <td class="oddListRowS1 sumRow" ><b>{$item.rate3|number_format:2:",":"." }</b></td>
        <td class="oddListRowS1 sumRow" ><b>{$item.total|number_format:2:",":"." }</b></td>
        </tr>
        
			{/foreach}
				<tr>
        <td class="oddListRowS1 alignLeft" style="text-align:right;"><b>Razem:</b></td>
		<td class="oddListRowS1" style="text-align:right;"><b>{$total_o|number_format:2:",":"."}</b></td>
		 <td class="oddListRowS1 sumRow" ><b>{$total_p|number_format:2:",":"."}</b></td>
        <td class="oddListRowS1 sumRow" ><b>{$total_r|number_format:2:",":"." }</b></td>
        <td class="oddListRowS1 sumRow" ><b>{$total|number_format:2:",":"." }</b></td>
        </tr>
	</table>
	<br>
	<div id="chart_div" style="width: 900px; height: 800px;"></div>
	