{% extends "base.html" %}

{% block title %}Meine Rechnungen{% endblock %}

{% block content %}
<div class="invoices-container">
    <!-- Header Section -->
    <section class="invoice-header">
        <div class="header-text">
            <h1>Rechnungseinsicht</h1>
            <p>Alle Rechnungen und Dokumente auf einen Blick. Der Status zeigt dir den aktuellen Bearbeitungsstand.</p>
        </div>
    </section>

    <!-- Table Section -->
    <section class="table-card">
        <div class="table-responsive">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Rechnungs-Nr.</th>
                        <th>Zeitraum</th>
                        <th>Betrag</th>
                        <th>Fälligkeit</th>
                        <th>Status</th>
                        <th>Rechnung</th>
                        <th>Hauptvertrag</th>
                    </tr>
                </thead>
                <tbody>
                    {% for invoice in invoices %}
                    <tr>
                        <td class="font-semibold">{{ invoice.invoice_number }}</td>
                        <td>{{ invoice.period }}</td>
                        <td class="amount-cell">{{ '%.2f'|format(invoice.amount_eur) }} €</td>
                        <td class="text-muted">{{ invoice.due_date }}</td>
                        <td>
                            {% set status_lower = (invoice.status or '')|lower %}
                            <span class="badge {% if 'bezahlt' in status_lower %}badge-success{% elif 'prüfen' in status_lower %}badge-warning{% else %}badge-info{% endif %}">
                                {{ invoice.status or 'In Bearbeitung' }}
                            </span>
                        </td>
                        <td>
                            {% if invoice.pdf_path %}
                                <div class="action-group">
                                    <a href="{{ url_for('static', filename=invoice.pdf_path) }}" target="_blank" rel="noopener" class="btn btn-link">
                                        Ansehen
                                    </a>
                                </div>
                            {% else %}
                                <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if invoice.has_hauptvertrag %}
                                <div style="display: flex; gap: 0.5rem; align-items: center;">
                                    <a href="{{ url_for('view_hauptvertrag', invoice_id=invoice.id) }}" target="_blank" rel="noopener" class="btn btn-link btn-contract">
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                                        Öffnen
                                    </a>
                                    
                                    <!-- Bearbeiten/Ersetzen Button -->
                                    <div class="upload-inline-form">
                                        <label class="btn btn-outline" style="margin: 0; padding: 0.4rem 0.6rem; cursor: pointer;" title="Vertrag aktualisieren/ersetzen">
                                            <input type="file" multiple accept="image/*,application/pdf" onchange="openUploadModal(event, '{{ invoice.id }}')" style="display: none;">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                            </svg>
                                        </label>
                                    </div>
                                </div>
                            {% else %}
                                <!-- Normaler Erst-Upload -->
                                <div class="upload-inline-form">
                                    <label class="file-dropzone">
                                        <input type="file" multiple accept="image/*,application/pdf" onchange="openUploadModal(event, '{{ invoice.id }}')">
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                                        <span>Dateien wählen</span>
                                    </label>
                                </div>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="7" class="empty-state">
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#a0aec0" stroke-width="1.5"><rect x="2" y="4" width="20" height="16" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
                            <p>Noch keine Rechnungen vorhanden.</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</div>

<!-- UPLOAD MODAL -->
<div id="uploadModal" class="modal-overlay" style="display: none;">
    <div class="modal-content">
        <h2>Dateien für Upload anpassen</h2>
        <p class="text-muted" style="margin-bottom: 1rem;">Du kannst die Dateinamen anpassen, bevor sie gespeichert werden.</p>
        
        <div id="fileList" class="file-list"></div>
        
        <div class="modal-actions">
            <button type="button" class="btn btn-outline" onclick="closeModal()">Abbrechen</button>
            <button type="button" class="btn btn-primary" onclick="submitFiles()" id="uploadBtn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                Dateien hochladen
            </button>
        </div>
    </div>
</div>

