@extends('layouts.client')
@section('title', 'Courses')
@section('content')
@push('styles')
<style>
    .course-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
  }
  .course-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
  }
  .course-card .overlay-text {
    position: absolute;
    bottom: 65px;
    left: 15px;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    z-index: 2;
  }
  .course-card .course-footer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .course-card .course-footer div {
    flex: 1;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }
  .course-card .btn-green {
    background-color: #1b4079;
    color: #fff;
  }
  .course-card .btn-white {
    background-color: #fff;
    color: #999;
    border: 1px solid #ccc;
  }

  .sidebar-info {
    display: none;
    background: white;
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    border-left: 1px solid #ddd;
    position: relative;
    overflow-y: visible;
  }
  .sidebar-info.show {
    display: block;
    border-left: 1px solid #000;
  }
  .icon-close {
    position: absolute;
    top: 50%;
    left: -16px;
    width: 36px;
    height: 36px;
    background: url('/fitness_laravel/public/front_assets/img/close-circle.svg') center center no-repeat;
    background-size: contain;
    cursor: pointer;
  }

.reset-progress{
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 5px;
}
.reset-progress img{
    width: 18px !important;
    height: 18px !important;
}
@media screen and (max-width: 767px) {
    #workoutsCol {
    padding: 0;
}
.mobile-view{
    flex-direction: column;
}
#sidebarCol {
      display: none !important;
    }
    #mobileModal .modal-content {
      height: 100vh;
      overflow-y: auto;
      border-radius: 0;
    }
}

