Debian
142 lines
6.9 KiB
PHP
142 lines
6.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<link rel="shortcut icon" href="{{ asset('/asset/svg/logo.svg') }}" />
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
|
|
<link href="{{ asset('/asset/main.css') }}" rel="stylesheet" />
|
|
<link href="{{ asset('/asset/css/dashboard.css') }}" rel="stylesheet" />
|
|
<link href="{{ asset('/assets/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
|
|
|
<title>Dashboard</title>
|
|
</head>
|
|
<body>
|
|
<div class="container-flex">
|
|
@include('client-sidebar')
|
|
<div class="content">
|
|
<h2 class="mt-5 mb-5 fw-bold">
|
|
<center>Customer Dashboard</center>
|
|
</h2>
|
|
|
|
<div class="row pe-5 ps-5 pb-4">
|
|
|
|
{{-- KOLOM 1 --}}
|
|
<div class="col-10 ms-5">
|
|
{{-- PROFILE & RECOMMENDATIONS --}}
|
|
<div class="row boxshadow mb-4">
|
|
{{-- PROFILE --}}
|
|
<div class="col me-3">
|
|
<section class="customer-profile">
|
|
<div class="profile-image"></div>
|
|
<h2 class="customer-name">{{auth()->user()->name}}</h2>
|
|
<p class="customer-email">{{auth()->user()->email}}</p>
|
|
|
|
<div class="customer-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-label">Weight</span>
|
|
<div class="stat-value">
|
|
<span class="stat-number">{{$healthData->weight ?? '0'}}</span>
|
|
<span class="stat-unit">kg</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-item">
|
|
<span class="stat-label">Height</span>
|
|
<div class="stat-value">
|
|
<span class="stat-number">{{$healthData->height ?? '0'}}</span>
|
|
<span class="stat-unit">cm</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="obesity-status">
|
|
<span class="obesity-label">Obesity Status</span>
|
|
<span class="obesity-value">{{ $healthData->obesity_status ?? "0"}}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
{{-- RECOMMENDATIONS --}}
|
|
<div class="col">
|
|
<h2 class="customer-name fs-5 ">Recommendations</h2>
|
|
<section class="calories-container mt-3">
|
|
<div class="icon-wrapper" id="calories" data-toggle="tooltip" data-placement="top" title="Kalori yang harus dibakar">
|
|
<img src="{{asset('/asset/svg/flame.svg')}}" alt="Calories icon" class="calories-icon" />
|
|
</div>
|
|
<div class="calories-info">
|
|
<p class="calories-label pt-2">Calories
|
|
</p>
|
|
<p class="calories-value">{{ $healthData->calorie_recommendation ?? '0' }} cal</p>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section class="calories-container mt-2">
|
|
<div class="icon-wrapper" id="distance" data-toggle="tooltip" data-placement="top" title="Jarak lari yang harus ditempuh">
|
|
<img src="{{asset('/asset/svg/shoes.svg')}}" alt="Calories icon" class="calories-icon" />
|
|
</div>
|
|
<div class="calories-info">
|
|
<p class="calories-label pt-2">Running Distance</p>
|
|
<p class="calories-value">{{ $totalDistance ?? '0' }} meters</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="calories-container mt-2">
|
|
<div class="icon-wrapper" id="sleep" data-toggle="tooltip" data-placement="top" title="Waktu tidur yang disarankan">
|
|
<img src="{{asset('/asset/svg/moon.svg')}}" alt="Calories icon" class="calories-icon" />
|
|
</div>
|
|
<div class="calories-info">
|
|
<p class="calories-label pt-2">Sleep Time</p>
|
|
<p class="calories-value">{{ $healthData->sleeptime ?? '0' }} hours/day</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{{-- ACTIVITY HISTORY --}}
|
|
<div class="row">
|
|
<section class="activity-log">
|
|
<header class="activity-header">
|
|
<div class="header-date">Date</div>
|
|
<div class="header-activity">Activity</div>
|
|
<div class="header-distance">Distance</div>
|
|
<div class="header-duration">Duration</div>
|
|
</header>
|
|
|
|
@foreach ($activities as $activity)
|
|
<article class="activity-item mb-3">
|
|
<div class="item-date">{{ $activity['date'] }}</div>
|
|
<div class="item-activity">{{ $activity['type'] }}</div>
|
|
<div class="item-distance">{{ $activity['distance'] }} m</div>
|
|
<div class="item-duration">{{ $activity['duration'] }} seconds</div>
|
|
</article>
|
|
@endforeach
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(function () {
|
|
$('[data-toggle="tooltip"]').tooltip()
|
|
})
|
|
</script>
|
|
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
|
|
|
|
{{-- <script>
|
|
// Ambil nilai obesityPrediction dari PHP dan pasang ke elemen HTML yang sesuai
|
|
var obesityPrediction = "{{ $obesityPrediction }}";
|
|
document.getElementById('obesityValue').innerText = obesityPrediction;
|
|
</script> --}}
|
|
</body>
|
|
</html>
|