@extends('layouts.app')

@section('content')
   <nav class="navbar navbar-main navbar-expand-lg  px-0 mx-4 shadow-none border-radius-xl z-index-sticky " id="navbarBlur"
        data-scroll="false">
        <div class="container-fluid py-1 px-3">
            <!-- @include('layouts.navbars.auth.topnav', ['title' => 'Default Home']) -->
            <!-- <div class="sidenav-toggler sidenav-toggler-inner d-xl-block d-none ">
                <a href="javascript:;" class="nav-link p-0">
                    <div class="sidenav-toggler-inner">
                        <i class="sidenav-toggler-line bg-white"></i>
                        <i class="sidenav-toggler-line bg-white"></i>
                        <i class="sidenav-toggler-line bg-white"></i>
                    </div>
                </a>
            </div> -->
            <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
              <div class="ms-md-auto pe-md-3 d-flex align-items-center justify-content-center w-100">
    <h2 class="fw-bold text-white text-center mb-0 mx-7">Pilates Dashboard</h2>
</div>


                <ul class="navbar-nav  justify-content-end">
                    <!-- <li class="nav-item d-flex align-items-center">
                        @include('auth.logout')
                    </li> -->
                 
            
                    <!-- <li class="nav-item">
                        <a class="nav-link {{ Route::currentRouteName() == 'user-profile' ? 'active' : '' }}" href="{{ route('user-profile') }}">
                            <span class="sidenav-mini-icon"> <i class="fa fa-cog" style="color:white;"></i> </span>
                            <span class="sidenav-normal text-bold" style="color:black;"> </span>
                        </a>
                    </li> -->


                </ul>
            </div>
        </div>
    </nav>

<div class="container-fluid mt-5" >
    
   
               <style>
        .calendar {
        text-align: center;
        width: 400px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 10px 0 20px;
        }

        .month {
        background: #ff5722;
        color: white;
        padding: 10px;
        font-size: 1.3em;
        font-weight: bold;
        border-radius: 5px;
        display: inline-block;
        margin-bottom: 10px;
        }

        .weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        color: #ff5722;
        font-weight: 600;
        border-bottom: 1px solid #ff5722;
        padding-bottom: 5px;
        }

        .weekdays div {
        text-align: center;
        font-size: 14px;
        }

        .days {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        margin-top: 10px;
        position: relative;
        }

        .days .arrow {
        background: #ff5722;
        border: none;
        border-radius: 5px;
        color: white;
        width: 30px;
        height: 30px;
        font-size: 16px;
        cursor: pointer;
        }

        .date-list {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        flex: 1;
        padding: 0 10px;
        }

        .date {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin: 0 5px;
        border-radius: 6px;
        cursor: pointer;
        transition: 0.3s;
        }

        .date:hover {
        background: #ffe4d3;
        }

        .selected {
        background: #ff9800;
        color: white;
        font-weight: bold;
        }
         .input[type="number"] {
      width: 80px;
      text-align: center;
      border: 1px solid #aaa;
      border-radius: 4px;
      padding: 4px;
    }
    .table {
      text-align: center;
      margin-top: 10px;
    }
    .th, td {
      vertical-align: middle;
    }

      #weeklyModal table th,
  #weeklyModal table td {
    padding: 6px !important;
    font-size: 13px;
    vertical-align: middle;
  }

  /* Make header small */
  #weeklyModal th small {
    font-size: 11px;
    color: #777;
  }

  /* Make inputs smaller */
  #weeklyModal input.form-control.entry {
    width: 70px;
    height: 30px;
    padding: 2px 6px;
    font-size: 13px;
    margin: 0 auto;
  }

  /* Reduce modal width slightly */
  .modal-dialog.modal-lg {
    max-width: 900px;
  }

  /* Optional: center total neatly */
  #totalCount {
    font-size: 14px;
  }
  .modal-dialog {
    max-width: 500px;
  }

  @media (max-width: 768px) {
    .modal-dialog {
      max-width: 90%;
    }

    table.table th,
    table.table td {
      font-size: 12px;
      padding: 6px;
    }
  }

  /* Always hidden by default */
  #weeklyModal {
    display: none;
  }
    </style>
    <style>
/* Custom styled range for 0–9 scale */
.custom-range {
  width: 100%;
  height: 6px;
  border-radius: 5px;
  background: linear-gradient(to right, #007bff 0%, #e0e0e0 0%);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.3s ease;
}

/* Thumb (the draggable circle) */
.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #007bff;
  border: 2px solid white;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  cursor: pointer;
}

.custom-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #007bff;
  border: 2px solid white;
  cursor: pointer;
}

/* Track adjustments */
.custom-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 5px;
}

/* Table compact */
.exercise-card table th,
.exercise-card table td {
    padding: 10px !important;
    font-size: 9px;
    white-space: nowrap;
}
/* .table-responsive {
    margin-top: -35px !important;
} */

</style>

<style>
.stage-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: 100%;
  height: 100vh; 
  scroll-behavior: smooth;
}

.stage-panel {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #f8f9fa, #eef2f7);
  overflow-y: auto;
  position: relative;
}

.slider-wrapper {
    width: 100%;
    overflow: hidden;
}

.stage-slider {
    display: flex;
    transition: transform 0.5s ease;
}

.stage-panel {
    min-width: 100%; /* IMPORTANT: One full screen panel */
    padding: 10px;
}

.slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fb6340;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
}