<style>
/* --- Bestehendes Layout & Container --- */
.invoices-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-family: inherit;
}
.invoice-header {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}
.header-text h1 { margin: 0 0 0.35rem 0; font-size: 1.5rem; color: #1a202c; font-weight: 700; }
.header-text p { margin: 0; color: #718096; font-size: 0.925rem; }
.table-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}
.table-responsive { overflow-x: auto; }
.custom-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.925rem; }
.custom-table th {
    background-color: #f8fafc; color: #475569; padding: 1rem 1.25rem;
    font-weight: 600; font-size: 0.825rem; text-transform: uppercase;
    letter-spacing: 0.05em; border-bottom: 1px solid #e2e8f0;
}
.custom-table td {
    padding: 1rem 1.25rem; border-bottom: 1px solid #f1f5f9;
    color: #334155; vertical-align: middle;
}
.custom-table tbody tr:hover { background-color: #f8fafc; }
.custom-table tbody tr:last-child td { border-bottom: none; }
.font-semibold { font-weight: 600; color: #0f172a; }
.amount-cell { font-weight: 700; color: #0f172a; }
.text-muted { color: #94a3b8; font-size: 0.875rem; }
.badge {
    display: inline-block; padding: 0.35rem 0.75rem; border-radius: 9999px;
    font-size: 0.775rem; font-weight: 600; line-height: 1;
}
.badge-success { background-color: #dcfce7; color: #15803d; }
.badge-warning { background-color: #fef3c7; color: #b45309; }
.badge-info { background-color: #e0f2fe; color: #0369a1; }
.btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-weight: 600; font-size: 0.85rem; padding: 0.5rem 1rem;
    border-radius: 8px; cursor: pointer; transition: all 0.2s ease;
    border: none; text-decoration: none; font-family: inherit;
}
.btn-outline { background: #ffffff; border: 1px solid #cbd5e1; color: #334155; }
.btn-outline:hover { background: #f8fafc; border-color: #94a3b8; }
.btn-primary { background: #0284c7; color: #ffffff; }
.btn-primary:hover { background: #0369a1; }
.btn-link { color: #0284c7; background: #f0f9ff; padding: 0.4rem 0.75rem; }
.btn-link:hover { background: #e0f2fe; color: #0369a1; }
.btn-contract { color: #0f766e; background: #f0fdf4; }
.btn-contract:hover { background: #dcfce7; color: #115e59; }
.upload-inline-form { display: inline-block; }
.file-dropzone {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.75rem; background-color: #f8fafc;
    border: 1.5px dashed #cbd5e1; border-radius: 8px;
    color: #475569; font-size: 0.825rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease;
}
.file-dropzone:hover { background-color: #f1f5f9; border-color: #0284c7; color: #0284c7; }
.file-dropzone input[type="file"] { display: none; }
.empty-state { text-align: center; padding: 3rem 1rem !important; }
.empty-state p { margin: 0.5rem 0 0 0; color: #94a3b8; }

/* --- Neues Modal Styling --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.modal-content {
    background: #ffffff; width: 90%; max-width: 500px;
    border-radius: 16px; padding: 2rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.modal-content h2 { margin-top: 0; font-size: 1.25rem; color: #0f172a; margin-bottom: 0.5rem;}
.file-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; max-height: 300px; overflow-y: auto;}
.file-edit-row { display: flex; gap: 0.5rem; align-items: center; }
.rename-input {
    flex-grow: 1; padding: 0.5rem; border: 1px solid #cbd5e1; 
    border-radius: 6px; font-family: inherit; font-size: 0.9rem;
}
.rename-input:focus { outline: 2px solid #0284c7; border-color: transparent;}
.btn-remove {
    background: #fee2e2; color: #ef4444; border: none; padding: 0.5rem;
    border-radius: 6px; cursor: pointer; display: flex; align-items: center;
}
.btn-remove:hover { background: #fecaca; }
.modal-actions { display: flex; justify-content: flex-end; gap: 1rem; }

@media (max-width: 768px) {
    .invoice-header { flex-direction: column; align-items: flex-start; }
}
</style>

<!-- UPLOAD LOGIK -->
<script>
let currentFiles = [];
let currentInvoiceId = null;

// 1. Dateien aufnehmen und Modal öffnen
function openUploadModal(event, invoiceId) {
    currentInvoiceId = invoiceId;
    const files = Array.from(event.target.files);
    
    if(files.length === 0) return;

    // Erzeuge State-Objekte für jede ausgewählte Datei
    currentFiles = files.map(file => ({
        id: window.crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(),
        originalFile: file,
        customName: file.name
    }));

    // File-Input zurücksetzen, damit gleiche Dateien nochmal gewählt werden können
    event.target.value = '';
    
    renderFileList();
    document.getElementById('uploadModal').style.display = 'flex';
}

// 2. Dateiliste im Modal rendern
function renderFileList() {
    const container = document.getElementById('fileList');
    container.innerHTML = '';

    currentFiles.forEach(f => {
        const row = document.createElement('div');
        row.className = 'file-edit-row';
        
        row.innerHTML = `
            <input type="text" value="${f.customName}" 
                   oninput="renameFile('${f.id}', this.value)" class="rename-input">
            <button type="button" class="btn-remove" onclick="removeFile('${f.id}')" title="Datei entfernen">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
            </button>
        `;
        container.appendChild(row);
    });

    if (currentFiles.length === 0) {
        closeModal();
    }
}

// 3. Name aktualisieren
function renameFile(id, newName) {
    const fileIndex = currentFiles.findIndex(f => f.id === id);
    if (fileIndex > -1) {
        currentFiles[fileIndex].customName = newName;
    }
}

// 4. Datei aus Auswahl entfernen
function removeFile(id) {
    currentFiles = currentFiles.filter(f => f.id !== id);
    renderFileList();
}

// 5. Modal abbrechen
function closeModal() {
    document.getElementById('uploadModal').style.display = 'none';
    currentFiles = [];
    currentInvoiceId = null;
}

// 6. An den Server senden
async function submitFiles() {
    if (currentFiles.length === 0 || !currentInvoiceId) return;

    const btn = document.getElementById('uploadBtn');
    btn.disabled = true;
    btn.innerHTML = 'Lädt hoch...';

    const formData = new FormData();
    formData.append('action', 'upload_hauptvertrag');
    formData.append('invoice_id', currentInvoiceId);

    // Fügt alle Dateien unter dem GLEICHEN Schlüssel "hauptvertrag_file" hinzu,
    // mit dem vom Nutzer angepassten Dateinamen
    currentFiles.forEach(f => {
        formData.append('hauptvertrag_file', f.originalFile, f.customName);
    });

    try {
        const response = await fetch(window.location.href, {
            method: 'POST',
            body: formData
        });

        if (response.ok) {
            window.location.reload(); // Seite neu laden, um Tabelle zu aktualisieren
        } else {
            alert('Es gab einen Fehler beim Hochladen. Bitte versuche es erneut.');
            btn.disabled = false;
            btn.innerHTML = 'Dateien hochladen';
        }
    } catch (e) {
        console.error(e);
        alert('Netzwerkfehler. Konnte Server nicht erreichen.');
        btn.disabled = false;
        btn.innerHTML = 'Dateien hochladen';
    }
}
</script>
{% endblock %}