{% extends "base.html" %}

{% block title %}Resource Report Generator{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Resource Report Generator</h1>
        <a href="{{ url_for('resources.resources') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Zurück
        </a>
    </div>

    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Report-Einstellungen</h5>
                </div>
                <div class="card-body">
                    <form method="get" action="{{ url_for('resources.resource_report') }}">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="report_type" class="form-label">Report-Typ</label>
                                <select name="type" id="report_type" class="form-select" required>
                                    <option value="usage">Auslastungsreport</option>
                                    <option value="performance">Performance-Report</option>
                                    <option value="compliance">Compliance-Report</option>
                                    <option value="inventory">Bestands-Report</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="format" class="form-label">Export-Format</label>
                                <select name="format" id="format" class="form-select" required>
                                    <option value="excel">Excel (.xlsx)</option>
                                    <option value="csv">CSV (.csv)</option>
                                    <option value="pdf">PDF (Vorschau)</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="date_from" class="form-label">Von</label>
                                <input type="date" name="from" id="date_from" class="form-control" 
                                       value="{{ (datetime.now() - timedelta(days=30)).strftime('%Y-%m-%d') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label for="date_to" class="form-label">Bis</label>
                                <input type="date" name="to" id="date_to" class="form-control" 
                                       value="{{ datetime.now().strftime('%Y-%m-%d') }}" required>
                            </div>
                        </div>

                        <div class="mt-4">
                            <h6>Report-Beschreibungen:</h6>
                            <div id="report_descriptions">
                                <div class="alert alert-info report-desc" data-type="usage">
                                    <h6><i class="fas fa-chart-line"></i> Auslastungsreport</h6>
                                    <p class="mb-0">Zeigt die Nutzung aller Ressourcen im gewählten Zeitraum. 
                                    Enthält Allokations-Historie, durchschnittliche Auslastung und Trends.</p>
                                </div>
                                <div class="alert alert-warning report-desc" data-type="performance" style="display: none;">
                                    <h6><i class="fas fa-tachometer-alt"></i> Performance-Report</h6>
                                    <p class="mb-0">Analysiert die Performance-Metriken aller Ressourcen. 
                                    Enthält ROI-Berechnungen, Issue-Tracking und Performance-Scores.</p>
                                </div>
                                <div class="alert alert-success report-desc" data-type="compliance" style="display: none;">
                                    <h6><i class="fas fa-shield-alt"></i> Compliance-Report</h6>
                                    <p class="mb-0">Überprüft Compliance-Aspekte wie Quarantäne-Gründe, 
                                    Sicherheitsvorfälle und Policy-Verletzungen.</p>
                                </div>
                                <div class="alert alert-primary report-desc" data-type="inventory" style="display: none;">
                                    <h6><i class="fas fa-boxes"></i> Bestands-Report</h6>
                                    <p class="mb-0">Aktueller Bestand aller Ressourcen mit Status-Übersicht, 
                                    Verfügbarkeit und Zuordnungen.</p>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between mt-4">
                            <button type="button" class="btn btn-outline-secondary" onclick="previewReport()">
                                <i class="fas fa-eye"></i> Vorschau
                            </button>
                            <button type="submit" class="btn btn-primary" name="download" value="true">
                                <i class="fas fa-download"></i> Report generieren
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Letzte Reports -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="mb-0">Letzte generierte Reports</h5>
                </div>
                <div class="card-body">
                    <div class="list-group">
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">Auslastungsreport_2025-06-01.xlsx</h6>
                                <small>vor 5 Tagen</small>
                            </div>
                            <p class="mb-1">Zeitraum: 01.05.2025 - 01.06.2025</p>
                            <small>Generiert von: {{ username }}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Vorschau Modal -->
<div class="modal fade" id="previewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Report-Vorschau</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="previewContent">
                <p class="text-center">
                    <i class="fas fa-spinner fa-spin"></i> Lade Vorschau...
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>

<script>
// Report-Typ Beschreibungen
document.getElementById('report_type').addEventListener('change', function() {
    const selectedType = this.value;
    document.querySelectorAll('.report-desc').forEach(desc => {
        desc.style.display = desc.dataset.type === selectedType ? 'block' : 'none';
    });
});

// Datum-Validierung
document.getElementById('date_from').addEventListener('change', function() {
    document.getElementById('date_to').min = this.value;
});

document.getElementById('date_to').addEventListener('change', function() {
    document.getElementById('date_from').max = this.value;
});

// Report-Vorschau
function previewReport() {
    const modal = new bootstrap.Modal(document.getElementById('previewModal'));
    const content = document.getElementById('previewContent');
    
    // Simuliere Lade-Vorgang
    content.innerHTML = '<p class="text-center"><i class="fas fa-spinner fa-spin"></i> Generiere Vorschau...</p>';
    modal.show();
    
    setTimeout(() => {
        // Beispiel-Vorschau
        content.innerHTML = `
            <h5>Report-Vorschau</h5>
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th>Ressourcentyp</th>
                        <th>Gesamt</th>
                        <th>Verfügbar</th>
                        <th>Zugeteilt</th>
                        <th>Auslastung</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Domain</td>
                        <td>150</td>
                        <td>45</td>
                        <td>100</td>
                        <td>66.7%</td>
                    </tr>
                    <tr>
                        <td>IPv4</td>
                        <td>100</td>
                        <td>20</td>
                        <td>75</td>
                        <td>75.0%</td>
                    </tr>
                    <tr>
                        <td>Phone</td>
                        <td>50</td>
                        <td>15</td>
                        <td>30</td>
                        <td>60.0%</td>
                    </tr>
                </tbody>
            </table>
            <p class="text-muted">Dies ist eine vereinfachte Vorschau. Der vollständige Report enthält weitere Details.</p>
        `;
    }, 1000);
}

// Initialisierung
document.addEventListener('DOMContentLoaded', function() {
    const today = new Date();
    const thirtyDaysAgo = new Date(today);
    thirtyDaysAgo.setDate(today.getDate() - 30);
    
    document.getElementById('date_from').value = thirtyDaysAgo.toISOString().split('T')[0];
    document.getElementById('date_to').value = today.toISOString().split('T')[0];
});
</script>
{% endblock %}