.left-btn { left: 10px; }
.right-btn { right: 10px; }
.slide-indicators {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.indicator-dot {
    width: 10px;
    height: 10px;
    background: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background 0.3s;
}

.indicator-dot.active {
    background: #007bff; /* Blue for active slide */
    width: 12px;
    height: 12px;
}

/* ✅ Exercises vertically stacked */
.exercise-list {
  width: 90%;
  max-width: 750px;
}

/* ✅ Exercise card */
.exercise-card {
  transition: transform 0.2s ease;
}
.exercise-card:hover {
  transform: translateY(-3px);
}

/* ✅ Scrollbar hidden */
.stage-container::-webkit-scrollbar {
  display: none;
}

/* ✅ Mobile adjustments */
@media (max-width: 768px) {
  .stage-panel {
    padding: 10px;
  }
  .exercise-list {
    width: 100%;
  }
}
@media (max-width: 576px) {

    /* Reduce table padding and font even more */
    .exercise-card table th,
    .exercise-card table td {
        padding: 6px !important;
        font-size: 8px !important;
    }

    /* Resize input boxes for mobile */
    .exercise-card table input {
        height: 26px !important;
        font-size: 11px !important;
        padding: 2px !important;
    }

    /* Full width exercise card */
    .exercise-list {
        width: 100% !important;
    }

    /* Fix image + title layout */
    .exercise-card img {
        width: 60px !important;
        height: 60px !important;
    }

    /* Title smaller */
    .exercise-card h6 {
        font-size: 12px !important;
    }

    /* Badge smaller */
    .exercise-card .badge {
        font-size: 8px !important;
        padding: 4px 6px !important;
    }
}
.video-thumbnail .play-icon {
    cursor: pointer;
    transition: transform 0.2s;
}
.video-thumbnail:hover .play-icon {
    transform: scale(1.2);
}

.table th,
.table td {
    text-align: center;
    vertical-align: middle;
}

/* Make both columns equal width */
.table th:first-child,
.table td:first-child {
    width: 50%;
}

/* Center input box inside cell */
.table td:last-child {
    display: flex;
    justify-content: center;
}

/* Input styling */
.table input {
    width: 80px;
    height: 28px;
    text-align: center;
    font-size: 14px;
}



</style>


</div>

<div class="calendar mx-auto mb-4">
    @php
$highlightDates = $highlightDates ?? [];

$default = [
    "sun" => 0,
    "mon" => 0,
    "tue" => 0,
    "wed" => 0,
    "thu" => 0,
    "fri" => 0,
    "sat" => 0,
];

$highlightDates = array_merge($default, $highlightDates);
@endphp
                    <div class="month" id="monthDisplay"></div>

                        <div class="weekdays">
                            <div>Sun</div>
                            <div>Mon</div>
                            <div>Tue</div>
                            <div>Wed</div>
                            <div>Thu</div>
                            <div>Fri</div>
                            <div>Sat</div>
                        </div>
           

            <div class="days">
                <button class="arrow" id="prevBtn">&#8249;</button>
                    <div class="date-list" id="dateList"></div>
                        <button class="arrow" id="nextBtn">&#8250;</button>
                    </div>
            </div>
     
    <div id="weekData">

            <div class="row g-4 ">

                    <div class="col-md-3">
                    </div>
                    <div class="col-md-6">
                        <div class="card shadow-lg p-4 bg-dark text-white rounded h-100">
                                <div class="text-center mb-4">
                                    <h4 class="fw-bold text-uppercase text-white fs-3 mb-1">
                                        <i class="fas fa-calendar-day me-2"></i> Classes Overview
                                    </h4>
                                    <hr class="opacity-50" />
                                </div>

                                        @php
                                // ensure $groupdetails is a Collection and sorted
                                $sortedGroups = collect($groupdetails)->sortBy('groups')->values();

                                    // $thisWeekId might come from controller — guard if it's not set
                                    $thisWeekGroup = isset($thisWeekId) ? $sortedGroups->firstWhere('id', $thisWeekId) : null;
                                @endphp
                                <div class="d-flex flex-column align-items-center mb-3" style="gap: 10px;">
                                            
                                            <p style="font-size: 20px; font-weight: bold; margin: 0;">
                                                <span id="thisWeekBadge" class="badge bg-danger" style="font-size: 16px; cursor: pointer;">
                                                    This Week: {{ $groupname }}
                                                </span>
                                            </p>


                                            <p style="font-size: 20px; font-weight: bold; margin: 0;">


</p>


                                                <p style="font-size: 20px; font-weight: bold; margin: 0;">
                                                    Teacher: {{ $teacher->firstname }}
                                                </p>
                                </div>

                                <div id="thisWeekCard" class="col-md-3 mt-3" style="display: none; transition: all 0.5s ease;">
                                <div id="exerciseContainer">
                                        <div class="d-flex flex-column gap-2">
                                                                @foreach ($mappedSections as $heading => $content)
                                                                                    <button class="btn btn-white text-start text-center" data-bs-toggle="modal" data-bs-target="#wordModal"
                                                                                            data-title="{{ $heading }}" data-content="{{ $content }}">
                                                                                    {{ $heading }}
                                                                                    </button>
                                                                @endforeach
                                                </div>
                                    </div>

                                </div>

                        
                        </div>
                    </div>

                <!-- this is for view all button that shows all group details about class time -->
        
                <div class="modal fade" id="wordModal" tabindex="-1">
                    <div class="modal-dialog modal-xl">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title"></h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body" id="wordContent" style="max-height:80vh; overflow:auto;">   </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="row g-4 mt-3">
                    <div class="col-md-2">
                    </div>
                <!-- Homework -->
                <div class="col-md-8">
                    <div class="card shadow-lg p-4 rounded h-100" style="background-color: #f8f9fa;">
       


                        <div class="text-center mb-4">

                                {{-- Button Row --}}
                                <div class="d-flex justify-content-between align-items-center mb-3" id="exerciseButtonContainer" style="gap: 10px;">
                                    
                                    {{-- Left Button --}}
                                    <form method="GET" action="{{ route('exercise_students', ['id' => $groupId]) }}" class="flex-fill me-2">
                                        <input type="hidden" name="group_id" value="{{ $groupId }}">
                                        <button type="submit" class="btn btn-primary w-100">Exercises</button>
                                    </form>

                                    {{-- Right Button --}}
                                    <!-- <a href="{{ route('homework') }}" class="flex-fill ms-2 text-decoration-none">
                                        <button type="button" class="btn btn-primary w-100">Tasks</button>
                                    </a> -->
                                    <a href="{{ route('tasks', ['id' => $groupId, 'group' => $thisWeekGroup->groups]) }}" 
                                    class="flex-fill ms-2 text-decoration-none">
                                    <button type="button" class="btn btn-primary w-100">Tasks</button>
                                    </a>

                                </div>

                                <!-- <a href="{{ route('homework') }}" 
                                class="nav-link {{ Route::currentRouteName() == 'session' ? 'active' : '' }}"> -->
                                  <h4 class="fw-bold text-uppercase">
                                        <a href="{{ route('individualsession') }}" 
                                        class="text-decoration-none text-dark">
                                        <i class="fa-solid fa-notes-medical"></i>
                                        </a>
                                        Things To Do
                                    </h4>

                                    <hr class="opacity-50" />
                                <!-- </a> -->
                            </div>
                            <div class="slider-wrapper position-relative">
                                                        @php
                                                            $uniqueHomeworks = $homeworks->unique('ex_name')->values();
                                                            $chunks = $uniqueHomeworks->chunk(1); // 10 exercises per stage
                                                        @endphp


                                                    <div class="slider-wrapper position-relative">

                                                           <div class="slide-number text-end me-3 mb-2">
                                                                <span id="currentSlideNum">1</span> / <span id="totalSlides">{{ $chunks->count() }}</span>
                                                            </div>


                                                            <!-- LEFT BUTTON -->
                                                             <button type="button" class="slide-btn left-btn">&lt;</button>
                                                            <!-- SLIDER TRACK -->
                                                            <div class="stage-slider" id="stageSlider">

                                                                        @foreach($chunks as $panelIndex => $panelHomeworks)
                                                                            <section class="stage-panel">   
                                                                                    <div class="exercise-list"id="stageContainers">
                                                                                        <h5 class="fw-bold text-primary text-center mb-3">
                                                                                            <!-- Stage {{ $panelIndex + 1 }} -->
                                                                                        </h5>

                                                                                        <!-- <div class="exercise-list"id="stageContainers"> -->
                                                                                            @foreach($panelHomeworks as $homework)
                                                                                            
                                                                                                    @php
                                                                                                        $detail = $details[$homework->homework_id] ?? null;
                                                                                                        $assigned = $homework->weekwise_count ?? 0;
                                                                                                        $achieved = $details->where('homework_id', $homework->homework_id)->sum('achieved_count');
                                                                                                        $percent = $assigned > 0 ? ($achieved / $assigned) * 100 : 0;
                                                                                                        $isComplete = $percent >= 100;
                                                                                                    @endphp

                                                                                                    <div class="exercise-card card shadow-sm border-0 rounded-4 p-3 mb-3">
                                                                                                        <input type="hidden" class="exerciseId" value="{{ $homework->homework_exercise_id }}">
                                                                                                        <input type="hidden" class="homeworkId" value="{{ $homework->homework_id }}">
                                                                                                        <input type="hidden" class="groupId" value="{{ $groupId ?? '' }}">
                                                                                                            <h6 class="bg-primary text-white py-2 px-3 rounded" style="font-size: 13px;">Weekly Entrys</h6>


                                                                                                            <div class="d-flex align-items-center">
                                                                                                                                                <div class="video-thumbnail position-relative" style="width:80px; height:80px; display:inline-block; cursor:pointer;"
                            data-homework-id="{{ $homework->homework_id }}"
                            data-video-path="{{ asset($homework->ex_path ?? '') }}">
                            <img src="{{ asset($homework->thumbnail_path ?: 'assets/img/default-thumb.png') }}" 
                                alt="Thumbnail"
                                class="rounded"
                                style="width:100%; height:100%; object-fit:cover;">

                            <!-- Play Icon Overlay -->
                            <span class="play-icon position-absolute top-50 start-50 translate-middle">
                                <i class="bi bi-play-circle-fill text-white" style="font-size:32px;"></i>
                            </span>
                        </div>
                                                                                                                    <div class="flex-grow-1">

                                                                                                                        <!-- Title + Badge aligned on same line -->
                                                                                                                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                                                                                                                        <h6 class="fw-bold text-dark mb-0" style="font-size: 13px;">
                                                                                                                                            {{ $homework->ex_name }}
                                                                                                                                        </h6>

                                                                                                                                        @if($isComplete)
                                                                                                                                            <span class="badge bg-success px-2 py-1" style="font-size: 9px; border-radius: 8px;">
                                                                                                                                                <i class="bi bi-check-circle-fill me-1"></i> Done
                                                                                                                                            </span>
                                                                                                                                        @else
                                                                                                                                            <span class="badge bg-warning text-dark openWeeklyModal px-2 py-1"
                                                                                                                                                data-homework-id="{{ $homework->homework_id }}"
                                                                                                                                                data-exercise-id="{{ $homework->homework_exercise_id }}"
                                                                                                                                                data-exercise-name="{{ $homework->ex_name }}"
                                                                                                                                                style="font-size: 9px; border-radius: 8px;">
                                                                                                                                                In Progress {{ round($percent) }}%
                                                                                                                                            </span>
                                                                                                                                        @endif
                                                                                                                                    </div>

                                                                                                                        <input type="range" 
                                                                                                                            min="0" 
                                                                                                                            max="9" 
                                                                                                                            value="{{ min(9, round($percent / 10)) }}" 
                                                                                                                            class="form-range w-100" 
                                                                                                                            style="accent-color: #007bff;">

                                                                                                                    </div>
                                                                                                            </div>
                                                                                                                        <input type="hidden" class="teacherId" value="{{ $teacher_id->teacher_id ?? '' }}">
                                                                                                                        <input type="hidden" class="groupId" value="{{ $groupId ?? '' }}">
                                                                                                                        <input type="hidden" class="groupName" value="{{ $teacher_id->groups ?? '' }}">
                                                                                                                        <input type="hidden" class="studentId" value="{{ $student_id ?? '' }}">
                                                                                                                        <input type="hidden" class="weekId" value="{{ $thisweekIdValue ?? 'null' }}">


                                                                                                                    <div class="table-responsive mt-1">
                                                                                                                        <table class="table table-bordered table-sm">
                                                                                                                                <thead class="table-light">
                                                                                                                            <tr>
                                                                                                                                <th>Date</th>
                                                                                                                                <th><b>How many did You dosss</b></th>
                                                                                                                            </tr>
                                                                                                                                </thead>
                                                                                                                                <tbody id="weekBody_{{ $homework->homework_id }}"></tbody>

                                                                                                                            <script>
                                                                                                                                (function() {
                                                                                                                                    const days = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];
                                                                                                                                    const weekBody = document.getElementById("weekBody_{{ $homework->homework_id }}");

                                                                                                                                    days.forEach(day => {
                                                                                                                                        const today = new Date();
                                                                                                                                        const date = new Date(today.setDate(today.getDate() - today.getDay() + days.indexOf(day) + 1));
                                                                                                                                        const formattedDate = date.toLocaleDateString('en-GB', { day: '2-digit' });

                                                                                                                                        weekBody.innerHTML += `
                                                                                                                                            <tr>
                                                                                                                                                <td>${formattedDate}</td>
                                                                                                                                                <td>
                                                                                                                                                    <input type="number" class="form-control form-control-sm entry"
                                                                                                                                                        data-day="${day}" min="0" value="0" oninput="calculateTotal(event)">
                                                                                                                                                </td>
                                                                                                                                            </tr>`;
                                                                                                                                    });
                                                                                                                                })();
                                                                                                                            </script>

                                                                                                                                        <tfoot>
                                                                                                                                            <tr class="bg-light">
                                                                                                                                                <th><b>Totals</b></th>
                                                                                                                                                <th><b class="totalCount">0</b></th>
                                                                                                                                            </tr>
                                                                                                                                        </tfoot>
                                                                                                                        </table>
                                                                                                                    </div>

                                                                                                                    <div class="text-end mt-1">
                                                                                                                        <button type="button" class="btn btn-primary btn-sm rounded-pill px-4 saveBtn" data-hwid="{{$homework->homework_id }}">Save</button>
                                                                                                                    </div>
                                                                                                    </div>
                                                                                                
                                                                                            
                                                            


                                                                                            @endforeach
                                                                                        <!-- </div>     -->
                                                                                    </div>
                                                                            </section>
                                                                        @endforeach
                                                            </div>
                                                            

                                                            @if($uniqueHomeworks->isEmpty())
                                                                <div class="text-center text-muted py-4">
                                                                    No homework exercises found
                                                                </div>
                                                            @endif

                                                            <!-- RIGHT BUTTON -->
                                                            <button type="button" class="slide-btn right-btn">&gt;</button>  
                                                        </div>                
                                                    </div>
                                                    <div class="col-md-2">
                                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

             <div class="row g-4 mt-2">
                <div class="col-md-2">
                </div>
            <!-- Achievement -->
            @php
                // true if the student has achieved at least 1% of the tasks
                $hasAchievement = $completionPercent > 0;
            @endphp

            <div class="col-md-8 mb-4">
                <div class="card bg-dark shadow-lg p-4 text-white rounded h-80"id="achievementMessage">
                    <div class="text-center mb-1">
                        <h4 class="text-uppercase fw-bold mt-2 text-white">
                            <i class="fas fa-trophy me-2"></i>Achievement
                        </h4>
                        <hr class="opacity-50" />
                    </div>

                    <div class="text-center">
                        @if($hasAchievement)
                            <p class="fw-bold text-success">{{ $message }}</p>

                            <div class="progress mb-3" style="height: 10px; border-radius: 10px;">
                                <div class="progress-bar bg-success"
                                    role="progressbar"
                                    style="width: {{ $completionPercent }}%;"
                                    aria-valuenow="{{ $completionPercent }}"
                                    aria-valuemin="0"
                                    aria-valuemax="100">
                                    {{ round($completionPercent) }}%
                                </div>
                            </div>

                            {{-- show the image that matches the achievement level --}}
                        <video autoplay loop muted playsinline
                                class="img-fluid rounded shadow"
                                style="max-height:300px;">
                               -->
                                Your browser does not support the video tag.
                                </video>



                                        @else
                                            {{-- nothing achieved yet: show the default placeholder --}}
                                            <p class="text-success font-italic">
                                                Do your tasks and achieve something great today!
                                            </p>
                                        <video autoplay loop muted playsinline
                                class="img-fluid rounded shadow"
                                style="max-height:300px;margin-top:20px;">
                                <source src="{{ asset('assets/exercise/defaults/anim_1.mp4') }}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>

                        @endif
                    </div>
                </div>


                </div>
                    <!-- <div class="col-md-2"></div> -->
                </div>

            </div>

            <div class="modal fade" id="videoModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content bg-dark">
      <div class="modal-body p-0">
        <video id="videoPlayer" controls style="width:100%;">
            <source id="videoSource" src="" type="video/mp4">
            Your browser does not support the video tag.
        </video>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

            <div class="modal fade" id="groupDetailsModal" tabindex="-1" aria-      labelledby="groupDetailsModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content text-white" style="background: #1f2a40;">
                        <div class="modal-header">
                            <h5 class="modal-title" id="groupDetailsModalLabel"><i class="fas fa-info-circle me-2"></i> Group Details</h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p><strong>Group:</strong> <span id="modalGroupName"></span></p>
                            <p><strong>Date:</strong> <span id="modalDate"></span></p>
                            <p><strong>Start Time:</strong> <span id="modalStartTime"></span></p>
                            <p><strong>End Time:</strong> <span id="modalEndTime"></span></p>
                            <p><strong>Status:</strong> <span id="modalStatus"></span></p>
                        </div>
                    </div>
                </div>
            </div>
           <div class="modal fade" id="aimsModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content rounded-4 shadow-lg border-0">
                        <div class="modal-header bg-primary text-white">
                            <h5 class="modal-title fw-bold">Aim</h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body p-4" style="white-space: pre-line; word-wrap: break-word; max-height: 80vh; overflow-y: auto;">
                            {{ $sectionsData['aims'] ?? 'No Aim content found.' }}
                        </div>
                    </div>
                </div>
            </div>


            <div class="modal fade" id="understandingModal" tabindex="-1">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Understanding Pain</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body" style="white-space: pre-line;">
                            {{ $sectionsData['understanding_pain'] ?? 'No Understanding Pain content found.' }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="worryingModal" tabindex="-1">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Worrying About Pain</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" style="white-space: pre-line;">
                    {{ $sectionsData['worrying_pain'] ?? 'No Worrying About Pain content found.' }}
                </div>
                </div>
            </div>
            </div>


            <div class="modal fade" id="allHomeworkModal" tabindex="-1" aria-labelledby="allHomeworkModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title fw-bold" id="allHomeworkModalLabel">All Exercises</h5>

                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                        <div class="modal-body">
                                <table class="table table-hover align-middle text-center">
                                    <thead class="table-light text-uppercase small">
                                        <tr>
                                        <th style="text-align:left;">Exercises</th>
                                        <th style="text-align:left;">Thumbnail</th>
                                        <th>How Many Can I Do</th>
                                        <th>How Many Did I Do</th>
                                        <th style="text-align:left;">Status</th>
                                        <th>Rewards</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $uniqueHomeworks = $homeworks->unique('ex_name')->values(); 
                                        @endphp

                                        @foreach($uniqueHomeworks as $index => $homework)
                                            @php
                                                $detail = $details[$homework->homework_id] ?? null;
                                                $assigned = $homework->weekwise_count ?? 0;
                                                $achieved = $details
                                                    ->where('homework_id', $homework->homework_id)
                                                    ->sum('achieved_count');
                                                $percent = $assigned > 0 ? ($achieved / $assigned) * 100 : 0;

                                                switch (true) {
                                                    case $percent >= 100: $level = 6; break;
                                                    case $percent >= 80:  $level = 5; break;
                                                    case $percent >= 60:  $level = 4; break;
                                                    case $percent >= 40:  $level = 3; break;
                                                    case $percent >= 20:  $level = 2; break;
                                                    case $percent > 0:    $level = 1; break;
                                                    default:              $level = 0;
                                                }

                                                $rewardImages = [
                                                    1 => 'Asset 1.png',
                                                    2 => 'Asset 2.png',
                                                    3 => 'Asset 3.png',
                                                    4 => 'Asset 4.png',
                                                    5 => 'Asset 5.png',
                                                    6 => 'Asset 6.png',
                                                ];
                                            @endphp

                                            <tr>
                                            <td style="text-align:left;">{{ $homework->ex_name }}</td>
                                            <td>
                                                @if(!empty($homework->thumbnail_path))
                                                    <img src="{{ asset($homework->thumbnail_path) }}" alt="Thumbnail" style="width:80px; height:auto;">
                                                @else
                                                    N/A
                                                @endif
                                            </td>
                                            <td>{{ $assigned }}</td>
                                            <td>{{ $achieved }}</td>
                                            <td>
                                                <div class="progress" style="height: 20px;">
                                                <div class="progress-bar 
                                                    @if($percent < 50) bg-danger
                                                    @elseif($percent < 80) bg-warning
                                                    @else bg-success
                                                    @endif" 
                                                    role="progressbar" 
                                                    style="width: {{ $percent }}%;" 
                                                    aria-valuenow="{{ $percent }}" 
                                                    aria-valuemin="0" 
                                                    aria-valuemax="100">
                                                    {{ round($percent) }}%
                                                </div>
                                                </div>
                                            </td>
                                            <td>
                                                <img src="{{ asset('assets/img/' . ($rewardImages[$level] ?? 'Asset 1.png')) }}" 
                                                    alt="Level {{ $level }}" 
                                                    style="height:40px;">
                                            </td>
                                            </tr>
                                        @endforeach

                                        @if($uniqueHomeworks->isEmpty())
                                        <tr>
                                            <td colspan="6" class="text-center text-muted py-4">No homework exercises found</td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
                                            
    </div>
</div>


   <script>
document.addEventListener('DOMContentLoaded', function () {
    // Delegate to the table to handle any number of rows
    document.querySelector('table').addEventListener('input', function (e) {
        if (!e.target.classList.contains('week-day')) return;

        // find the <tr> of the changed input
        const row = e.target.closest('tr');
        let total = 0;

        // add all week-day values in this row
        row.querySelectorAll('.week-day').forEach(input => {
            total += Number(input.value) || 0;
        });

        // update achieved-count in the same row
        const achieved = row.querySelector('.achieved-count');
        if (achieved) achieved.value = total;
    });
});
</script>  

@include('layouts.footer')
@endsection


@push('js')
    

    <script src="../../assets/js/plugins/chartjs.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener("DOMContentLoaded", () => {
  let modal = document.getElementById('wordModal');
  modal.addEventListener('show.bs.modal', e => {
    let btn = e.relatedTarget;
    modal.querySelector('.modal-title').textContent = btn.getAttribute('data-title');
    document.getElementById('wordContent').innerHTML = btn.getAttribute('data-content');
  });
});
</script>
<style>
/* make only the tbody scrollable while the thead stays fixed */
.table-fixed thead {
  display: block;
}
.table-fixed tbody {
  display: block;
  max-height: 320px; /* adjust as needed */
  overflow-y: auto;
  width: 100%;
}
.table-fixed th, .table-fixed td {
  width: 43.3333%; /* equal columns; adjust if you have different column widths */
  box-sizing: border-box;
}

