@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' => 'Resources Assign'])
            <!-- <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">
                   
                </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 d-xl-none ps-3 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-white p-0" id="iconNavbarSidenav">
                            <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>
                    </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>
<!-- jQuery (MUST be before Select2 JS) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Select2 CSS & JS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js">


</script>

<div class="card my-4" style="margin: 0 5%;">
      <div class="text-left mt-3">
                        <a href="/default_home" class="btn btn-secondary mx-3">← Back to Dashboard</a>
                    </div>
    <div class="card-header">
        <h4 class="text-center">Exercise Library</h4>

        <div class="card my-4" style="margin: 0 5%;">
    <div class="card-body">
        <form method="POST" id="assignForm" action="{{ route('exerciseassignss') }}">

            @csrf

            <div class="row justify-content-center mb-4">
                {{-- <label class="col-sm-3 col-form-label text-end">Select Students:</label> --}}
                <div class="col-sm-6">
                       

                     <div class="card">
    <div class="card-header">
        <h5 class="text-center mb-0">Select Week</h5>
    </div>
   
    <div class="card-body">
    <input type="hidden" name="group_id" value="{{ $groupId }}">
    <select id="weekSelect"
            class="form-select select2"
            name="session_id" 
            data-placeholder="Select Week">

        @foreach($sessionOptions as $opt)
            @php
                preg_match('/week_(\d+)/', $opt['label'], $matches);
                $weekNum = isset($matches[1]) ? intval($matches[1]) : null;
            @endphp

            <option value="{{ $opt['id'] }}"
                @if(isset($grpidfordropdown) && $weekNum === intval($grpidfordropdown))
                    selected
                @endif>
                {{ $opt['label'] }}
            </option>
        @endforeach
    </select>
</div>
    <div class="text-center mt-3">
        <button type="button" id="loadAssignedBtn" class="btn btn-secondary">
            Load Assigned Exercises
        </button>
    </div>
    <div class="text-center mt-0">
    <button type="hidden" id="DocsloadAssignedBtn" class=""
            data-group="{{ $groupId }}">
        <!-- Load exercises from Docs -->
    </button>
</div>
</div>

                   <div class="col-sm-4">
    {{-- Hidden field for the authenticated user --}}
    <input type="hidden" name="student_id[]" value="{{ auth()->user()->id }}">
</div>
                </div>
            {{-- </div> --}}
      <div class="modal fade" id="warningModal" tabindex="-1" aria-labelledby="warningModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-warning">
        <h5 class="modal-title" id="warningModalLabel">Action Required</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Please click "Load Assigned Exercises" button before selecting students.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

            <!-- Exercises Table -->
            {{-- <div class="card mb-4"> --}}

         <div class="slider-wrapper position-relative">
                                                        @php
                                                       
                                                             $chunks = collect($exercises ?? [])->chunk(1);
                                                        @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 $panel)
                                                                            <section class="stage-panel">   
                                                                                    <div class="exercise-list">
                                                                                        <h5 class="fw-bold text-primary text-center mb-3">
          
                                                                                        </h5>

                                                                                        <div class="exercise-list"id="stageContainers">
                                                                                            @foreach($panel as $exercise)
                                                                                            


                                                                                                    <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 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="{{ $exercise->id }}"
                            data-video-path="{{ asset($exercise->ex_path ?? '') }}">
                            <img src="{{ asset($exercise->thumbnail_path ?: 'assets/img/default-thumb.png') }}" 
                                alt="Thumbnail"
                                class="rounded"
                                style="width:100%; height:100%; object-fit:cover;">

                         
                        </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;">
                                                                                                                                            {{ $exercise->ex_name }}
                                                                                                                                        </h6>

                                                                                                                                                                                                                                      <span class="badge bg-warning text-dark openWeeklyModal px-2 py-1"
                                                                                                                                                data-homework-id="{{ $exercise->id }}"
                                                                                                                                                data-exercise-id="{{ $exercise->id }}"
                                                                                                                                                data-exercise-name="{{ $exercise->ex_name }}"
                                                                                                                                                style="font-size: 9px; border-radius: 8px;">
                                                                                                                                                In Progress 
                                                                                                                                            </span>
                                 
                                                                                                                                    </div>
                                                                                                                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="form-check ms-2">
                                            <input class="form-check-input" type="checkbox"
                                                   name="selected_exercises[]"
                                                   value="{{ $exercise->id }}"
                                                   id="exercise_{{ $exercise->id }}">
                                            <label class="form-check-label small" for="exercise_{{ $exercise->id }}">
                                                Select
                                            </label>
                                        </div>
                                </div>

                                                                                                                                                                                                              </div>
                                                                                                            </div>
                                                                                                                        <input type="hidden" class="teacherId" value="{{ $teacher_id->teacher_id ?? '' }}"><input type="hidden" name="row[{{ $exercise->id }}][homework_id]" value="{{ $exercise->id }}">

                                  <input type="hidden" name="row[{{ $exercise->id }}][assigned]" value="0">
                                                                                      <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' }}">
