@extends('layouts.mobile')

@section('content')
    <!-- DASHBOARD -->
    <main class="p-3 view active" id="view-dashboard">
        @forelse ($table_detail as $detail)
            <!-- Quick stats -->
            <div class="row" style="gap: unset;">
                <div class="col-12 mb-3">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">BMI Terakhir</p>
                                        <h5 class="font-weight-bolder">
                                            {{ $detail->bmi }}
                                        </h5>
                                        @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
                                        <p class="mb-0">
                                            <span class="text-sm font-weight-bolder"
                                                style="color:{{ $v_wrn }}">{{ $v_bmi }}</span>
                                        </p>
                                        {{-- <span class="row text-center">
                                            <div class="mt-2 text-white rounded"
                                                style="display: block; background-color: {{ $v_wrn }}">
                                                {{ $v_bmi }}</div>
                                        </span> --}}
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                        <i class="ni ni-atom text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 mb-3">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-12">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">Berat Badan</p>
                                        <h5 class="font-weight-bolder">
                                            {{ $detail->bb }} Kg
                                        </h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-12">
                                    <div class="numbers">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">Tinggi Badan</p>
                                        <h5 class="font-weight-bolder">
                                            {{ $detail->tb }} Cm
                                        </h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </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
        <div class="card p-3 mb-3">
            <h6 class="section mb-2">Ranking Minggu Ini</h6>
            @php
                // Ambil aman (null jika tidak ada)
                $p1 = $byStar->get(0);
                $p2 = $byStar->get(1);
                $p3 = $byStar->get(2);
            @endphp
            @if ($byStar->isNotEmpty())
                <div class="ranking-tabs">
                    <button class="active" data-tab="points">Star⭐</button>
                    <button data-tab="distance">Jarak (km)</button>
                </div>
                <div id="ranking-points" class="ranking-tab active">
                    <div class="podium">
                        @if ($p1)
                            <div class="place first">
                                <div class="bar">
                                    <img src="{{ asset('/storage' . '/' . $byStar[0]->image) }}">
                                    <div class="score">{{ $byStar[0]->star }} ⭐</div>
                                    <div class="rank">1</div>
                                </div>
                                <div>{{ $byStar[0]->firstname }}</div>
                            </div>
                        @endif
                        @if ($p2)
                            <div class="place second">
                                <div class="bar">
                                    <img src="{{ asset('/storage' . '/' . $byStar[1]->image) }}">
                                    <div class="score">{{ $byStar[1]->star }} ⭐</div>
                                    <div class="rank">2</div>
                                </div>
                                <div>{{ $byStar[1]->firstname }}</div>
                            </div>
                        @endif
                        @if ($p3)
                            <div class="place third">
                                <div class="bar">
                                    <img src="{{ asset('/storage' . '/' . $byStar[2]->image) }}">
                                    <div class="score">{{ $byStar[2]->star }} ⭐</div>
                                    <div class="rank">3</div>
                                </div>
                                <div>{{ $byStar[2]->firstname }}</div>
                            </div>
                        @endif
                    </div>
                    <div class="card ranking-list">
                        @forelse ($byStar as $star)
                            @php
                                $vcount = $loop->iteration;
                            @endphp
                            @if ($star->firstname == session('user')->firstname)
                                <div class="row-rank me">
                                    <div>{{ $vcount . '. ' . $star->firstname }} (You)</div>
                                    <div>{{ $star->star }} ⭐</div>
                                </div>
                            @endif
                        @empty
                            <div class="text-center">
                                <h5 class="card-title text-success text-gradient">Belum Ada Ranking</h5>
                                <p class="text-muted">Jadilah Yang Pertama!!!</p>
                            </div>
                        @endforelse
                        <!-- Tambahan tombol lihat semua (membuka modal) -->
                        <button class="btn btn-see-all mt-3 mx-5" id="btnSeeAllPoints" aria-haspopup="dialog"
                            aria-controls="modalPoints">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" aria-hidden="true">
                                <path d="M4 21v-7" />
                                <path d="M4 10V3" />
                                <path d="M12 21v-9" />
                                <path d="M12 8V3" />
                                <path d="M20 21v-5" />
                                <path d="M20 12V3" />
                            </svg>
                            Semua Ranking Star⭐
                        </button>
                    </div>
                </div>
                <div id="ranking-distance" class="ranking-tab" style="display:none">
                    <div class="podium">
                        @if ($p1)
                            <div class="place first">
                                <div class="bar">
                                    <img src="{{ asset('/storage' . '/' . $byJarak[0]->image) }}">
                                    <div class="score">{{ $byJarak[0]->jarak }} km</div>
                                    <div class="rank">1</div>
                                </div>
                                <div>{{ $byJarak[0]->firstname }}</div>
                            </div>
                        @endif
                        @if ($p2)
                            <div class="place second">
                                <div class="bar">
                                    <img src="{{ asset('/storage' . '/' . $byJarak[1]->image) }}">
                                    <div class="score">{{ $byJarak[1]->jarak }} km</div>
                                    <div class="rank">2</div>
                                </div>
                                <div>{{ $byJarak[1]->firstname }}</div>
                            </div>
                        @endif
                        @if ($p3)
                            <div class="place third">
                                <div class="bar">
                                    <img src="{{ asset('/storage' . '/' . $byJarak[2]->image) }}">
                                    <div class="score">{{ $byJarak[2]->jarak }} km</div>
                                    <div class="rank">3</div>
                                </div>
                                <div>{{ $byJarak[2]->firstname }}</div>
                            </div>
                        @endif
                    </div>
                    <div class="card ranking-list">
                        @forelse ($byJarak as $jarak)
                            @php
                                $vcount = $loop->iteration;
                            @endphp
                            @if ($jarak->firstname == session('user')->firstname)
                                <div class="row-rank me">
                                    <div>{{ $vcount . '. ' . $jarak->firstname }} (You)</div>
                                    <div>{{ $jarak->jarak }} km</div>
                                </div>
                            @endif
                        @empty
                            <div class="text-center">
                                <h5 class="card-title text-success text-gradient">Belum Ada Ranking</h5>
                                <p class="text-muted">Jadilah Yang Pertama!!!</p>
                            </div>
                        @endforelse
                        <!-- Tambahan tombol lihat semua (membuka modal) -->
                        <button class="btn btn-see-all mt-3 mx-5" id="btnSeeAllDistance" aria-haspopup="dialog"
                            aria-controls="modalDistance">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" aria-hidden="true">
                                <path d="M4 21v-7" />
                                <path d="M4 10V3" />
                                <path d="M12 21v-9" />
                                <path d="M12 8V3" />
                                <path d="M20 21v-5" />
                                <path d="M20 12V3" />
                            </svg>
                            Semua Ranking Jarak(km)
                        </button>
                    </div>
                </div>
            @else
                <div class="text-center">
                    <h5 class="card-title text-success text-gradient">Belum Ada Ranking</h5>
                    <p class="text-muted">Jadilah Yang Pertama!!!</p>
                </div>
            @endif
        </div>
        <div class="card p-3 mb-3">
            <h6 class="section mb-2">Ringkasan Aktifitas</h6>
            <span class="badge" style="position: absolute;top: 10px;right: 20px;">
                <button id="" class="theme-toggle" aria-label="" title="Star">
                    @forelse ($tot_star as $star)
                        <span class="icon-wrap" aria-hidden="true" style="font-size: small;">
                            ⭐<span class="badge">{{ $star->total_star }}</span>
                        </span>
                    @empty
                    @endforelse
                </button>
            </span>
            <div class="accordion-1">
                <div class="container px-0">
                    @forelse ($list_aktifitas as $aktifitas)
                        @php
                            $vcount = $loop->iteration;
                        @endphp
                        <div class="row">
                            <div class="col-12 mx-auto">
                                <div class="accordion" id="accordionRental{{ $vcount }}">
                                    <div class="accordion-item mb-3">
                                        <h5 class="accordion-header" id="heading{{ $vcount }}">
                                            <button class="accordion-button border-bottom font-weight-bold collapsed"
                                                type="button" data-bs-toggle="collapse"
                                                data-bs-target="#collapseOne{{ $vcount }}" aria-expanded="false"
                                                aria-controls="collapseOne{{ $vcount }}">
                                                {{ $aktifitas->bulan_tahun }} - ({{ $aktifitas->total_aktivitas }}
                                                Activity)
                                                <i class="collapse-close fa fa-plus text-xs pt-1 position-absolute end-0 me-3"
                                                    aria-hidden="true"></i>
                                                <i class="collapse-open fa fa-minus text-xs pt-1 position-absolute end-0 me-3"
                                                    aria-hidden="true"></i>
                                            </button>
                                        </h5>
                                        <div id="collapseOne{{ $vcount }}" class="accordion-collapse collapse"
                                            aria-labelledby="heading{{ $vcount }}"
                                            data-bs-parent="#accordionRental{{ $vcount }}" style="">
                                            <blockquote class="blockquote text-white mb-0" style="font-size: small;">
                                                <div class="text-dark ms-3"><strong>Total Kalori : </strong>
                                                    {{ $aktifitas->total_kalori }}
                                                </div>
                                                <div class="text-dark ms-3"><strong>Total Jarak Jalan : </strong>
                                                    {{ $aktifitas->total_jarak }}
                                                </div>
                                                <div class="text-dark ms-3"><strong>Total Waktu : </strong>
                                                    {{ $aktifitas->total_waktu }}
                                                </div>
                                                <div class="text-dark ms-3"><strong>Total Aktifitas : </strong>
                                                    {{ $aktifitas->total_aktivitas }}
                                                </div>
                                            </blockquote>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center">
                            <h5 class="card-title text-success text-gradient">Belum Ada Aktifitas</h5>
                            <p class="text-muted">Mulai Tambah Aktifitas Anda</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
        <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>
        <!-- MODALS: Separate for Points and Distance -->
        <div class="modal-backdrop" id="modalBackdrop"></div>
        <!-- MODAL: POINTS -->
        <div class="modal-sheet" id="modalPoints" role="dialog" aria-modal="true" aria-labelledby="modalPointsTitle"
            aria-hidden="true">
            <div class="modal-header">
                <strong id="modalPointsTitle">Ranking Star⭐</strong>
                <button id="btnClosePoints" class="btn btn-outline" style="padding:.35rem .6rem">Tutup</button>
            </div>
            <div class="modal-body">
                <div class="card ranking-list">
                    @forelse ($byStar as $stars)
                        @php
                            $vcount = $loop->iteration;
                        @endphp
                        <div class="row-rank {{ $stars->firstname == session('user')->firstname ? 'me' : '' }}">
                            <div>{{ $vcount . '. ' . $stars->firstname }}
                                {{ $stars->firstname == session('user')->firstname ? '(You)' : '' }}</div>
                            <div>{{ $stars->star }} ⭐</div>
                        </div>
                    @empty
                        <div class="text-center">
                            <h5 class="card-title text-success text-gradient">Belum Ada Ranking</h5>
                            <p class="text-muted">Jadilah Yang Pertama!!!</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- MODAL: DISTANCE -->
        <div class="modal-sheet" id="modalDistance" role="dialog" aria-modal="true"
            aria-labelledby="modalDistanceTitle" aria-hidden="true">
            <div class="modal-header">
                <strong id="modalDistanceTitle">Ranking Jarak</strong>
                <button id="btnCloseDistance" class="btn btn-outline" style="padding:.35rem .6rem">Tutup</button>
            </div>
            <div class="modal-body">
                <div class="card ranking-list">
                    @forelse ($byJarak as $jarakk)
                        @php
                            $vcount = $loop->iteration;
                        @endphp
                        <div class="row-rank {{ $jarakk->firstname == session('user')->firstname ? 'me' : '' }}">
                            <div>{{ $vcount . '. ' . $jarakk->firstname }}
                                {{ $jarakk->firstname == session('user')->firstname ? '(You)' : '' }}</div>
                            <div>{{ $jarakk->jarak }} km</div>
                        </div>
                    @empty
                        <div class="text-center">
                            <h5 class="card-title text-success text-gradient">Belum Ada Ranking</h5>
                            <p class="text-muted">Jadilah Yang Pertama!!!</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

    </main>