/* optional nicer scrollbar for webkit */
.table-fixed tbody::-webkit-scrollbar {
  width: 8px;
}
.table-fixed tbody::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.25);
  border-radius: 4px;
}

.card:hover {
  transform: translateY(-5px);
  transition: 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.date {
    width: 60px;
    text-align: center;
    margin: 5px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    background: #f4f4f4;
    position: relative;
}

.date .count {
    display: block;
    font-size: 12px;
    margin-top: 5px;
    color: #333;
}

.selected {
    background: #007bff;
    color: white;
    border: 2px solid black;
}
.day-header {
    font-weight: bold;
    text-align: center;
    padding: 5px;
    color: #444;
}

.date {
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    margin-top: 4px;
    position: relative;
}

.date .count {
    display: block;
    font-size: 12px;
    margin-top: 5px;
}


</style>
<!-- Animate.css (for slide effects) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

<script>


document.addEventListener('DOMContentLoaded', function() {
    const toggleBtn = document.getElementById('toggleThisWeek');
    const container = document.getElementById('thisWeekContainer');
    const card = document.getElementById('thisWeekCard');

    toggleBtn.addEventListener('click', function() {
        if (container.style.display === 'none' || container.style.display === '') {
            container.style.display = 'block';
            card.classList.remove('animate__slideOutDown');
            card.classList.add('animate__slideInUp');
        } else {
            card.classList.remove('animate__slideInUp');
            card.classList.add('animate__slideOutDown');
            setTimeout(() => {
                container.style.display = 'none';
            }, 400);
        }
    });
});
</script>


<script>
   let highlightData = {!! json_encode($highlightDates ?? []) !!};

console.log(`Day: ${ highlightData }`);
    const dateList = document.getElementById("dateList");
    const monthDisplay = document.getElementById("monthDisplay");

    let currentDate = new Date();
    let currentWeekStart = getWeekStart(currentDate);

    const weekKeys = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];

    function getWeekStart(date) {
        const temp = new Date(date);
        const day = temp.getDay();
        temp.setDate(temp.getDate() - day);
        return temp;
    }

    function renderWeek() {
        dateList.innerHTML = "";
        const start = new Date(currentWeekStart);

        const monthNames = [
            "January","February","March","April","May","June",
            "July","August","September","October","November","December"
        ];

        monthDisplay.textContent = `${monthNames[start.getMonth()]} ${start.getFullYear()}`;

        for (let i = 0; i < 7; i++) {
            const d = new Date(start);
            d.setDate(start.getDate() + i);
// console.log(`Day: ${ d }`);
            const dayKey = weekKeys[i];  // sun, mon, tue...
            const dayValue = highlightData[dayKey] ?? 0;
                // console.log(`Day: ${dayKey}, Value: ${dayValue}`);
            const dateDiv = document.createElement("div");
            dateDiv.className = "date";
            dateDiv.textContent = d.getDate();

            // ⭐ Highlight only if >0 ⭐
            if (dayValue > 0) {
                dateDiv.style.backgroundColor = "green";
                dateDiv.style.color = "white";
                dateDiv.style.borderRadius = "8px";
                dateDiv.style.fontWeight = "bold";
                dateDiv.style.padding = "5px";
            }

            // Today highlight
            const today = new Date();
            if (
                d.getDate() === today.getDate() &&
                d.getMonth() === today.getMonth() &&
                d.getFullYear() === today.getFullYear()
            ) {
                dateDiv.classList.add("selected");
            }

            dateDiv.addEventListener("click", () => {
                currentDate = new Date(d);
                renderWeek();
            });

            dateList.appendChild(dateDiv);
        }
    }

    document.getElementById("prevBtn").addEventListener("click", () => {
        currentWeekStart.setDate(currentWeekStart.getDate() - 7);
        renderWeek();
    });

    document.getElementById("nextBtn").addEventListener("click", () => {
        currentWeekStart.setDate(currentWeekStart.getDate() + 7);
        renderWeek();
    });

    renderWeek();

