{config_load file=$language_path section="general"}

{literal}
<style type="text/css">
table.stats_table tbody tr.statsProduct{
	display:none;
}
table.stats_table tbody tr.statsProduct{
	display:none;
}
ul.payment {
    display: block;
    list-style-type: none;
    margin:0px;
    padding:0px;
}
ul.payment li{
    float:left;
    margin-right: 10px;
    text-align:right;
}
ul.payment li.title{
    font-weight: bold;
    text-align:left;
}
</style>
{/literal}

<script>
let STATS_JSON={$STATS_JSON};
let STATS_SOURCES_JSON={$STATS_SOURCES_JSON};
</script>

{yes_admin_page_menu main_title=$HEADING_TITLE buttons=$PAGE_HEADING_MENU_BUTTONS}

<br clear="all" />

<table border="0" width="100%" cellspacing="2" cellpadding="0">
<tr>
	<td>
		<form action="" method="get" class="yesForm" id="filter_form">
			<fieldset>
				<legend>{$TEXT_FORM_FILTER}</legend>
				<input type="hidden" name="action" value="view" />
				<table width="100%">
				<tr>
					<td rowspan="2" valign="top">
						{foreach from=$input_report_types item=report_type}
							{$report_type.input} {$report_type.text}<br />
						{/foreach}
					</td>
					<td valign="top">
						{$REPORT_START_DATE}<br />
						<input type="date" id="startDate" name="startDate" value="{$FORMATTED_STARTDATE}" />
					</td>
					<td rowspan="2" valign="top">
						{$REPORT_STATUS_FILTER}<br />
						{$INPUT_REPORT_STATUS}<br />
						{#customers_status_name#}<br />
						{$INPUT_CUSTOMERS_STATUS}
					</td>
                                        {if $FIBU_ACTIVE == 1}
                                        <td rowspan="2" valign="top">
                                            {$INPUT_FIBU}&nbsp;{$TEXT_FIBU_FILTER}
                                        </td>
                                        {/if}
					<td rowspan="2" valign="top">
						{$REPORT_EXP}<br />
						{$INPUT_EXPORT}
					</td>
				</tr>
				<tr>
					<td class="menuBoxHeading">
						{$REPORT_END_DATE}<br />
						<input type="date" id="endDate" name="endDate" value="{$FORMATTED_ENDDATE}" />
					</td>
				</tr>
				<tr>
					<td colspan="{if FIBU_ACTIVE == 1}6{else}5{/if}" align="right">
						<input id="button_send" type="submit" class="button" value="{#send#}" />
					</td>
				</tr>
				</table>
			</fieldset>
		</form>
	</td>
</tr>
</table>

<div id="results" style="margin-left:5px;{if $ACTION != 'view'}display:none;{/if}">

<script type="text/javascript">
var TEXT_STATS_PAYMENT_METHODS = '{$TEXT_STATS_PAYMENT_METHODS}';
var TEXT_ZEITRAUM = '{$TEXT_ZEITRAUM}';
var TEXT_BRUTTO = '{$TEXT_BRUTTO}';
var TEXT_NETTO = '{$TEXT_NETTO}';
var TEXT_STEUERN = '{$TEXT_STEUERN}';
var TEXT_DETAILS_UMSATZ_QUELLE = '{$TEXT_DETAILS_UMSATZ_QUELLE}';
var TEXT_UMSATZ_NACH_BEZAHLART = '{$TEXT_UMSATZ_NACH_BEZAHLART}';
var TEXT_BEZAHLART = '{$TEXT_BEZAHLART}';
var TEXT_WERT = '{$TEXT_WERT}';
var TEXT_QUELLE = '{$TEXT_QUELLE}';
var TEXT_NETTO_UMSATZ = '{$TEXT_NETTO_UMSATZ}';
var TEXT_UMSATZ_NACH_QUELLEN = '{$TEXT_UMSATZ_NACH_QUELLEN}';
var TEXT_UMSATZ_NACH_KUNDENGRUPPE = '{$TEXT_UMSATZ_NACH_KUNDENGRUPPE}';
{literal}
function get_human_date( mydate ){
     const d = new Date(mydate); 
     return d.getDate()+'.'+(d.getMonth()+1)+'.'+d.getFullYear();
}
$(function(){
    $('a.stats_details').each(function(){
        $(this).on('click',function(){
            let html = '<table border="0" class="yesListTable_minimal"><thead><tr><th>'
                    +TEXT_ZEITRAUM+'</th><th>'
                    +TEXT_BRUTTO+'</th><th>'
                    +TEXT_STEUERN+'</th><th>'
                    +TEXT_NETTO+'</th></tr></thead><tbody>';
            let target_src = $(this).attr('id');
            $.each(STATS_JSON, function( einteilung, group_item){
                $.each(group_item.umsatz.sources, function(src, values){
                    if(src === target_src){
                        let netto = values.brutto - values.taxes;
                        html += '<tr><td>'+einteilung
                                +'</td><td align="right">'+values.brutto.toFixed(2)
                                +'</td><td align="right">'+values.taxes.toFixed(2)
                                +'</td><td align="right">'+netto.toFixed(2)
                                +'</td></tr>';
                    }
                });
            });
            html += '</tbody></table>';
            $('#modal_window').dialog({
                title: TEXT_DETAILS_UMSATZ_QUELLE+' '+$(this).attr('id'),
                modal: true,
                width: 'auto',
                height: 'auto',
            }).html(html);
        });
    });
	$('button.toggleProducts').each(function(){
		$(this).on('click', function(){
                    nr = $(this).data('tr');
                    if($('table.stats_table tbody tr[data-automaticadded="'+nr+'"]').length){
                        $('table.stats_table tbody tr[data-automaticadded="'+nr+'"]').each(function(){
                            $(this).remove();
                        });
                    }else{
                        let products_tr = [];
                        let diff_products = [];
                        $.each(STATS_JSON, function(i, item) {
                            if(item.title === nr){
                                $.each(item.products, function(j, product){

                                    if('p'+product.id in diff_products){
                                        diff_products['p'+product.id].qty += parseInt(product.qty);
                                    }else{
                                        diff_products['p'+product.id] = {'name':'pID '+product.id+' - '+product.name,'qty':parseInt(product.qty)};
                                    }
                                });
                            }
                        });
                        for(let i in diff_products){
                            products_tr.push( '<tr data-automaticadded="'+nr+'"><td colspan="6" style="padding-left: 120px;">'+diff_products[i].qty+'x '+diff_products[i].name+'</td>' );
                        }



                        $('table.stats_table tbody tr[data-trid="'+nr+'"]').after(
                                products_tr.join("\n")
                        );
                    }
		});
	});
	$('button.toggleOrders').each(function(){
		$(this).on('click', function(){
                    nr = $(this).data('tr');
                    if($('table.stats_table tbody tr[data-automaticadded="'+nr+'"]').length){
                        $('table.stats_table tbody tr[data-automaticadded="'+nr+'"]').each(function(){
                            $(this).remove();
                        });
                    }else{
                        let orders_tr = [];
                        $.each(STATS_JSON, function(i, item) {
                            if(item.title === nr){
                                $.each(item.orders, function(j, order){
                                    orders_tr.push( '<tr data-automaticadded="'+nr+'"><td colspan="6" style="padding-left: 120px;"><a target="_blank" href="orders.php?action=edit&oID='+order.info.id+'">#'+order.info.id+'</a> vom '+get_human_date(order.info.date_purchased)+'</td>' );
                                });
                            }
                        });
                        $('table.stats_table tbody tr[data-trid="'+nr+'"]').after(
                                orders_tr.join("\n")
                        );
                    }
		});
	});
	// AUF DER SOURCE SEITE DIE VARIABLEN "ONLOADFUNC UND GGF ONLOADFUNCPARAM DEFINIEREN
	$('a.yes_dynamic_tooltip').cluetip({
		width:500,
		cluetipClass: 'jtip',
		arrows: true,
		dropShadow: false,
		hoverIntent: false,
		sticky: true,
		ajaxCache: false,
		mouseOutClose: true,
		closePosition: 'title',
		closeText: '<img src="images/cal_close_small.gif" alt="close" />',
		dropShadow: true

	});
	google.load('visualization', '1.0', { 'packages': ['corechart'], callback: drawChart });
	google.load('visualization', '1.0', { 'packages': ['corechart'], callback: drawChart2 });
	google.load('visualization', '1.0', { 'packages': ['corechart'], callback: drawChart3 });
});
function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', TEXT_BEZAHLART);
    data.addColumn('number', TEXT_WERT);
    data.addRows([
{/literal}	
    {foreach from=$STATS_PAYMENT item=pm key=pmname}
    ['{$pmname}',{$pm.amount} ],
    {/foreach}
{literal}	
    ]);
    //set the chart options
    var options = {
        title: TEXT_UMSATZ_NACH_BEZAHLART,
        width: 400,
        height: 300
    };
    //instantiate and draw our chart, passing in the options
    var chart = new google.visualization.PieChart(document.querySelector('#results #charts_div'));
    chart.draw(data, options);
}
function drawChart2() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', TEXT_QUELLE);
    data.addColumn('number', TEXT_NETTO_UMSATZ);
    data.addRows([
{/literal}	
    {foreach from=$STATS_SOURCES item=s key=sname}
    ['{$SOURCES_NAMES.$sname}',{$s.netto} ],
    {/foreach}
{literal}	
    ]);
    //set the chart options
    var options = {
        title: TEXT_UMSATZ_NACH_QUELLEN,
        width: 400,
        height: 300
    };
    //instantiate and draw our chart, passing in the options
    var chart = new google.visualization.PieChart(document.querySelector('#results #charts2_div'));
    chart.draw(data, options);
}
function drawChart3() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', TEXT_QUELLE);
    data.addColumn('number', TEXT_NETTO_UMSATZ);
    data.addRows([
{/literal}	
    {foreach from=$STATS_GROUPS item=s key=sname}
    ['{yes_get_customers_status_name csID=$sname}',{$s.netto} ],
    {/foreach}
{literal}	
    ]);
    //set the chart options
    var options = {
        title: TEXT_UMSATZ_NACH_KUNDENGRUPPE,
        width: 1000,
        height: 300
    };
    //instantiate and draw our chart, passing in the options
    var chart = new google.visualization.ColumnChart(document.querySelector('#results #charts3_div'));
    chart.draw(data, options);
}
</script>
{/literal}

