{* ============================================
   ALTES TABLE LAYOUT - AUSKOMMENTIERT FÜR REVERSE
   ============================================ *}
{*
<br />
<div style="background:#eeeeee;padding:10px;">
<span style="font-size:14px;font-weight:bold;">{$form_data->description}</span><br />
<br />
Auswertungszeitraum: <span style="font-weight:bold;">{$filter.date_start}</span> bis <span style="font-weight:bold;">{$filter.date_end}</span>
<table border="0" cellpadding="2" cellspacing="2" style="border:1px solid #aaaaaa;background:#cccccc;">
	{foreach item=row key=index_y from=$statistic_data->statistic_data}

	<tr style="background:#eeeeee;border: 1px solid #ffffff;">

		{foreach item=col key=index_x from=$row}
			{if $index_y == 0 || $index_x == 0}
			<td style="text-align:center;background:#dddddd;">{$col}</td>
			{else}
			<td style="text-align:center;">{$col}</td>
			{/if}
		{/foreach}

	</tr>

	{/foreach}
</table>
Statistik generiert am: {if $today.mday < 10}0{/if}{$today.mday}.{if $today.mon < 10}0{/if}{$today.mon}.{$today.year}<br />
<a href="./index.php?admin_modul=admin_statistic_editor&action=get_csv&id={$form_data->id}&tab_id={$filter.period}&date_end={$filter.date_end}&date_start={$filter.date_start}">Tabelle als CSV-Datei exportieren</a>

<br /><br /><br/>

<div id="placeholder" style="width:930px;height:300px;"></div>
<br />
<p id="choices">Show:</p>
<br />
</div>
<br /><br/>

<script type="text/javascript">
$(function () {
    var datasets = {
    {foreach item=row key=myIndex from=$statistic_data->statistic_data[0]}
    	{if $myIndex != 0}
        "{$row}": {
            label: "{$row}",
            data: [
            	{foreach item=row key=myIndex2 from=$statistic_data->statistic_data}
            		{if $myIndex2 != 0}
            			[{$myIndex2}, {$row[$myIndex]}],
            		{/if}
            	{/foreach}
            ]
        },
        {/if}
     {/foreach}
    };

    // hard-code color indices to prevent them from shifting as
    // countries are turned on/off
    var i = 0;
    $.each(datasets, function(key, val) {
        val.color = i;
        ++i;
    });

    // insert checkboxes
    var choiceContainer = $("#choices");
    $.each(datasets, function(key, val) {
        choiceContainer.append('<br/><input type="checkbox" name="' + key +
                               '" checked="checked" id="id' + key + '">' +
                               '<label for="id' + key + '">'
                                + val.label + '</label>');
    });
    choiceContainer.find("input").click(plotAccordingToChoices);


    function plotAccordingToChoices() {
        var data = [];

        choiceContainer.find("input:checked").each(function () {
            var key = $(this).attr("name");
            if (key && datasets[key])
                data.push(datasets[key]);
        });

        if (data.length > 0)
            $.plot($("#placeholder"), data, {
                yaxis: { min: 0 },
                xaxis: { tickDecimals: 0 }
            });
    }

    plotAccordingToChoices();
});
</script>
*}

{* ============================================
   NEUES MODERNES CSS LAYOUT - 90% BREITE
   ============================================ *}

<style>
/* Override parent container width! */
#adminLeftFloater {
	width: 90% !important;
	max-width: none !important;
}

/* Modern Stats Container - 90% Breite! */
.stats-container {
	width: 90%;
	margin: 20px auto;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	overflow: hidden;
}

/* Header Section */
.stats-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 25px 30px;
}

.stats-header h2 {
	margin: 0 0 10px 0;
	font-size: 24px;
	font-weight: 600;
}

.stats-period {
	font-size: 14px;
	opacity: 0.95;
	margin: 5px 0 0 0;
}