</script>

<script>
        const dateList = document.getElementById("dateList");
        const monthDisplay = document.getElementById("monthDisplay");

        let currentDate = new Date(); // <-- Automatically use today's date
        let currentWeekStart = getWeekStart(currentDate);

        function getWeekStart(date) {
        const temp = new Date(date);
        const day = temp.getDay();
        temp.setDate(temp.getDate() - day);
        return temp;
        }

        function renderWeek() {
    dateList.innerHTML = "";
    const start = new Date(currentWeekStart);

    const monthNames = [
        "January","February","March","April","May","June",
        "July","August","September","October","November","December"
    ];

    monthDisplay.textContent = `${monthNames[start.getMonth()]} ${start.getFullYear()}`;

    const weekKeys = ["sun","mon","tue","wed","thu","fri","sat"]; // Map JS day to PHP keys

    for (let i = 0; i < 7; i++) {
        const d = new Date(start);
        d.setDate(start.getDate() + i);

        const dateDiv = document.createElement("div");
        dateDiv.className = "date";
        dateDiv.textContent = d.getDate();

        // Add count under date
        const countSpan = document.createElement("span");
        countSpan.className = "count";
        countSpan.textContent = weekCounts[weekKeys[i]] ?? 0;
        dateDiv.appendChild(countSpan);

        // Highlight if count > 0
        if (weekCounts[weekKeys[i]] > 0) {
            dateDiv.style.background = "#ffc107";
            dateDiv.style.color = "#000";
            dateDiv.style.fontWeight = "bold";
        }

        // Highlight today's date
        const today = new Date();
        if (
            d.getDate() === today.getDate() &&
            d.getMonth() === today.getMonth() &&
            d.getFullYear() === today.getFullYear()
        ) {
            dateDiv.classList.add("selected");
        }

        dateDiv.addEventListener("click", () => {
            currentDate = new Date(d);
            renderWeek();
        });

        dateList.appendChild(dateDiv);
    }
}

        }

        document.getElementById("prevBtn").addEventListener("click", () => {
        currentWeekStart.setDate(currentWeekStart.getDate() - 7);
        renderWeek();
        });

        document.getElementById("nextBtn").addEventListener("click", () => {
        currentWeekStart.setDate(currentWeekStart.getDate() + 7);
        renderWeek();
        });

        renderWeek();
    </script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const btn = document.getElementById('thisWeekBadge');
    const card = document.getElementById('thisWeekCard');

    btn.addEventListener('click', function() {
        if (card.style.display === 'none' || card.style.display === '') {
            card.style.display = 'block';
            card.classList.add('animate__animated', 'animate__slideInUp');
        } else {
            card.classList.remove('animate__slideInUp');
            card.classList.add('animate__slideOutDown');
            setTimeout(() => {
                card.style.display = 'none';
                card.classList.remove('animate__slideOutDown');
            }, 400);
        }
    });
});
</script>
<script>
window.addEventListener("DOMContentLoaded", function () {
    document.getElementById("stageContainer").innerHTML = hwHtml;
});