</style>
@endpush
    
    <div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3 mobile-view">
      <h4><a href="{{route('client.courses')}}" class="text-dark text-decoration-none">← {{$course->title}}</a></h4>
      <button class="btn btn-outline-dark" onclick="toggleSidebar2()">Information about the course</button>
    </div>
    @if(session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
        <button type="button" class="btn-close pull-right" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif
   
    <div class="row g-4" id="mainRow">
      <div id="workoutsCol" class="col-md-12">
      @foreach($workouts->chunk(3) as $chunkIndex => $workoutChunk)
    <div class="row mb-4">
        <h6 class="mb-3 fw-bold">SUNDAY {{ $chunkIndex + 1 }}</h6>

        @foreach($workoutChunk as $workout)
            <div class="col-md-4 workout-col">
                <div class="course-card">
                    <a href="{{ route('client.course.tablecontent', $workout->id) }}" class="text-decoration-none">
                        <img src="{{ asset('storage/' . $workout->workout_image) }}" alt="{{ $workout->workout_title }}">
                    </a>

                    <div class="position-absolute text-white text-center w-100" style="bottom: 70px;background:rgba(31, 30, 30, 0.38);filter: drop-shadow(2px 4px 6px black);padding:10px">
                        <strong>{{ $workout->workout_title }}</strong>
                        <div>{{ $workout->course_description }}</div>
                    </div>

                    <div class="course-footer d-flex justify-content-between align-items-center">
                        <div class="btn-green reset-progress" data-workout-id="{{ $workout->id }}" style="cursor:pointer;"><img src="{{asset('front_assets/img/refresh.png')}}" width="20" height="20" alt=""> Reset</div>
                        <div class="btn-white" id="progress-percent" data-workout-id="{{ $workout->id }}">Success 0%</div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endforeach

      </div>
      <div id="sidebarColInfo" class="col-md-4 d-none">
        <div class="sidebar-info show">
          <div class="text-end mb-3"><div class="icon-close" onclick="toggleSidebar2()"></div></div>
          <div class="mb-3">
            <small class="text-muted">Objective of the course</small>
            <div><strong>{{ $courseInfo->places_of_classes }}</strong></div>
          </div>
          <div class="mb-3">
            <small class="text-muted">Place of classes</small>
            <div><strong>{{ $courseInfo->course_objectives }}</strong></div>
          </div>
          <div>
            {!! $courseInfo->description !!}
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Mobile Modal for Course Info (for screen < 768px) -->
<div class="modal fade" id="mobileModal" tabindex="-1" aria-labelledby="mobileModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="mobileModalLabel">Course Info</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <small class="text-muted">Objective of the course</small>
          <div><strong>{{ $courseInfo->places_of_classes }}</strong></div>
        </div>
        <div class="mb-3">
          <small class="text-muted">Place of classes</small>
          <div><strong>{{ $courseInfo->course_objectives }}</strong></div>
        </div>
        <div>
          {!! $courseInfo->description !!}
        </div>
      </div>
    </div>
  </div>
</div>

    @endsection
    @push('scripts')
<script>
    function toggleSidebar2() {
        const isMobile = window.innerWidth <= 767;
        const sidebarCol = document.getElementById("sidebarColInfo");
        const workoutsCol = document.getElementById("workoutsCol");
        const workoutCols = document.querySelectorAll('.workout-col');

        if (isMobile) {
            const modal = new bootstrap.Modal(document.getElementById('mobileModal'));
            modal.show();
        } else {
            const isVisible = !sidebarCol.classList.contains("d-none");
            sidebarCol.classList.toggle("d-none");
            workoutsCol.classList.toggle("col-md-8", !isVisible);
            workoutsCol.classList.toggle("col-md-12", isVisible);

            workoutCols.forEach(el => {
                el.classList.toggle("col-md-4", isVisible);
                el.classList.toggle("col-md-6", !isVisible);
            });
        }
    }

    function updateProgressDisplay(workoutId = null) {
    const meta = JSON.parse(localStorage.getItem('workout_meta') || '{}');
    const progress = JSON.parse(localStorage.getItem('workout_progress') || '{}');

    const total = meta[workoutId]?.total || 0;

    // Filter only keys that start with current workoutId
    const completed = Object.keys(progress).filter(key => {
        return key.startsWith(`workout-${workoutId}-`) && progress[key];
    }).length;

    const percent = total > 0 ? Math.round((completed / total) * 100) : 0;

    const progressEl = document.querySelector(`#progress-percent[data-workout-id="${workoutId}"]`);
    if (progressEl) {
        progressEl.textContent = `Success ${percent}%`;
    }
}


    function setupCheckboxListeners(workoutId = null) {
        const progress = JSON.parse(localStorage.getItem('workout_progress') || '{}');

        document.querySelectorAll('.exercise-check').forEach(cb => {
            const key = cb.dataset.key;
            cb.checked = !!progress[key];

            cb.addEventListener('change', () => {
                progress[key] = cb.checked;
                localStorage.setItem('workout_progress', JSON.stringify(progress));
                updateProgressDisplay(workoutId);
            });
        });

        updateProgressDisplay(workoutId);
    }

  

    function reinitializeProgressTracking(workoutId) {
        setupCheckboxListeners(workoutId);
    }
    document.addEventListener('DOMContentLoaded', () => {
    // Loop through all elements with progress display
    document.querySelectorAll('.course-footer').forEach(footer => {
        const workoutId = footer.querySelector('[data-workout-id]')?.getAttribute('data-workout-id');
        if (!workoutId) return;

        // Initial progress load
        updateProgressDisplay(workoutId);

        // Reset button handling
        const resetBtn = footer.querySelector('.reset-progress');
        if (resetBtn) {
            resetBtn.addEventListener('click', () => {
                if (confirm('Are you sure you want to reset your progress?')) {
                    const progress = JSON.parse(localStorage.getItem('workout_progress') || '{}');

                    // Keep only keys not related to this workout
                    const newProgress = {};
                    Object.keys(progress).forEach(key => {
                        if (!key.startsWith(`workout-${workoutId}-`)) {
                            newProgress[key] = progress[key];
                        }
                    });

                    localStorage.setItem('workout_progress', JSON.stringify(newProgress));

                    updateProgressDisplay(workoutId);
                }
            });
        }
    });
});


</script>
@endpush