@extends('layouts.mobile')

@section('content')
    <!-- HISTORY -->
    <section class="p-3" id="view-history">
        <div class="card p-3 mb-3 text-center">
            <h6 class="section mb-1">Riwayat Pemeriksaan Klinik</h6>
        </div>
        @forelse ($table_detail as $detail)
            @php
                $vcount = $loop->iteration;
                $primary = $table_primary->field;
            @endphp
            <div class="card p-3 mb-2 d-flex justify-between"
                onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($detail->$primary)) }}'">
                <div class="d-flex">
                    <div class="icon mr-2"><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                            <polyline points="7 10 12 15 17 10" />
                            <line x1="12" y1="15" x2="12" y2="3" />
                        </svg>
                    </div>
                    <div class="row col-12">
                        <div class="mb-1" style="font-size: larger;">
                            <strong>BMI</strong> <span class="badge badge-secondary ms-1"
                                style="position: absolute;top: 20px;font-size: .9rem;">{{ $detail->bmi }}</span>
                        </div>
                        <div class="row">
                            <div class="text-muted col-6">BB • {{ $detail->bb }} kg</div>
                            <div class="text-muted col-6">TB • {{ $detail->tb }} cm</div>
                            <div class="text-muted col-6">LP • {{ $detail->lp }} cm</div>
                        </div>
                    </div>
                    <strong class="text-muted badge"
                        style="position: absolute; right: 15px; top: 17px; ">{{ $detail->id }} -
                        {{ $detail->tgl }}</strong>
                </div>
                @php
                    $v_bmi = '';
                    $v_wrn = '';
                    if ($detail->bmi < 18.5) {
                        $v_bmi = 'Underweight';
                        $v_wrn = '#0874dc;';
                    } elseif ($detail->bmi < 25) {
                        $v_bmi = 'Normal Weight';
                        $v_wrn = '#3c9c34;';
                    } elseif ($detail->bmi < 30) {
                        $v_bmi = 'Overweight';
                        $v_wrn = '#ecac04;';
                    } elseif ($detail->bmi < 35) {
                        $v_bmi = 'Obesity Class I';
                        $v_wrn = '#f07404;';
                    } elseif ($detail->bmi < 40) {
                        $v_bmi = 'Obesity Class II';
                        $v_wrn = '#d8043c;';
                    } else {
                        $v_bmi = 'Obesity Class III';
                        $v_wrn = '#381414;';
                    }

                @endphp
                <div class="d-flex">
                    <div class="icon mr-2"><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <!-- paper -->
                            <path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z" />
                            <path d="M14 2v5h5" />
                            <!-- check -->
                            <path d="M8.5 13.5l2 2 5-5" />
                        </svg>
                    </div>
                    <div class="row col-12">
                        <div class="mb-1" style="font-size: larger;">
                            <label>Catatan : </label>
                            <label><i style="font-weight: 400;">{{ $detail->note }}</i></label>
                        </div>
                    </div>
                </div>
                <span class="row text-center">
                    <div class="mt-2 text-white rounded" style="display: block; background-color: {{ $v_wrn }}">
                        {{ $v_bmi }}</div>
                </span>
            </div>
        @empty
            <div class="card bg-gradient-default mb-2">
                <div class="card-body text-center">
                    <h5 class="card-title text-success text-gradient">Belum Ada Pemeriksaan</h5>
                    <p class="text-muted">Segera melakukan pemeriksaan ke klinik terlebih dulu</p>
                </div>
            </div>
        @endforelse
    </section>
@endsection
@push('js')
@endpush