document.addEventListener("DOMContentLoaded", function() {
    const prevBtn = document.getElementById("prevBtn");
    const nextBtn = document.getElementById("nextBtn");
    const thisWeekBadge = document.getElementById("thisWeekBadge");
    const teacherLabel = document.querySelector("#weekData p:nth-child(2)");

    let currentWeekStart = new Date();
    currentWeekStart.setDate(currentWeekStart.getDate() - currentWeekStart.getDay()); // Sunday
    let currentWeekEnd = new Date(currentWeekStart);
    currentWeekEnd.setDate(currentWeekStart.getDate() + 6); // Saturday

function loadWeekData(startDate, endDate) {
    fetch("/get-week-data", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({ start_date: startDate, end_date: endDate })
    })
    .then(res => res.json())
    .then(data => {
        if (data.message) {
            document.getElementById("exerciseContainer").innerHTML =
                `<div class="alert alert-warning text-center">${data.message}</div>`;
            return;
        }

        document.getElementById("thisWeekBadge").textContent = `Week ${data.groups}`;

        
const buttonContainer = document.getElementById("exerciseButtonContainer");
buttonContainer.innerHTML = `
    <form method="GET" action="/exercise_students/${data.grpid}" class="flex-fill me-2">
        <input type="hidden" name="group_id" value="${data.grpid}">
        <button type="submit" class="btn btn-primary w-100">Exercises</button>
    </form>
<a href="/tasks/${data.grpid}/${data.groups}" 
       class="flex-fill ms-2 text-decoration-none">
        <button type="button" class="btn btn-primary w-100">Tasks</button>
    </a>

`;

       
          let html = '<div class="d-flex flex-column gap-2">';
        for (const [heading, content] of Object.entries(data.mapped_sections || {})) {
            html += `
                <button class="btn btn-white text-start text-center"
                        data-bs-toggle="modal"
                        data-bs-target="#wordModal"
                        data-title="${heading}"
                        data-content='${encodeURIComponent(content)}'>
                    ${heading}
                </button>`;
        }
        html += "</div>";
        document.getElementById("exerciseContainer").innerHTML = html;

  const container = document.getElementById("stageContainers");

    if (!container) {
        console.error("stageContainer not found!");
        return;
    }
// let weekRows = "";
//     (data.week_days || []).forEach(day => {
//         const dayValue = (detail && detail.days && detail.days[day]) || "";
//         weekRows += `
//             <tr>
//                 <td>${day}</td>
//                 <td>
//                     <input type="number" min="0" class="form-control form-control-sm weekInput"
//                         data-hwid="${hw.homework_id}" data-day="${day}" value="${dayValue}">
//                 </td>
//             </tr>
//         `;
//     });
let hwHtml = "";
// document.getElementById("stageContainer").innerHTML = hwHtml;
// console.log(`Processing homework: ${data.homeworks}`);
(data.homeworks || []).forEach(hw => {
   console.log(`Processing homework exercise: ${hw.ex_name} (ID: ${hw.homework_id})`);

    const detail = (data.details && data.details[hw.homework_id]) || null;
    const assigned = hw.weekwise_count || 0;
    const achieved = detail ? detail.achieved_count || 0 : 0;
    const percent = assigned > 0 ? (achieved / assigned) * 100 : 0;
    const isComplete = percent >= 100;
     const exPath =  hw.ex_path
        ? hw.ex_path
        : `assets/exercise/defaults/${hw.ex_path || 'default'}.mp4`;

    console.log(`Exercise: ${hw.ex_name}, Assigned: ${assigned}, Achieved: ${achieved}, Percent: ${percent},grp:${data.grpid}`);
    const imgPath = hw.thumbnail_path
        ? `/${hw.thumbnail_path}`
        : `/assets/img/default-thumb.png`;

        let days = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];
    let weekRows = "";

    days.forEach(day => {
        const today = new Date();
        const date = new Date(today.setDate(today.getDate() - today.getDay() + days.indexOf(day) + 1));
        const formattedDate = date.toLocaleDateString('en-GB', { day: '2-digit' });

        weekRows += `
            <tr>
                <td>${formattedDate}</td>
                <td>
                    <input type="number" class="form-control form-control-sm entry"
                        data-day="${day}" min="0" value="0"
                        oninput="calculateTotal(event)">
                </td>
            </tr>
        `;
    });


    hwHtml += `
        <div class="exercise-card card shadow-sm border-0 rounded-4 p-3 mb-3">

            <input type="hidden" class="exerciseId" value="${hw.homework_exercise_id}">
            <input type="hidden" class="homeworkId" value="${hw.homeworks_id}">
            <input type="hidden" class="groupId" value="${hw.grpid}">
  
            <h6 class="bg-primary text-white py-2 px-3 rounded" style="font-size: 13px;">
                Weekly Entrys
            </h6>

            <div class="d-flex align-items-center">
              <div class="video-thumbnail position-relative" style="width:80px; height:80px; display:inline-block; cursor:pointer;" data-homework-id="{{ $homework->homework_id }}"
                          data-video-path="${hw.ex_path}"
">
                <img src="${imgPath}" class="rounded me-3"
                    alt="Thumbnail"
                                class="rounded"
                                style="width:100%; height:100%; object-fit:cover;">

                            <!-- Play Icon Overlay -->
                            <span class="play-icon position-absolute top-50 start-50 translate-middle">
                                <i class="bi bi-play-circle-fill text-white" style="font-size:32px;"></i>
                            </span>
                        </div>
                                   

                <div class="flex-grow-1">

                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="fw-bold text-dark mb-0" style="font-size: 13px;">
                            ${hw.ex_name}
                        </h6>

                        ${
                            isComplete
                            ? `<span class="badge bg-success"><i class="bi bi-check-circle-fill me-1"></i>Done</span>`
                            : `<span class="badge bg-warning text-dark progress-badge"
                                 data-hwid="${hw.homework_id}"
                                 data-bs-toggle="modal"
                                 data-bs-target="#weeklyModal">
                                 In Progress ${Math.round(percent)}%
                               </span>`
                        }
                    </div>

                    <input type="range" min="0" max="9"
                        value="${Math.min(9, Math.round(percent / 10))}"
                        class="form-range w-100"
                        style="accent-color:#007bff;">
                </div>
            </div>

           
             <div class="table-responsive mt-1">
            <table class="table table-bordered table-sm">
                    <thead class="table-light">
                <tr>
                    <th>Date</th>
                    <th><b>How many did You dosss</b></th>
                </tr>
                    </thead>
                    <tbody id="weekBody_${hw.homework_id}">
                      ${weekRows} 
                      </tbody>

               

                            <tfoot>
                                <tr class="bg-light">
                                    <th><b>Totals</b></th>
                                    <th><b class="totalCount">0</b></th>
                                </tr>
                            </tfoot>
            </table>
        </div>

            <div class="text-end mt-1">
                <button class="btn btn-primary btn-sm rounded-pill px-4 saveBtn"
                    data-hwid="${hw.homework_id}">
                    Save
                </button>
            </div>
        </div>
   
    `;
        document.getElementById("stageContainers").innerHTML = hwHtml;
});


// ⬇⬇ THIS MUST BE HERE (AFTER LOOP)
// document.getElementById("stageContainer").innerHTML = hwHtml;

//  document.getElementById("stageContainer").innerHTML = hwHtml;
//     `;
// });
// Attach click listener to dynamically created badges
// document.querySelectorAll('.progress-badge').forEach(badge => {
//     badge.addEventListener('click', function () {
//         const hwid = this.dataset.hwid; // homework id (if you want to use it)
        
//         // Clear previous modal content
//         document.getElementById("dayRow").innerHTML = `<th>Day & Date</th>`;
//         document.getElementById("entryRow").innerHTML = `<td><b>Manual Entry</b></td>`;

//         // Days setup
//         const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
//         const today = new Date();
//         const currentMonday = new Date(today.setDate(today.getDate() - today.getDay() + 1)); // Start of week (Mon)
        
//         days.forEach((day, index) => {
//             const date = new Date(currentMonday);
//             date.setDate(currentMonday.getDate() + index);
//             const formattedDate = date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });

//             document.getElementById("dayRow").innerHTML += `<th>${day}<br><small>${formattedDate}</small></th>`;
//             document.getElementById("entryRow").innerHTML += `
//                 <td>
//                     <input type="number" class="form-control entry" min="0" placeholder="Enter value">
//                 </td>
//             `;
//         });

//         // Add Total column
//         document.getElementById("dayRow").innerHTML += `<th><b>Total</b></th>`;
//         document.getElementById("entryRow").innerHTML += `<td><b id="totalCount">0</b></td>`;

//         // Setup calculateTotal()
//         function calculateTotal() {
//             let total = 0;
//             document.querySelectorAll('.entry').forEach(input => {
//                 let value = Number(input.value) || 0;
//                 if (value < 0) input.value = value = 0;
//                 total += value;
//             });
//             document.getElementById('totalCount').textContent = total;
//         }

//         document.querySelectorAll('.entry').forEach(input => {
//             input.addEventListener('input', calculateTotal);
//         });

//         // Open modal
//         const modal = new bootstrap.Modal(document.getElementById('weeklyModal'));
//         modal.show();

//         // Handle Save click
//         document.getElementById('saveBtn').onclick = () => {
//             const entries = Array.from(document.querySelectorAll('.entry')).map(e => e.value || 0);
//             console.log(`Saved homework ${hwid}:`, entries);
//             alert('Weekly data saved successfully!');
//             modal.hide();
//         };
//     });
// });

document.getElementById("homeworkContainer").innerHTML = hwHtml || `
    <div class="col text-center text-muted py-4">
        No homework exercises found
    </div>`;

        // ✅ Modal content loader
        document.querySelectorAll('[data-bs-target="#wordModal"]').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelector('#wordModal .modal-title').textContent = this.dataset.title;
                document.querySelector('#wordModal .modal-body').innerHTML =
                    decodeURIComponent(this.dataset.content);
            });
        });
    })
    .catch(err => console.error("Error loading week data:", err));
}



   document.getElementById("prevBtn").addEventListener("click", function () {
    currentWeekStart.setDate(currentWeekStart.getDate() - 7);
    currentWeekEnd.setDate(currentWeekEnd.getDate() - 7);
    loadWeekData(currentWeekStart.toISOString().split("T")[0], currentWeekEnd.toISOString().split("T")[0]);
});

