{* ============================================
   ADMIN2000 - Kunden-Verwaltung
   Moderne Darstellung der Kundenliste
   ============================================ *}

<div class="admin2000-card">
	<div class="admin2000-list-header">
		<h2 class="admin2000-card-title">👥 {$table_data.title}</h2>

		{* Toolbar *}
		<div class="admin2000-toolbar">
			{* Search *}
			{if isset($table_data.toolbar.search) && $table_data.toolbar.search}
			<form class="admin2000-search-form">
				<input type="text" class="admin2000-search-input admin2000-search" placeholder="Kunden suchen..." />
			</form>
			{/if}

			{* New Customer Button *}
			{if isset($table_data.toolbar.new) && $table_data.toolbar.new}
			<a href="{$table_data.toolbar.new}" class="admin2000-btn admin2000-btn-success">
				+ Neuer Kunde
			</a>
			{/if}
		</div>
	</div>

	{* Filter Section *}
	{if isset($table_data.list_filter) && $table_data.list_filter}
	<div class="admin2000-filter-section">
		<strong class="admin2000-filter-title">🔍 Filter:</strong>
		<div class="admin2000-filter-grid">
			{foreach from=$table_data.list_filter item=filter}
			<div class="admin2000-filter-item">
				<label class="admin2000-filter-label">{$filter.name}:</label>
				<select class="admin2000-filter-element" data-field="{$filter.db_field}">
					<option value="">Alle</option>
					{foreach from=$filter.values item=filter_val key=key}
					<option value="{$key}">{$filter_val}</option>
					{/foreach}
				</select>
			</div>
			{/foreach}
		</div>
	</div>

	<button class="admin2000-filter-toggle">
		🔍 Filter anzeigen/ausblenden
	</button>
	{/if}

	{* Stats Row - Real customer statistics *}
	<div class="admin2000-stats-row">
		<div class="admin2000-stat-card admin2000-stat-primary">
			<div class="admin2000-stat-label">Gesamt Kunden</div>
			<div class="admin2000-stat-value">{$customer_stats.total|default:0}</div>
		</div>
		<div class="admin2000-stat-card admin2000-stat-success">
			<div class="admin2000-stat-label">Aktiv / Gesperrt</div>
			<div class="admin2000-stat-value">
				{$customer_stats.active|default:0} / {$customer_stats.locked|default:0}
			</div>
		</div>
		<div class="admin2000-stat-card admin2000-stat-info">
			<div class="admin2000-stat-label">Neu (30 Tage)</div>
			<div class="admin2000-stat-value">{$customer_stats.new_30days|default:0}</div>
		</div>
	</div>

	{* Table *}
	<div class="admin2000-table-wrapper">
		<table class="admin2000-table admin2000-customer-table">
			<thead>
				<tr>
					{foreach from=$table_data.list_fields item=field}
					<th class="{if $field.sortable == 1}admin2000-sortable{/if}" data-field="{$field.db_field}">
						<a href="#" class="admin2000-sort-link" data-field="{$field.db_field}">
							{$field.name}
							{if $field.sortable == 1}
							<span class="admin2000-sort-arrow">⇅</span>
							{/if}
						</a>
					</th>
					{/foreach}
					<th class="admin2000-table-actions">Aktionen</th>
				</tr>
			</thead>
			<tbody class="admin2000-table-body">
				{* Content loaded via AJAX *}
				<tr>
					<td colspan="100" class="admin2000-loading-cell">
						<div class="admin2000-loading">Lade Daten...</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

	{* Pagination *}
	<div class="admin2000-pagination">
		<div class="admin2000-items-per-page">
			<span class="admin2000-pagination-label">Einträge pro Seite:</span>
			<a href="#" class="admin2000-limit-btn active" data-limit="20">20</a>
			<a href="#" class="admin2000-limit-btn" data-limit="50">50</a>
			<a href="#" class="admin2000-limit-btn" data-limit="100">100</a>
			<a href="#" class="admin2000-limit-btn" data-limit="200">200</a>
		</div>

		<div class="admin2000-pagination-info">
			Seite <span class="admin2000-current-page">1</span> von <span class="admin2000-total-pages">1</span>
		</div>

		<div class="admin2000-pagination-controls">
			<a href="#" class="admin2000-pagination-btn admin2000-prev-page" data-page="prev">← Zurück</a>
			<a href="#" class="admin2000-pagination-btn admin2000-next-page" data-page="next">Weiter →</a>
		</div>
	</div>