/* Content Area - 90% Breite! */
.stats-content {
	padding: 30px;
	width: 90%;
	margin: 0 auto;
}

/* Data Grid - 90% Breite! */
.data-grid {
	width: 90%;
	margin: 20px auto;
	border-collapse: separate;
	border-spacing: 0;
	background: white;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.data-grid thead {
	background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
}

.data-grid th {
	padding: 12px 15px;
	text-align: center;
	font-weight: 600;
	color: #495057;
	font-size: 13px;
	border-bottom: 2px solid #dee2e6;
	white-space: nowrap;
}

.data-grid tbody tr {
	transition: background 0.2s ease;
}

.data-grid tbody tr:hover {
	background: #f8f9fa;
}

.data-grid td {
	padding: 10px 15px;
	text-align: center;
	border-bottom: 1px solid #f0f0f0;
	font-size: 13px;
}

.data-grid td:first-child {
	font-weight: 500;
	background: #f8f9fa;
	text-align: left;
	padding-left: 20px;
}

/* Chart Sections - 90% Breite! */
.chart-section {
	width: 90%;
	margin: 40px auto;
	padding: 25px;
	background: white;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chart-title {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	margin: 0 0 20px 0;
	padding-bottom: 10px;
	border-bottom: 2px solid #667eea;
}

/* Footer Actions */
.stats-footer {
	padding: 20px 30px;
	background: #f8f9fa;
	border-top: 1px solid #e9ecef;
	overflow: hidden;
}

.stats-info {
	float: left;
	color: #6c757d;
	font-size: 13px;
	line-height: 36px;
}

.stats-actions {
	float: right;
}

.btn-export {
	display: inline-block;
	padding: 10px 20px;
	background: #28a745;
	color: white;
	text-decoration: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.3s ease;
}

.btn-export:hover {
	background: #218838;
	color: white;
}

/* Clearfix */
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}
</style>

<div class="stats-container">

	<!-- Header -->
	<div class="stats-header">
		<h2>{$form_data->description}</h2>
		<div class="stats-period">
			📅 Auswertungszeitraum: <strong>{$filter.date_start}</strong> bis <strong>{$filter.date_end}</strong>
		</div>
	</div>

	<!-- Content -->
	<div class="stats-content">

		<!-- Data Table -->
		<table class="data-grid">
			<thead>
				<tr>
					{foreach item=col key=index_x from=$statistic_data->statistic_data[0]}
					<th>{$col}</th>
					{/foreach}
				</tr>
			</thead>
			<tbody>
				{foreach item=row key=index_y from=$statistic_data->statistic_data}
					{if $index_y != 0}
					<tr>
						{foreach item=col key=index_x from=$row}
						<td>{$col}</td>
						{/foreach}
					</tr>
					{/if}
				{/foreach}
			</tbody>
		</table>

	</div>

	<!-- Charts - DIREKT SICHTBAR, KEINE TABS! -->
	{if $plotly_chart_bar}
	<div class="chart-section">
		<h3 class="chart-title">📊 Säulendiagramm</h3>
		{$plotly_chart_bar}
	</div>
	{/if}

	{if $plotly_chart_line}
	<div class="chart-section">
		<h3 class="chart-title">📈 Liniendiagramm</h3>
		{$plotly_chart_line}
	</div>
	{/if}

	<!-- Footer -->
	<div class="stats-footer clearfix">
		<div class="stats-info">
			Statistik generiert am: {if $today.mday < 10}0{/if}{$today.mday}.{if $today.mon < 10}0{/if}{$today.mon}.{$today.year}
		</div>
		<div class="stats-actions">
			<a href="./index.php?admin_modul=admin_statistic_editor&action=get_csv&id={$form_data->id}&tab_id={$filter.period}&date_end={$filter.date_end}&date_start={$filter.date_start}" class="btn-export">
				💾 Als CSV exportieren
			</a>
		</div>
	</div>

</div>