package views

import (
	"whereismymoney/internal/models"
	"fmt"
	"time"
)

func min(a, b int) int {
	if a < b {
		return a
	}
	return b
}

func max(a, b int) int {
	if a > b {
		return a
	}
	return b
}

templ Transactions(userName string, transactions []models.Transaction, bankAccounts []models.BankAccount, categories []models.Category, recurrenceRules []models.RecurrenceRule, currentPage int, totalPages int, totalCount int64) {
	@Layout("Transaktionen - WhereIsMyMoney") {
		@Navigation(userName)
		
		<!-- Main Content -->
		<div class="min-h-screen bg-gray-50">
			<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
				<div class="px-4 py-6 sm:px-0">
					<!-- Page Header -->
					<div class="mb-8">
						<h1 class="text-3xl font-bold text-gray-900">Transaktionen</h1>
						<p class="mt-2 text-gray-600">Verwalte deine Einnahmen und Ausgaben</p>
					</div>

					<!-- Action Buttons -->
					<div class="mb-6 flex gap-4">
						<button onclick="showModal('transactionModal')" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-medium">
							📝 Neue Transaktion
						</button>
						<button onclick="showModal('recurringModal')" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-medium">
							🔄 Regelmäßige Transaktion
						</button>
					</div>

					<!-- Filter Section -->
					<div class="bg-white shadow-sm rounded-lg mb-6">
						<div class="px-6 py-4">
							<h3 class="text-lg font-medium text-gray-900 mb-4">Filter & Suche</h3>
							<form id="filterForm" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
								<!-- Datumsbereich -->
								<div>
									<label for="date_from" class="block text-sm font-medium text-gray-700">Von Datum</label>
									<input type="date" id="date_from" name="date_from" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
								</div>
								<div>
									<label for="date_to" class="block text-sm font-medium text-gray-700">Bis Datum</label>
									<input type="date" id="date_to" name="date_to" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
								</div>
								
								<!-- Beschreibung -->
								<div>
									<label for="search_description" class="block text-sm font-medium text-gray-700">Beschreibung</label>
									<input type="text" id="search_description" name="search_description" placeholder="z.B. Supermarkt" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
								</div>
								
								<!-- Kategorie -->
								<div>
									<label for="filter_category" class="block text-sm font-medium text-gray-700">Kategorie</label>
									<select id="filter_category" name="filter_category" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
										<option value="">Alle Kategorien</option>
										for _, category := range categories {
											<option value={ fmt.Sprintf("%d", category.ID) }>{ category.Icon } { category.Name }</option>
										}
									</select>
								</div>
								
								<!-- Konto -->
								<div>
									<label for="filter_account" class="block text-sm font-medium text-gray-700">Konto</label>
									<select id="filter_account" name="filter_account" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
										<option value="">Alle Konten</option>
										for _, account := range bankAccounts {
											<option value={ fmt.Sprintf("%d", account.ID) }>{ account.Name } ({ account.Bank })</option>
										}
									</select>
								</div>
								
								<!-- Transaktionstyp -->
								<div>
									<label for="filter_type" class="block text-sm font-medium text-gray-700">Typ</label>
									<select id="filter_type" name="filter_type" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
										<option value="">Alle Typen</option>
										<option value="income">Einnahmen</option>
										<option value="expense">Ausgaben</option>
									</select>
								</div>
								
								<!-- Betrag -->
								<div>
									<label for="amount_min" class="block text-sm font-medium text-gray-700">Min. Betrag</label>
									<input type="number" id="amount_min" name="amount_min" step="0.01" placeholder="0.00" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
								</div>
								
								<div>
									<label for="amount_max" class="block text-sm font-medium text-gray-700">Max. Betrag</label>
									<input type="number" id="amount_max" name="amount_max" step="0.01" placeholder="9999.99" class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
								</div>
							</form>
							
							<!-- Filter Buttons -->
							<div class="mt-4 flex flex-wrap gap-2">
								<button type="button" id="applyFilter" onclick="applyFilters()" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
									Filter anwenden
								</button>
								<button type="button" id="clearFilter" onclick="clearFilters()" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500">
									Filter zurücksetzen
								</button>
								<div id="filterStatus" class="flex items-center text-sm text-gray-600">
									<span id="filterCount">Alle Transaktionen werden angezeigt</span>
								</div>
							</div>
						</div>
					</div>

					<!-- Tabs -->
					<div class="mb-6">
						<div class="border-b border-gray-200">
							<nav class="-mb-px flex space-x-8">
								<button onclick="showTab('transactions')" id="tab-transactions" class="tab-button border-b-2 border-blue-500 text-blue-600 py-2 px-1 text-sm font-medium">
									Alle Transaktionen
								</button>
								<button onclick="showTab('recurring')" id="tab-recurring" class="tab-button border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-2 px-1 text-sm font-medium">
									Regelmäßige Transaktionen
								</button>
							</nav>
						</div>
					</div>

					<!-- Transactions Table -->
					<div id="transactions-content" class="tab-content">
						<div class="bg-white shadow-sm rounded-lg overflow-hidden">
							<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
								<h2 class="text-lg font-medium text-gray-900">Letzte Transaktionen</h2>
								<div id="multiEditControls" class="hidden flex space-x-2">
									<button onclick="openMultiEditModal()" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
										<span id="selectedCount">0</span> ausgewählte bearbeiten
									</button>
									<button onclick="openMultiDeleteConfirm()" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">
										<span id="selectedCountDelete">0</span> ausgewählte löschen
									</button>
								</div>
							</div>
							<div class="overflow-x-auto">
								<table class="min-w-full divide-y divide-gray-200">
									<thead class="bg-gray-50">
										<tr>
											<th class="px-3 py-3 text-left">
												<input type="checkbox" id="selectAll" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" onchange="toggleSelectAll()">
											</th>
											<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Datum</th>
											<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Beschreibung</th>
											<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategorie</th>
											<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Konto</th>
											<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Betrag</th>
											<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aktionen</th>
										</tr>
									</thead>
									<tbody class="bg-white divide-y divide-gray-200">
										if len(transactions) == 0 {
											<tr>
												<td colspan="7" class="px-6 py-4 text-center text-gray-500">
													Noch keine Transaktionen vorhanden
												</td>
											</tr>
										}
										for _, transaction := range transactions {
											<tr class="hover:bg-gray-50">
												<td class="px-3 py-4 whitespace-nowrap">
													<input type="checkbox" class="transaction-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" 
														   value={ fmt.Sprintf("%d", transaction.ID) } onchange="updateMultiEditControls()">
												</td>
												<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
													{ transaction.Date.Format("02.01.2006") }
												</td>
												<td class="px-6 py-4 text-sm text-gray-900">
													{ transaction.Description }
													if transaction.IsRecurring {
														<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 ml-2">
															🔄 Regelmäßig
														</span>
													}
												</td>
												<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
													if transaction.Category != nil {
														<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
															{ transaction.Category.Icon } { transaction.Category.Name }
														</span>
													} else {
														<span class="text-gray-400">Ohne Kategorie</span>
													}
												</td>
												<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
													if transaction.BankAccount != nil {
														{ transaction.BankAccount.Name }
													} else {
														<span class="text-gray-400">Ohne Konto</span>
													}
												</td>
												<td class="px-6 py-4 whitespace-nowrap text-sm text-right">
													if transaction.Type == "income" {
														<span class="text-green-600 font-medium">+{ fmt.Sprintf("%.2f", transaction.Amount) } €</span>
													} else {
														<span class="text-red-600 font-medium">-{ fmt.Sprintf("%.2f", transaction.Amount) } €</span>
													}
												</td>
												<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
													<button data-transaction-id={ fmt.Sprintf("%d", transaction.ID) } class="edit-transaction text-blue-600 hover:text-blue-900 mr-2" title="Transaktion bearbeiten">
														✏️
													</button>
													<button data-transaction-id={ fmt.Sprintf("%d", transaction.ID) } class="delete-transaction text-red-600 hover:text-red-900" title="Transaktion löschen">
														🗑️
													</button>
												</td>
											</tr>
										}
									</tbody>
								</table>
							</div>
							<!-- Pagination -->
							if totalPages > 1 {
								<div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
									<div class="flex items-center justify-between">
										<div class="text-sm text-gray-700">
											Zeige { fmt.Sprintf("%d", (currentPage-1)*20+1) } bis { fmt.Sprintf("%d", min(currentPage*20, int(totalCount))) } von { fmt.Sprintf("%d", totalCount) } Transaktionen
										</div>
										<div class="flex items-center space-x-2">
											<!-- Previous Button -->
											if currentPage > 1 {
												<a href={ templ.URL(fmt.Sprintf("/transactions?page=%d", currentPage-1)) } class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:text-gray-700 hover:bg-gray-50">
													Vorherige
												</a>
											} else {
												<span class="px-3 py-2 text-sm font-medium text-gray-300 bg-gray-100 border border-gray-300 rounded-md cursor-not-allowed">
													Vorherige
												</span>
											}
											
											<!-- Page Numbers -->
											<div class="flex items-center space-x-1">
												if currentPage > 3 {
													<a href={ templ.URL("/transactions?page=1") } class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:text-gray-700 hover:bg-gray-50">
														1
													</a>
													if currentPage > 4 {
														<span class="px-2 py-2 text-sm text-gray-500">...</span>
													}
												}
												
												for i := max(1, currentPage-2); i <= min(totalPages, currentPage+2); i++ {
													if i == currentPage {
														<span class="px-3 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600 rounded-md">
															{ fmt.Sprintf("%d", i) }
														</span>
													} else {
														<a href={ templ.URL(fmt.Sprintf("/transactions?page=%d", i)) } class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:text-gray-700 hover:bg-gray-50">
															{ fmt.Sprintf("%d", i) }
														</a>
													}
												}
												
												if currentPage < totalPages-2 {
													if currentPage < totalPages-3 {
														<span class="px-2 py-2 text-sm text-gray-500">...</span>
													}
													<a href={ templ.URL(fmt.Sprintf("/transactions?page=%d", totalPages)) } class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:text-gray-700 hover:bg-gray-50">
														{ fmt.Sprintf("%d", totalPages) }
													</a>
												}
											</div>
											
											<!-- Next Button -->
											if currentPage < totalPages {
												<a href={ templ.URL(fmt.Sprintf("/transactions?page=%d", currentPage+1)) } class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:text-gray-700 hover:bg-gray-50">
													Nächste
												</a>
											} else {
												<span class="px-3 py-2 text-sm font-medium text-gray-300 bg-gray-100 border border-gray-300 rounded-md cursor-not-allowed">
													Nächste
												</span>
											}
										</div>
									</div>
								</div>
							}
						</div>
					</div>

					<!-- Recurring Transactions Table -->
					<div id="recurring-content" class="tab-content hidden">
						<div class="bg-white shadow-sm rounded-lg overflow-hidden">
							<div class="px-6 py-4 border-b border-gray-200">
								<h2 class="text-lg font-medium text-gray-900">Regelmäßige Transaktionen</h2>
							</div>
							<div class="overflow-x-auto">
								<table class="min-w-full divide-y divide-gray-200">
									<thead class="bg-gray-50">
										<tr>
											<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Beschreibung</th>
											<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Intervall</th>
											<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nächste Ausführung</th>
											<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Betrag</th>
											<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
											<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aktionen</th>
										</tr>
									</thead>
									<tbody class="bg-white divide-y divide-gray-200">
										if len(recurrenceRules) == 0 {
											<tr>
												<td colspan="6" class="px-6 py-4 text-center text-gray-500">
													Noch keine regelmäßigen Transaktionen vorhanden
												</td>
											</tr>
										}
										for _, rule := range recurrenceRules {
											<tr class="hover:bg-gray-50">
												<td class="px-6 py-4 text-sm text-gray-900">
													{ rule.Description }
													if rule.Category != nil {
														<div class="text-xs text-gray-500 mt-1">
															{ rule.Category.Icon } { rule.Category.Name }
														</div>
													}
												</td>
												<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
													{ getIntervalText(rule.Interval, rule.IntervalCount) }
												</td>
												<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
													{ getNextExecutionDate(rule) }
												</td>
												<td class="px-6 py-4 whitespace-nowrap text-sm text-right">
													if rule.Type == "income" {
														<span class="text-green-600 font-medium">+{ fmt.Sprintf("%.2f", rule.Amount) } €</span>
													} else {
														<span class="text-red-600 font-medium">-{ fmt.Sprintf("%.2f", rule.Amount) } €</span>
													}
												</td>
												<td class="px-6 py-4 whitespace-nowrap text-right">
													if rule.IsActive {
														<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
															Aktiv
														</span>
													} else {
														<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
															Pausiert
														</span>
													}
												</td>
												<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
													<button data-rule-id={ fmt.Sprintf("%d", rule.ID) } class="toggle-recurrence text-blue-600 hover:text-blue-900 mr-2">
														if rule.IsActive {
															⏸️
														} else {
															▶️
														}
													</button>
												</td>
											</tr>
										}
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Transaction Modal -->
		<div id="transactionModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
			<div class="flex items-center justify-center min-h-screen px-4">
				<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
					<form method="POST" action="/transactions">
						<div class="px-6 py-4 border-b border-gray-200">
							<h3 class="text-lg font-medium text-gray-900">Neue Transaktion</h3>
						</div>
						<div class="px-6 py-4 space-y-4">
							<div>
								<label class="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
								<input type="text" name="description" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="z.B. Supermarkt Einkauf">
							</div>
							<div class="grid grid-cols-2 gap-4">
								<div>
									<label class="block text-sm font-medium text-gray-700 mb-1">Betrag</label>
									<input type="number" name="amount" step="0.01" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="0.00">
								</div>
								<div>
									<label class="block text-sm font-medium text-gray-700 mb-1">Typ</label>
									<select name="type" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
										<option value="">Wählen...</option>
										<option value="income">💰 Einnahme</option>
										<option value="expense">💸 Ausgabe</option>
									</select>
								</div>
							</div>
							<div>
								<label class="block text-sm font-medium text-gray-700 mb-1">Datum</label>
								<input type="date" name="date" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500" value={ time.Now().Format("2006-01-02") }>
							</div>
							<div>
								<label class="block text-sm font-medium text-gray-700 mb-1">Kategorie (optional)</label>
								<select name="category_id" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
									<option value="">Ohne Kategorie</option>
									for _, category := range categories {
										<option value={ fmt.Sprintf("%d", category.ID) }>{ category.Icon } { category.Name }</option>
									}
								</select>
							</div>
							<div>
								<label class="block text-sm font-medium text-gray-700 mb-1">Bankkonto (optional)</label>
								<select name="bank_account_id" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
									<option value="">Ohne Konto</option>
									for _, account := range bankAccounts {
										<option value={ fmt.Sprintf("%d", account.ID) }>{ account.Name } ({ account.Bank })</option>
									}
								</select>
							</div>
						</div>
						<div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
							<button type="button" onclick="hideModal('transactionModal')" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
								Abbrechen
							</button>
							<button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700">
								Erstellen
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<!-- Edit Transaction Modal -->
		<div id="editTransactionModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
			<div class="flex items-center justify-center min-h-screen px-4">
				<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
					<form id="editTransactionForm" method="POST">
						<div class="px-6 py-4 border-b border-gray-200">
							<h3 class="text-lg font-medium text-gray-900">Transaktion bearbeiten</h3>
						</div>
						<div class="px-6 py-4 space-y-4">
							<div>
								<label for="edit_description" class="block text-sm font-medium text-gray-700">Beschreibung</label>
								<input type="text" id="edit_description" name="description" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
							</div>
							<div>
								<label for="edit_amount" class="block text-sm font-medium text-gray-700">Betrag</label>
								<input type="number" id="edit_amount" name="amount" step="0.01" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
							</div>
							<div>
								<label for="edit_type" class="block text-sm font-medium text-gray-700">Typ</label>
								<select id="edit_type" name="type" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
									<option value="expense">Ausgabe</option>
									<option value="income">Einnahme</option>
								</select>
							</div>
							<div>
								<label for="edit_date" class="block text-sm font-medium text-gray-700">Datum</label>
								<input type="date" id="edit_date" name="date" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
							</div>
							<div>
								<label for="edit_category_id" class="block text-sm font-medium text-gray-700">Kategorie</label>
								<select id="edit_category_id" name="category_id" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
									<option value="">Keine Kategorie</option>
									for _, category := range categories {
										<option value={ fmt.Sprintf("%d", category.ID) }>{ category.Icon } { category.Name }</option>
									}
								</select>
							</div>
							<div>
								<label for="edit_bank_account_id" class="block text-sm font-medium text-gray-700">Konto</label>
								<select id="edit_bank_account_id" name="bank_account_id" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
									for _, account := range bankAccounts {
										<option value={ fmt.Sprintf("%d", account.ID) }>{ account.Name } ({ account.Bank })</option>
									}
								</select>
							</div>
						</div>
						<div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
							<button type="button" onclick="closeEditTransactionModal()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
								Abbrechen
							</button>
							<button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
								Speichern
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<!-- Recurring Transaction Modal -->
		<div id="recurringModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
			<div class="flex items-center justify-center min-h-screen px-4">
				<div class="bg-white rounded-lg shadow-xl max-w-lg w-full max-h-screen overflow-y-auto">
					<form method="POST" action="/transactions/recurring">
						<div class="px-6 py-4 border-b border-gray-200">
							<h3 class="text-lg font-medium text-gray-900">Regelmäßige Transaktion</h3>
						</div>
						<div class="px-6 py-4 space-y-4">
							<div>
								<label class="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
								<input type="text" name="description" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="z.B. Miete">
							</div>
							<div class="grid grid-cols-2 gap-4">
								<div>
									<label class="block text-sm font-medium text-gray-700 mb-1">Betrag</label>
									<input type="number" name="amount" step="0.01" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="0.00">
								</div>
								<div>
									<label class="block text-sm font-medium text-gray-700 mb-1">Typ</label>
									<select name="type" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
										<option value="">Wählen...</option>
										<option value="income">💰 Einnahme</option>
										<option value="expense">💸 Ausgabe</option>
									</select>
								</div>
							</div>
							<div class="grid grid-cols-2 gap-4">
								<div>
									<label class="block text-sm font-medium text-gray-700 mb-1">Startdatum</label>
									<input type="date" name="start_date" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500" value={ time.Now().Format("2006-01-02") }>
								</div>
								<div>
									<label class="block text-sm font-medium text-gray-700 mb-1">Enddatum (optional)</label>
									<input type="date" name="end_date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
								</div>
							</div>
							<div class="grid grid-cols-2 gap-4">
								<div>
									<label class="block text-sm font-medium text-gray-700 mb-1">Intervall</label>
									<select name="interval" required onchange="toggleIntervalOptions()" id="interval-select" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
										<option value="">Wählen...</option>
										<option value="daily">Täglich</option>
										<option value="weekly">Wöchentlich</option>
										<option value="monthly">Monatlich</option>
										<option value="yearly">Jährlich</option>
									</select>
								</div>
								<div>
									<label class="block text-sm font-medium text-gray-700 mb-1">Alle X</label>
									<input type="number" name="interval_count" min="1" value="1" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
								</div>
							</div>
							
							<!-- Day of Month (for monthly) -->
							<div id="day-of-month-group" class="hidden">
								<label class="block text-sm font-medium text-gray-700 mb-1">Tag im Monat</label>
								<input type="number" name="day_of_month" min="1" max="31" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="z.B. 1 für jeden ersten">
							</div>

							<!-- Day of Week (for weekly) -->
							<div id="day-of-week-group" class="hidden">
								<label class="block text-sm font-medium text-gray-700 mb-1">Wochentag</label>
								<select name="day_of_week" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
									<option value="">Aktueller Wochentag</option>
									<option value="1">Montag</option>
									<option value="2">Dienstag</option>
									<option value="3">Mittwoch</option>
									<option value="4">Donnerstag</option>
									<option value="5">Freitag</option>
									<option value="6">Samstag</option>
									<option value="0">Sonntag</option>
								</select>
							</div>

							<div>
								<label class="block text-sm font-medium text-gray-700 mb-1">Kategorie (optional)</label>
								<select name="category_id" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
									<option value="">Ohne Kategorie</option>
									for _, category := range categories {
										<option value={ fmt.Sprintf("%d", category.ID) }>{ category.Icon } { category.Name }</option>
									}
								</select>
							</div>
							<div>
								<label class="block text-sm font-medium text-gray-700 mb-1">Bankkonto (optional)</label>
								<select name="bank_account_id" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
									<option value="">Ohne Konto</option>
									for _, account := range bankAccounts {
										<option value={ fmt.Sprintf("%d", account.ID) }>{ account.Name } ({ account.Bank })</option>
									}
								</select>
							</div>
						</div>
						<div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
							<button type="button" onclick="hideModal('recurringModal')" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
								Abbrechen
							</button>
							<button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md hover:bg-green-700">
								Erstellen
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<!-- Multi-Edit Modal -->
		<div id="multiEditModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
			<div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
				<div class="mt-3">
					<div class="flex items-center justify-between mb-4">
						<h3 class="text-lg font-medium text-gray-900">Mehrere Transaktionen bearbeiten</h3>
						<button onclick="hideModal('multiEditModal')" class="text-gray-400 hover:text-gray-600">
							<span class="sr-only">Schließen</span>
							<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
							</svg>
						</button>
					</div>
					<p class="text-sm text-gray-600 mb-4">
						Nur die Felder ausfüllen, die für alle ausgewählten Transaktionen geändert werden sollen. Leere Felder bleiben unverändert.
					</p>
					<form id="multiEditForm" onsubmit="submitMultiEdit(event)">
						<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
							<div>
								<label class="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
								<input type="text" id="multiDescription" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
								<p class="text-xs text-gray-500 mt-1">Leer lassen um unverändert zu lassen</p>
							</div>
							<div>
								<label class="block text-sm font-medium text-gray-700 mb-1">Betrag</label>
								<input type="number" step="0.01" id="multiAmount" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
								<p class="text-xs text-gray-500 mt-1">Leer lassen um unverändert zu lassen</p>
							</div>
							<div>
								<label class="block text-sm font-medium text-gray-700 mb-1">Typ</label>
								<select id="multiType" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
									<option value="">Unverändert lassen</option>
									<option value="income">Einnahme</option>
									<option value="expense">Ausgabe</option>
								</select>
							</div>
							<div>
								<label class="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
								<select id="multiCategory" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
									<option value="">Unverändert lassen</option>
									<option value="null">Ohne Kategorie</option>
									for _, category := range categories {
										<option value={ fmt.Sprintf("%d", category.ID) }>{ category.Icon } { category.Name }</option>
									}
								</select>
							</div>
							<div>
								<label class="block text-sm font-medium text-gray-700 mb-1">Bankkonto</label>
								<select id="multiAccount" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
									<option value="">Unverändert lassen</option>
									<option value="null">Ohne Konto</option>
									for _, account := range bankAccounts {
										<option value={ fmt.Sprintf("%d", account.ID) }>{ account.Name } ({ account.Bank })</option>
									}
								</select>
							</div>
							<div>
								<label class="block text-sm font-medium text-gray-700 mb-1">Datum</label>
								<input type="date" id="multiDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
								<p class="text-xs text-gray-500 mt-1">Leer lassen um unverändert zu lassen</p>
							</div>
						</div>
						<div class="flex justify-end space-x-3">
							<button type="button" onclick="hideModal('multiEditModal')" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
								Abbrechen
							</button>
							<button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700">
								Ausgewählte Transaktionen aktualisieren
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<!-- Multi-Delete Confirmation Modal -->
		<div id="multiDeleteModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
			<div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
				<div class="mt-3">
					<div class="flex items-center justify-between mb-4">
						<h3 class="text-lg font-medium text-gray-900">Transaktionen löschen</h3>
						<button onclick="hideModal('multiDeleteModal')" class="text-gray-400 hover:text-gray-600">
							<span class="sr-only">Schließen</span>
							<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
							</svg>
						</button>
					</div>
					<div class="mb-4">
						<div class="flex items-center mb-3">
							<svg class="h-12 w-12 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
							</svg>
							<div class="ml-4">
								<h3 class="text-lg font-medium text-gray-900">Sind Sie sicher?</h3>
								<p class="text-sm text-gray-600">
									Sie sind dabei, <span id="deleteCountText" class="font-semibold text-red-600">0</span> Transaktionen zu löschen. 
									Diese Aktion kann nicht rückgängig gemacht werden.
								</p>
							</div>
						</div>
						<div class="bg-red-50 border border-red-200 rounded-md p-3">
							<p class="text-sm text-red-700">
								<strong>Warnung:</strong> Alle ausgewählten Transaktionen werden permanent gelöscht. 
								Stellen Sie sicher, dass Sie die richtigen Transaktionen ausgewählt haben.
							</p>
						</div>
					</div>
					<div class="flex justify-end space-x-3">
						<button type="button" onclick="hideModal('multiDeleteModal')" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
							Abbrechen
						</button>
						<button type="button" onclick="confirmMultiDelete()" class="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700">
							Ja, löschen
						</button>
					</div>
				</div>
			</div>
		</div>

		<script>
			function showModal(modalId) {
				document.getElementById(modalId).classList.remove('hidden');
			}

			function hideModal(modalId) {
				document.getElementById(modalId).classList.add('hidden');
			}

			function showTab(tabName) {
				// Hide all content
				document.querySelectorAll('.tab-content').forEach(content => {
					content.classList.add('hidden');
				});
				
				// Remove active class from all tabs
				document.querySelectorAll('.tab-button').forEach(tab => {
					tab.classList.remove('border-blue-500', 'text-blue-600');
					tab.classList.add('border-transparent', 'text-gray-500');
				});
				
				// Show selected content
				document.getElementById(tabName + '-content').classList.remove('hidden');
				
				// Activate selected tab
				const activeTab = document.getElementById('tab-' + tabName);
				activeTab.classList.add('border-blue-500', 'text-blue-600');
				activeTab.classList.remove('border-transparent', 'text-gray-500');
			}

			function showEditTransactionModal(transaction) {
				// Populate form fields with transaction data
				document.getElementById('edit_description').value = transaction.description;
				document.getElementById('edit_amount').value = transaction.amount;
				document.getElementById('edit_type').value = transaction.type;
				document.getElementById('edit_date').value = transaction.date;
				document.getElementById('edit_category_id').value = transaction.category_id || '';
				document.getElementById('edit_bank_account_id').value = transaction.bank_account_id;
				
				// Set form action to update URL
				document.getElementById('editTransactionForm').action = '/transactions/' + transaction.id;
				
				// Show modal
				showModal('editTransactionModal');
			}

			function closeEditTransactionModal() {
				hideModal('editTransactionModal');
			}

			function toggleIntervalOptions() {
				const interval = document.getElementById('interval-select').value;
				const dayOfMonthGroup = document.getElementById('day-of-month-group');
				const dayOfWeekGroup = document.getElementById('day-of-week-group');
				
				// Hide all
				dayOfMonthGroup.classList.add('hidden');
				dayOfWeekGroup.classList.add('hidden');
				
				// Show relevant option
				if (interval === 'monthly') {
					dayOfMonthGroup.classList.remove('hidden');
				} else if (interval === 'weekly') {
					dayOfWeekGroup.classList.remove('hidden');
				}
			}

			// Multi-Edit Funktionalität
			function toggleSelectAll() {
				const selectAllCheckbox = document.getElementById('selectAll');
				const transactionCheckboxes = document.querySelectorAll('.transaction-checkbox');
				
				transactionCheckboxes.forEach(checkbox => {
					checkbox.checked = selectAllCheckbox.checked;
				});
				
				updateMultiEditControls();
			}

			function updateMultiEditControls() {
				const transactionCheckboxes = document.querySelectorAll('.transaction-checkbox');
				const checkedBoxes = document.querySelectorAll('.transaction-checkbox:checked');
				const multiEditControls = document.getElementById('multiEditControls');
				const selectedCount = document.getElementById('selectedCount');
				const selectedCountDelete = document.getElementById('selectedCountDelete');
				
				if (checkedBoxes.length > 0) {
					multiEditControls.classList.remove('hidden');
					selectedCount.textContent = checkedBoxes.length;
					selectedCountDelete.textContent = checkedBoxes.length;
				} else {
					multiEditControls.classList.add('hidden');
				}
				
				// Update "Select All" checkbox state
				const selectAllCheckbox = document.getElementById('selectAll');
				if (checkedBoxes.length === 0) {
					selectAllCheckbox.indeterminate = false;
					selectAllCheckbox.checked = false;
				} else if (checkedBoxes.length === transactionCheckboxes.length) {
					selectAllCheckbox.indeterminate = false;
					selectAllCheckbox.checked = true;
				} else {
					selectAllCheckbox.indeterminate = true;
				}
			}

			function openMultiEditModal() {
				const checkedBoxes = document.querySelectorAll('.transaction-checkbox:checked');
				if (checkedBoxes.length === 0) {
					alert('Bitte wählen Sie mindestens eine Transaktion aus.');
					return;
				}
				
				// Reset form
				document.getElementById('multiEditForm').reset();
				showModal('multiEditModal');
			}

			function submitMultiEdit(event) {
				event.preventDefault();
				
				const checkedBoxes = document.querySelectorAll('.transaction-checkbox:checked');
				const transactionIds = Array.from(checkedBoxes).map(cb => cb.value);
				
				if (transactionIds.length === 0) {
					alert('Keine Transaktionen ausgewählt.');
					return;
				}
				
				const formData = {
					transaction_ids: transactionIds,
					description: document.getElementById('multiDescription').value,
					amount: document.getElementById('multiAmount').value,
					type: document.getElementById('multiType').value,
					category_id: document.getElementById('multiCategory').value,
					bank_account_id: document.getElementById('multiAccount').value,
					date: document.getElementById('multiDate').value
				};
				
				// Remove empty values
				Object.keys(formData).forEach(key => {
					if (formData[key] === '' || formData[key] === null) {
						delete formData[key];
					}
				});
				
				// Special handling for null values
				if (document.getElementById('multiCategory').value === 'null') {
					formData.category_id = null;
				}
				if (document.getElementById('multiAccount').value === 'null') {
					formData.bank_account_id = null;
				}
				
				fetch('/transactions/multi-update', {
					method: 'PUT',
					headers: {
						'Content-Type': 'application/json',
					},
					body: JSON.stringify(formData)
				})
				.then(response => {
					if (response.ok) {
						hideModal('multiEditModal');
						location.reload();
					} else {
						response.text().then(text => {
							alert('Fehler beim Aktualisieren: ' + text);
						});
					}
				})
				.catch(error => {
					console.error('Error:', error);
					alert('Fehler beim Aktualisieren der Transaktionen');
				});
			}

			function openMultiDeleteConfirm() {
				const checkedBoxes = document.querySelectorAll('.transaction-checkbox:checked');
				if (checkedBoxes.length === 0) {
					alert('Bitte wählen Sie mindestens eine Transaktion aus.');
					return;
				}
				
				// Update delete count in modal
				document.getElementById('deleteCountText').textContent = checkedBoxes.length;
				showModal('multiDeleteModal');
			}

			function confirmMultiDelete() {
				const checkedBoxes = document.querySelectorAll('.transaction-checkbox:checked');
				const transactionIds = Array.from(checkedBoxes).map(cb => cb.value);
				
				if (transactionIds.length === 0) {
					alert('Keine Transaktionen ausgewählt.');
					return;
				}
				
				// Disable button to prevent double clicks
				const deleteButton = event.target;
				deleteButton.disabled = true;
				deleteButton.textContent = 'Lösche...';
				
				fetch('/transactions/multi-delete', {
					method: 'DELETE',
					headers: {
						'Content-Type': 'application/json',
					},
					body: JSON.stringify({
						transaction_ids: transactionIds
					})
				})
				.then(response => {
					if (response.ok) {
						hideModal('multiDeleteModal');
						location.reload();
					} else {
						response.text().then(text => {
							alert('Fehler beim Löschen: ' + text);
							deleteButton.disabled = false;
							deleteButton.textContent = 'Ja, löschen';
						});
					}
				})
				.catch(error => {
					console.error('Error:', error);
					alert('Fehler beim Löschen der Transaktionen');
					deleteButton.disabled = false;
					deleteButton.textContent = 'Ja, löschen';
				});
			}

			// Filter-Funktionalität
			function applyFilters() {
				const filterData = {
					date_from: document.getElementById('date_from').value,
					date_to: document.getElementById('date_to').value,
					search_description: document.getElementById('search_description').value,
					filter_category: document.getElementById('filter_category').value,
					filter_account: document.getElementById('filter_account').value,
					filter_type: document.getElementById('filter_type').value,
					amount_min: document.getElementById('amount_min').value,
					amount_max: document.getElementById('amount_max').value
				};

				// Build URL with filter parameters
				const params = new URLSearchParams();
				Object.entries(filterData).forEach(([key, value]) => {
					if (value && value.trim() !== '') {
						params.append(key, value);
					}
				});

				// Redirect to filtered page
				window.location.href = '/transactions?' + params.toString();
			}

			function clearFilters() {
				document.getElementById('filterForm').reset();
				window.location.href = '/transactions';
			}

			function updateFilterStatus() {
				const params = new URLSearchParams(window.location.search);
				const activeFilters = [];
				
				if (params.get('date_from') || params.get('date_to')) {
					activeFilters.push('Datum');
				}
				if (params.get('search_description')) {
					activeFilters.push('Beschreibung');
				}
				if (params.get('filter_category')) {
					activeFilters.push('Kategorie');
				}
				if (params.get('filter_account')) {
					activeFilters.push('Konto');
				}
				if (params.get('filter_type')) {
					activeFilters.push('Typ');
				}
				if (params.get('amount_min') || params.get('amount_max')) {
					activeFilters.push('Betrag');
				}

				const filterCountElement = document.getElementById('filterCount');
				if (activeFilters.length > 0) {
					filterCountElement.textContent = `Gefiltert nach: ${activeFilters.join(', ')}`;
				} else {
					filterCountElement.textContent = 'Alle Transaktionen werden angezeigt';
				}
			}

			function buildPaginationURL(page) {
				const params = new URLSearchParams(window.location.search);
				params.set('page', page);
				return '/transactions?' + params.toString();
			}

			function updatePaginationLinks() {
				// Update all pagination links to preserve filters
				const paginationLinks = document.querySelectorAll('a[href*="/transactions?page="]');
				paginationLinks.forEach(link => {
					const href = link.getAttribute('href');
					const pageMatch = href.match(/page=(\d+)/);
					if (pageMatch) {
						const page = pageMatch[1];
						link.setAttribute('href', buildPaginationURL(page));
					}
				});
			}

			function loadFilterFromURL() {
				const params = new URLSearchParams(window.location.search);
				
				document.getElementById('date_from').value = params.get('date_from') || '';
				document.getElementById('date_to').value = params.get('date_to') || '';
				document.getElementById('search_description').value = params.get('search_description') || '';
				document.getElementById('filter_category').value = params.get('filter_category') || '';
				document.getElementById('filter_account').value = params.get('filter_account') || '';
				document.getElementById('filter_type').value = params.get('filter_type') || '';
				document.getElementById('amount_min').value = params.get('amount_min') || '';
				document.getElementById('amount_max').value = params.get('amount_max') || '';
			}

			// Event Listeners
			document.addEventListener('DOMContentLoaded', function() {
				loadFilterFromURL();
				updateFilterStatus();
				updatePaginationLinks();

				// Enter key to apply filters
				const form = document.getElementById('filterForm');
				if (form) {
					form.addEventListener('keypress', function(e) {
						if (e.key === 'Enter') {
							e.preventDefault();
							applyFilters();
						}
					});
				}
			});
			document.addEventListener('DOMContentLoaded', function() {
				// Delete transaction buttons
				document.querySelectorAll('.delete-transaction').forEach(button => {
					button.addEventListener('click', async function() {
						const id = this.getAttribute('data-transaction-id');
						
						if (!confirm('Möchtest du diese Transaktion wirklich löschen?')) {
							return;
						}
						
						try {
							const response = await fetch(`/transactions/${id}`, {
								method: 'DELETE'
							});
							
							if (response.ok) {
								location.reload();
							} else {
								alert('Fehler beim Löschen der Transaktion');
							}
						} catch (error) {
							alert('Fehler beim Löschen der Transaktion');
						}
					});
				});

				// Edit transaction buttons
				document.querySelectorAll('.edit-transaction').forEach(button => {
					button.addEventListener('click', async function() {
						const id = this.getAttribute('data-transaction-id');
						
						try {
							const response = await fetch(`/transactions/${id}/data`);
							if (response.ok) {
								const transaction = await response.json();
								showEditTransactionModal(transaction);
							} else {
								alert('Fehler beim Laden der Transaktionsdaten');
							}
						} catch (error) {
							alert('Fehler beim Laden der Transaktionsdaten');
						}
					});
				});

				// Toggle recurrence rule buttons
				document.querySelectorAll('.toggle-recurrence').forEach(button => {
					button.addEventListener('click', async function() {
						const id = this.getAttribute('data-rule-id');
						
						try {
							const response = await fetch(`/transactions/recurring/${id}/toggle`, {
								method: 'POST'
							});
							
							if (response.ok) {
								location.reload();
							} else {
								alert('Fehler beim Umschalten der Regel');
							}
						} catch (error) {
							alert('Fehler beim Umschalten der Regel');
						}
					});
				});

				// Edit transaction form submit
				document.getElementById('editTransactionForm').addEventListener('submit', async function(e) {
					e.preventDefault();
					
					const formData = new FormData(this);
					const formObject = {};
					for (let [key, value] of formData.entries()) {
						formObject[key] = value;
					}
					
					try {
						const response = await fetch(this.action, {
							method: 'PUT',
							headers: {
								'Content-Type': 'application/json',
							},
							body: JSON.stringify(formObject)
						});
						
						if (response.ok) {
							closeEditTransactionModal();
							location.reload();
						} else {
							alert('Fehler beim Speichern der Transaktion');
						}
					} catch (error) {
						alert('Fehler beim Speichern der Transaktion');
					}
				});
			});

			// Close modal when clicking outside
			document.addEventListener('click', function(event) {
				if (event.target.classList.contains('bg-opacity-50')) {
					event.target.classList.add('hidden');
				}
			});
		</script>
	}
}

func getIntervalText(interval string, count int) string {
	var base string
	switch interval {
	case "daily":
		base = "Tag"
		if count > 1 {
			base = "Tage"
		}
	case "weekly":
		base = "Woche"
		if count > 1 {
			base = "Wochen"
		}
	case "monthly":
		base = "Monat"
		if count > 1 {
			base = "Monate"
		}
	case "yearly":
		base = "Jahr"
		if count > 1 {
			base = "Jahre"
		}
	default:
		return interval
	}
	
	if count == 1 {
		return fmt.Sprintf("Jeden %s", base)
	}
	return fmt.Sprintf("Alle %d %s", count, base)
}

func getNextExecutionDate(rule models.RecurrenceRule) string {
	if !rule.IsActive {
		return "Pausiert"
	}
	
	lastDate := rule.StartDate
	if rule.LastGenerated != nil {
		lastDate = *rule.LastGenerated
	}
	
	nextDate := rule.GetNextOccurrence(lastDate)
	if nextDate == nil {
		return "Beendet"
	}
	
	return nextDate.Format("02.01.2006")
}