</div>

{* JavaScript for customer list *}
<script>
$(document).ready(function() {
	// Settings
	var settings = {
		max_list_items: 20,
		actual_page: 1,
		sort_item: 'number',
		sort_direction: 'down',
		search_string: '',
		list_filter: {}
	};

	// Load table data
	function loadTableData() {
		var params = $.param({
			admin_modul: 'admin2000',
			section: 'stammdaten',
			page: 'kunden',
			action: 'get_list_items',
			max_list_items: settings.max_list_items,
			actual_page: settings.actual_page,
			sort_item: settings.sort_item,
			sort_direction: settings.sort_direction,
			search_string: settings.search_string,
			list_filter: settings.list_filter
		});

		var url = 'index.php?' + params;
		console.log('🔄 Loading data from:', url);

		$('.admin2000-table-body').html('<tr><td colspan="100" class="admin2000-loading-cell"><div class="admin2000-loading">Lade Daten...</div></td></tr>');

		$.get(url, function(data) {
			console.log('✅ Data received:', data.substring(0, 200));
			$('.admin2000-table-body').html(data);
			updatePagination();
		}).fail(function(xhr, status, error) {
			console.error('❌ AJAX Error:', status, error);
			$('.admin2000-table-body').html('<tr><td colspan="100" class="admin2000-error-cell"><strong>Fehler beim Laden der Daten</strong><br>' + error + '</td></tr>');
		});
	}

	// Update pagination
	function updatePagination() {
		var paginationData = $('.admin2000-pagination-data');
		if (paginationData.length) {
			var page = paginationData.data('page');
			var pages = paginationData.data('pages');

			// Update pagination info (total count stays from backend PHP)
			$('.admin2000-current-page').text(page);
			$('.admin2000-total-pages').text(pages);

			// Update settings
			settings.actual_page = page;
		}
	}

	// Sort handler
	$('.admin2000-sort-link').click(function(e) {
		e.preventDefault();
		var field = $(this).data('field');

		if (settings.sort_item === field) {
			settings.sort_direction = (settings.sort_direction === 'up') ? 'down' : 'up';
		} else {
			settings.sort_item = field;
			settings.sort_direction = 'down';
		}

		settings.actual_page = 1;
		loadTableData();
	});

	// Search handler (jQuery 3.x - we can use .on() now!)
	var searchTimeout;
	$('.admin2000-search').on('keyup', function() {
		clearTimeout(searchTimeout);
		var searchValue = $(this).val();

		searchTimeout = setTimeout(function() {
			settings.search_string = searchValue;
			settings.actual_page = 1;
			loadTableData();
		}, 500);
	});

	// Filter handler
	$('.admin2000-filter-element').change(function() {
		var field = $(this).data('field');
		var value = $(this).val();

		if (value) {
			settings.list_filter[field] = value;
		} else {
			delete settings.list_filter[field];
		}

		settings.actual_page = 1;
		loadTableData();
	});

	// Filter toggle
	$('.admin2000-filter-toggle').click(function() {
		$('.admin2000-filter-section').slideToggle();
	});

	// Items per page
	$('.admin2000-limit-btn').click(function(e) {
		e.preventDefault();
		$('.admin2000-limit-btn').removeClass('active');
		$(this).addClass('active');

		settings.max_list_items = $(this).data('limit');
		settings.actual_page = 1;
		loadTableData();
	});

	// Pagination
	$('.admin2000-prev-page').click(function(e) {
		e.preventDefault();
		if (settings.actual_page > 1) {
			settings.actual_page--;
			loadTableData();
		}
	});

	$('.admin2000-next-page').click(function(e) {
		e.preventDefault();
		var paginationData = $('.admin2000-pagination-data');
		var totalPages = paginationData.length ? paginationData.data('pages') : 1;

		if (settings.actual_page < totalPages) {
			settings.actual_page++;
			loadTableData();
		}
	});

	// Initial load
	loadTableData();
});
</script>