{% extends "base.html" %}
{% block content %}
<div class="text-center">
    <h1 class="mt-4 mb-3"><b>CLASSIFICATION</b></h1>
</div>
<div class="row">
    <div class="col-md-6 mb-3">
        <div class="card col-md-12" style="height: 310px; object-fit: cover; border-radius: 15px;">
            <div class="card-body">
                <h5 class="card-title"><b>Image Pattern</b></h5>
                <img id="inputImagePreview" src="" class="card-img-top" alt="pola-gambar" style="width: fit-content; height: 230px; object-fit: cover; display: none;">
                {% if predict_image_path %}
                <img id="processedImage" src="{{ predict_image_path }}" class="card-img-top" alt="gambar-diproses" style="width: fit-content; height: 230px; object-fit: cover;">
                {% endif %}
            </div>
        </div>
        <label class="form-label mt-3"><b>Insert Image</b></label>
        <form class="row g-3" action="/submit" method="POST" enctype="multipart/form-data">
            <div class="col-md-12 mb-2">
                <input type="file" id="inputImage" name="file" accept="image/*" style="background-color: #A5C7C6; color: white; border-radius: 5px; width: 100%;" onchange="previewImage(event)">
                <div class="form-text" style="color: red;">Upload minimum 20 kb and maximum 5 mb</div>
            </div>
            <div class="col-md-8 mb-3">
                <button type="submit" onclick="showProcessedImage()" class="btn" style="background-color: #00A9A7; color: white; border-radius: 10px; width: 100%;">Classification</button>
            </div>
            <div class="col-md-4 mb-3">
                <a href="/refresh" class="btn" style="background-color: #878C8C; color: white; border-radius: 10px; width: 100%;">Refresh</a>
            </div>
        </form>
    </div>
    <div class="col-md-6">
        <div class="card col-md-12" style="height: 310px; object-fit: cover; border-radius: 15px;">
            <div class="card-body">
                <h5 class="card-title" style="font-weight: bold; margin-bottom: 100px;">Classification Result</h5>
                {% if predictiontremor %}
                <h1 class="text-center"><b>{{ predictiontremor }}</b></h1>
                {% endif %}
            </div>
        </div>
        <form class="row g-3" action="" enctype="multipart/form-data">
            <div class="col-md-4 mb-3">
                <label class="form-label mt-3"><b>Confidence :</b></label>
                {% if predictiontremor %}
                <p>{{ confidencetremor }}</p>
                {% endif %}
            </div>
            <div class="col-md-8 mb-3">
                <label class="form-label mt-3"><b>Suggestion :</b></label>
                {% if saran %}
                <p>{{ saran }}</p>
                {% endif %}
            </div>
        </form>
    </div>    
</div>
<script>
    // Fungsi untuk menampilkan gambar yang dipilih saat input file berubah
    function previewImage(event) {
        console.log('Input file changed'); // Periksa apakah fungsi dipanggil saat input file berubah
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function () {
            var img = document.getElementById('inputImagePreview');
            img.src = reader.result;
            img.style.display = 'block';
        };
        reader.readAsDataURL(input.files[0]);
    }
    // Fungsi untuk menampilkan gambar yang diproses setelah mengirim formulir
    function showProcessedImage() {
        var inputImg = document.getElementById('inputImagePreview');
        inputImg.style.display = 'none'; // Sembunyikan gambar yang dipilih
        var processedImg = document.getElementById('processedImage');
        processedImg.src = inputImg.src; // Set gambar yang diproses dari gambar yang dipilih
        processedImg.style.display = 'block'; // Tampilkan gambar yang diproses
    }
</script>
{% endblock %}