{% extends "base.html" %}

{% block title %}Mahnungsübersicht{% endblock %}

{% block content %}
<style>
  .mahnungen-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px;
  }

  .mahnungen-head {
    background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
    border: 1px solid #dbe4ee;
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .mahnungen-head h1 {
    margin: 0;
    font-size: 1.55rem;
    color: #1e293b;
  }

  .head-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .search-box-wrapper {
    margin-bottom: 16px;
  }

  .search-box {
    width: 100%;
    max-width: 360px;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .search-box:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  }

  .mahnungen-card {
    background: var(--ui-surface, #ffffff);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  }

  .mahnungen-table {
    width: 100%;
    border-collapse: collapse;
  }

  .mahnungen-table th,
  .mahnungen-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #edf2f7;
    vertical-align: middle;
    text-align: left;
  }

  .mahnungen-table th {
    font-size: 0.83rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: var(--ui-surface-soft, #f8fafc);
  }

  .mahnungen-table tr:hover td {
    background: #fbfdff;
  }

  .badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
  }

  .badge-open { background: #fee2e2; color: #991b1b; }
  .badge-warning { background: #fef3c7; color: #b45309; }
  .badge-info { background: #e0f2fe; color: #0369a1; }
  .badge-paid { background: #dcfce7; color: #166534; }

  .mono {
    font-family: monospace;
    font-size: 0.92rem;
  }

  .text-danger {
    color: #dc2626;
    font-weight: 700;
  }

  .empty-state {
    text-align: center;
    color: #6b7280;
    padding: 36px 20px;
  }

  @media (max-width: 900px) {
    .mahnungen-table {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
  }
</style>

<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="bi bi-exclamation-triangle-fill me-2"></i>Mahnungs- und Ausleihverwaltung</h5>
                    <span class="badge bg-light text-dark">Übersicht überfälliger Medien</span>
                </div>
                <div class="card-body">
                    {% if overdue_items and overdue_items|length > 0 %}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>Schüler / Ausweis</th>
                                    <th>Klasse</th>
                                    <th>Medium</th>
                                    <th>Fälligkeitsdatum</th>
                                    <th>Überfällig seit</th>
                                    <th>Mahnstufe</th>
                                    <th class="text-end">Aktionen</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in overdue_items %}
                                <tr>
                                    <td>
                                        <strong>{{ item.schueler_name }}</strong><br>
                                        <small class="text-muted">{{ item.ausweis_id }}</small>
                                    </td>
                                    <td>{{ item.klasse }}</td>
                                    <td>
                                        {{ item.item_name }}<br>
                                        <small class="text-muted">Code: {{ item.item_code or '—' }}</small>
                                    </td>
                                    <td>{{ item.due_date }}</td>
                                    <td>
                                        <span class="badge bg-danger">{{ item.days_overdue }} Tage</span>
                                    </td>
                                    <td>
                                        {% if item.mahnstufe == 2 %}
                                            <span class="badge bg-dark text-danger">Stufe 2 (Gesperrt)</span>
                                        {% elif item.mahnstufe == 1 %}
                                            <span class="badge bg-warning text-dark">Stufe 1</span>
                                        {% else %}
                                            <span class="badge bg-secondary">Stufe 0</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        <div class="btn-group" role="group">
                                            {% if mail_service_enabled %}
                                            <button type="button" class="btn btn-sm btn-outline-primary"
                                                    onclick="openEmailModal('{{ item.id }}', '{{ item.schueler_name }}', '{{ item.email }}')">
                                                <i class="bi bi-envelope"></i> E-Mail
                                            </button>
                                            {% endif %}
                                            <button type="button" class="btn btn-sm btn-outline-warning text-dark"
                                                    onclick="resetMahnung('{{ item.id }}', '{{ item.schueler_name }}')">
                                                <i class="bi bi-arrow-counterclockwise"></i> Zurücksetzen
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-check-circle-fill text-success fs-1"></i>
                        <p class="text-muted mt-2">Aktuell gibt es keine überfälligen Mahnungen.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- E-Mail Modal -->
<div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="emailModalLabel">Mahnungs-E-Mail senden</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
            </div>
            <div class="modal-body">
                <form id="emailForm">
                    <input type="hidden" id="modalLoanId">
                    <div class="mb-3">
                        <label for="modalStudentName" class="form-label">Empfänger</label>
                        <input type="text" class="form-control" id="modalStudentName" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="modalEmail" class="form-label">E-Mail-Adresse</label>
                        <input type="email" class="form-control" id="modalEmail" placeholder="E-Mail-Adresse eingeben...">
                    </div>
                    <div class="mb-3">
                        <label for="modalMessage" class="form-label">Nachricht</label>
                        <textarea class="form-control" id="modalMessage" rows="4" placeholder="Optionaler Text..."></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary" onclick="submitEmailMahnung()">E-Mail senden</button>
            </div>
        </div>
    </div>
</div>

<script>
function openEmailModal(loanId, studentName, studentEmail) {
    document.getElementById('modalLoanId').value = loanId;
    document.getElementById('modalStudentName').value = studentName;
    document.getElementById('modalEmail').value = studentEmail || '';
    document.getElementById('modalMessage').value = '';

    var myModal = new bootstrap.Modal(document.getElementById('emailModal'));
    myModal.show();
}

function submitEmailMahnung() {
    const loanId = document.getElementById('modalLoanId').value;
    const email = document.getElementById('modalEmail').value;
    const message = document.getElementById('modalMessage').value;

    if (!email) {
        alert('Bitte geben Sie eine gültige E-Mail-Adresse ein.');
        return;
    }

    fetch('/mahnungen_send_email', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ loan_id: loanId, email: email, message: message })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('E-Mail erfolgreich gesendet!');
            var modalEl = document.getElementById('emailModal');
            var modal = bootstrap.Modal.getInstance(modalEl);
            modal.hide();
        } else {
            alert('Fehler: ' + data.message);
        }
    })
    .catch(error => {
        alert('Fehler beim Senden der Anfrage.');
        console.error(error);
    });
}

function resetMahnung(loanId, studentName) {
    if (!confirm('Möchten Sie die Mahnung für "' + studentName + '" wirklich zurücksetzen?\n\nDadurch wird die Mahnstufe auf 0 gesetzt, die Frist um 14 Tage verlängert und der Schülerausweis entsperrt.')) {
        return;
    }

    fetch('/mahnungen_reset', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ loan_id: loanId })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            location.reload(); // Seite neu laden, um die aktualisierte Ansicht zu sehen
        } else {
            alert('Fehler: ' + data.message);
        }
    })
    .catch(error => {
        alert('Fehler beim Senden der Anfrage.');
        console.error(error);
    });
}
</script>
{% endblock %}