Files
prov/public/index.html
T
kerimatilganandClaude Opus 4.7 bea45b9d2b Move admin nav to a left sidebar; shrink table buttons; keep
action buttons on one line

- Wrap the Administration tab in a 260px sidebar + main grid. The
  category buttons stack vertically inside the sidebar and stay
  sticky while the content area scrolls. Below 900px viewports
  the sidebar collapses back to a horizontal row.
- Compact button defaults for anything inside a table cell
  (table button / td button) override the global 12px/24px padding
  with 5px/10px and a smaller font. Marks every last-child <td> as
  nowrap so the Bearbeiten/Löschen pair (and similar action sets)
  stays on a single line instead of wrapping vertically.
- Adjacent action buttons get a 5px gap via "button + button"
  without touching the existing inline margin-right declarations.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-15 16:53:07 +02:00

2015 lines
87 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Provisions-Tracker</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
}
.container {
max-width: 1600px;
margin: 0 auto;
padding: 20px;
}
header {
background: #2c3e50;
color: white;
text-align: center;
padding: 1rem;
margin-bottom: 2rem;
border-radius: 8px;
}
.nav-tabs {
display: flex;
margin-bottom: 20px;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.nav-tab {
flex: 1;
padding: 15px 20px;
background: #95a5a6;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
border-right: 1px solid #7f8c8d;
}
.nav-tab:last-child {
border-right: none;
}
.nav-tab.active {
background: #3498db;
color: white;
box-shadow: inset 0 -3px 0 #2980b9;
}
.nav-tab:hover:not(.active) {
background: #7f8c8d;
transform: translateY(-1px);
}
.nav-tab.active:hover {
background: #2980b9;
}
.tab-content {
display: none;
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.tab-content.active {
display: block;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #2c3e50;
}
input, select, textarea {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: #3498db;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-row-thirds {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
button {
background: #3498db;
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background: #2980b9;
}
.btn-success {
background: #27ae60;
}
.btn-success:hover {
background: #229954;
}
.btn-danger {
background: #e74c3c;
}
.btn-danger:hover {
background: #c0392b;
}
.admin-section {
margin-bottom: 30px;
padding: 20px;
background: #f8f9fa;
border-radius: 6px;
}
.admin-section h3 {
margin-bottom: 15px;
color: #2c3e50;
}
/* New Admin Interface Styles: sidebar + content */
.admin-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 20px;
align-items: start;
}
.admin-sidebar {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
position: sticky;
top: 20px;
}
.admin-sidebar h2 {
margin: 0 0 16px 0;
color: #2c3e50;
text-align: left;
font-size: 18px;
}
.admin-main {
min-width: 0;
}
.admin-categories {
display: flex;
flex-direction: column;
gap: 6px;
}
.admin-cat-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
font-size: 14px;
font-weight: 500;
color: #2c3e50;
width: 100%;
}
.admin-cat-btn:hover {
background: #e3f2fd;
border-color: #2196f3;
}
.admin-cat-btn.active {
background: #2196f3;
color: white;
border-color: #1976d2;
}
.admin-icon {
font-size: 18px;
line-height: 1;
}
@media (max-width: 900px) {
.admin-layout {
grid-template-columns: 1fr;
}
.admin-sidebar {
position: static;
}
.admin-categories {
flex-direction: row;
flex-wrap: wrap;
}
.admin-cat-btn {
width: auto;
}
}
/* Compact buttons for tables and action cells */
table button,
td button,
.btn-sm {
padding: 5px 10px !important;
font-size: 13px !important;
border-radius: 4px !important;
}
td.actions, .action-cell, table th:last-child, table td:last-child {
white-space: nowrap;
}
table button + button,
td button + button,
.btn-row button + button {
margin-left: 5px;
}
.admin-category {
display: none;
animation: fadeIn 0.3s ease-in;
}
.admin-category.active {
display: block;
}
.admin-page {
background: white;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
overflow: hidden;
}
.admin-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}
.admin-header h3 {
margin: 0 0 10px 0;
font-size: 24px;
font-weight: 600;
}
.admin-header p {
margin: 0;
opacity: 0.9;
font-size: 16px;
}
.admin-form-section {
padding: 30px;
border-bottom: 1px solid #eee;
background: #f8f9fa;
}
.admin-form-section h4 {
margin: 0 0 20px 0;
color: #495057;
font-size: 18px;
}
.admin-content-section {
padding: 30px;
}
.admin-content-section h4 {
margin: 0 0 20px 0;
color: #495057;
font-size: 18px;
}
.form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
align-items: center;
flex-wrap: wrap;
}
.form-row label {
min-width: 120px;
font-weight: 500;
}
.form-row input, .form-row select {
flex: 1;
min-width: 200px;
}
.form-row small {
flex-basis: 100%;
color: #6c757d;
font-size: 12px;
margin-top: 5px;
}
/* Text readability improvements */
.text-muted {
color: #6c757d !important;
font-weight: 500;
font-size: 14px;
}
.list-item {
color: #2c3e50 !important;
font-weight: 500;
}
.list-item strong {
color: #2c3e50 !important;
font-weight: 700;
font-size: 16px;
}
.list-item small {
color: #495057 !important;
font-weight: 500;
font-size: 13px;
}
/* Admin text improvements */
.admin-card-content {
color: #2c3e50;
font-weight: 500;
}
.admin-list p {
color: #495057 !important;
font-weight: 500;
font-size: 14px;
}
.admin-list {
display: grid;
gap: 10px;
}
.admin-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.admin-table th,
.admin-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #dee2e6;
}
.admin-table th {
background: #f8f9fa;
font-weight: 600;
color: #495057;
}
.admin-table tr:hover {
background: #f8f9fa;
}
.table-container {
overflow-x: auto;
border-radius: 6px;
border: 1px solid #dee2e6;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.admin-categories {
grid-template-columns: 1fr 1fr;
}
.form-row {
flex-direction: column;
align-items: stretch;
}
.form-row label {
min-width: auto;
}
}
.add-form {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin-bottom: 5px;
background: white;
border-radius: 4px;
border: 1px solid #ddd;
}
.table-container {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
text-align: left;
padding: 12px;
border-bottom: 1px solid #ddd;
}
th {
background: #34495e;
color: white;
}
tr:hover {
background: #f5f5f5;
}
.file-upload-area {
border: 2px dashed #bdc3c7;
border-radius: 6px;
padding: 40px;
text-align: center;
background: #f8f9fa;
transition: border-color 0.3s;
}
.file-upload-area:hover {
border-color: #3498db;
}
.file-upload-area.dragover {
border-color: #3498db;
background: #e3f2fd;
}
.message {
padding: 15px;
margin: 15px 0;
border-radius: 6px;
}
.message.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.message.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.documents-list {
margin-top: 15px;
}
.document-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin-bottom: 5px;
background: #f8f9fa;
border-radius: 4px;
border: 1px solid #dee2e6;
}
.required {
color: #e74c3c;
}
@media (max-width: 768px) {
.form-row, .form-row-thirds {
grid-template-columns: 1fr;
}
.nav-tabs {
flex-direction: column;
}
.add-form {
flex-direction: column;
}
}
/* Document Modal Styles */
.documents-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 2000;
animation: fadeIn 0.3s ease;
}
.documents-modal.show {
display: flex;
align-items: center;
justify-content: center;
}
.documents-modal-content {
background: white;
border-radius: 12px;
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
animation: slideIn 0.3s ease;
}
.documents-modal-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
text-align: center;
position: relative;
}
.documents-modal-header h3 {
margin: 0;
font-size: 20px;
}
.documents-modal-close {
position: absolute;
top: 15px;
right: 20px;
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.documents-modal-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.documents-modal-body {
padding: 20px;
max-height: 400px;
overflow-y: auto;
}
.document-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 10px;
transition: all 0.3s ease;
cursor: pointer;
}
.document-item:hover {
border-color: #3498db;
background: #f8f9fa;
transform: translateX(5px);
}
.document-info {
display: flex;
align-items: center;
gap: 15px;
}
.document-icon {
font-size: 24px;
color: #3498db;
}
.document-details {
display: flex;
flex-direction: column;
}
.document-name {
font-weight: bold;
color: #2c3e50;
margin-bottom: 5px;
}
.document-meta {
font-size: 12px;
color: #7f8c8d;
}
.download-btn {
background: #27ae60;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background 0.3s ease;
}
.download-btn:hover {
background: #219a52;
}
.no-documents {
text-align: center;
padding: 40px 20px;
color: #7f8c8d;
font-style: italic;
}
.no-documents-icon {
font-size: 48px;
margin-bottom: 15px;
color: #bdc3c7;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from { transform: translateY(-50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* PDF Viewer Styles */
.pdf-viewer-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 3000;
animation: fadeIn 0.3s ease;
}
.pdf-viewer-modal.show {
display: flex;
align-items: center;
justify-content: center;
}
.pdf-viewer-content {
background: white;
border-radius: 12px;
width: 90%;
height: 90%;
max-width: 1200px;
max-height: 800px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
animation: slideIn 0.3s ease;
display: flex;
flex-direction: column;
}
.pdf-viewer-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.pdf-viewer-title {
font-size: 18px;
font-weight: 600;
margin: 0;
}
.pdf-viewer-close {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.pdf-viewer-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.pdf-viewer-body {
flex: 1;
overflow: auto;
padding: 20px;
background: #f5f5f5;
}
.pdf-canvas-container {
text-align: center;
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.pdf-controls {
background: white;
padding: 15px;
border-top: 1px solid #ddd;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.pdf-nav-btn {
background: #3498db;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background 0.3s ease;
}
.pdf-nav-btn:hover {
background: #2980b9;
}
.pdf-nav-btn:disabled {
background: #bdc3c7;
cursor: not-allowed;
}
.pdf-page-info {
font-size: 14px;
color: #2c3e50;
font-weight: 500;
}
.pdf-zoom-controls {
display: flex;
align-items: center;
gap: 10px;
}
.pdf-zoom-btn {
background: #27ae60;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
.pdf-zoom-btn:hover {
background: #219a52;
}
.view-btn {
background: #3498db;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
margin-left: 8px;
}
.view-btn:hover {
background: #2980b9;
}
/* Enhanced Tarifoptionen Styling */
.tarifoption-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
margin: 5px 0;
background: white;
border: 1px solid #dee2e6;
border-radius: 6px;
transition: all 0.2s ease;
cursor: pointer;
}
.tarifoption-item:hover {
background: #e3f2fd;
border-color: #2196f3;
transform: translateX(2px);
}
.tarifoption-item input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 0;
cursor: pointer;
accent-color: #3498db;
}
.tarifoption-label {
flex: 1;
font-weight: 500;
color: #2c3e50;
cursor: pointer;
user-select: none;
}
.tarifoption-price {
font-size: 12px;
color: #27ae60;
font-weight: 600;
background: #e8f5e8;
padding: 2px 8px;
border-radius: 4px;
}
.tarifoption-price.negative {
color: #e74c3c;
background: #fde8e8;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Provisions-Tracker</h1>
<p>Erfassung und Verwaltung von Mitarbeiter-Provisionen</p>
</header>
<div class="nav-tabs">
<button class="nav-tab active" onclick="showTab('schaltung')">Schaltung erfassen</button>
<button class="nav-tab" onclick="showTab('overview')">Übersicht</button>
<button class="nav-tab" onclick="showTab('provisionen')">Provisionen</button>
<button class="nav-tab" onclick="showTab('geloeschte')">Gelöschte Schaltungen</button>
<button class="nav-tab" onclick="showTab('admin')">Administration</button>
<button class="nav-tab admin-only" onclick="showTab('users')" style="display:none">Benutzer</button>
</div>
<!-- Schaltung erfassen Tab (2-step wizard) -->
<div id="schaltung" class="tab-content active">
<!-- Step 1: Anbieter wählen -->
<div id="wizardStep1">
<h2>Neue Schaltung — Schritt 1 von 2</h2>
<p style="color:#666; margin-bottom:20px;">Wählen Sie einen Anbieter.</p>
<div id="wizardAnbieterButtons" style="display:flex; flex-wrap:wrap; gap:10px;"></div>
</div>
<!-- Step 2: VO + Tarif + Tarifoptionen + Kundendaten -->
<div id="wizardStep2" style="display:none;">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;">
<h2 style="margin:0;">Neue Schaltung — Schritt 2 von 2 <small id="wizardAnbieterLabel" style="color:#3498db; font-weight:normal;"></small></h2>
<button type="button" onclick="wizardBackToStep1()" style="padding:6px 12px;">&larr; Anbieter ändern</button>
</div>
<form id="schaltungForm">
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:30px;">
<!-- Linke Spalte: Aktivierungsdaten -->
<div>
<h3 style="margin-top:0; margin-bottom:15px;">Aktivierungsdaten</h3>
<div class="form-group">
<label for="wizardVo">VO-Auswahl <span class="required">*</span></label>
<select id="wizardVo" required onchange="loadTarifeForWizard()">
<option value="">VO wählen...</option>
</select>
</div>
<div class="form-group">
<label for="wizardTarif">Tarif <span class="required">*</span></label>
<select id="wizardTarif" name="tarif_id" required onchange="loadTarifoptionenForWizard()">
<option value="">Erst VO wählen...</option>
</select>
</div>
<div class="form-group" id="tarifoptionenSection" style="display:none;">
<label>Tarifoptionen</label>
<div id="tarifoptionenList" style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; margin-top:8px;"></div>
<div id="noTarifoptionen" style="display:none; color:#666; font-style:italic; margin-top:8px;">Keine Tarifoptionen verfügbar</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="eingabeDatum">Erfassung <span class="required">*</span></label>
<input type="date" id="eingabeDatum" name="eingabe_datum" required>
</div>
<div class="form-group">
<label for="schaltungsDatum">Vertragsbeginn <span class="required">*</span></label>
<input type="date" id="schaltungsDatum" name="schaltungs_datum" required>
</div>
</div>
<div class="form-group">
<label>Erfasser</label>
<input type="text" id="wizardErfasser" readonly style="background:#f5f5f5;">
</div>
</div>
<!-- Rechte Spalte: Vertrags-/Kundendaten -->
<div>
<h3 style="margin-top:0; margin-bottom:15px;">Vertragsdaten</h3>
<div class="form-group">
<label for="schaltungsId">Schaltungs-ID <span class="required">*</span></label>
<input type="text" id="schaltungsId" name="schaltungs_id" required>
</div>
<div class="form-row-thirds">
<div class="form-group">
<label for="firma">Firma (optional)</label>
<input type="text" id="firma" name="firma">
</div>
<div class="form-group">
<label for="vorname">Vorname <span class="required">*</span></label>
<input type="text" id="vorname" name="vorname" required>
</div>
<div class="form-group">
<label for="nachname">Nachname <span class="required">*</span></label>
<input type="text" id="nachname" name="nachname" required>
</div>
</div>
<div class="form-group">
<label for="rufnummer">Rufnummer (optional)</label>
<input type="text" id="rufnummer" name="rufnummer">
</div>
<div class="form-group">
<label for="hardware">Hardware (optional, 15 Zeichen)</label>
<input type="text" id="hardware" name="hardware" onchange="toggleHardwarePricing()">
</div>
<div id="hardwarePricingFields" style="display:none;">
<div class="form-row">
<div class="form-group">
<label for="hardwareEk">Hardware-EK</label>
<input type="number" id="hardwareEk" name="hardware_ek" step="0.01" min="0" placeholder="0.00">
</div>
<div class="form-group">
<label for="kundenverkaufspreis">Kundenverkaufspreis</label>
<input type="number" id="kundenverkaufspreis" name="kundenverkaufspreis_netto" step="0.01" min="0" placeholder="0.00">
</div>
</div>
</div>
<div class="form-group">
<label>Dokumente hochladen</label>
<div class="file-upload-area" id="fileUploadArea">
<p>Dateien hier hineinziehen oder klicken zum Auswählen</p>
<input type="file" id="documentUpload" multiple accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" style="display:none;">
</div>
<div id="uploadedFiles" class="documents-list"></div>
</div>
</div>
</div>
<input type="hidden" id="anbieter" name="anbieter_id">
<div style="margin-top:25px;">
<button type="submit" class="btn-success">Schaltung speichern</button>
</div>
</form>
</div>
</div>
<!-- Übersicht Tab -->
<div id="overview" class="tab-content">
<h2>Schaltungs-Übersicht</h2>
<!-- Filter für Übersicht -->
<div class="filter-section" style="margin-bottom: 20px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
<h3 style="margin-bottom: 15px; color: #2c3e50;">Filter</h3>
<div style="display: grid; grid-template-columns: repeat(6, 1fr) auto; gap: 15px; align-items: end;">
<div class="form-group" style="margin-bottom: 0;">
<label for="filterAnbieterOverview">Anbieter</label>
<select id="filterAnbieterOverview">
<option value="">Alle Anbieter</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterTarifOverview">Tarif</label>
<select id="filterTarifOverview">
<option value="">Alle Tarife</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterSchaltungsIdOverview">Schaltungs-ID</label>
<input type="text" id="filterSchaltungsIdOverview" placeholder="ID1, ID2, ID3... (kommagetrennt)">
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterRufnummerOverview">Rufnummer</label>
<input type="text" id="filterRufnummerOverview" placeholder="Rufnummer suchen...">
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterDatumVonOverview">Datum von</label>
<input type="date" id="filterDatumVonOverview">
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterDatumBisOverview">Datum bis</label>
<input type="date" id="filterDatumBisOverview">
</div>
<div>
<button type="button" onclick="clearFiltersOverview()" class="btn-secondary" style="padding: 12px 20px;">Zurücksetzen</button>
</div>
</div>
</div>
<div class="table-container">
<table id="schaltungenTable">
<thead>
<tr>
<th>Schaltungs-ID</th>
<th>Eingabe-Datum</th>
<th>Schaltungs-Datum</th>
<th>Name</th>
<th>Firma</th>
<th>Rufnummer</th>
<th>Anbieter</th>
<th>Tarif</th>
<th>Hardware</th>
<th>Dokumente</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- Provisionen Tab -->
<div id="provisionen" class="tab-content">
<h2>Provisions-Übersicht</h2>
<!-- Filter für Provisionen -->
<div class="filter-section" style="margin-bottom: 20px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
<h3 style="margin-bottom: 15px; color: #2c3e50;">Filter</h3>
<div style="display: grid; grid-template-columns: repeat(6, 1fr) auto; gap: 15px; align-items: end;">
<div class="form-group" style="margin-bottom: 0;">
<label for="filterAnbieterProvisionen">Anbieter</label>
<select id="filterAnbieterProvisionen">
<option value="">Alle Anbieter</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterTarifProvisionen">Tarif</label>
<select id="filterTarifProvisionen">
<option value="">Alle Tarife</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterSchaltungsIdProvisionen">Schaltungs-ID</label>
<input type="text" id="filterSchaltungsIdProvisionen" placeholder="ID1, ID2, ID3... (kommagetrennt)">
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterRufnummerProvisionen">Rufnummer</label>
<input type="text" id="filterRufnummerProvisionen" placeholder="Rufnummer suchen...">
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterDatumVonProvisionen">Datum von</label>
<input type="date" id="filterDatumVonProvisionen">
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="filterDatumBisProvisionen">Datum bis</label>
<input type="date" id="filterDatumBisProvisionen">
</div>
<div>
<button type="button" onclick="clearFiltersProvisionen()" class="btn-secondary" style="padding: 12px 20px;">Zurücksetzen</button>
</div>
</div>
</div>
<div class="admin-section">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<div>
<h3>Shop-Provision: <span id="totalShopProvision">0,00 €</span></h3>
<h3>Mitarbeiter-Provision: <span id="totalMitarbeiterProvision">0,00 €</span></h3>
</div>
<div>
<button onclick="exportProvisionenToPdf()" class="btn-success" style="padding: 12px 20px; font-size: 14px;">
📄 PDF Export
</button>
</div>
</div>
<div class="table-container">
<table id="provisionenTable">
<thead>
<tr>
<th rowspan="2">Schaltungs-ID</th>
<th rowspan="2">Datum</th>
<th rowspan="2">Kunde</th>
<th rowspan="2">Anbieter</th>
<th rowspan="2">Tarif</th>
<th style="text-align: center; border-bottom: 1px solid #ccc;">Shop-Provision</th>
<th style="text-align: center; border-bottom: 1px solid #ccc;">Mitarbeiter-Provision</th>
</tr>
<tr>
<th>Betrag</th>
<th>Betrag</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<!-- Gelöschte Schaltungen Tab -->
<div id="geloeschte" class="tab-content">
<h2>Gelöschte Schaltungen</h2>
<div class="table-container">
<table id="geloeschteSchaltungenTable">
<thead>
<tr>
<th>Schaltungs-ID</th>
<th>Eingabe-Datum</th>
<th>Schaltungs-Datum</th>
<th>Name</th>
<th>Firma</th>
<th>Rufnummer</th>
<th>Anbieter</th>
<th>Tarif</th>
<th>Hardware</th>
<th>Löschgrund</th>
<th>Gelöscht am</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- Administration Tab -->
<div id="admin" class="tab-content">
<div class="admin-layout">
<!-- Sidebar -->
<aside class="admin-sidebar">
<h2>Administration</h2>
<div class="admin-categories">
<button class="admin-cat-btn active" onclick="showAdminCategory('anbieter')">
<span class="admin-icon">🏢</span>
<span>Anbieter</span>
</button>
<button class="admin-cat-btn" onclick="showAdminCategory('vos')">
<span class="admin-icon">🔢</span>
<span>VOs (Vertriebspartner)</span>
</button>
<button class="admin-cat-btn" onclick="showAdminCategory('tarife')">
<span class="admin-icon">📋</span>
<span>Tarife</span>
</button>
<button class="admin-cat-btn" onclick="showAdminCategory('tarifoptionen')">
<span class="admin-icon">⚙️</span>
<span>Tarifoptionen</span>
</button>
<button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-prozentsaetze')">
<span class="admin-icon">📊</span>
<span>Mitarbeiter-Prozentsätze</span>
</button>
<button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-provisionen')">
<span class="admin-icon">👤</span>
<span>Mitarbeiter-Provisionen</span>
</button>
<button class="admin-cat-btn" onclick="showAdminCategory('provisionsregeln')">
<span class="admin-icon">📝</span>
<span>Provisionsregeln</span>
</button>
<button class="admin-cat-btn" onclick="showAdminCategory('global-provisionsregeln')">
<span class="admin-icon">🌐</span>
<span>Globale Provisionsregeln</span>
</button>
</div>
</aside>
<!-- Content -->
<main class="admin-main">
<!-- Anbieter Management -->
<div id="admin-anbieter" class="admin-category active">
<div class="admin-page">
<div class="admin-header">
<h3>Anbieter verwalten</h3>
<p>Hier können Sie Telekommunikationsanbieter hinzufügen und verwalten.</p>
</div>
<div class="admin-form-section">
<h4>Neuen Anbieter hinzufügen</h4>
<div class="add-form">
<input type="text" id="newAnbieter" placeholder="Name des Anbieters (z.B. Telekom, Vodafone)">
<button onclick="addAnbieter()" class="btn-success">Hinzufügen</button>
</div>
</div>
<div class="admin-content-section">
<h4>Bestehende Anbieter</h4>
<div class="table-container">
<table class="admin-table">
<thead>
<tr>
<th>ID</th>
<th>Anbieter-Name</th>
<th>Erstellt am</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody id="anbieterList">
<!-- Content loaded dynamically -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- VOs Management -->
<div id="admin-vos" class="admin-category">
<div class="admin-page">
<div class="admin-header">
<h3>VOs (Vertriebspartner-Nummern) verwalten</h3>
<p>Pro Anbieter können beliebig viele VOs angelegt werden. Jeder Tarif wird genau einer VO zugeordnet.</p>
</div>
<div class="admin-form-section">
<h4>Neue VO hinzufügen</h4>
<div class="add-form">
<select id="voAnbieter" style="margin-right:8px;">
<option value="">Anbieter wählen...</option>
</select>
<input type="text" id="voNummer" placeholder="VO-Nummer (z.B. 27518900)" style="margin-right:8px;">
<input type="text" id="voBezeichnung" placeholder="Bezeichnung (z.B. Fachhandel)" style="margin-right:8px;">
<button onclick="addVo()" class="btn-success">Hinzufügen</button>
</div>
</div>
<div class="admin-content-section">
<h4>Bestehende VOs</h4>
<p style="color:#666; font-size:13px;">Die mit ★ markierte VO wird bei der Schaltungserfassung automatisch vorausgewählt.</p>
<div class="table-container">
<table class="admin-table">
<thead>
<tr>
<th>Anbieter</th>
<th>Nummer</th>
<th>Bezeichnung</th>
<th>Aktiv</th>
<th>Standard</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody id="vosList"></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Tarife Management -->
<div id="admin-tarife" class="admin-category">
<div class="admin-page">
<div class="admin-header">
<h3>Tarife verwalten</h3>
<p>Verwalten Sie Tarife und deren Provisionen für jeden Anbieter.</p>
</div>
<div class="admin-form-section">
<h4>Neuen Tarif hinzufügen</h4>
<div class="tarif-form">
<div class="form-row">
<select id="tarifAnbieter" onchange="loadVosForTarifForm()">
<option value="">Anbieter wählen...</option>
</select>
<select id="tarifVo">
<option value="">VO wählen...</option>
</select>
<input type="text" id="newTarif" placeholder="Name des Tarifs">
</div>
<div class="form-row">
<label>Provision (€):</label>
<input type="number" id="tarifProvisionBetrag" placeholder="Betrag in Euro" step="0.01" min="0">
</div>
<div class="form-row">
<label>Beschreibung:</label>
<input type="text" id="tarifBeschreibung" placeholder="Beschreibung (optional)">
</div>
<button onclick="addTarif()" class="btn-success">Tarif hinzufügen</button>
</div>
</div>
<div class="admin-content-section">
<h4>Bestehende Tarife</h4>
<div class="table-container">
<table class="admin-table">
<thead>
<tr>
<th>ID</th>
<th>Anbieter</th>
<th>VO</th>
<th>Tarif-Name</th>
<th>Provision (€)</th>
<th>Beschreibung</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody id="tarifeList">
<!-- Content loaded dynamically -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Tarifoptionen Management -->
<div id="admin-tarifoptionen" class="admin-category">
<div class="admin-page">
<div class="admin-header">
<h3>Tarifoptionen verwalten</h3>
<p>Verwalten Sie Zusatzoptionen und Aktionscodes für Tarife.</p>
</div>
<div class="admin-form-section">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<div>
<h4>Tarifoptionen verwalten</h4>
<p style="margin: 0; color: #6c757d; font-size: 14px;">Erstellen und verwalten Sie Zusatzoptionen für Tarife</p>
</div>
<button onclick="openAddTarifoptionModal()" style="background: #28a745; color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px;">
<span style="font-size: 16px;">+</span>
Neue Tarifoption
</button>
</div>
</div>
<div class="admin-content-section">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<h4>Bestehende Tarifoptionen</h4>
<div style="display: flex; gap: 15px; align-items: center;">
<input type="text" id="tarifoptionSearch" placeholder="Nach Tarif oder Option suchen..." style="padding: 8px 12px; border: 2px solid #e1e5e9; border-radius: 6px; width: 250px; font-size: 14px;" oninput="filterTarifoptionenAdmin()">
<button onclick="clearTarifoptionSearch()" style="background: #6c757d; color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;">Löschen</button>
<div id="tarifoptionSearchCounter" style="font-size: 13px; color: #6c757d; min-width: 120px;"></div>
</div>
</div>
<div class="table-container">
<table class="admin-table">
<thead>
<tr>
<th>ID</th>
<th>Anbieter</th>
<th>Tarif</th>
<th>Option</th>
<th>Code</th>
<th>Provision (€)</th>
<th>Beschreibung</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody id="tarifoptionenAdminList">
<!-- Content loaded dynamically -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Mitarbeiter Prozentsätze Management -->
<div id="admin-mitarbeiter-prozentsaetze" class="admin-category">
<div class="admin-page">
<div class="admin-header">
<h3>Mitarbeiter-Provisionen</h3>
<p>Verwalten Sie die Prozentsätze für Mitarbeiter-Provisionen pro Anbieter.</p>
</div>
<div class="admin-form-section">
<h4>Mitarbeiter-Prozentsatz festlegen</h4>
<div class="mitarbeiter-form">
<div class="form-row">
<select id="mitarbeiterAnbieter">
<option value="">Anbieter wählen...</option>
</select>
<input type="number" id="mitarbeiterProzentsatz" placeholder="Prozentsatz" step="0.01" min="0" max="100">
<span>%</span>
</div>
<div class="form-row">
<input type="date" id="mitarbeiterGueltigAb" placeholder="Gültig ab">
<input type="text" id="mitarbeiterBeschreibung" placeholder="Beschreibung (optional)">
</div>
<button onclick="addMitarbeiterProzentsatz()" class="btn-success">Prozentsatz festlegen</button>
</div>
</div>
<div class="admin-content-section">
<h4>Aktuelle Mitarbeiter-Prozentsätze</h4>
<div id="mitarbeiterProzentsaetzeList" class="admin-list"></div>
</div>
</div>
</div>
<!-- Mitarbeiter Provisionen Management -->
<div id="admin-mitarbeiter-provisionen" class="admin-category">
<div class="admin-page">
<div class="admin-header">
<h3>Mitarbeiter-Provisionen pro Tarif</h3>
<p>Legen Sie für jeden Tarif individuell die Mitarbeiter-Provision fest.</p>
</div>
<div class="admin-content-section">
<h4>Tarife und Mitarbeiter-Provisionen</h4>
<div id="tarifProvisionsList" class="admin-list"></div>
</div>
</div>
</div>
<!-- Provisionsregeln Management -->
<div id="admin-provisionsregeln" class="admin-category">
<div class="admin-page">
<div class="admin-header">
<h3>Provisionsregeln verwalten</h3>
<p>Verwalten Sie spezifische Provisionsregeln für Tarife.</p>
</div>
<div class="admin-form-section">
<h4>Neue Provisionsregel hinzufügen</h4>
<div class="add-form">
<select id="provisionTarif">
<option value="">Tarif wählen...</option>
</select>
<input type="number" id="provisionBetrag" placeholder="Provision in Euro" step="0.01" min="0">
<button onclick="addProvisionRule()" class="btn btn-primary">Regel hinzufügen</button>
</div>
</div>
<div class="admin-content-section">
<h4>Bestehende Provisionsregeln</h4>
<div id="provisionsregelnList" class="admin-list"></div>
</div>
</div>
</div>
<!-- Globale Provisionsregeln Management -->
<div id="admin-global-provisionsregeln" class="admin-category">
<div class="admin-page">
<div class="admin-header">
<h3>Globale Provisionsregeln verwalten</h3>
<p>Verwalten Sie globale Provisionsregeln für Anbieter.</p>
</div>
<div class="admin-form-section">
<h4>Neue globale Provisionsregel hinzufügen</h4>
<div class="add-form">
<select id="globalProvisionAnbieter">
<option value="">Anbieter wählen...</option>
</select>
<input type="number" id="globalProvisionBetrag" placeholder="Provision in Euro" step="0.01" min="0">
<button onclick="addGlobalProvisionRule()" class="btn btn-primary">Globale Regel hinzufügen</button>
</div>
</div>
<div class="admin-content-section">
<h4>Bestehende globale Provisionsregeln</h4>
<div id="globalProvisionsregelnList" class="admin-list"></div>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Benutzer-Verwaltung Tab (admin only) -->
<div id="users" class="tab-content">
<h2>Benutzer-Verwaltung</h2>
<div style="margin-bottom: 20px;">
<button type="button" class="btn-success" onclick="openUserModal()">+ Neuer Benutzer</button>
</div>
<table class="data-table" style="width:100%; border-collapse: collapse;">
<thead>
<tr>
<th>Username</th>
<th>Anzeigename</th>
<th>Admin</th>
<th>Erstellt</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody id="usersTableBody"></tbody>
</table>
</div>
<!-- Modal: Benutzer anlegen / bearbeiten -->
<div id="userModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000;">
<div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:white; border-radius:8px; width:90%; max-width:500px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,0.2);">
<h3 id="userModalTitle" style="margin-top:0;">Neuer Benutzer</h3>
<input type="hidden" id="userModalUuid">
<div class="form-group" style="margin-bottom:14px;">
<label for="userModalUsername">Username</label>
<input type="text" id="userModalUsername" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px;">
</div>
<div class="form-group" style="margin-bottom:14px;">
<label for="userModalDisplay">Anzeigename</label>
<input type="text" id="userModalDisplay" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px;">
</div>
<div class="form-group" style="margin-bottom:14px;">
<label for="userModalPassword">Passwort <span id="userModalPasswordHint" style="color:#666; font-size:12px;">(min. 8 Zeichen)</span></label>
<input type="password" id="userModalPassword" autocomplete="new-password" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px;">
<small id="userModalPasswordEditHint" style="color:#666; display:none;">Leer lassen, um Passwort unverändert zu lassen</small>
</div>
<div class="form-group" style="margin-bottom:18px;">
<label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
<input type="checkbox" id="userModalIsAdmin"> Administrator
</label>
</div>
<div style="text-align:right;">
<button type="button" onclick="closeUserModal()" style="margin-right:8px;">Abbrechen</button>
<button type="button" class="btn-success" onclick="saveUserFromModal()">Speichern</button>
</div>
</div>
</div>
<!-- Modal: VO bearbeiten -->
<div id="voEditModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000;">
<div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:white; border-radius:8px; width:90%; max-width:480px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,0.2);">
<h3 style="margin-top:0;">VO bearbeiten</h3>
<input type="hidden" id="voEditId">
<div class="form-group" style="margin-bottom:12px;">
<label>Anbieter</label>
<input type="text" id="voEditAnbieter" readonly style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f5f5f5;">
</div>
<div class="form-group" style="margin-bottom:12px;">
<label for="voEditNummer">VO-Nummer</label>
<input type="text" id="voEditNummer" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px;">
</div>
<div class="form-group" style="margin-bottom:12px;">
<label for="voEditBezeichnung">Bezeichnung</label>
<input type="text" id="voEditBezeichnung" placeholder="z.B. Fachhandel (leer = keine)" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px;">
</div>
<div class="form-group" style="margin-bottom:18px;">
<label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
<input type="checkbox" id="voEditAktiv"> Aktiv
</label>
</div>
<div style="text-align:right;">
<button type="button" onclick="closeVoEditModal()" style="margin-right:8px;">Abbrechen</button>
<button type="button" class="btn-success" onclick="saveVoFromModal()">Speichern</button>
</div>
</div>
</div>
<div id="messages"></div>
</div>
<!-- Edit Tarifoption Modal -->
<div id="editTarifoptionModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000;">
<div style="position: absolute; top: 5%; left: 50%; transform: translateX(-50%); background: white; border-radius: 12px; width: 90%; max-width: 1200px; height: 90%; box-shadow: 0 20px 40px rgba(0,0,0,0.3); display: flex; flex-direction: column;">
<!-- Header -->
<div style="padding: 25px 35px 15px; border-bottom: 1px solid #eee; flex-shrink: 0;">
<div style="display: flex; justify-content: between; align-items: center;">
<h2 style="margin: 0; color: #333; font-size: 24px;">Tarifoption bearbeiten</h2>
<span style="position: absolute; top: 15px; right: 25px; font-size: 28px; cursor: pointer; color: #999; hover: #333;" onclick="closeModal('editTarifoptionModal')">&times;</span>
</div>
</div>
<!-- Content -->
<div style="flex: 1; overflow-y: auto; padding: 25px 35px;">
<form id="editTarifoptionForm">
<input type="hidden" id="editTarifoptionId">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; height: 100%;">
<!-- Left Column -->
<div>
<div class="form-group" style="margin-bottom: 20px;">
<label for="editTarifoptionAnbieter" style="display: block; font-weight: 600; margin-bottom: 8px; color: #333;">Anbieter</label>
<select id="editTarifoptionAnbieter" onchange="loadTarifeForEditOptions()" style="width: 100%; padding: 12px; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 14px; background: white;">
<option value="">Anbieter wählen...</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 20px;">
<label style="display: flex; align-items: center; gap: 12px; padding: 15px; background: #f8f9fa; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: all 0.2s;">
<input type="checkbox" id="editTarifoptionAnbieterWeit" onchange="toggleEditTarifSelection()" style="width: 18px; height: 18px; cursor: pointer;">
<span style="font-weight: 500; color: #495057;">Für alle Tarife des Anbieters (Anbieter-weit)</span>
</label>
</div>
<div class="form-group" style="margin-bottom: 20px;">
<label for="editTarifoptionName" style="display: block; font-weight: 600; margin-bottom: 8px; color: #333;">Name der Option</label>
<input type="text" id="editTarifoptionName" required style="width: 100%; padding: 12px; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 14px;">
</div>
<div class="form-group" style="margin-bottom: 20px;">
<label for="editTarifoptionCode" style="display: block; font-weight: 600; margin-bottom: 8px; color: #333;">Code (optional)</label>
<input type="text" id="editTarifoptionCode" style="width: 100%; padding: 12px; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 14px;">
</div>
<div class="form-group" style="margin-bottom: 20px;">
<label for="editTarifoptionProvisionBetrag" style="display: block; font-weight: 600; margin-bottom: 8px; color: #333;">Zusätzliche Provision (€)</label>
<input type="number" id="editTarifoptionProvisionBetrag" step="0.01" required style="width: 100%; padding: 12px; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 14px;">
<small style="color: #6c757d; font-size: 12px; margin-top: 5px; display: block;">Wird zur Tarif-Provision hinzugefügt (negativ = Abzug)</small>
</div>
<div class="form-group" style="margin-bottom: 20px;">
<label for="editTarifoptionBeschreibung" style="display: block; font-weight: 600; margin-bottom: 8px; color: #333;">Beschreibung (optional)</label>
<textarea id="editTarifoptionBeschreibung" rows="3" style="width: 100%; padding: 12px; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 14px; resize: vertical;"></textarea>
</div>
</div>
<!-- Right Column - Tarif Selection -->
<div>
<div id="editTarifSelectionContainer">
<label style="display: block; font-weight: 600; margin-bottom: 15px; color: #333; font-size: 16px;">Tarife auswählen:</label>
<div style="margin-bottom: 15px;">
<button type="button" onclick="selectAllEditTarifs()" style="background: #28a745; color: white; border: none; padding: 8px 16px; border-radius: 6px; margin-right: 8px; cursor: pointer; font-size: 13px; font-weight: 500;">Alle auswählen</button>
<button type="button" onclick="deselectAllEditTarifs()" style="background: #dc3545; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500;">Alle abwählen</button>
<input type="text" id="editTarifSearch" placeholder="Tarife filtern..." style="float: right; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; width: 180px;" oninput="filterEditTarifs()">
</div>
<div id="editTarifCheckboxContainer" style="height: 400px; overflow-y: auto; border: 2px solid #e1e5e9; border-radius: 8px; background: #fefefe;">
<div style="padding: 40px; text-align: center; color: #6c757d; font-style: italic;">Erst Anbieter wählen...</div>
</div>
<div id="editTarifCounter" style="margin-top: 10px; font-size: 13px; color: #6c757d; text-align: right;"></div>
</div>
</div>
</div>
</form>
</div>
<!-- Footer -->
<div style="padding: 20px 35px; border-top: 1px solid #eee; background: #f8f9fa; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; flex-shrink: 0;">
<div style="display: flex; justify-content: flex-end; gap: 15px;">
<button type="button" onclick="closeModal('editTarifoptionModal')" style="background: #6c757d; color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500;">Abbrechen</button>
<button type="submit" form="editTarifoptionForm" style="background: #007bff; color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500;">Speichern</button>
</div>
</div>
</div>
</div>
<!-- Edit Tariff Modal -->
<div id="editTariffModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; width: 600px; max-width: 90%; max-height: 90vh; overflow-y: auto;">
<h3>Tarif bearbeiten</h3>
<form id="editTariffForm">
<input type="hidden" id="editTariffId">
<div class="form-group">
<label>Tarif-Name:</label>
<input type="text" id="editTariffName" required>
</div>
<div class="form-group">
<label>VO:</label>
<select id="editTariffVo">
<option value="">VO wählen...</option>
</select>
</div>
<div class="form-group">
<label>Shop-Provision (€):</label>
<input type="number" id="editTariffProvisionBetrag" step="0.01" min="0" placeholder="Betrag in Euro">
</div>
<div class="form-group">
<label>Tarifoptionen (Anbieter-weit):</label>
<div id="editTariffOptionenContainer" style="border:1px solid #ddd; border-radius:6px; padding:10px; max-height:200px; overflow-y:auto; background:#fafafa;">
<small style="color:#666;">Keine Tarifoptionen für diesen Anbieter vorhanden</small>
</div>
</div>
<div style="display: flex; gap: 10px; margin-top: 20px;">
<button type="submit" class="btn-success">Speichern</button>
<button type="button" onclick="closeModal('editTariffModal')">Abbrechen</button>
</div>
</form>
</div>
</div>
<!-- Edit Schaltung Modal -->
<div id="editSchaltungModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 12px; width: 800px; max-width: 95%; max-height: 90%; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
<h3>Schaltung bearbeiten</h3>
<form id="editSchaltungForm">
<input type="hidden" id="editSchaltungId">
<div class="form-row">
<div class="form-group">
<label>Schaltungs-ID:</label>
<input type="text" id="editSchaltungsId" required>
</div>
<div class="form-group">
<label>Eingabe-Datum:</label>
<input type="date" id="editEingabeDatum" required>
</div>
</div>
<div class="form-group">
<label>Schaltungs-/Aktivierungsdatum:</label>
<input type="date" id="editSchaltungsDatum" required>
</div>
<div class="form-row">
<div class="form-group">
<label>Vorname:</label>
<input type="text" id="editVorname" required>
</div>
<div class="form-group">
<label>Nachname:</label>
<input type="text" id="editNachname" required>
</div>
</div>
<div class="form-group">
<label>Firma (optional):</label>
<input type="text" id="editFirma">
</div>
<div class="form-group">
<label>Rufnummer/Kundennummer:</label>
<input type="text" id="editRufnummer" required>
</div>
<div class="form-row">
<div class="form-group">
<label>Anbieter:</label>
<select id="editAnbieter" required onchange="loadTarifeForEdit()">
<option value="">Bitte wählen...</option>
</select>
</div>
<div class="form-group">
<label>Tarif:</label>
<select id="editTarif" required>
<option value="">Erst Anbieter wählen...</option>
</select>
</div>
</div>
<div class="form-group">
<label>Hardware:</label>
<input type="text" id="editHardware" onchange="toggleEditHardwarePricing()">
</div>
<!-- Hardware Pricing Fields -->
<div id="editHardwarePricingFields" style="display: none;">
<div class="form-row">
<div class="form-group">
<label>Hardware-EK (Einkaufspreis) €:</label>
<input type="number" id="editHardwareEk" step="0.01" placeholder="0.00">
</div>
<div class="form-group">
<label>Kundenverkaufspreis (netto) €:</label>
<input type="number" id="editKundenverkaufspreis" step="0.01" placeholder="0.00">
</div>
</div>
</div>
<!-- Tarifoptionen -->
<div class="form-group">
<label style="font-weight: 600; color: #2c3e50; margin-bottom: 10px; display: block;">Tarifoptionen/Aktionscodes:</label>
<div id="editTarifoptionenContainer" style="background: #f8f9fa; border: 2px solid #e9ecef; border-radius: 8px; padding: 15px; max-height: 250px; overflow-y: auto; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);">
<div style="color: #6c757d; font-style: italic; text-align: center; padding: 20px;">Erst Tarif wählen...</div>
</div>
<small style="color: #6c757d; font-size: 12px; margin-top: 5px; display: block;">Wählen Sie die gewünschten Optionen aus. Mehrfachauswahl möglich.</small>
</div>
<div style="display: flex; gap: 10px; margin-top: 20px;">
<button type="submit" class="btn-success">Speichern</button>
<button type="button" onclick="closeModal('editSchaltungModal')">Abbrechen</button>
</div>
</form>
</div>
</div>
<!-- Delete Schaltung Modal -->
<div id="deleteSchaltungModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; width: 500px; max-width: 90%;">
<h3>Schaltung löschen</h3>
<p>Sind Sie sicher, dass Sie diese Schaltung löschen möchten?</p>
<p><strong id="deleteSchaltungInfo"></strong></p>
<div class="form-group" style="margin-top: 20px;">
<label>Grund für die Löschung <span class="required">*</span></label>
<textarea id="deleteReason" rows="3" placeholder="Bitte geben Sie den Grund für die Löschung ein..." required style="resize: vertical;"></textarea>
</div>
<div style="display: flex; gap: 10px; margin-top: 20px;">
<button onclick="confirmDeleteSchaltung()" class="btn-danger">Löschen</button>
<button onclick="closeModal('deleteSchaltungModal')">Abbrechen</button>
</div>
<input type="hidden" id="deleteSchaltungId">
</div>
</div>
<!-- Documents Modal -->
<div id="documentsModal" class="documents-modal">
<div class="documents-modal-content">
<div class="documents-modal-header">
<h3>📄 Dokumente</h3>
<button class="documents-modal-close" onclick="closeDocumentsModal()">&times;</button>
</div>
<div class="documents-modal-body" id="documentsModalBody">
<!-- Documents will be loaded here -->
</div>
<div class="documents-modal-footer" style="padding: 15px 20px; border-top: 1px solid #e0e0e0; background: #f8f9fa;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<input type="file" id="additionalDocumentUpload" multiple accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" style="display: none;">
<button class="btn btn-primary" onclick="document.getElementById('additionalDocumentUpload').click()" style="background: #28a745; border-color: #28a745;">
📎 Dokumente hinzufügen
</button>
</div>
<button class="btn btn-secondary" onclick="closeDocumentsModal()">Schließen</button>
</div>
</div>
</div>
</div>
<!-- PDF Viewer Modal -->
<div id="pdfViewerModal" class="pdf-viewer-modal">
<div class="pdf-viewer-content">
<div class="pdf-viewer-header">
<h3 class="pdf-viewer-title" id="pdfViewerTitle">📋 PDF Viewer</h3>
<button class="pdf-viewer-close" onclick="closePdfViewer()">&times;</button>
</div>
<div class="pdf-viewer-body">
<div class="pdf-canvas-container">
<canvas id="pdfCanvas"></canvas>
</div>
</div>
<div class="pdf-controls">
<button class="pdf-nav-btn" id="prevPageBtn" onclick="prevPage()">◀ Vorherige</button>
<div class="pdf-page-info">
Seite <span id="currentPage">1</span> von <span id="totalPages">1</span>
</div>
<button class="pdf-nav-btn" id="nextPageBtn" onclick="nextPage()">Nächste ▶</button>
<div class="pdf-zoom-controls">
<button class="pdf-zoom-btn" onclick="zoomOut()">-</button>
<span id="zoomLevel">100%</span>
<button class="pdf-zoom-btn" onclick="zoomIn()">+</button>
</div>
</div>
</div>
</div>
<!-- Add Tarifoption Modal -->
<div id="addTarifoptionModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000;">
<div style="position: absolute; top: 5%; left: 50%; transform: translateX(-50%); background: white; border-radius: 12px; width: 90%; max-width: 1200px; height: 90%; box-shadow: 0 20px 40px rgba(0,0,0,0.3); display: flex; flex-direction: column;">
<!-- Header -->
<div style="padding: 25px 35px 15px; border-bottom: 1px solid #eee; flex-shrink: 0;">
<div style="display: flex; justify-content: between; align-items: center;">
<h2 style="margin: 0; color: #333; font-size: 24px;">Neue Tarifoption hinzufügen</h2>
<span style="position: absolute; top: 15px; right: 25px; font-size: 28px; cursor: pointer; color: #999; hover: #333;" onclick="closeModal('addTarifoptionModal')">&times;</span>
</div>
</div>
<!-- Content -->
<div style="flex: 1; overflow-y: auto; padding: 25px 35px;">
<form id="addTarifoptionForm">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; height: 100%;">
<!-- Left Column -->
<div>
<div class="form-group" style="margin-bottom: 20px;">
<label for="addTarifoptionAnbieter" style="display: block; font-weight: 600; margin-bottom: 8px; color: #333;">Anbieter</label>
<select id="addTarifoptionAnbieter" onchange="loadTarifeForAddOptions()" style="width: 100%; padding: 12px; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 14px; background: white;">
<option value="">Anbieter wählen...</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 20px;">
<label style="display: flex; align-items: center; gap: 12px; padding: 15px; background: #f8f9fa; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: all 0.2s;">
<input type="checkbox" id="addTarifoptionAnbieterWeit" onchange="toggleAddTarifSelection()" checked style="width: 18px; height: 18px; cursor: pointer;">
<span style="font-weight: 500; color: #495057;">Für alle Tarife des Anbieters (Anbieter-weit)</span>
</label>
</div>
<div class="form-group" style="margin-bottom: 20px;">
<label for="addTarifoptionName" style="display: block; font-weight: 600; margin-bottom: 8px; color: #333;">Name der Option</label>
<input type="text" id="addTarifoptionName" placeholder="z.B. Anschlusspreisrabatt" required style="width: 100%; padding: 12px; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 14px;">
</div>
<div class="form-group" style="margin-bottom: 20px;">
<label for="addTarifoptionCode" style="display: block; font-weight: 600; margin-bottom: 8px; color: #333;">Code (optional)</label>
<input type="text" id="addTarifoptionCode" placeholder="z.B. RABATT2024" style="width: 100%; padding: 12px; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 14px;">
</div>
<div class="form-group" style="margin-bottom: 20px;">
<label for="addTarifoptionProvisionBetrag" style="display: block; font-weight: 600; margin-bottom: 8px; color: #333;">Zusätzliche Provision (€)</label>
<input type="number" id="addTarifoptionProvisionBetrag" step="0.01" placeholder="Kann auch negativ sein" required style="width: 100%; padding: 12px; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 14px;">
<small style="color: #6c757d; font-size: 12px; margin-top: 5px; display: block;">Wird zur Tarif-Provision hinzugefügt (negativ = Abzug)</small>
</div>
<div class="form-group" style="margin-bottom: 20px;">
<label for="addTarifoptionBeschreibung" style="display: block; font-weight: 600; margin-bottom: 8px; color: #333;">Beschreibung (optional)</label>
<textarea id="addTarifoptionBeschreibung" rows="3" placeholder="Beschreibung der Tarifoption..." style="width: 100%; padding: 12px; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 14px; resize: vertical;"></textarea>
</div>
</div>
<!-- Right Column - Tarif Selection -->
<div>
<div id="addTarifSelectionContainer" style="display: none;">
<label style="display: block; font-weight: 600; margin-bottom: 15px; color: #333; font-size: 16px;">Tarife auswählen:</label>
<div style="margin-bottom: 15px;">
<button type="button" onclick="selectAllAddTarifs()" style="background: #28a745; color: white; border: none; padding: 8px 16px; border-radius: 6px; margin-right: 8px; cursor: pointer; font-size: 13px; font-weight: 500;">Alle auswählen</button>
<button type="button" onclick="deselectAllAddTarifs()" style="background: #dc3545; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500;">Alle abwählen</button>
<input type="text" id="addTarifSearch" placeholder="Tarife filtern..." style="float: right; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; width: 180px;" oninput="filterAddTarifs()">
</div>
<div id="addTarifCheckboxContainer" style="height: 400px; overflow-y: auto; border: 2px solid #e1e5e9; border-radius: 8px; background: #fefefe;">
<div style="padding: 40px; text-align: center; color: #6c757d; font-style: italic;">Erst Anbieter wählen...</div>
</div>
<div id="addTarifCounter" style="margin-top: 10px; font-size: 13px; color: #6c757d; text-align: right;"></div>
</div>
<div id="addAnbieterWeitInfo" style="padding: 30px; text-align: center; color: #6c757d; border: 2px dashed #dee2e6; border-radius: 8px; background: #f8f9fa;">
<div style="font-size: 48px; margin-bottom: 15px; opacity: 0.5;">🏢</div>
<div style="font-weight: 500; margin-bottom: 8px;">Anbieter-weite Tarifoption</div>
<div style="font-size: 13px;">Diese Option wird automatisch allen Tarifen des gewählten Anbieters zugeordnet.</div>
</div>
</div>
</div>
</form>
</div>
<!-- Footer -->
<div style="padding: 20px 35px; border-top: 1px solid #eee; background: #f8f9fa; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; flex-shrink: 0;">
<div style="display: flex; justify-content: flex-end; gap: 15px;">
<button type="button" onclick="closeModal('addTarifoptionModal')" style="background: #6c757d; color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500;">Abbrechen</button>
<button type="submit" form="addTarifoptionForm" style="background: #28a745; color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500;">Tarifoption hinzufügen</button>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="script.js"></script>
</body>
</html>