{% extends "admin/reports/base.html" %}
{% load i18n %}

{% block title %}{% trans "Report-Protokoll" %}{% endblock %}

{% block content %}
<div class="report-content">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>{% trans "Report-Protokoll" %}</h3>
            <div class="header-actions">
                <span class="badge badge-info">{{ report_logs|length }} {% trans "Einträge" %}</span>
            </div>
        </div>
        <div class="card-body">
            {% if report_logs %}
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th>{% trans "Datum/Zeit" %}</th>
                                <th>{% trans "Typ" %}</th>
                                <th>{% trans "Name" %}</th>
                                <th>{% trans "Zeitraum" %}</th>
                                <th>{% trans "Anzahl Patienten" %}</th>
                                <th>{% trans "E-Mail gesendet an" %}</th>
                                <th>{% trans "Status" %}</th>
                                <th>{% trans "Aktionen" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for log in report_logs %}
                                <tr>
                                    <td>
                                        <div class="datetime-cell">
                                            <div class="date">{{ log.created_at|date:"d.m.Y" }}</div>
                                            <div class="time text-muted">{{ log.created_at|time:"H:i" }}</div>
                                        </div>
                                    </td>
                                    <td>
                                        {% if log.automatic_report %}
                                            <span class="badge badge-primary">
                                                <i class="fas fa-clock"></i> {% trans "Automatisch" %}
                                            </span>
                                        {% else %}
                                            <span class="badge badge-secondary">
                                                <i class="fas fa-hand-paper"></i> {% trans "Manuell" %}
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if log.automatic_report %}
                                            {{ log.automatic_report.name }}
                                        {% else %}
                                            {% trans "Manueller Report" %}
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="date-range">
                                            <div>{{ log.date_from|date:"d.m.Y" }}</div>
                                            <div class="text-muted">{% trans "bis" %}</div>
                                            <div>{{ log.date_to|date:"d.m.Y" }}</div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="patient-count">{{ log.patient_count }}</span>
                                    </td>
                                    <td>
                                        {% if log.email_sent_to %}
                                            <div class="email-list">
                                                {% for email in log.email_sent_to %}
                                                    <span class="email-badge">{{ email }}</span>
                                                {% endfor %}
                                            </div>
                                        {% else %}
                                            <span class="text-muted">{% trans "Download" %}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if log.email_sent_to %}
                                            <span class="badge badge-success">
                                                <i class="fas fa-envelope"></i> {% trans "Gesendet" %}
                                            </span>
                                        {% else %}
                                            <span class="badge badge-info">
                                                <i class="fas fa-download"></i> {% trans "Heruntergeladen" %}
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="action-buttons">
                                            {% if log.csv_file %}
                                                <a href="{{ log.csv_file.url }}" class="btn btn-sm btn-outline-primary" title="{% trans 'CSV herunterladen' %}">
                                                    <i class="fas fa-download"></i>
                                                </a>
                                            {% endif %}
                                            <button class="btn btn-sm btn-outline-info" 
                                                    onclick="showReportDetails({{ log.id }})" 
                                                    title="{% trans 'Details anzeigen' %}">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination (falls notwendig) -->
                {% if is_paginated %}
                    <nav aria-label="Report log pagination">
                        <ul class="pagination justify-content-center">
                            {% if page_obj.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
                                        <i class="fas fa-chevron-left"></i>
                                    </a>
                                </li>
                            {% endif %}
                            
                            {% for num in page_obj.paginator.page_range %}
                                {% if page_obj.number == num %}
                                    <li class="page-item active">
                                        <span class="page-link">{{ num }}</span>
                                    </li>
                                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}
                            
                            {% if page_obj.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.next_page_number }}">
                                        <i class="fas fa-chevron-right"></i>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                {% endif %}
            {% else %}
                <div class="empty-state">
                    <div class="text-center py-5">
                        <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                        <h4 class="text-muted">{% trans "Noch keine Reports erstellt" %}</h4>
                        <p class="text-muted">{% trans "Erstellen Sie Ihren ersten Report über das Dashboard." %}</p>
                        <a href="{% url 'reports:dashboard' %}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> {% trans "Report erstellen" %}
                        </a>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Report Details Modal -->
<div class="modal fade" id="reportDetailsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Report-Details" %}</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="reportDetailsContent">
                    <!-- Content wird via JavaScript geladen -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    {% trans "Schließen" %}
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.datetime-cell .date {
    font-weight: 500;
}

.datetime-cell .time {
    font-size: 0.875em;
}

.date-range {
    text-align: center;
}

.patient-count {
    font-weight: 600;
    color: #007bff;
}

.email-list {
    max-width: 200px;
}

.email-badge {
    display: inline-block;
    background-color: #e9ecef;
    color: #495057;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.8em;
    margin: 1px;
}

.action-buttons {
    display: flex;
    gap: 5px;
}

.empty-state {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge {
    font-size: 0.75em;
    padding: 4px 8px;
}

.badge-primary {
    background-color: #007bff;
}

.badge-secondary {
    background-color: #6c757d;
}

.badge-success {
    background-color: #28a745;
}

.badge-info {
    background-color: #17a2b8;
}
</style>

<script>
function showReportDetails(logId) {
    // Placeholder für AJAX-Aufruf zum Laden der Report-Details
    // In einer vollständigen Implementierung würde hier ein AJAX-Request
    // an eine entsprechende View gemacht werden
    const modal = $('#reportDetailsModal');
    const content = $('#reportDetailsContent');
    
    content.html(`
        <div class="text-center">
            <i class="fas fa-spinner fa-spin fa-2x"></i>
            <p class="mt-2">{% trans "Lade Details..." %}</p>
        </div>
    `);
    
    modal.modal('show');
    
    // Simulierter Inhalt (in echter Implementierung via AJAX)
    setTimeout(() => {
        content.html(`
            <div class="alert alert-info">
                <strong>{% trans "Hinweis:" %}</strong> 
                {% trans "Die Detail-Ansicht wird in einer zukünftigen Version implementiert." %}
            </div>
        `);
    }, 1000);
}
</script>
{% endblock %}