document.getElementById("nextBtn").addEventListener("click", function () {
    currentWeekStart.setDate(currentWeekStart.getDate() + 7);
    currentWeekEnd.setDate(currentWeekEnd.getDate() + 7);
    loadWeekData(currentWeekStart.toISOString().split("T")[0], currentWeekEnd.toISOString().split("T")[0]);
});


    // Load current week initially
    loadWeekData(currentWeekStart, currentWeekEnd);
});


</script>

<script>
// const days = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];
// const weekBody = document.getElementById("weekBody");

// days.forEach(day => {
//     const today = new Date();
//     const date = new Date(today.setDate(today.getDate() - today.getDay() + days.indexOf(day) + 1));
//     const formattedDate = date.toLocaleDateString('en-GB', { day: '2-digit' });

//     weekBody.innerHTML += `
//         <tr>
//             <td>${formattedDate}</td>
//             <td>
//                 <input type="number" class="form-control form-control-sm entry"
//                     data-day="${day}" min="0" value="0" oninput="calculateTotal()">
//             </td>
//         </tr>`;
// });
function calculateTotal(event) {
    let total = 0;

    // find this input belongs to which table
    const table = event.target.closest("table");

    // find only entries inside THIS table
    const entries = table.querySelectorAll(".entry");

    entries.forEach(input => {
        let value = Number(input.value) || 0;
        if (value < 0) input.value = 0;
        total += value;
    });

    // update total for this table only
    table.querySelector(".totalCount").textContent = total;
}