<input type="hidden"
       name="row[{{ $exercise->id }}][total]"
       id="total_{{ $exercise->id }}"
       value="0">


  
<div class="table-responsive mt-1">
   <table class="table table-bordered table-sm text-center">
    <thead class="table-light">
        <tr class="dateRow" data-ex="{{$exercise->id}}">
            <th>Date</th>
        </tr>
    </thead>

    <tbody>
        <tr class="inputRow" data-ex="{{$exercise->id}}">
            <th>How many can I do</th>
        </tr>
    </tbody>

    <tfoot>
        <tr class="bg-light">
            <th>Total</th>
            <th colspan="7" class="totalCount">0</th>
        </tr>
    </tfoot>
</table>

<!-- </div>
<script>
(function () {
    const days = ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"];
    const dateRow = document.getElementById("dateRow_${ex.id}");
    const inputRow = document.getElementById("inputRow_${ex.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' });

        // DATE COLUMN
        dateRow.innerHTML += `<th>${formattedDate}</th>`;

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

    });
})();
</script> -->


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


                                                                                            @endforeach
                                                                                        </div>    
                                                                                    </div>
                                                                            </section>
                                                                        @endforeach
                                                            </div>
                                                            

                                                          

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

 

                    <div class="text-center">
                        <button id="assignBtn" type="submit" class="btn btn-primary px-4 saveBtn ">Assign Selected Exercises</button>
                       <!-- <a href="{{ url()->current() . '?group_id=' . request('group_id') }}"    class="btn btn-secondary fw-bold"> -->
                         <a href="/default_home"    class="btn btn-secondary fw-bold">
                        
                                Back
                            </a>
        
                    </div>

            </div>
        </form>
    </div>
</div>
    </div>
    
    <div class="card-body">
        <div class="container">
       <!-- <form method="GET" action="{{ route('exercise_students', ['id' => $groupId ?? 0]) }}">
    <input type="hidden" name="group_id" value="{{ $groupId }}">

    <div class="row mb-3 justify-content-center align-items-center">
        <label class="col-sm-3 col-form-label text-end">Select Resource Type:</label>
        <div class="col-sm-4 d-flex gap-2 flex-wrap">
            @php
                $resources = [
                    1 => 'Audio',
                    2 => 'Video',
                    3 => 'Image',
                    4 => 'Document',
                ];
                $selectedResources = (array) request('resource_type', []);
            @endphp

            @foreach($resources as $key => $label)
                <button type="submit"
                        name="resource_type[]"
                        value="{{ $key }}"
                        class="btn btn-outline-primary {{ in_array((string)$key, $selectedResources) ? 'active' : '' }}">
                    {{ $label }}
                </button>
            @endforeach
        </div>
    </div>