@endsection

@push('js')
@endpush
<script>
    // Two-modal helpers
    function openModal(which) {
        const backdrop = document.getElementById('modalBackdrop');
        const mPoints = document.getElementById('modalPoints');
        const mDist = document.getElementById('modalDistance');
        if (!backdrop || !mPoints || !mDist) {
            console.warn('Modal elements missing');
            return;
        }
        backdrop.style.display = 'block';
        if (which === 'points') {
            mPoints.style.transform = 'translate(-50%,0)';
            mDist.style.transform = 'translate(-50%,100%)';
        } else {
            mDist.style.transform = 'translate(-50%,0)';
            mPoints.style.transform = 'translate(-50%,100%)';
        }
        document.body.style.overflow = 'hidden';
    }

    function closeModal() {
        const backdrop = document.getElementById('modalBackdrop');
        const mPoints = document.getElementById('modalPoints');
        const mDist = document.getElementById('modalDistance');
        if (!backdrop || !mPoints || !mDist) return;
        backdrop.style.display = 'none';
        mPoints.style.transform = 'translate(-50%,100%)';
        mDist.style.transform = 'translate(-50%,100%)';
        document.body.style.overflow = 'auto';
    }

    // View switcher + simulate loading
    function switchView(id) {
        showLoading();
        setTimeout(() => {
            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
            const el = document.getElementById(id);
            if (el) el.classList.add('active');
            hideLoading();
        }, 500);
    }

    document.addEventListener('click', (e) => {
        const link = e.target.closest('.nav-link');
        if (link && link.dataset.target) {
            e.preventDefault();
            document.querySelectorAll('.nav-link').forEach(a => a.classList.remove('active'));
            link.classList.add('active');
            switchView(link.dataset.target);
        }
        const tab = e.target.closest('.ranking-tabs button');
        if (tab) {
            document.querySelectorAll('.ranking-tabs button').forEach(b => b.classList.remove('active'));
            tab.classList.add('active');
            const tabId = tab.dataset.tab;
            document.querySelectorAll('.ranking-tab').forEach(t => t.style.display = 'none');
            showLoading();
            setTimeout(() => {
                document.getElementById('ranking-' + tabId).style.display = 'block';
                hideLoading();
            }, 400);
        }

        // open correct modal via two dedicated buttons
        if (e.target.closest('#btnSeeAllPoints')) {
            openModal('points');
        }
        if (e.target.closest('#btnSeeAllDistance')) {
            openModal('distance');
        }

        // close modals
        if (e.target.id === 'btnClosePoints' || e.target.id === 'btnCloseDistance' || e.target.id ===
            'modalBackdrop') {
            closeModal();
        }

    });
</script>