document.querySelectorAll('.openWeeklyModal').forEach(item => {
    item.addEventListener('click', function () {

        let homeworkId = this.getAttribute('data-homework-id');
        let exerciseId = this.getAttribute('data-exercise-id');
        let exerciseName = this.getAttribute('data-exercise-name');

        let card = this.closest('.exercise-card');

        
        document.querySelectorAll('.exercise-card').forEach(c => c.classList.remove('active-card'));
        card.classList.add('active-card');

        // Set hidden inputs inside active card
        card.querySelector('.exerciseId').value = exerciseId;
        card.querySelector('.homeworkId').value = homeworkId;

        // Show exercise name in modal
        document.getElementById('modalExerciseName').textContent = exerciseName;
    });
});
document.querySelectorAll('.saveBtn').forEach(btn => {
    btn.addEventListener('click', () => {
        const card = btn.closest('.exercise-card');

        // Collect inputs inside this card
        const teacher_id = card.querySelector('.teacherId').value;
        const group_id = card.querySelector('.groupId').value;
        const student_id = card.querySelector('.studentId').value;
        const week_id = card.querySelector('.weekId').value;
        const exercise_id = card.querySelector('.exerciseId').value;
        const homework_id = card.querySelector('.homeworkId').value;
        console.log(`Saving data for HW:${homework_id}, EX:${exercise_id},grp:${group_id}`);
        // Calculate total
        const achieved_count = Array.from(card.querySelectorAll('.entry')).reduce((sum, input) => {
            return sum + (Number(input.value) || 0);
        }, 0);

        // Optional: validate inputs
        const entriesEmpty = Array.from(card.querySelectorAll('.entry')).some(input => input.value.trim() === "" || input.value.trim() === "0");
        if(entriesEmpty){
            Swal.fire({
                icon: "warning",
                title: "Incomplete!",
                text: "Please enter numbers for all days before saving.",
            });
            return;
        }

        // Prepare data
        const formData = {
            teacher_id, group_id, student_id, week_id, exercise_id, homework_id,
            achieved_count, status: 1,
            _token: "{{ csrf_token() }}"
        };

        card.querySelectorAll('.entry').forEach(input => {
            formData[input.dataset.day] = input.value || 0;
        });

        // Send via fetch
        fetch("{{ route('weekcount.store') }}", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(formData)
        })
        .then(res => res.json())
        .then(data => {
            if(data.success){
                Swal.fire({
                    title: "Saved!",
                    text: "Weekly data saved successfully.",
                    icon: "success",
                    timer: 1500,
                    showConfirmButton: false
                });
            } else {
                Swal.fire("Error", data.message, "error");
            }
        })
        .catch(() => Swal.fire("Error", "Something went wrong!", "error"));
    });
});


</script>
<script>
function updateRangeColor(range) {
  const max = range.max ? range.max : 9;
  const min = range.min ? range.min : 0;
  const value = ((range.value - min) / (max - min)) * 100;
  range.style.background = `linear-gradient(to right, #838688ff ${value}%, #e0e0e0 ${value}%)`;
}

const range = document.getElementById('progressSlider');

// Initial fill when page loads
updateRangeColor(range);

// Update dynamically when user slides
range.addEventListener('input', () => updateRangeColor(range));
</script>
<script>
/* ✅ Optional: Swipe snapping enhancement */
const container = document.getElementById("stageContainer");
let startX = 0;
let scrollLeft = 0;

container.addEventListener("touchstart", (e) => {
  startX = e.touches[0].pageX - container.offsetLeft;
  scrollLeft = container.scrollLeft;
});