</form> -->

            <!-- {{-- <div class="row justify-content-center">
                <label class="col-sm-3 col-form-label text-end">Select Students:</label>
                <div class="col-sm-4">
                    <select class="form-select select2" name="student_id[]" multiple>
                        @foreach ($students as $student)
                            <option value="{{ $student->id }}"
                                @if(in_array($student->id, old('student_id', [])))
                                    selected
                                @endif>
                                {{ $student->firstname }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div> --}} -->
            <div class="col-sm-4">
    {{-- Hidden field for the authenticated user --}}
    <input type="hidden" name="student_id[]" value="{{ auth()->user()->id }}">
</div>

        </div>
    </div>

</div>
<!-- Modal -->
  <form method="POST" id="assignForm" action="{{ route('exerciseassignss') }}">

            @csrf
<div class="modal fade" id="exerciseModal" tabindex="-1" aria-labelledby="exerciseModalLabel" aria-hidden="true">

  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title" id="exerciseModalLabel">Assigned Exercisess</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
          <table class="table table-bordered table-hover text-center">
            <thead class="table-dark" id="exerciseList"style="max-width: 600px; overflow-x: auto;">
              <tr>
                <th>#</th>
                <th>File Name</th>
                <th>Thumbnail</th>
             
                <th>Weekwise Count</th>
                <th>Sub Head</th>
                <th>Select</th>
              </tr>
            </thead>
            <tbody id="exerciseListBody">
            @foreach($exercises as $index => $exercise)
                <tr>
                  <td>{{ $index + 1 }}</td>
                  <td>{{ $exercise->ex_name ?? 'N/A' }}</td>
                  <td>
                    @if(!empty($exercise->thumbnail_path))
                      <img src="{{ asset($exercise->thumbnail_path) }}" alt="Thumbnail" style="width:80px; height:auto;">
                    @else
                      N/A
                    @endif
                  </td>
                  <!-- <td>
                    @php
                      $types = ['1' => 'Audio', '2' => 'Video', '3' => 'Image', '4' => 'Document'];
                    @endphp
                    {{ $types[$exercise->ex_path_id] ?? 'Unknown' }}
                  </td> -->
                  <td>
                    <input type="number" name="weekwise_count[{{ $exercise->id }}]"
                           class="form-control text-center" value="0" min="0" step="1">
                  </td>
                  <td>
                    <select name="sub_head[{{ $exercise->id }}]" class="form-select text-center">
                      <option value="">General</option>
                      <option value="Relaxation">Relaxation</option>
                      <option value="Seated">Seated</option>
                      <option value="Standing">Standing</option>
                      <option value="4 Point Kneeling">4 Point Kneeling</option>
                      <option value="Prone">Prone</option>
                      <option value="Side Lying">Side Lying</option>
                      <option value="Knee Rolls">Knee Rolls</option>
                    </select>
                  </td>
                  <td>
                    <input type="checkbox" name="selected_exercises[]" value="{{ $exercise->id }}" />
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
      <!-- <button id="doneBtn" type="button" class="btn btn-success">Done</button> -->
  <button id="assignBtn" type="submit" class="btn btn-primary ">Assign Selected Exercises</button>

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


            <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>
<!-- @if(isset($exercises) && count($exercises) > 0 && request()->has('resource_type')) -->

<!-- @endif -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<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;
}

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