<div class="ui-widget-content">
	<table class="yes-ui-table stats_table">
		<thead>
			<tr class="ui-widget-header">
				<th>{$TABLE_HEADING_DATE}</th>
				<th>{$TABLE_HEADING_ORDERS}</th>
				<th>{$TABLE_HEADING_RUECKERSTATTUNGEN}</th>
				<th>{$TABLE_HEADING_ITEMS}</th>
				<th align="right">{$TABLE_HEADING_REVENUE}</th>
				<th align="right">{$TABLE_HEADING_SHIPPING}</th>
			</tr>
		</thead>
		<tbody>

		{foreach from=$STATS item=gi}
		<tr data-trid="{$gi->title}">
			<td>{$gi->title}</td>
			<td>
                            {if $gi->orders|count > 0}
                            <button data-tr="{$gi->title}" class="toggleOrders ui-state-default ui-corner-all" type="button">{#view#}/{#hide#}</button>
                            {/if}
                            {$gi->orders|count}
			</td>
			<td align="right">{$gi->rueckerstattungen_amount|string_format:"%.2f"}</td>
			<td>
                            {if $gi->products|count > 0}
                            <button data-tr="{$gi->title}" class="toggleProducts ui-state-default ui-corner-all" type="button">{#view#}/{#hide#}</button>
                            {/if}
                            {$gi->number_of_products}
			</td>
			<td align="right">{$gi->umsatz.netto|string_format:"%.2f"}</td>
			<td align="right">{$gi->versand_amount|string_format:"%.2f"}</td>
		</tr>

		{/foreach}
		</tbody>
	</table>

	<!-- TOTAL TABLE //-->

	<table width="100%" cellspacing="0">
	<tr>
            <td class="main"><b>{$STATS_WEBSHOP}:</b> <a title="Details" class="stats_details" id="shop" href="javascript:;">{$STATS_SOURCES.shop.netto|string_format:"%.2f"}</a> ({$STATS_SOURCES.shop.quantity}x)<br /><font style="color: #777;">&#8960; {$STATS_SOURCES.shop.average|string_format:"%.2f"}</font></td>
            <td class="main"><b>{$STATS_EBAY}:</b> <a title="Details" class="stats_details" id="ebay" href="javascript:;">{$STATS_SOURCES.ebay.netto|string_format:"%.2f"}</a> ({$STATS_SOURCES.ebay.quantity}x)<br /><font style="color: #777;">&#8960; {$STATS_SOURCES.ebay.average|string_format:"%.2f"}</font></td>

		{if $STATS_SOURCES.amazon}

                <td class="main"><b>{$STATS_AMAZON}:</b> <a title="Details" class="stats_details" id="amazon" href="javascript:;">{$STATS_SOURCES.amazon.netto|string_format:"%.2f"}</a> ({$STATS_SOURCES.amazon.quantity}x)<br /><font style="color: #777;">&#8960; {$STATS_SOURCES.amazon.average|string_format:"%.2f"}</font></td>

		{/if}
		
		{if $STATS_SOURCES.hitmeist}

                <td class="main"><b>{$STATS_HITMEISTER}:</b> <a title="Details" class="stats_details" id="hitmeist" href="javascript:;">{$STATS_SOURCES.hitmeist.netto|string_format:"%.2f"}</a> ({$STATS_SOURCES.hitmeist.quantity}x)<br /><font style="color: #777;">&#8960; {$STATS_SOURCES.hitmeist.average|string_format:"%.2f"}</font></td>

		{/if}
		
                <td class="main"><b>{$STATS_COUNTER}:</b> <a title="Details" class="stats_details" id="counter" href="javascript:;">{$STATS_SOURCES.counter.netto|string_format:"%.2f"}</a> ({$STATS_SOURCES.counter.quantity}x)<br /><font style="color: #777;">&#8960; {$STATS_SOURCES.counter.average|string_format:"%.2f"}</font></td>
                <td class="main"><b>{$STATS_SERVICE}:</b> <a title="Details" class="stats_details" id="admin" href="javascript:;">{$STATS_SOURCES.admin.netto|string_format:"%.2f"}</a> ({$STATS_SOURCES.admin.quantity}x)<br /><font style="color: #777;">&#8960; {$STATS_SOURCES.admin.average|string_format:"%.2f"}</font></td>
	</tr>
	</table>
        <div style="padding: 10px;font-size: 1.8em;"><b>{$TEXT_GESAMT} {$TEXT_BRUTTO}:</b> {$TOTALS.brutto|string_format:"%.2f"} | <b>{$TEXT_GESAMT} Steuern:</b> {$TOTALS.taxes|string_format:"%.2f"} | <b>{$TEXT_GESAMT} {$TEXT_NETTO}:</b> {$TOTALS.netto|string_format:"%.2f"}</div>
        
        <table border="0">
            <tr>
                <td valign="middle"><div id="charts_div"></div></td>
                <td valign="middle" style="border-right: 1px solid black;">
                    <ul class="payment">
                    {foreach from=$STATS_PAYMENT item=pm key=pmname}
                        <li class="counter" id="{$pmname}">{$pm.quantity}x</li>
                        <li class="title">{$pmname}:</li>
                        <li class="total">{$pm.amount|string_format:"%.2f"}</li>
                        <br clear="all" />
                    {/foreach}
                    </ul>
                </td>
                <td valign="middle"><div id="charts2_div"></div></td>
                <td valign="middle">
                    <ul class="payment">
                    {foreach from=$STATS_SOURCES item=s key=sname}
                        <li class="counter" id="{$sname}">{$s.quantity}x</li>
                        <li class="title">{$SOURCES_NAMES.$sname}:</li>
                        <li class="total">{$s.netto|string_format:"%.2f"}</li>
                        <br clear="all" />
                    {/foreach}
                    </ul>
                </td>
            </tr><tr>
                <td style="border-top: 1px solid black;" colspan="3" valign="middle"><div id="charts3_div"></div></td>
                <td style="border-top: 1px solid black;" valign="middle">
                    <ul class="payment">
                    {foreach from=$GROUPS item=g}
                        {assign var=grkey value=$g.id}
                        {if $STATS_GROUPS.$grkey.quantity > 0}
                        <li class="counter">{$STATS_GROUPS.$grkey.quantity}x</li>
                        <li class="title">{$g.text}</li>
                        <li class="total">{$STATS_GROUPS.$grkey.netto|string_format:"%.2f"}</li>
                        <br clear="all" />
                        {/if}
                    {/foreach}
                    </ul>
                </td>
            </tr>
        </table>
		    
	
</div><!-- end ui-widget-content //-->
</div><!-- end results //-->