container.addEventListener("touchmove", (e) => {
  const x = e.touches[0].pageX - container.offsetLeft;
  const walk = (x - startX) * 1.2; 
  container.scrollLeft = scrollLeft - walk;
});
</script>
<script>
      let highlightData = {!! json_encode($highlightDates ?? []) !!};
 // <-- Dates to highlight (ex: [1,2,4])

        const dateList = document.getElementById("dateList");
        const monthDisplay = document.getElementById("monthDisplay");

        let currentDate = new Date();
        let currentWeekStart = getWeekStart(currentDate);

        function getWeekStart(date) {
            const temp = new Date(date);
            const day = temp.getDay();
            temp.setDate(temp.getDate() - day);
            return temp;
        }

        function renderWeek() {
            dateList.innerHTML = "";
            const start = new Date(currentWeekStart);

         let highlightData = {!! json_encode($highlightDates ?? []) !!};

        // // ⭐ If backend sends [], convert into full 7 keys:
        if (Array.isArray(highlightData) && highlightData.length === 0) {
            highlightData = {
                sun: 0, mon: 0, tue: 0, wed: 0,
                thu: 0, fri: 0, sat: 0,
            };
        }

        // // Debug:
        // console.log("Highlight Data:", highlightData);


            monthDisplay.textContent = `${monthNames[start.getMonth()]} ${start.getFullYear()}`;

            for (let i = 0; i < 7; i++) {
                const d = new Date(start);
                d.setDate(start.getDate() + i);

                const dateDiv = document.createElement("div");
                dateDiv.className = "date";
                dateDiv.textContent = d.getDate();

                // ⭐ GREEN HIGHLIGHT if date is in highlightDates[] ⭐
                if (highlightDates.includes(d.getDate())) {
                    dateDiv.style.backgroundColor = "green";
                    dateDiv.style.color = "white";
                    dateDiv.style.borderRadius = "8px";
                    dateDiv.style.fontWeight = "bold";
                    dateDiv.style.padding = "5px";
                }

                // Highlight today's date
                const today = new Date();
                if (
                    d.getDate() === today.getDate() &&
                    d.getMonth() === today.getMonth() &&
                    d.getFullYear() === today.getFullYear()
                ) {
                    dateDiv.classList.add("selected");
                }

                dateDiv.addEventListener("click", () => {
                    currentDate = new Date(d);
                    renderWeek();
                });

                dateList.appendChild(dateDiv);
            }
        }

        document.getElementById("prevBtn").addEventListener("click", () => {
            currentWeekStart.setDate(currentWeekStart.getDate() - 7);
            renderWeek();
        });

        document.getElementById("nextBtn").addEventListener("click", () => {
            currentWeekStart.setDate(currentWeekStart.getDate() + 7);
            renderWeek();
        });

        renderWeek();
    </script>
    
<script>
  


// const days = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];
// const weekBody = document.getElementById("weekBody_");

// days.forEach(day => {
//     const today = new Date();
//     const date = new Date(today.setDate(today.getDate() - today.getDay() + days.indexOf(day) + 1));
//     const formattedDate = date.toLocaleDateString('en-GB', { day: '2-digit' });

//     weekBody.innerHTML += `
//         <tr>
//             <td>${formattedDate}</td>
//             <td>
//                 <input type="number" class="form-control form-control-sm entry"
//                     data-day="${day}" min="0" value="0" oninput="calculateTotal(event)">
//             </td>
//         </tr>`;
// }); 


// function calculateTotal() {
//     let total = 0;
//     document.querySelectorAll('.entry').forEach(input => {
//         let value = Number(input.value) || 0;
//         if (value < 0) input.value = 0;
//         total += value;
//     });
//     document.getElementById('totalCount').textContent = total;
// }


document.querySelectorAll('.openWeeklyModal').forEach(item => {
    item.addEventListener('click', function () {

        let homeworkId = this.getAttribute('data-homework-id');
        let exerciseId = this.getAttribute('data-exercise-id');
        let exerciseName = this.getAttribute('data-exercise-name');

        let card = this.closest('.exercise-card');

        
        document.querySelectorAll('.exercise-card').forEach(c => c.classList.remove('active-card'));
        card.classList.add('active-card');

        // Set hidden inputs inside active card
        card.querySelector('.exerciseId').value = exerciseId;
        card.querySelector('.homeworkId').value = homeworkId;

        // Show exercise name in modal
        document.getElementById('modalExerciseName').textContent = exerciseName;
    });
});

// document.getElementById('saveBtn').addEventListener('click', () => {

//     // Validate first
//     let inputs = document.querySelectorAll('.entry');
//     let empty = false;

//     inputs.forEach(input => {
//         if (input.value.trim() === "" || input.value.trim() === "0") {
//             empty = true;
//         }
//     });

//     if (empty) {
//         Swal.fire({
//             icon: "warning",
//             title: "Incomplete!",
//             text: "Please enter numbers for all days before saving.",
//         });
//         return;
//     }

    
//     let card = document.querySelector('.exercise-card'); 

//     let formData = {
//         teacher_id: document.getElementById('teacherId').value,
//         grp_id: document.getElementById('groupId').value,
//         student_id: document.getElementById('studentId').value,
//         exercise_id: card.querySelector('.exerciseId').value,
//         week_id: document.getElementById('weekId').value,
//         homework_id: card.querySelector('.homeworkId').value,
//         achieved_count: document.getElementById('totalCount').textContent,
//         status: 1,
//         _token: "{{ csrf_token() }}"
//     };
//     console.log(formData);

//     document.querySelectorAll('.entry').forEach(input => {
//         formData[input.dataset.day] = input.value || 0;
//     });

//     fetch("{{ route('weekcount.store') }}", {
//         method: "POST",
//         headers: { "Content-Type": "application/json" },
//         body: JSON.stringify(formData)
//     })
//     .then(res => res.json())
//     .then(data => {
//         if (data.success) {
//             Swal.fire({
//                 title: "Saved!",
//                 text: "Weekly data saved successfully.",
//                 icon: "success",
//                 timer: 1500,
//                 showConfirmButton: false
//             });
//         } else {
//             Swal.fire("Error", data.message, "error");
//         }
//     })
//     .catch(() => Swal.fire("Error", "Something went wrong!", "error"));
// });

</script>
<script>
let currentPanel = 0;
const slider = document.getElementById('stageSlider');
const totalPanels = slider.children.length;

document.querySelector(".right-btn").addEventListener("click", () => {
    if (currentPanel < totalPanels - 1) {
        currentPanel++;
        slider.style.transform = `translateX(-${currentPanel * 100}%)`;
    }
});

document.querySelector(".left-btn").addEventListener("click", () => {
    if (currentPanel > 0) {
        currentPanel--;
        slider.style.transform = `translateX(-${currentPanel * 100}%)`;
    }
});
</script><script>
document.addEventListener("DOMContentLoaded", function () {
    const panels = document.querySelectorAll(".stage-panel");
    let currentSlide = 0;

    const stageSlider = document.getElementById("stageSlider");
    const currentSlideNum = document.getElementById("currentSlideNum");
    const totalSlides = document.getElementById("totalSlides");

    // Set total slides
    totalSlides.textContent = panels.length;

    // Function to show slide
    function showSlide(index) {
        stageSlider.style.transform = `translateX(-${index * 100}%)`;
        currentSlideNum.textContent = index + 1;
    }

    // Left button
    document.querySelector(".left-btn").addEventListener("click", function () {
        if (currentSlide > 0) {
            currentSlide--;
            showSlide(currentSlide);
        }
    });

    // Right button
    document.querySelector(".right-btn").addEventListener("click", function () {
        if (currentSlide < panels.length - 1) {
            currentSlide++;
            showSlide(currentSlide);
        }
    });

    // Initialize
    showSlide(currentSlide);
});
</script>
<script>
document.querySelectorAll('.video-thumbnail').forEach(thumbnail => {
    thumbnail.addEventListener('click', function() {
        const videoPath = this.dataset.videoPath;
        if (!videoPath) return; // no video, do nothing
        console.log(`Playing video: ${videoPath}`);
        const video = document.getElementById('videoPlayer');
        const source = document.getElementById('videoSource');

        source.src = videoPath; // set the video path
        video.load();
        video.currentTime = 0;
        video.play();

        const modal = new bootstrap.Modal(document.getElementById('videoModal'));
        modal.show();

        // Pause video when modal closes
        document.getElementById('videoModal').addEventListener('hidden.bs.modal', function () {
            video.pause();
            source.src = ""; // clear source
        }, { once: true });
    });
});
</script>

@endpush