/* ✅ 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%;
  }
}

.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;
}

</style>

<script>
document.getElementById('loadAssignedBtn').addEventListener('click', function () {
    // Get selected weeks
   const weekId = $('#weekSelect').val();

if (!weekId) {
    Swal.fire('Select Week', 'Please choose a week first.', 'warning');
    return;
}
    // Show the modal
    const modal = new bootstrap.Modal(document.getElementById('exerciseModal'));
    modal.show();
});
document.getElementById('doneBtn').addEventListener('click', function() {
  document.activeElement.blur(); // remove focus before closing modal
  const modal = bootstrap.Modal.getInstance(document.getElementById('exerciseModal'));
  modal.hide();
});


</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const loadBtn = document.getElementById('loadAssignedBtn');
    // const doneBtn = document.getElementById('doneBtn');
    const assignBtn = document.getElementById('assignBtn');
    const weekSelect = document.getElementById('weekSelect');

    // ✅ Open modal
    loadBtn.addEventListener('click', function () {
       const weekId = $('#weekSelect').val();

if (!weekId) {
    Swal.fire('Select Week', 'Please choose a week first.', 'warning');
    return;
}

        const modal = new bootstrap.Modal(document.getElementById('exerciseModal'));
        modal.show();
    });
$('#exerciseModal').on('hidden.bs.modal', function () {
    $('.modal-backdrop').remove(); // remove any leftover backdrop
    $('body').removeClass('modal-open'); // remove the class that prevents scrolling
});
    // ✅ Safely close modal + show Assign button
    doneBtn.addEventListener('click', function () {
        // Remove focus from the button before hiding modal
        doneBtn.blur();

        // Close the modal properly
        const modal = bootstrap.Modal.getInstance(document.getElementById('exerciseModal'));
        modal.hide();

        // Then show Assign button
        assignBtn.style.display = 'inline-block';
    });
});
</script>

<script>
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: "Select students"
        });
    });
    $(document).ready(function() {
        $('.select1').select2({
            placeholder: "Select resources"
        });
    });
    
</script>

<script>
document.getElementById("searchInput").addEventListener("keyup", function() {
    let value = this.value.toLowerCase();
    let rows = document.querySelectorAll("#exerciseTable tbody tr");

    rows.forEach(row => {
        let text = row.textContent.toLowerCase();
        row.style.display = text.includes(value) ? "" : "none";
    });
});

</script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.getElementById('assignForm').addEventListener('submit', function (e) {
    e.preventDefault(); // stop normal submit

    let formData = new FormData(this);

    fetch(this.action, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: formData
    })
    .then(resp => resp.json())
    .then(data => {
        if (data.status === 'success') {
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: data.message,
                confirmButtonText: 'OK'
            }).then(() => {
                // Optional: refresh the current page or clear form
                window.location.reload();
            });
        } else if (data.status === 'error') {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: data.message || 'Something went wrong.'
            });
        }
    })
    .catch(err => {
        console.error(err);
        Swal.fire('Error', 'Server error occurred', 'error');
    });
});
</script>

<script>
    $(document).ready(function() {
        // Initialize select2
        $('#studentSelect').select2();

        // Track if button is clicked
        let loadClicked = false;

        $('#loadAssignedBtn').on('click', function() {
            loadClicked = true;
            $('#studentSelect').prop('disabled', false);
            $('#studentSelect').select2(); // reinitialize
            $('#studentSelect').select2('open'); // optional: auto-open dropdown
        });

        // Prevent clicking select before button is clicked
        $('#studentSelect').on('select2:opening', function(e) {
            if (!loadClicked) {
                e.preventDefault(); // prevent opening
                var myModal = new bootstrap.Modal(document.getElementById('warningModal'));
                myModal.show();
            }
        });
    });
</script>
<script>
document.getElementById('loadAssignedBtn').addEventListener('click', function () {
    // const weekIds = $('#weekSelect').val();     
    const groupId = '{{ $groupId }}';

  const weekIds = $('#weekSelect').val();

if (!weekIds) {
    Swal.fire('Select Week', 'Please choose a week first.', 'warning');
    return;
}

    fetch('{{ route('exercises.assigning') }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ group_id: groupId, week_ids: weekIds })
    })
    .then(resp => resp.json())
    .then(data => {
        if (data.status === 'success') {

            // Reset all checkboxes
            document.querySelectorAll('input[name="selected_exercises[]"]').forEach(cb => cb.checked = false);

            // Reset weekwise_count and sub_head
            document.querySelectorAll('input[name^="weekwise_count"]').forEach(input => input.value = 0);
            document.querySelectorAll('select[name^="sub_head"]').forEach(sel => sel.value = '');

            // Mark assigned exercises & fill values
            data.exercises.forEach(item => {
                const checkbox = document.querySelector(`input[name="selected_exercises[]"][value="${item.exercise_id}"]`);
                if (checkbox) {
                    checkbox.checked = true;

                    // Set weekwise_count
                    const countInput = document.querySelector(`input[name="weekwise_count[${item.exercise_id}]"]`);
                    if (countInput) countInput.value = item.weekwise_count ?? 0;

                    // Set sub_head
                    const subHeadSelect = document.querySelector(`select[name="sub_head[${item.exercise_id}]"]`);
                    if (subHeadSelect) subHeadSelect.value = item.sub_head ?? '';
                }
            });

            Swal.fire('Loaded', 'Assigned exercises have been marked.', 'success');
        } else {
            Swal.fire('Error', 'Unable to load assigned exercises.', 'error');
        }
    })
    .catch(err => {
        console.error(err);
        Swal.fire('Error', 'Server error occurred.', '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");
    const indicators = document.getElementById("slideIndicators");
    let currentSlide = 0;

    // Create dots
    panels.forEach((_, index) => {
        const dot = document.createElement("span");
        dot.classList.add("indicator-dot");
        if (index === 0) dot.classList.add("active");
        indicators.appendChild(dot);
    });

    const dots = indicators.querySelectorAll(".indicator-dot");

    // Update active dot
    function updateDots() {
        dots.forEach((dot, i) => {
            dot.classList.toggle("active", i === currentSlide);
        });
    }

    // Left button
    document.querySelector(".left-btn").addEventListener("click", function () {
        if (currentSlide > 0) {
            currentSlide--;
            document.getElementById("stageSlider").style.transform = 
                `translateX(-${currentSlide * 100}%)`;
            updateDots();
        }
    });

    // Right button
    document.querySelector(".right-btn").addEventListener("click", function () {
        if (currentSlide < panels.length - 1) {
            currentSlide++;
            document.getElementById("stageSlider").style.transform = 
                `translateX(-${currentSlide * 100}%)`;
            updateDots();
        }
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // ✅ Define the main function logic (your button click code)
    function loadDocsExercises() {
        const groupId = "{{ $groupId }}";
        const weekIds = $('#weekSelect').val();

        if (!weekIds || weekIds.length === 0) {
            Swal.fire('Select Week', 'Please choose at least one week first.', 'warning');
            return;
        }

        fetch(`/load-week-exercises`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ group_id: groupId, week_ids: weekIds })
        })
        .then(res => res.json())
      .then(data => {
    if (data.error) return;

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

    let videos = data.videos;
    let chunkSize = 1;  // same as Blade (1 exercise per panel)
    let totalSlides = Math.ceil(videos.length / chunkSize);
window.weekData = data.week_data || {};
generateWeeklyTables();
    document.getElementById("totalSlides").textContent = totalSlides;
    document.getElementById("currentSlideNum").textContent = 1;

    for (let i = 0; i < videos.length; i += chunkSize) {
        let panelVideos = videos.slice(i, i + chunkSize);

        let panelHTML = `
        <section class="stage-panel">   
            <div class="exercise-list">
                <div class="exercise-list" id="stageContainers">
        `;

        panelVideos.forEach(ex => {
            panelHTML += `
                <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="d-flex align-items-center">

                        <!-- Thumbnail with Play Icon -->
                        <div class="video-thumbnail position-relative" 
                             style="width:80px; height:80px; cursor:pointer;"
                             data-video-path="/${ex.ex_path}">
                             
                             <img src="/${ex.thumbnail_path ?? 'assets/img/default-thumb.png'}"
                                  class="rounded"
                                  style="width:100%; height:100%; object-fit:cover;">
                              
                             <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 ms-3">

                            <!-- Title + Badge -->
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <h6 class="fw-bold mb-0" style="font-size: 13px;">${ex.ex_name}</h6>
                               
                            </div>
                         <div class="d-flex justify-content-between align-items-center">
                                        <div class="form-check ms-2">
                                            <input class="form-check-input" type="checkbox"
                                                   name="selected_exercises[]"
                                                   value="${ex.ex_name}"
                                                   id="exercise_${ex.id}">
                                            <label class="form-check-label small" for="exercise_${ex.id}">
                                                Select
                                            </label>
                                        </div>
                                    </div>
                              </div>
                    </div>

                    <!-- Weekly Table -->
                    
<div class="table-responsive mt-1">
 <table class="table table-bordered table-sm text-center">
    <thead class="table-light">
        <tr class="dateRow" data-ex="${ex.id}">
            <th>Date</th>
        </tr>
    </thead>

    <tbody>
        <tr class="inputRow" data-ex="${ex.id}">
            <th>How many can I do</th>
        </tr>
    </tbody>

    <tfoot>
        <tr class="bg-light">
            <th>Total</th>
            <th colspan="7" class="totalCount">0</th>
        </tr>
    </tfoot>
</table>

</div>


                    

                </div>
            `;
        });

        panelHTML += `
                </div>    
            </div>
        </section>
        `;

        stageSlider.insertAdjacentHTML("beforeend", panelHTML);
    }

    // Generate weekly dates AFTER inserting HTML
    generateWeeklyTables();
});
    }

    // ✅ Bind to click
    document.getElementById('DocsloadAssignedBtn')
            .addEventListener('click', loadDocsExercises);

    // ✅ Automatically trigger it once page fully loads
    setTimeout(loadDocsExercises, 800);  // small delay (0.8s)
});

let currentSlide = 1;

document.querySelector('.right-btn').onclick = () => {
    if (currentSlide < totalSlides) currentSlide++;
    updateSlideNumber();
};

document.querySelector('.left-btn').onclick = () => {
    if (currentSlide > 1) currentSlide--;
    updateSlideNumber();
};

function updateSlideNumber() {
    document.getElementById("currentSlideNum").textContent = currentSlide;
}

function generateWeeklyTables() {
    const days = ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"];

    document.querySelectorAll('[id^="weekBody_"]').forEach(table => {
        let html = "";

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

            html += `
                <tr>
                    <td>${formattedDate}</td>
                    <td><input type="number" class="form-control form-control-sm entry" min="0" value="0"></td>
                </tr>`;
        });

        table.innerHTML = html;
    });
}
</script> 

</script>
<script>
function generateWeeklyTables() {

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

    document.querySelectorAll(".dateRow").forEach(dateRow => {

        const exId = dateRow.dataset.ex;
        const table = dateRow.closest("table");
        const inputRow = table.querySelector(".inputRow");

        // clear old cells (important when reload)
        dateRow.querySelectorAll("th:not(:first-child)").forEach(th => th.remove());
        inputRow.querySelectorAll("td").forEach(td => td.remove());

        // 🔹 DATA ACCESS
        const exerciseData =
            window.weekData?.[exId]?.[exId] || {};

        let rowTotal = 0;

        days.forEach((day, index) => {

            const value = exerciseData[day] ?? 0;
            rowTotal += value;

            // DATE
            const today = new Date();
            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>`);
                console.log(`Date for ${day}: ${value}`);
            // INPUT (editable + prefilled)
            inputRow.insertAdjacentHTML("beforeend", `
                <td>
                    <input type="number"
                        class="form-control form-control-sm entry text-center"
                        min="0"
                        value="${value}"
                        oninput="calculateTotal(this)">
                </td>
            `);
        });

        
        table.querySelector(".totalCount").textContent = rowTotal;
    });
}
</script>

<script>
(function () {

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

    document.querySelectorAll(".dateRow").forEach(dateRow => {

        const exId = dateRow.dataset.ex;
        const table = dateRow.closest("table");
        const inputRow = table.querySelector(".inputRow");

        // homework_id == exercise_id in your data
        const homeworkData = window.weekData?.[exId]?.[exId] || {};

        // build dates + inputs
        days.forEach((day, index) => {

            const value = homeworkData[day] ?? 0;

            // DATE HEADER
            const today = new Date();
            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>`);

            // INPUT (editable, pre-filled)
            inputRow.insertAdjacentHTML("beforeend", `
                <td>
                    <input type="number"
                        class="form-control form-control-sm entry text-center"
                        min="0"
                        value="${value}"
                        oninput="calculateTotal(this)">
                </td>
            `);
        });

        // add total cell at end of input row
        inputRow.insertAdjacentHTML("beforeend", `<td class="fw-bold rowTotal">0</td>`);

        // calculate initial total
        calculateTotal(inputRow.querySelector("input"));
    });

})();
</script>
<script>
function calculateTotal(input) {
    const table = input.closest("table");
    const inputs = table.querySelectorAll("input.entry");
    let total = 0;

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

    table.querySelector(".totalCount").textContent = total;
}

</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; 
            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 });
        });
    });



 document.querySelectorAll('.saveBtnss').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){
                
            } else {
                Swal.Swal.fire({
                    title: "Saved!",
                    text: "Weekly data saved successfully.",
                    icon: "success",
                    timer: 1500,
                    showConfirmButton: false
                });fire("Error", data.message, "error");
            }
        })
        .catch(() => Swal.fire("Error", "Something went wrong!", "error"));
    });
});


</script>
<script>

function generateWeeklyTables() {
    const days = ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"];

    document.querySelectorAll("[id^='dateRow_']").forEach(dateRow => {
        const id = dateRow.id.replace("dateRow_", "");
        const inputRow = document.getElementById(`inputRow_${id}`);

        if (!inputRow) return;

        // RESET
        dateRow.innerHTML = "<th>Date</th>";
        inputRow.innerHTML = "<th>How many can you do</th>";

        const today = new Date();
        const weekStart = new Date(today);
        weekStart.setDate(today.getDate() - today.getDay() + 1);

        days.forEach((day, i) => {
            const d = new Date(weekStart);
            d.setDate(weekStart.getDate() + i);

            const formatted = d.toLocaleDateString("en-GB", { day: "2-digit" });

            dateRow.insertAdjacentHTML("beforeend", `<th>${formatted}</th>`);
            inputRow.insertAdjacentHTML("beforeend", `
                <td>
                    <input type="number"
                           class="form-control form-control-sm text-center entry"
                           min="0" value="0">
                </td>
            `);
        });
    });
}



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 generateWeeklyTables() {
    const days = ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"];

    document.querySelectorAll(".dateRow").forEach(dateRow => {
        const exerciseId = dateRow.dataset.ex;
        const inputRow = document.querySelector(
            `.inputRow[data-ex="${exerciseId}"]`
        );

        if (!inputRow) return;

        // clear if already generated
        dateRow.querySelectorAll("th:not(:first-child)").forEach(e => e.remove());
        inputRow.querySelectorAll("td").forEach(e => e.remove());

        days.forEach((day, index) => {
            const today = new Date();
            const date = new Date();
            date.setDate(today.getDate() - today.getDay() + index + 1);

            const formattedDate = date.toLocaleDateString('en-GB', { day: '2-digit' });

            // Date column
            dateRow.insertAdjacentHTML("beforeend", `<th>${formattedDate}</th>`);

            // Input column
            inputRow.insertAdjacentHTML("beforeend", `
                <td>
                    <input type="number"
                        name="row[${exerciseId}][${day}]"
                        class="form-control form-control-sm entry text-center"
                        min="0"
                        value="0"
                        oninput="updateTotal(${exerciseId})">
                </td>
            `);
        });
    });
}

function updateTotal(exerciseId) {
    let total = 0;
    document.querySelectorAll(
        `.inputRow[data-ex="${exerciseId}"] .entry`
    ).forEach(input => {
        total += Number(input.value) || 0;
    });

    const totalInput = document.getElementById(`total_${exerciseId}`);
    if (totalInput) totalInput.value = total;
}
</script>


    @include('layouts.footers.auth.footer')

    @endsection