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

/* Base range */
.progressBar {
    height: 6px;
    border-radius: 5px;
    outline: none;
}

/* Chrome / Edge / Safari */
.progressBar::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 5px;
    background: transparent;
}

.progressBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
}

/* Firefox */
.progressBar::-moz-range-track {
    height: 6px;
    border-radius: 5px;
    background: transparent;
}

.progressBar::-moz-range-thumb {
    width: 0;
    height: 0;
}


.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;
     width: 100%;
    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;margin:7px;">
                                                                                                                                            {{ $homework->ex_name }}
                                                                                                                                        </h6>

                                 @php
    $progress = $homeworkProgress[$homework->homework_id] ?? null;
@endphp

@if($progress && $progress['isComplete'])
    <span class="badge bg-success px-2 py-1" style="font-size:9px">
        <i class="bi bi-check-circle-fill me-1"></i> Done
    </span>
@else
    <span class="badge bg-warning text-dark px-2 py-1" style="font-size:9px">
        In Progress {{ $progress['percent'] ?? 0 }}%
    </span>
@endif

                                                                                                                                    </div>

   <input type="range"
    min="0"
    max="9"
    value="{{ min(9, round($percent / 10)) }}"
    class="form-range w-100 progressBar"
    disabled style="margin:7px;padding:3px;">


                                                                                                                    </div>
                                                                                                            </div>
                                                                                                                        <input type="hidden" class="teacherId" value="{{ $student_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 text-center">
    <thead class="table-light">
        <tr id="dateRow_{{ $homework->homework_id }}">
            <th>Date</th>
            <th>Total</th> <!-- Last column for total -->
        </tr>
    </thead>

    <tbody>
        <!-- FROM DB -->
        <tr id="doneRow_{{ $homework->homework_id }}">
            <th>Task yet to complete</th>
            <td class="rowTotal">0</td> 
        </tr>

        <!-- USER INPUT -->
        <tr id="inputRow_{{ $homework->homework_id }}">
            <th>Completed Tasks</th>
            <td class="rowTotal">0</td>
        </tr>
    </tbody>
</table>

</div><script>
window["weekData_{{ $homework->homework_id }}"] = @json($weekData);
window["doneData_{{ $homework->homework_id }}"] = @json($doneData);

