{% extends "base.html" %}

{% block title %}Riwayat Diagnosis{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card shadow">
            <div class="card-header bg-success text-white">
                <h4 class="mb-0"><i class="fas fa-history me-2"></i>Riwayat Diagnosis Sistem Pakar</h4>
            </div>
            <div class="card-body">
                
                <!-- Filter Section -->
                <div class="row mb-4">
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="searchInput" placeholder="Cari...">
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="filterDiagnosis">
                            <option value="all">Semua Diagnosis</option>
                            <option value="ringan">PMK Ringan</option>
                            <option value="sedang">PMK Sedang</option>
                            <option value="berat">PMK Berat</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input type="date" class="form-control" id="dateFilter">
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-success w-100" onclick="applyFilters()">
                            <i class="fas fa-filter me-2"></i>Filter
                        </button>
                    </div>
                </div>
                
                {% if history %}
                <div class="table-responsive">
                    <table class="table table-bordered table-hover" id="diagnosisTable">
                        <thead class="table-success">
                            <tr>
                                <th>No</th>
                                <th>Waktu</th>
                                <th>Gejala Terpilih</th>
                                <th>Diagnosis</th>
                                <th>Tingkat Keyakinan</th>
                                <th>Rekomendasi</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in history %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td><span class="timestamp-realtime" data-timestamp="{{ item.timestamp }}">{{ item.timestamp }}</span></td>
                                <td>
                                    <button class="btn btn-sm btn-info" onclick="showGejala('{{ item.gejala }}')">
                                        <i class="fas fa-list me-1"></i>Lihat Gejala
                                    </button>
                                </td>
                                <td>
                                    <span class="badge {% if 'Ringan' in item.diagnosis %}bg-success
                                                      {% elif 'Sedang' in item.diagnosis %}bg-warning text-dark
                                                      {% else %}bg-danger{% endif %}">
                                        {{ item.diagnosis }}
                                    </span>
                                </td>
                                <td>
                                    <div class="progress" style="height: 20px;">
                                        <div class="progress-bar {% if 'Ringan' in item.diagnosis %}bg-success
                                                                  {% elif 'Sedang' in item.diagnosis %}bg-warning
                                                                  {% else %}bg-danger{% endif %}" 
                                             style="width: 0%;" data-width="{{ item.confidence|round(1) }}">
                                            {{ "%.1f"|format(item.confidence) }}%
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-primary" onclick="showRekomendasi('{{ item.rekomendasi }}')">
                                        <i class="fas fa-clipboard-list me-1"></i>Lihat
                                    </button>
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-info" onclick="viewDetail('{{ item.id }}')">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="btn btn-sm btn-success" onclick="printDiagnosis('{{ item.id }}')">
                                        <i class="fas fa-print"></i>
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <nav aria-label="Page navigation" class="mt-3">
                    <ul class="pagination justify-content-center">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1">Previous</a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">Next</a>
                        </li>
                    </ul>
                </nav>
                
                {% else %}
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Belum ada riwayat diagnosis.</strong> Silakan lakukan konsultasi dengan sistem pakar terlebih dahulu.
                </div>
                {% endif %}
                
                <!-- Action Buttons -->
                <div class="mt-4 text-center">
                    <a href="{{ url_for('expert_system_page') }}" class="btn btn-success btn-lg me-2">
                        <i class="fas fa-stethoscope me-2"></i>Konsultasi Sekarang
                    </a>
                    <a href="{{ url_for('index') }}" class="btn btn-secondary btn-lg">
                        <i class="fas fa-home me-2"></i>Kembali ke Home
                    </a>
                </div>
                
                <!-- Export Buttons -->
                <div class="mt-3 text-center">
                    <button class="btn btn-outline-success" onclick="exportHistory('csv')">
                        <i class="fas fa-file-csv me-2"></i>Export CSV
                    </button>
                    <button class="btn btn-outline-success" onclick="exportHistory('pdf')">
                        <i class="fas fa-file-pdf me-2"></i>Export PDF
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal untuk Detail Gejala -->
<div class="modal fade" id="gejalaModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="fas fa-list me-2"></i>Detail Gejala</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="gejalaModalBody">
                <!-- Gejala akan diisi via JavaScript -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal untuk Rekomendasi -->
<div class="modal fade" id="rekomendasiModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="fas fa-clipboard-list me-2"></i>Rekomendasi Penanganan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="rekomendasiModalBody">
                <!-- Rekomendasi akan diisi via JavaScript -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<style>
.table th {
    background-color: #28a745;
    color: white;
}

.progress {
    min-width: 100px;
}

.pagination .page-link {
    color: #28a745;
}

.pagination .active .page-link {
    background-color: #28a745;
    border-color: #28a745;
}

@media print {
    .btn, footer, nav, .pagination, .modal {
        display: none !important;
    }
}
</style>

<script>
// ==== REAL-TIME CLOCK UPDATE ====
function formatTimeAgo(isoDateString) {
    try {
        const date = new Date(isoDateString);
        
        // Format manual: DD/MM/YYYY HH:MM:SS (lebih jelas)
        const day = String(date.getDate()).padStart(2, '0');
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const year = date.getFullYear();
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        
        const formatted = `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
        return formatted;
    } catch (e) {
        console.error('Error formatting time:', e);
        return isoDateString;
    }
}

function updateRealtimeTimestamps() {
    const elements = document.querySelectorAll('.timestamp-realtime');
    elements.forEach(el => {
        const timestamp = el.dataset.timestamp;
        const formatted = formatTimeAgo(timestamp);
        el.textContent = formatted;
        el.title = timestamp;
    });
}

// Update setiap detik
setInterval(updateRealtimeTimestamps, 1000);
// Update immediately on page load
document.addEventListener('DOMContentLoaded', updateRealtimeTimestamps);
updateRealtimeTimestamps();

// ==== END REAL-TIME CLOCK ====

function showGejala(gejala) {
    const gejalaList = gejala.split(',');
    let html = '<ul class="list-group">';
    gejalaList.forEach(g => {
        html += `<li class="list-group-item">${g}</li>`;
    });
    html += '</ul>';
    
    document.getElementById('gejalaModalBody').innerHTML = html;
    new bootstrap.Modal(document.getElementById('gejalaModal')).show();
}

function showRekomendasi(rekomendasi) {
    const rekomendasiList = rekomendasi.split('|');
    let html = '<ol class="list-group list-group-numbered">';
    rekomendasiList.forEach(r => {
        html += `<li class="list-group-item">${r}</li>`;
    });
    html += '</ol>';
    
    document.getElementById('rekomendasiModalBody').innerHTML = html;
    new bootstrap.Modal(document.getElementById('rekomendasiModal')).show();
}

function viewDetail(id) {
    // Implement view detail
    alert('View detail for ID: ' + id);
}

function printDiagnosis(id) {
    // Implement print
    window.print();
}

function applyFilters() {
    const search = document.getElementById('searchInput').value.toLowerCase();
    const filter = document.getElementById('filterDiagnosis').value;
    const date = document.getElementById('dateFilter').value;
    
    const rows = document.querySelectorAll('#diagnosisTable tbody tr');
    
    rows.forEach(row => {
        let show = true;
        const text = row.textContent.toLowerCase();
        const diagnosis = row.querySelector('td:nth-child(4)').textContent.toLowerCase();
        
        if (search && !text.includes(search)) show = false;
        if (filter !== 'all' && !diagnosis.includes(filter)) show = false;
        if (date) {
            const rowDate = row.querySelector('td:nth-child(2)').textContent.split(' ')[0];
            if (rowDate !== date) show = false;
        }
        
        row.style.display = show ? '' : 'none';
    });
}

function exportHistory(format) {
    if (format === 'csv') {
        alert('Export to CSV');
    } else if (format === 'pdf') {
        alert('Export to PDF');
    }
}
</script>
{% endblock %}