@extends('admin.layout')
@section('content')
<div class="mb-4">
    <h4 class="fw-bold">Pelatihan Model Random Forest</h4>
    <p class="text-muted small">Kelola dataset alumni untuk meningkatkan akurasi sistem.</p>
</div>

<div class="row g-4">
    <div class="col-md-4">
        <div class="card border-0 shadow-sm rounded-4 p-4 text-center">
            <div class="mb-3 text-success"><i class="fas fa-database fa-3x"></i></div>
            <h6 class="fw-bold">Dataset Alumni</h6>
            <h2 class="fw-black my-2">120</h2>
            <p class="text-muted small">Data siap latih</p>
            <button class="btn btn-success w-100 rounded-pill py-3 mt-3 fw-bold" onclick="runAI()">
                JALANKAN TRAINING
            </button>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card border-0 shadow-sm rounded-4 p-4 bg-dark text-white font-monospace" style="min-height: 280px;">
            <div id="ai-log">
                <p class="text-success mb-1">> System Ready. Waiting for command...</p>
            </div>
        </div>
    </div>
</div>

<script>
function runAI() {
    const log = document.getElementById('ai-log');
    log.innerHTML += '<p class="mb-1 text-info">> Connecting to Flask API Python...</p>';
    setTimeout(() => {
        log.innerHTML += '<p class="mb-1">> Fetching dataset from MySQL...</p>';
        log.innerHTML += '<p class="mb-1 text-warning">> Random Forest: Training 100 decision trees...</p>';
        log.innerHTML += '<p class="mb-1 text-success">> Accuracy Result: 86.4%</p>';
    }, 1500);
}
</script>
@endsection