<!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>
