@extends('layouts.client')
@section('title', 'Workout Session')

@section('content')
<style>
    .exercise-layout {
        height: calc(100vh - 120px);
        display: flex;
        overflow: hidden;
    }

    .exercise-left,
    .exercise-right {
        overflow-y: auto;
        padding: 20px;
        height: 100%;
    }

    .exercise-left {
        width: 40%;
        background-color: #fff;
        border-right: 1px solid #ccc;
    }

    .exercise-right {
        width: 60%;
        background-color: #f9f9f9;
    }

    .btn-nav {
        width: 48%;
        padding: 12px 16px;
        font-weight: 600;
        font-size: 15px;
        border-radius: 6px;
        border: none;
        transition: all 0.2s ease-in-out;
    }

    .btn-next {
        background-color: #28a745;
        color: #fff;
    }

    .btn-next:hover {
        background-color: #218838;
    }

    .btn-back {
        background-color: #6c757d;
        color: #fff;
    }

    .btn-back:hover {
        background-color: #5a6268;
    }

    #exit-btn {
        background-color: #dc3545;
        color: #fff;
        padding: 8px 14px;
        font-weight: 600;
        font-size: 14px;
        border-radius: 6px;
        transition: background-color 0.2s ease;
    }

    #exit-btn:hover {
        background-color: #c82333;
    }
    .exercise-description {
        margin-top: 20px;
        text-align: justify;
    }

    video {
        max-height: 350px;
        width: 100%;
    }
    
    .exercise-layout {
    display: flex;
    flex-wrap: wrap;
    height: auto;
}

.exercise-left,
.exercise-right {
    padding: 10px;
    height: auto;
    overflow-y: auto;
}

ol li, ul li{
        margin-bottom: 15px;
    }
/* Default (Desktop View) */
@media (min-width: 768px) {
    .exercise-left {
        width: 40%;
        background-color: #fff;
        border-right: 1px solid #ccc;
        height: calc(100vh - 160px);
    }

    .exercise-right {
        width: 60%;
        background-color: #f9f9f9;
        height: calc(100vh - 160px);
    }
}

/* Mobile View */
@media (max-width: 767.98px) {
    .exercise-left,
    .exercise-right {
        width: 100%;
        border-right: none;
        background-color: transparent;
        padding: 15px;
    }

    .exercise-right {
        margin-top: 20px;
        background-color: #f9f9f9;
        border-radius: 8px;
    }
    .mobile-flex{
        flex-direction: column;
        align-items: center;
    }
    .mobile-flex2{
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
    }
    .mobile-flex2 button{
        width: 40%;
        border: none;
    }
    .exercise-left, .exercise-right{
        padding: 0;
    }
    .exercise-description{
        text-align: justify;
        font-size: 14px;
        padding: 0 5px;
    }
    .exercise-description h1{
        text-align: left;
        font-size: 20px;
    }
    .content {
        padding: 5px 0px;
    }
    ol, ul{
        padding-left: 16px;
    }
    ol li, ul li{
        margin-bottom: 15px;
    }
}

</style>

<div class="container-fluid">
    <h2 class="mb-3">{{ $workout->title }}</h2>
    <div class="d-flex justify-content-between align-items-center mb-3 mobile-flex">
    <div><h5 class="mb-0">Workout Session</h5></div>
    <div class="d-flex align-items-center gap-3 mobile-flex2">
        <strong>Exercise <span id="current-step">1</span> of {{ count($exercises) }}</strong>
        <button class="btn btn-danger btn-sm" id="exit-btn">
            <i class="fa fa-sign-out-alt"></i> Exit
        </button>
    </div>
</div>


    <div class="exercise-layout mb-3">
        <div class="exercise-left" id="exercise-left">
            @include('client.partials.exercise-left', ['exercise' => $exercises[0]])
        </div>
        <div class="exercise-right" id="exercise-right">
            @include('client.partials.exercise-right', ['exercise' => $exercises[0]])
        </div>
    </div>

</div>

<input type="hidden" id="current-index" value="0">
<input type="hidden" id="total-exercises" value="{{ count($exercises) }}">
<input type="hidden" id="workout-id" value="{{ $workout->id }}">
<input type="hidden" id="course-id" value="{{ $courseID }}">
<input type="hidden" id="checkbox-total" value="{{ $totalCheckboxes }}">

@endsection

@push('scripts')
<script>
    let currentIndex = 0;
    const totalExercises = parseInt(document.getElementById('total-exercises').value);
    const workoutId = document.getElementById('workout-id').value;

        // ⏱️ Start time tracking if not already started
        let workoutTime = JSON.parse(localStorage.getItem('workout_time') || '{}');
    if (!workoutTime[workoutId]) {
        workoutTime[workoutId] = {
            start: Date.now()
        };
        localStorage.setItem('workout_time', JSON.stringify(workoutTime));
    }


    function storeTotalCheckboxCount() {
        const count = parseInt(document.getElementById('checkbox-total')?.value || '0');
        let workoutMeta = JSON.parse(localStorage.getItem('workout_meta') || '{}');

        workoutMeta[workoutId] = {
            ...(workoutMeta[workoutId] || {}),
            total: count
        };

        localStorage.setItem('workout_meta', JSON.stringify(workoutMeta));
        console.log('✔ Total checkboxes for workout ' + workoutId + ': ' + count);
    }

    function setupCheckboxListeners() {
        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));
            });
        });

        storeTotalCheckboxCount();
    }

    function loadExercise(index) {
        fetch(`/fitness_laravel/public/client/workout/${workoutId}/exercise/${index}`)
            .then(res => res.json())
            .then(data => {
                document.getElementById('exercise-left').innerHTML = data.left;
                document.getElementById('exercise-right').innerHTML = data.html;
                document.getElementById('current-index').value = index;
                document.getElementById('current-step').textContent = index + 1;

                document.getElementById('exercise-left').scrollTop = 0;
                document.getElementById('exercise-right').scrollTop = 0;

                document.getElementById('back-btn').disabled = index === 0;
                document.getElementById('next-btn').textContent = (index === totalExercises - 1) ? 'Finish' : 'Next';

                setupCheckboxListeners();
            });
    }

    document.addEventListener('DOMContentLoaded', () => {
        setupCheckboxListeners();

        document.addEventListener('click', function (e) {
          
            if (e.target.id === 'next-btn') {
                if (currentIndex < totalExercises - 1) {
                    currentIndex++;
                    loadExercise(currentIndex);
                } else {
                    const workoutId = document.getElementById('workout-id').value;
                    const courseId = document.getElementById('course-id').value;
                    
                const workoutTime = JSON.parse(localStorage.getItem('workout_time') || '{}');
                const start = workoutTime[workoutId]?.start;

                if (start) {
                    const durationMs = Date.now() - start;
                    workoutTime[workoutId].duration = durationMs;
                    localStorage.setItem('workout_time', JSON.stringify(workoutTime));
                }

                    window.location.href = `/fitness_laravel/public/client/workout/summary?workout_id=${workoutId}&course_id=${courseId}`;

                }
            }

            if (e.target.id === 'back-btn') {
                if (currentIndex > 0) {
                    currentIndex--;
                    loadExercise(currentIndex);
                }
            }

            if (e.target.id === 'exit-btn') {
                const courseId = document.getElementById('course-id').value;
                const url = "{{ route('client.course.workout', ':id') }}".replace(':id', courseId);
                if (confirm('Are you sure you want to exit the workout? Your progress may be lost.')) {
                    window.location.href = url;
                }
            }
        });
    });
</script>
@endpush