</script>
<script>function calculateTotal(input) {
    const row = input.closest("tr");   // get the row
    const cells = row.querySelectorAll("input.entry"); // all inputs in this row
    let total = 0;

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

    // update the last cell in the row
    const totalCell = row.querySelector(".rowTotal");
    if (totalCell) totalCell.textContent = total;
}
//   updateProgress(table);
</script>

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

    const dateRow  = document.getElementById("dateRow_" + hwId);
    const doneRow  = document.getElementById("doneRow_" + hwId);
    const inputRow = document.getElementById("inputRow_" + hwId);
    const doneData = window["doneData_" + hwId] || {};
    // console
    // SAFELY get weekData from window
    const weekData = window["weekData_" + hwId] || {};

    console.log('Full Week Data (JS ready):', weekData);

    const hwDataObj = weekData[Object.keys(weekData)[0]]; 
    const hwDataObjdone = doneData[Object.keys(doneData)[0]]; 
    const innerKey = Object.keys(hwDataObj)[0];           // second-level 181
    const dayValues = hwDataObj[innerKey] || {};          // { monday: 5, ... }
    const dayValuesofdone = hwDataObjdone[innerKey] || {};
    console.log('Inner Key:', innerKey, 'Day Values:', dayValues);
     let doneRowTotal = 0;
    let inputRowTotal = 0;

    days.forEach(day => {


        const value = dayValues[day] ?? 0;
         const valuedone = dayValuesofdone[day] ?? 0;
  doneRowTotal += value;
        inputRowTotal += valuedone;
        // DATE
        const today = new Date();
        const index = days.indexOf(day);
        const date = new Date(today.setDate(today.getDate() - today.getDay() + index + 1));
        const formattedDate = date.toLocaleDateString('en-GB', { day: '2-digit' });
        dateRow.insertAdjacentHTML("beforeend", `<th>${formattedDate}</th>`);

        // DONE ROW
        doneRow.insertAdjacentHTML("beforeend", `<td class="fw-semibold "style="font-size: 14px">${value}</td>`);

        // INPUT ROW
        inputRow.insertAdjacentHTML("beforeend", `
    <td>
        <input type="number"
            name="row[${hwId}][${day}]"
            class="form-control form-control-sm entry text-center"
            min="0"
            data-day="${day}"
            value="${valuedone}"       
            oninput="calculateTotal(this)">
    </td>
`);

    doneRow.querySelector(".rowTotal").textContent = doneRowTotal;
    inputRow.querySelector(".rowTotal").textContent = inputRowTotal;

  console.log('Homework ID:', hwId, 'Day:', day, 'Value:', valuedone);
// const weekValue = weekDays[day] ?? 0;
// doneRow.insertAdjacentHTML(
//   "beforeend",
//   `<td class="fw-semibold" style="font-size:14px">${weekValue}</td>`
// );

// const doneValue = doneDays[day] ?? 0;

// inputRow.insertAdjacentHTML("beforeend", `
//     <td>
//         <input type="number"
//             name="row[${hwId}][${day}]"
//             class="form-control form-control-sm entry text-center"
//             min="0"
//             value="${doneValue}"
//             oninput="calculateTotal(this)">
//     </td>
// `);
const table = dateRow.closest("table");
table.dataset.hw = hwId;

// initial progress update
updateProgress(table);

      
    });
})();
function updateProgress(table) {
    const doneRow = table.querySelector('#inputRow_' + table.dataset.hw);
    const targetRow = table.querySelector('#doneRow_' + table.dataset.hw);

    const doneTotal = Number(doneRow.querySelector('.rowTotal').textContent) || 0;
    const targetTotal = Number(targetRow.querySelector('.rowTotal').textContent) || 0;

    let percent = 0;
    if (targetTotal > 0) {
        percent = Math.min(100, Math.round((doneTotal / targetTotal) * 100));
    }

    const rangeValue = Math.round(percent / 10);

    const progressBar = table.closest('.exercise-card')
                             .querySelector('.progressBar');

    if (progressBar) {
        progressBar.value = rangeValue;
    }
}

</script>

                                                                                                                    <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 table vertical layout */
.weekBody tr {
    display: grid;
    grid-template-columns: 1fr;
    border-bottom: 1px solid #dee2e6;
}

.weekBody td {
    display: block;
    width: 100%;
}

/* Style date row */
.weekBody td:first-child {
    font-weight: 600;
    background: #f8f9fa;
    padding: 6px;
}

/* Style input row */
.weekBody td:last-child {
    padding: 6px;
}

/* 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>


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;


let hwHtml = "";

(data.homeworks || []).forEach(hw => {
    
    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 imgPath = hw.thumbnail_path
        ? `/${hw.thumbnail_path}`
        : `/assets/img/default-thumb.png`;

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

    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>
        `;
    });
setTimeout(() => updateWeekDates(data.homeworks), 50);
 const weeksByHomework = {};
            (data.weeks || []).forEach(w => {
                weeksByHomework[w.homework_id] = w;
            });

            /* ---------------- HOMEWORK TABLES ---------------- */
            let hwHtml = "";

            (data.homeworks || []).forEach(hw => {

                const weekData = weeksByHomework[hw.homework_id] || {};
                    console.log(`Week Data for HW ${hw.homework_id}:`, weekData);
                /* ----- DATE HEADER ----- */
                let dateRow = `<tr><th>Date</th>`;
                days.forEach((day, index) => {
                    const d = new Date(startDate);
                    d.setDate(d.getDate() + index);
                    const formattedDate = d.toLocaleDateString('en-GB', { day: '2-digit' });
                    dateRow += `<th>${formattedDate}</th>`;
                });
                dateRow += `</tr>`;

                /* ----- DONE ROW ----- */
                let doneRow = `<tr class="table-success fw-semibold"><td>Done</td>`;
                days.forEach(day => {
                    doneRow += `<td>${weekData[day] ?? 0}</td>`;
                });
                doneRow += `</tr>`;

                /* ----- INPUT ROW ----- */
                let inputRow = `<tr><td>Today</td>`;
                days.forEach(day => {
                    inputRow += `
                        <td>
                            <input type="number"
                                   name="row[${hw.homework_id}][${day}]"
                                   class="form-control form-control-sm entry text-center"
                                   min="0"
                                   value="0"
                                   oninput="calculateTotal(this)">
                        </td>`;
                });
                inputRow += `</tr>`;

                /* ----- FINAL TABLE ----- */
                hwHtml += `
                <section class="stage-panel">
                    <div class="exercise-card card shadow-sm border-0 rounded-4 p-3 mb-3">

                        <h6 class="bg-primary text-white py-2 px-3 rounded" style="font-size:13px;">
                            Weekly Entries
                        </h6>

                        <div class="table-responsive mt-1">
                            <table class="table table-bordered table-sm text-center">
                                <thead class="table-light">
                                    ${dateRow}
                                </thead>
                                <tbody>
                                    ${doneRow}
                                    ${inputRow}
                                </tbody>
                            </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>
                </section>`;
            });

