{% extends "base.html" %}

{% block title %}Hasil Deteksi - Sehat{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card border-success shadow">
            <div class="card-header bg-success text-white">
                <h4 class="mb-0"><i class="fas fa-check-circle me-2"></i>Hasil Deteksi - SEHAT</h4>
            </div>
            <div class="card-body">
                
                <!-- Success Alert -->
                <div class="alert alert-success text-center mb-4">
                    <i class="fas fa-check-circle fa-3x mb-3"></i>
                    <h4 class="alert-heading">Selamat! Sapi Anda Terdeteksi SEHAT</h4>
                    <p class="mb-0">Tidak ditemukan indikasi PMK pada gambar yang diupload.</p>
                </div>

                <!-- Image and Result Info -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="text-center mb-4">
                            <div class="image-container position-relative">
                                <img src="{{ url_for('uploaded_file', filename=result.saved_filename) }}" 
                                     class="img-fluid rounded shadow" style="max-height: 300px;" 
                                     alt="Uploaded Image">
                                <span class="badge bg-success position-absolute top-0 end-0 m-2">
                                    <i class="fas fa-check"></i> SEHAT
                                </span>
                            </div>
                            <p class="mt-2 text-muted">
                                <i class="fas fa-image me-1"></i>{{ result.filename }}<br>
                                <small>{{ result.size }} | {{ result.dimensions }}</small>
                            </p>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="result-details">
                            <h5 class="mb-3"><i class="fas fa-chart-bar me-2"></i>Detail Deteksi</h5>
                            
                            <table class="table table-bordered">
                                <tr>
                                    <th style="width: 40%">Waktu Deteksi</th>
                                    <td>{{ result.timestamp }}</td>
                                </tr>
                                <tr>
                                    <th>Hasil</th>
                                    <td>
                                        <span class="badge bg-success">SEHAT</span>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Tingkat Keyakinan</th>
                                    <td>
                                        <div class="progress">
                                                <div class="progress-bar bg-success" 
                                                    style="width: 0%;" data-width="{{ (result.confidence * 100)|round(1) }}">
                                                {{ "%.1f"|format(result.confidence * 100) }}%
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Format Gambar</th>
                                    <td>{{ result.format|upper }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Distribusi Probabilitas -->
                {% if result.probabilities %}
                <div class="mt-4">
                    <h5 class="mb-3"><i class="fas fa-chart-pie me-2"></i>Distribusi Probabilitas</h5>
                    <div class="row">
                        {% for class_name, prob in result.probabilities.items() %}
                        <div class="col-md-6 mb-2">
                            <label class="fw-bold">{{ class_name|upper }}:</label>
                            <div class="progress">
                                <div class="progress-bar {% if class_name == 'sehat' %}bg-success{% else %}bg-warning{% endif %}" 
                                     style="width: 0%;" data-width="{{ prob|round(1) }}">
                                    {{ "%.1f"|format(prob) }}%
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <!-- Rekomendasi -->
                <div class="mt-4">
                    <h5 class="mb-3"><i class="fas fa-clipboard-list me-2"></i>Rekomendasi Perawatan</h5>
                    <div class="row">
                        {% for rec in result.expert_analysis.recommendations %}
                        <div class="col-md-6 mb-2">
                            <div class="card bg-light">
                                <div class="card-body py-2">
                                    <i class="fas fa-check-circle text-success me-2"></i>
                                    {{ rec }}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <!-- Tindakan Pencegahan -->
                <div class="mt-4">
                    <h5 class="mb-3"><i class="fas fa-shield-alt me-2"></i>Tindakan Pencegahan</h5>
                    <div class="alert alert-info">
                        <ul class="mb-0">
                            <li>Lakukan vaksinasi rutin sesuai jadwal</li>
                            <li>Jaga kebersihan kandang dan lingkungan</li>
                            <li>Berikan pakan bergizi dan air bersih</li>
                            <li>Pantau kesehatan sapi secara berkala</li>
                            <li>Batasi akses orang asing ke kandang</li>
                        </ul>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="mt-4 text-center">
                    <a href="{{ url_for('upload') }}" class="btn btn-success btn-lg me-2">
                        <i class="fas fa-upload me-2"></i>Upload Gambar Lain
                    </a>
                    <a href="{{ url_for('expert_system_page') }}" class="btn btn-info btn-lg me-2">
                        <i class="fas fa-stethoscope me-2"></i>Sistem Pakar
                    </a>
                    {% set last_db = session.get('last_prediction', {}).get('db_id') %}
                    <a href="{{ url_for('riwayat_deteksi') }}{% if last_db %}#pred-{{ last_db }}{% endif %}" class="btn btn-secondary btn-lg">
                        <i class="fas fa-history me-2"></i>Riwayat Deteksi
                    </a>
                </div>

                <!-- Download Report -->
                <div class="mt-3 text-center">
                    <button class="btn btn-outline-primary" onclick="window.print()">
                        <i class="fas fa-download me-2"></i>Download Laporan
                    </button>
                </div>
            </div>
        </div>

        <!-- Tabel Fitur -->
        <div class="card mt-3">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-table me-2"></i>Detail Fitur Ekstraksi
                    <button class="btn btn-sm btn-light float-end" type="button" data-bs-toggle="collapse" data-bs-target="#featureTable">
                        <i class="fas fa-chevron-down"></i>
                    </button>
                </h5>
            </div>
            <div class="collapse" id="featureTable">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered table-hover">
                            <thead class="table-success">
                                <tr>
                                    <th>Fitur</th>
                                    <th>Nilai</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for feature, value in features_table %}
                                <tr>
                                    <td>{{ feature }}</td>
                                    <td>{{ "%.4f"|format(value) }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.image-container {
    position: relative;
    display: inline-block;
}

.badge {
    font-size: 1rem;
    padding: 10px 15px;
}

.progress {
    height: 25px;
}

.progress-bar {
    line-height: 25px;
    font-size: 14px;
}

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