@extends('layouts.client')
@section('title', 'Dashboard')
@section('content')
<h2>Home</h2>

    <!-- <h5 class="mt-4">NUTRITION FOR YOU</h5> -->
    <div class="row mt-3 align-items-center">
    @foreach($enrolledCourses as $course)
    <div class="col-md-5">
        <div class="position-relative"> <!-- ✅ Needed for stretched-link -->
            <a href="{{ route('client.course.nutrition', $course->course_id) }}" class="stretched-link">
                <img src="{{ asset('front_assets/img/nutrition.png') }}" class="img-fluid nurition-img" alt="Nutrition">
            </a>
        </div>
        <p>Your goal is <strong>Maintenance</strong> 
            <a class="readmore" href="{{ route('client.course.nutrition', $course->course_id) }}">Read more &gt;</a>
        </p>
    </div>
    <div class="col-md-2">
        <div class="nutrition-info__graphic position-relative mb-2 mx-auto" style="width: 150px; height: 150px;"></div>
    </div>
@endforeach

      <div class="col-md-5">
            <div class="text-center w-100">
            <table class="table table-borderless align-middle mb-0">
            <tbody>
                <tr>
                <td class="text-success">●</td>
                <td>Protein</td>
                <td>20 <small>%</small></td>
                <td>85 <small>g</small></td>
                </tr>
                <tr>
                <td class="text-secondary">●</td>
                <td>Fats</td>
                <td>31 <small>%</small></td>
                <td>56 <small>g</small></td>
                </tr>
                <tr>
                <td class="text-dark">●</td>
                <td>Carbohydrates</td>
                <td>49 <small>%</small></td>
                <td>200 <small>g</small></td>
                </tr>
            </tbody>
            </table>

            </div>
        </div>
    </div>

    <h5 class="mt-5">FITNESS</h5>
    @if (session('success'))
    <div class="alert alert-success alert-dismissible fade show col-xl-6" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif
   <div class="row ">
    @if($enrolledCourses->isEmpty())
    <div class="col-md-12 text-center">
        <p class="text-muted">You are not enrolled in any of courses yet.</p>
    </div>
    @endif
    @foreach($enrolledCourses as $course)
    <div class="col-md-4 course-card">
        <div class="position-relative">
            <a href="{{ route('client.course.workout', $course->course_id) }}" class="stretched-link">
            <img src="{{ asset('storage/'.$course->course->image_url) }}" class="img-fluid mr-course-img">
            </a>
            <div class="course-status-row">
            <div class="mt-2">
            <form method="POST" action="{{ route('course.freeze', $course->id) }}">
                @csrf
                <button type="submit" class="btn btn-{{ $course->freeze_status ? 'secondary' : 'warning' }} w-100">
                    {{ $course->freeze_status ? 'Unfreeze' : 'Freeze' }}
                </button>
            </form>
        </div>
                <div><span class="w-100 course-days"> Left until the end of the course <strong> {{ $course->days_left }} days</strong></span></div>
            </div>
        </div>
        </div>
       @endforeach 
    <!-- <div class="col-md-4 course-card">
    <div class="position-relative">
      <img src="{{asset('front_assets/img/dummy-course.png')}}" class="img-fluid mr-course-img">
      <div class="course-status-row">
  <div><button class="btn w-100">Freeze</button></div>
  <div><span class="w-100 course-days"> Left until the end of the course <strong> 28 days</strong></span></div>
</div>
      </div>
    </div>
     -->
  

    </div>
    @push('scripts')
    <script>
  const proteinGrams = {{ $protein }};
  const fatGrams = {{ $fat }};
  const carbGrams = {{ $carbs }};
  const totalCalories = {{ $calories }};
</script>

   <script>
  const macros = (() => {
    const proteinCals = proteinGrams * 4;
    const fatCals = fatGrams * 9;
    const carbCals = carbGrams * 4;

    const totalMacroCals = proteinCals + fatCals + carbCals;

    return [
      {
        label: 'Proteins',
        color: '#21FB2A',
        value: Math.round((proteinCals / totalMacroCals) * 100),
      },
      {
        label: 'Fats',
        color: '#EDEDED',
        value: Math.round((fatCals / totalMacroCals) * 100),
      },
      {
        label: 'Carbohydrates',
        color: '#A6A6A6',
        value: Math.round((carbCals / totalMacroCals) * 100),
      }
    ];
  })();

  function renderDonutChart(containerSelector, data, calories) {
    const r = 15.9155;
    const strokeWidth = 4.5;
    let offset = 25;
    const donutSVG = `
      <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
        <circle cx="21" cy="21" r="${r}" fill="#fff" class="donut-hole"></circle>
        <circle cx="21" cy="21" r="${r}" fill="transparent" stroke="#d2d3d4" stroke-width="4" class="donut-ring"></circle>
        ${data.map((item, i) => {
          const dash = `${item.value} ${100 - item.value}`;
          const segment = `<circle cx="21" cy="21" r="${r}" fill="transparent" stroke="${item.color}" stroke-width="${strokeWidth}" stroke-dasharray="${dash}" stroke-dashoffset="${offset}" class="donut-segment"></circle>`;
          offset += (item.value / 100) * 100;
          return segment;
        }).join('')}
      </svg>
      <div class="nutrition-info__calories position-absolute top-50 start-50 translate-middle text-center">
        <span class="calories d-block fw-bold">${calories}</span>
        <span class="per-day small text-muted">kcal/day</span>
      </div>
    `;

    document.querySelector(containerSelector).innerHTML = donutSVG;
  }

  renderDonutChart('.nutrition-info__graphic', macros, totalCalories);
</script>

    @endpush
    @endsection