@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</span></button>
                        @if ($authorize->edit == '1')
                            {{-- check authorize add --}}
                            <a id="editButton" class="btn btn-warning mb-0">
                                <span class="fa fa-edit me-1"></span>Edit</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form id="my-form">
        @csrf
        <div class="container-fluid py-4">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <input type="hidden" value="msjklinik" name="password">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="example-text-input" class="form-control-label">Tanggal Pemeriksaan<span
                                            class="text-danger">*</span></label>
                                    <input class="form-control" value="{{ $bmi->tgl }}" type=date id="tgl"
                                        name="tgl" readonly>
                                </div>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="example-text-input" class="form-control-label">Nama<span
                                        class="text-danger">*</span></label>
                                <div class="col-sm-20">
                                    <input class="form-control" value="{{ $bmi->nama }}" id="nama" name="nama"
                                        readonly>
                                </div>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="example-text-input" class="form-control-label">Tanggal Lahir<span
                                        class="text-danger">*</span></label>
                                <div class="col-sm-20">
                                    <input class="form-control" value="{{ $bmi->tgl_lahir }}" id="tgl_lahir"
                                        name="tgl_lahir" readonly>
                                </div>
                            </div>
                            <input type="hidden" class="form-control" id="nik" name="nik"
                                value="{{ $bmi->nik }}" placeholder="Nama Karyawan" aria-describedby="karyawan-listdo"
                                readonly>
                            <div class="col-md-12 mb-3">
                                <label for="example-text-input" class="form-control-label">Umur<span
                                        class="text-danger">*</span></label>
                                <div class="col-sm-20">
                                    <input class="form-control" value="{{ $bmi->umur }}" id="umur" name="umur"
                                        readonly>
                                </div>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="example-text-input" class="form-control-label">Jenis Kelamin<span
                                        class="text-danger">*</span></label>
                                <div class="col-sm-20">
                                    <input class="form-control" value="{{ $bmi->gender }}" id="gender" name="gender"
                                        readonly>
                                </div>
                            </div>
                            {{--  <div class="col-md-12 mb-3">
                                <label for="example-text-input" class="form-control-label">Departemen<span
                                        class="text-danger">*</span></label>
                                <div class="col-sm-20">
                                    <input class="form-control" value="{{ $bmi->dept }}" readonly>
                                </div>
                            </div> --}}
                            <div class="col-md-12 mb-3">
                                <label for="example-text-input" class="form-control-label">Tinggi Badan (TB)<span
                                        class="text-danger">*</span></label>
                                <div class="col-sm-12">
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="tb" name="tb"
                                            value="{{ $bmi->tb }}" step="0.01" min="0" readonly>
                                        <span class="input-group-text">cm</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="example-text-input" class="form-control-label">Berat Badan (BB)<span
                                        class="text-danger">*</span></label>
                                <div class="col-sm-12">
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="bb" name="bb"
                                            value="{{ $bmi->bb }}" step="0.01" min="0" readonly>
                                        <span class="input-group-text">kg</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="example-text-input" class="form-control-label">Lingkar Perut<span
                                        class="text-danger">*</span></label>
                                <div class="col-sm-12">
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="lp" name="lp"
                                            value="{{ $bmi->lp }}" step="0.01" min="0" readonly>
                                        <span class="input-group-text">cm</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="col-sm-4 col-form-label">Nilai BMI<span class="text-danger">*</span></label>
                                <div class="col-sm-20">
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="bmi" name="bmi"
                                            step="0.01" value="{{ $bmi->bmi }}" required readonly>
                                        <span class="input-group-text">kg/m²</span>
                                    </div>
                                    <div id="bmi-kategori" class="mt-2 text-white rounded px-3 py-2"
                                        style="display: none;"></div>
                                </div>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="col-sm-4 col-form-label">Catatan</label>
                                <div class="col-sm-20">
                                    <textarea class="form-control" name="note" readonly>{{ $bmi->note }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <label class="form-label">Kategori BMI (<em>Body Mass Index</em>)</label>
                            <p class="mb-3">
                                Setelah mendapatkan nilai BMI, klasifikasi status gizi dapat dilihat pada kategori berikut:
                            </p>

                            <div class="mb-2 rounded text-white px-3 py-2" style="background-color: #0874dc;">
                                <strong>&lt; 18.5</strong>: Underweight
                            </div>
                            <div class="mb-2 rounded text-white px-3 py-2" style="background-color: #3c9c34;">
                                <strong>18.5 – 24.9</strong>: Normal Weight
                            </div>
                            <div class="mb-2 rounded text-white px-3 py-2" style="background-color: #ecac04;">
                                <strong>25 – 29.9</strong>: Overweight
                            </div>
                            <div class="mb-2 rounded text-white px-3 py-2" style="background-color: #f07404;">
                                <strong>30 – 34.9</strong>: Obesity Class I
                            </div>
                            <div class="mb-2 rounded text-white px-3 py-2" style="background-color: #d8043c;">
                                <strong>35 – 39.9</strong>: Obesity Class II
                            </div>
                            <div class="rounded text-white px-3 py-2" style="background-color: #381414;">
                                <strong>&ge; 40</strong>: Obesity Class III
                            </div>
                            <div class="text-end mt-2">
                                <small class="text-muted fst-italic">
                                    <b>Sumber: </b>
                                    <a href="https://www.truthaboutweight.global/global/en/managing-your-weight/whats-your-body-mass-index-bmi.html"
                                        target="_blank">
                                        www.truthaboutweight.global
                                    </a>
                                </small>
                            </div>
                        </div>
                    </div>

                    <!-- History -->
                    <div id="riwayat-bmi-container" class="mt-3"></div>
                </div>
            </div>
        </div>
    </form>
@endsection
@push('js')
    <script src="assets/js/dataTables.js"></script>
    <script>
        $('#myTable').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Halaman _PAGE_ dari _PAGES_",
                "infoEmpty": "Tidak ada data",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            responsive: true,
        });

        function showKategoriBMI() {
            const bmiVal = parseFloat($('#bmi').val());

            if (!isNaN(bmiVal) && bmiVal > 0) {
                let kategori = '';
                let warna = '';

                if (bmiVal < 18.5) {
                    kategori = 'Underweight';
                    warna = '#0874dc';
                } else if (bmiVal < 25) {
                    kategori = 'Normal Weight';
                    warna = '#3c9c34';
                } else if (bmiVal < 30) {
                    kategori = 'Overweight';
                    warna = '#ecac04';
                } else if (bmiVal < 35) {
                    kategori = 'Obesity Class I';
                    warna = '#f07404';
                } else if (bmiVal < 40) {
                    kategori = 'Obesity Class II';
                    warna = '#d8043c';
                } else {
                    kategori = 'Obesity Class III';
                    warna = '#381414';
                }

                $('#bmi-kategori')
                    .text(kategori)
                    .css({
                        'background-color': warna,
                        'color': '#fff',
                        'display': 'block'
                    });
            } else {
                $('#bmi-kategori').hide();
            }
        }


        function tampilkanRiwayatBmi(nik) {
            $.ajax({
                url: `/bmi/last/${nik}`,
                method: 'GET',
                success: function(data) {
                    if (data !== null && data.tb !== undefined) {
                        const html = `
                <div class="card border-info mt-3">
                    <div class="card-body">
                        <h5 class="mb-3 text-info">Riwayat Pemeriksaan BMI Terakhir</h5>
                        <ul class="mb-0">
                            <li><strong>Tanggal Pemeriksaan:</strong> ${data.tgl}</li>
                            <li><strong>Berat Badan:</strong> ${data.bb} kg</li>
                            <li><strong>Tinggi Badan:</strong> ${data.tb} cm</li>
                            <li><strong>Lingkar Perut:</strong> ${data.lp} cm</li>
                            <li><strong>BMI:</strong> ${parseFloat(data.bmi).toFixed(1)} kg/m²</li>
                            ${data.note ? `<li><strong>Catatan:</strong> ${data.note}</li>` : ''}
                        </ul>
                    </div>
                </div>`;
                        $('#riwayat-bmi-container').html(html);
                    } else {
                        $('#tb').val(0);
                        $('#bmi-kategori').hide();
                        $('#riwayat-bmi-container').html(`
                            <div class="card mt-3">
                                <div class="card-body">
                                    <h5 class="mb-0 text-info">Belum ada riwayat BMI</h5>
                                </div>
                            </div>
                        `);
                    }
                },
                error: function() {
                    console.error('Gagal mengambil data BMI terakhir');
                    $('#riwayat-bmi-container').html('');
                }
            });
        }

        $(document).ready(function() {
            showKategoriBMI();

            const nik = $('#nik').val();
            if (nik) {
                tampilkanRiwayatBmi(nik);
            }

        });

        document.addEventListener('DOMContentLoaded', function() {
            var encryptedId = "{{ $encryptedId }}";
            var status = "{{ $bmi->status }}"
            if (status == 'E') {
                document.getElementById('editButton').style.display = 'inline-block';
                var editButton = document.getElementById('editButton');
                editButton.href = "{{ url($url_menu . '/edit' . '/') }}/" + encryptedId;
            }
        });
    </script>
@endpush