@extends('layouts.main')

@section('title', $title = 'Proses Perhitungan')

@section('content')
<div class="container pt-5">
    <div class="row gy-4 shadow mb-4 bg-body-tertiary rounded">
        <h3 class="mb-4">Proses Perhitungan</h3>
    </div>
    <div class="row gy-4">
        <div class="pt-3 card">
            {{-- <div class="row">
                <div class="col-sm-12 pb-3 pt-3">
                    <a href="{{ route ('makanan.create') }}" class="font-sm btn btn-success">Tambah</a>
                </div>
            </div> --}}
            <h3 class="mb-4">1. Data Masing-Masing Menu Terhadap Kriteria</h3>
            <div class="pb-3 table-responsive text-nowrap">
                <table id="bobot" class="table table-hover table-stripped border-right border-bottom border-left table-bordered">
                    <thead>
                        <tr>
                            <th style="width: 20px">No</th>
                            <th>Alternatif</th>
                            <th>Karbohidrat</th>
                            <th>Lemak</th>
                            <th>Protein</th>
                            <th>Serat</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($makanan as $key => $value)
                        <tr>
                            <td>{{ $key+1 }}</td>
                            <td>{{ $value->alternatif }}</td>
                            @foreach ($value->kriteria_makanan as $key => $item)
                            <td>{{ $item->nilai }}</td>
                            @endforeach
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <table  class="table table-hover table-stripped border-right border-bottom border-left table-bordered">
                <tfoot>
                    <tr>
                        <td style="width: 20px"></td>
                        <td>MIN</td>
                        <td id="min-karbohidrat"></td>
                        <td id="min-lemak"></td>
                        <td id="min-protein"></td>
                        <td id="min-serat"></td>
                    </tr>
                    <tr>
                        <td style="width: 20px"></td>
                        <td>MAX</td>
                        <td id="max-karbohidrat"></td>
                        <td id="max-lemak"></td>
                        <td id="max-protein"></td>
                        <td id="max-serat"></td>
                    </tr>
                </tfoot>
                </table>
            </div>
        </div>
    </div>
    <br><br>
    <div class="row gy-4">
        <div class="pt-3 card">
            {{-- <div class="row">
                <div class="col-sm-12 pb-3 pt-3">
                    <a href="{{ route ('makanan.create') }}" class="font-sm btn btn-success">Tambah</a>
                </div>
            </div> --}}
            <h3 class="mb-4">2. Nilai Normalisasi</h3>
            <div class="pb-3 table-responsive text-nowrap">
                <table id="normalisasi" class="table table-hover table-stripped border-right border-bottom border-left table-bordered">
                    <thead>
                        <tr>
                            <th style="width: 20px">No</th>
                            <th>Alternatif</th>
                            <th>Karbohidrat</th>
                            <th>Lemak</th>
                            <th>Protein</th>
                            <th>Serat</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($makanan as $key => $value)
                        <tr>
                            <td>{{ $key+1 }}</td>
                            <td>{{ $value->alternatif }}</td>
                            <td id="nilai"></td>
                            <td id="nilai"></td>
                            <td id="nilai"></td>
                            <td id="nilai"></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <br><br>
    <div class="row gy-4">
        <div class="pt-3 card">
            {{-- <div class="row">
                <div class="col-sm-12 pb-3 pt-3">
                    <a href="{{ route ('makanan.create') }}" class="font-sm btn btn-success">Tambah</a>
                </div>
            </div> --}}
            <h3 class="mb-4">3. Perankingan Menu</h3>
            <div class="pb-3 table-responsive text-nowrap">
                <table id="ranking" class="table table-hover table-stripped border-right border-bottom border-left table-bordered">
                    <thead>
                        <tr>
                            <th style="width: 20px">No</th>
                            <th>Alternatif</th>
                            <th>Karbohidrat</th>
                            <th>Lemak</th>
                            <th>Protein</th>
                            <th>Serat</th>
                            <th>Hasil</th>
                            <th>Ranking</th>
                            <th>Cetak</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($makanan as $key => $value)
                        <tr>
                            <td>{{ $key+1 }}</td>
                            <td id="alternatif">{{ $value->alternatif }}</td>
                            <td id="nilai"></td>
                            <td id="nilai"></td>
                            <td id="nilai"></td>
                            <td id="nilai"></td>
                            <td id="nilai"></td>
                            <td></td>
                            <td>
                                <a href="{{ route ('cetak.index', ['id' => $value->id,'pasien' => $pasien->id]) }}" class="btn btn-success"><i class='bx bx-printer' ></i> Cetak</a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function () {
    // Mengambil semua nilai pada kolom Karbohidrat, Lemak, Protein, dan Serat
    let karbohidratValues = Array.from(document.querySelectorAll('#bobot tbody tr td:nth-child(3)')).map(td => parseFloat(td.textContent));
    console.log(karbohidratValues);
    let lemakValues = Array.from(document.querySelectorAll('#bobot tbody tr td:nth-child(4)')).map(td => parseFloat(td.textContent));
    console.log(lemakValues);
    let proteinValues = Array.from(document.querySelectorAll('#bobot tbody tr td:nth-child(5)')).map(td => parseFloat(td.textContent));
    console.log(proteinValues);
    let seratValues = Array.from(document.querySelectorAll('#bobot tbody tr td:nth-child(6)')).map(td => parseFloat(td.textContent));
    console.log(seratValues);

    let panjang = karbohidratValues.length;
    console.log('p =' + panjang);

    // Menghitung nilai minimal dan maksimal
    let minKarbohidrat = Math.min(...karbohidratValues);
    console.log(minKarbohidrat);
    let maxKarbohidrat = Math.max(...karbohidratValues);
    console.log(maxKarbohidrat);
    let minLemak = Math.min(...lemakValues);
    console.log(minLemak);
    let maxLemak = Math.max(...lemakValues);
    console.log(maxLemak);
    let minProtein = Math.min(...proteinValues);
    console.log(minProtein);
    let maxProtein = Math.max(...proteinValues);
    console.log(maxProtein);
    let minSerat = Math.min(...seratValues);
    console.log(minSerat);
    let maxSerat = Math.max(...seratValues);
    console.log(maxSerat);

    // Menampilkan nilai minimal dan maksimal pada tabel
    document.getElementById('min-karbohidrat').textContent = minKarbohidrat;
    document.getElementById('max-karbohidrat').textContent = maxKarbohidrat;
    document.getElementById('min-lemak').textContent = minLemak;
    document.getElementById('max-lemak').textContent = maxLemak;
    document.getElementById('min-protein').textContent = minProtein;
    document.getElementById('max-protein').textContent = maxProtein;
    document.getElementById('min-serat').textContent = minSerat;
    document.getElementById('max-serat').textContent = maxSerat;

    // Menghitung nilai C1, C2, C3, dan C4 untuk setiap baris
    for (let i = 0; i < panjang; i++) {
        let c1 = karbohidratValues[i] / maxKarbohidrat;
        let c2 = minLemak / lemakValues[i];
        let c3 = proteinValues[i] / maxProtein;
        let c4 = seratValues[i] / maxSerat;

        // Menampilkan nilai C1, C2, C3, dan C4 pada tabel
        document.querySelectorAll('#normalisasi tbody tr')[i].querySelectorAll('td:nth-child(n+3):nth-child(-n+6)').forEach((td, index) => {
            td.textContent = index === 0 ? c1.toFixed(2) : index === 1 ? c2.toFixed(2) : index === 2 ? c3.toFixed(2) : c4.toFixed(2);
        });
    }

    // Membuat array untuk menyimpan nilai dan indeks asli
    let nilaiDanIndeks = [];

    // Mengisi array nilaiDanIndeks dengan nilai dan indeks asli
    let rows = document.querySelectorAll('#bobot tbody tr');
    rows.forEach(row => {
        let alternatif = row.querySelector('td:nth-child(2)').textContent.trim();
        let i = row.rowIndex - 1; // index dimulai dari 0
        let v1 = karbohidratValues[i] / maxKarbohidrat * 30 / 100;
        let v2 = minLemak / lemakValues[i] * 25 / 100;
        let v3 = proteinValues[i] / maxProtein * 25 / 100;
        let v4 = seratValues[i] / maxSerat * 20 / 100;
        let hasil = v1 + v2 + v3 + v4;

        // Menambahkan objek dengan nilai dan indeks asli ke dalam array
        nilaiDanIndeks.push({ menu: alternatif, nilai: hasil, indeks: i });
    });
    const sebelum = nilaiDanIndeks;
    // Mengurutkan array nilaiDanIndeks berdasarkan nilai
    let ranking = nilaiDanIndeks.sort((a, b) => b.nilai - a.nilai);
    
    // Mengupdate peringkat berdasarkan posisi nilai dalam array yang telah diurutkan
    for (let i = 0; i < panjang; i++) {
        // Mengambil indeks asli dari array yang telah diurutkan
        let indeksAsli = sebelum[i].indeks;
        let alternatif = sebelum[i].menu;
        let peringkat = ranking[i].indeks;
        // Mengambil nilai v1, v2, v3, dan v4 dari indeks asli
        let v1 = karbohidratValues[indeksAsli] / maxKarbohidrat * 30 / 100;
        let v2 = minLemak / lemakValues[indeksAsli] * 25 / 100;
        let v3 = proteinValues[indeksAsli] / maxProtein * 25 / 100;
        let v4 = seratValues[indeksAsli] / maxSerat * 20 / 100;
        let hasil = v1 + v2 + v3 + v4;

        // Menampilkan nilai v1, v2, v3, dan v4, serta peringkat pada tabel ranking
        document.querySelectorAll('#ranking tbody tr')[i].querySelectorAll('td:nth-child(n+2):nth-child(-n+8)').forEach((td, index) => {
            td.textContent = index === 0 ? alternatif : index === 1 ? v1.toFixed(2) : index === 2 ? v2.toFixed(2) : index === 3 ? v3.toFixed(2) : index === 4 ? v4.toFixed(2) : index === 5 ? hasil.toFixed(2) : (i + 1).toFixed(0);
        });
    }
});
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
    // Mendapatkan semua elemen dengan id "nilai"
    let nilaiElements = document.querySelectorAll('#nilai');

    // Mengubah nilai dalam elemen dengan id "nilai"
    nilaiElements.forEach(element => {
        // Mengambil teks konten dari elemen
        let nilaiText = element.textContent;
        
        // Mengganti titik menjadi koma dalam teks konten
        let nilaiTextKoma = nilaiText.replace(/\./g, ',');

        // Mengatur kembali teks konten elemen dengan nilai yang telah diubah
        element.textContent = nilaiTextKoma;
    });
});

</script>