@extends('layouts.main')
@section('title', 'Kalkulator Kesehatan')
@section('content')
<div class="content-body">
    <div class="container-fluid">
        <div class="row page-titles">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Table</a></li>
                <li class="breadcrumb-item"><a href="javascript:void(0)">Kalkulator</a></li>
            </ol>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Kalkulator Kesehatan</h4>
                    </div>
                    <div class="card-body">
                        <!-- Kalkulator BMI -->
                        <h5>Kalkulator BMI</h5>
                        <label>Berat Badan (kg):</label>
                        <input type="number" id="berat" class="form-control">
                        <label>Tinggi Badan (cm):</label>
                        <input type="number" id="tinggi" class="form-control">
                        <button onclick="hitungBMI()" class="btn btn-primary mt-2">Hitung BMI</button>
                        <p>Hasil: <span id="hasilBMI"></span></p>
                        <p><strong>Indikator:</strong> <span id="indikatorBMI"></span></p>
                        <hr>

                        <!-- Kalkulator Kalori -->
                        <h5>Kalkulator Kalori Harian</h5>
                        <label>Berat Badan (kg):</label>
                        <input type="number" id="beratKalori" class="form-control">
                        <button onclick="hitungKalori()" class="btn btn-primary mt-2">Hitung Kalori</button>
                        <p>Kebutuhan Kalori: <span id="hasilKalori"></span> kkal/hari</p>
                        <hr>

                        <!-- Kalkulator Kebutuhan Air -->
                        <h5>Kalkulator Kebutuhan Air</h5>
                        <label>Berat Badan (kg):</label>
                        <input type="number" id="beratAir" class="form-control">
                        <button onclick="hitungAir()" class="btn btn-primary mt-2">Hitung Kebutuhan Air</button>
                        <p>Kebutuhan Air: <span id="hasilAir"></span> liter/hari</p>
                        <p><strong>Indikator:</strong> <span id="indikatorAir"></span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function hitungBMI() {
    let berat = document.getElementById("berat").value;
    let tinggi = document.getElementById("tinggi").value / 100;
    let bmi = (berat / (tinggi * tinggi)).toFixed(2);
    document.getElementById("hasilBMI").innerText = bmi;

    let indikator = "";
    if (bmi < 18.5) {
        indikator = "Kurus";
    } else if (bmi >= 18.5 && bmi < 24.9) {
        indikator = "Normal";
    } else if (bmi >= 25 && bmi < 29.9) {
        indikator = "Kelebihan Berat Badan";
    } else {
        indikator = "Obesitas";
    }
    document.getElementById("indikatorBMI").innerText = indikator;
}

function hitungKalori() {
    let berat = document.getElementById("beratKalori").value;
    let kalori = (berat * 30).toFixed(2);
    document.getElementById("hasilKalori").innerText = kalori;
}

function hitungAir() {
    let berat = document.getElementById("beratAir").value;
    let air = (berat * 0.03).toFixed(2);
    document.getElementById("hasilAir").innerText = air;

    let indikator = "";
    if (air < 1.5) {
        indikator = "Kurang Minum";
    } else if (air >= 1.5 && air <= 3) {
        indikator = "Cukup";
    } else {
        indikator = "Sangat Banyak";
    }
    document.getElementById("indikatorAir").innerText = indikator;
}
</script>
@endsection