const sliderContainer = document.getElementById("stageSlider");

if (sliderContainer) {
    sliderContainer.innerHTML = hwHtml;
    initSliderNavigation();   // Rebind buttons only after update
} else {
    console.warn("stageSlider not found when updating!");
}

// 👇 update total slide number after ajax load
document.getElementById("totalSlides").textContent = (data.homeworks || []).length;

//    initSliderNavigation();


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);
});
function updateWeekDates(homeworks) {
    const days = ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"];
    const baseDate = new Date(currentWeekStart);

    homeworks.forEach(hw => {
        const tbody = document.getElementById(`weekBody_${hw.homework_id}`);
        if (!tbody) return;

        tbody.querySelectorAll(".dateCell").forEach((cell, idx) => {
            let d = new Date(baseDate);
            d.setDate(d.getDate() + idx);
            cell.textContent = d.toLocaleDateString('en-GB', { day: '2-digit' });
        });
    });
}

function initSliderNavigation() {
    const leftBtn = document.querySelector(".left-btn");
    const rightBtn = document.querySelector(".right-btn");
    const panels = document.querySelectorAll(".stage-panel");
    const stageSlider = document.getElementById("stageSlider");
    const currentSlideNum = document.getElementById("currentSlideNum");

    if (!leftBtn || !rightBtn) return; // ← prevent crash

    let currentSlide = 0;
    document.getElementById("totalSlides").textContent = panels.length;

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

    leftBtn.addEventListener("click", () => {
        if (currentSlide > 0) {
            currentSlide--;
            showSlide(currentSlide);
        }
    });

    rightBtn.addEventListener("click", () => {
        if (currentSlide < panels.length - 1) {
            currentSlide++;
            showSlide(currentSlide);
        }
    });

    showSlide(currentSlide);
}
</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(input) {
//     let total = 0;

//     // find this input's table
//     const table = input.closest("table");

//     // find all inputs with class 'entry' in this table
//     table.querySelectorAll(".entry").forEach(el => {
//         let value = Number(el.value) || 0;
//         if (value < 0) el.value = 0;
//         total += value;
//     });

//     // update the total cell in this table
//     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 });
    });
});




function initSliderNavigation() {
    let currentSlide = 0;
    const stageSlider = document.getElementById("stageSlider");
    const panels = document.querySelectorAll(".stage-panel");
    const currentSlideNum = document.getElementById("currentSlideNum");
    const totalSlides = document.getElementById("totalSlides");

    totalSlides.textContent = panels.length;

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

    document.querySelector(".left-btn").onclick = () => {
        if (currentSlide > 0) {
            currentSlide--;
            showSlide(currentSlide);
        }
    };

    document.querySelector(".right-btn").onclick = () => {
        if (currentSlide < panels.length - 1) {
            currentSlide++;
            showSlide(currentSlide);
        }
    };

    showSlide(currentSlide);
}

</script>
<script>
function paintProgress(bar) {
    const value = Number(bar.value);
    const max = Number(bar.max);
    const percent = (value / max) * 100;

    bar.style.background = `linear-gradient(
        to right,
        #1bd330ff 0%,
        #12d837ff ${percent}%,
        #469a2faf ${percent}%,
        #18cc4bff 100%
    )`;
}

document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll(".progressBar").forEach(bar => {
        paintProgress(bar);
    });
});
</script>

@endpush