@extends('layouts/contentNavbarLayout')
@section('title', 'Zillion')
@section('content')
    @if(session('success'))
    <div class="alert alert-success">
    {{ session('success') }}
    </div>
    @endif
    <div class="card mb-6">
        <div class="card-header d-flex flex-wrap justify-content-between gap-4">
          <div class="card-title mb-0 me-1">
            <h5 class="mb-0">Admin-Initiated Module Addition</h5> <p>Add a module for the tasks below for proposal submission purposes.</p>

              
          </div>
          <div class="d-flex justify-content-md-end align-items-center column-gap-6">
            <div class="form-check form-switch mb-0">
                <input type="checkbox" class="form-check-input" id="CourseSwitch">
                <label class="form-check-label text-nowrap mb-0" for="CourseSwitch">Hide completed</label>
            </div>
        </div>
        </div>
        <div class="card-body mt-1">
          <div class="row gy-6 mb-6" id="activitiesContainer">

                 
@foreach($proposalActivities as $activity)
<div class="col-sm-6 col-lg-3 mb-4 activity-item" data-status="{{ $activity->project_status }}">
  <div class="card shadow-none border p-2 h-100">
 
    <div class="card-body p-4 pt-2">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <span class="badge rounded-pill bg-label-success">{{ $activity->clientModel->name }}</span>
        <p class="d-flex align-items-center justify-content-center fw-medium gap-1 mb-0">
            <span class="text-warning"><i class="mdi mdi-calendar-range ri-24px me-1"></i></span> {{ $activity->created_at->format('d-M-Y') }}
        </p>
      </div>
      <a href="#" class="h5" data-bs-toggle="modal" data-bs-target="#detailsModal{{ $activity->id }}">

        {{ $activity->title }}
    </a>
   
      <p class="mt-1 text-truncate">{{ $activity->description }}</p>

{{-- start --}}
@php
$startDate = \Carbon\Carbon::parse($activity->start_date);
$deadline = \Carbon\Carbon::parse($activity->deadline);
$remainingDays = now()->diffInDays($deadline, false); // Calculate remaining days
@endphp
<div class=" align-items-center bg-lighter rounded me-auto mb-4">

<span class="text-heading">Start Date :  {{ $activity->start_date }}</span><br>
<span class="text-heading">Deadline : {{ $activity->deadline }}</span>
</div>

{{-- end --}}



      {{-- assigned staff --}}
      <div class="d-flex align-items-center mb-4">
    
      
      <p class="text-right" style="display: contents;">  
            <span class="badge bg-label-primary ms-auto rounded-pill">Request for New Module Addition</span>
     
      </p>
      
      
       
        </div>
   
      {{-- /end --}}

      {{-- actions --}}
      <div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap  flex-lg-wrap flex-xxl-nowrap border-top mt-4 mb-2">
      <a href="#" class=" text-right mt-2" data-bs-toggle="offcanvas" data-bs-target="#editActivityOffcanvas_{{ $activity->id }}">
        <div class="d-flex align-items-center">
          <i class="mdi mdi-square-edit-outline text-warning ri-22px me-2"></i>
          <span class=" text-secondary">Edit</span>
        </div>
       </a>
       <a href="#" class=" text-right mt-2" data-bs-toggle="modal" data-bs-target="#addModules_{{ $activity->id }}">
        <div class="d-flex align-items-center">
          <i class="mdi mdi-format-list-group-plus text-success ri-22px me-2"></i>
          <span class=" text-secondary">Add Modules</span>
        </div>
       </a>
      
      
      </div>

      
   
      {{-- end actions --}}
    </div>
  </div>
</div>

  <!-- Assign Staff Modal -->



{{-- edit task --}}
<!-- Offcanvas for Editing Activity -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="editActivityOffcanvas_{{ $activity->id }}" aria-labelledby="editActivityOffcanvasLabel_{{ $activity->id }}">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="editActivityOffcanvasLabel_{{ $activity->id }}">Edit Activity: {{ $activity->title }}</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>

  <div class="offcanvas-body">
    <!-- Activity Edit Form -->
    <form action="{{ route('activities.update', $activity->id) }}" method="POST">
      @csrf
      @method('PUT') <!-- This is for PUT method -->

      <!-- Title -->
      <div class="form-floating form-floating-outline mb-4">
        <input type="text" class="form-control" name="title" value="{{ old('title', $activity->title) }}" required>
        <label for="title">Title</label>
      </div>

      <!-- Description -->
      <div class="form-floating form-floating-outline mb-4">
        <textarea class="form-control" name="description" required>{{ old('description', $activity->description) }}</textarea>
        <label for="description">Description</label>
      </div>

      <!-- Start Date -->
      <div class="form-floating form-floating-outline mb-4">
        <input type="date" class="form-control" id="start_date_{{ $activity->id }}" name="start_date" 
               value="{{ old('start_date', $activity->start_date ? \Carbon\Carbon::parse($activity->start_date)->format('Y-m-d') : '') }}" required>
        <label for="start_date_{{ $activity->id }}">Start Date</label>
      </div>

      <!-- Deadline -->
      <div class="form-floating form-floating-outline mb-4">
        <input type="date" class="form-control" id="deadline_{{ $activity->id }}" name="deadline" 
               value="{{ old('deadline', $activity->deadline ? \Carbon\Carbon::parse($activity->deadline)->format('Y-m-d') : '') }}" required>
        <label for="deadline_{{ $activity->id }}">Deadline</label>
      </div>

      <!-- Hours -->
      <div class="form-floating form-floating-outline mb-4">
        <input type="number" class="form-control" id="hours_{{ $activity->id }}" name="hours" value="{{ old('hours', $activity->hours) }}" required>
        <label for="hours_{{ $activity->id }}">Hours</label>
      </div>

      <!-- Industry Dropdown -->
      <div class="form-floating form-floating-outline mb-4">
        <select name="industry" id="industry" class="form-control">
          @foreach($industries as $industry)
            <option value="{{ $industry->id }}" 
                    {{ old('industry', isset($activity) ? $activity->industry : '') == $industry->id ? 'selected' : '' }}>
              {{ $industry->page_name }}
            </option>
          @endforeach
        </select>
        <label for="industry">Industry</label>
      </div>

      <!-- Solutions Dropdown -->
      <div class="form-floating form-floating-outline mb-4">
        <select name="solutions" id="solutions" class="form-control">
          @foreach($solutions as $solution)
            <option value="{{ $solution->id }}" 
                    {{ old('solution', isset($activity) ? $activity->solutions : '') == $solution->id ? 'selected' : '' }}>
              {{ $solution->page_name }}
            </option>
          @endforeach
        </select>
        <label for="solutions">Solution</label>
      </div>

      <!-- Project Type Dropdown -->
      <div class="form-floating form-floating-outline mb-4">
        <select name="project_type" id="project_type" class="form-control">
          @foreach($ptypes as $type)
            <option value="{{ $type->id }}" 
                    {{ old('project_type', isset($activity) ? $activity->project_type : '') == $type->id ? 'selected' : '' }}>
              {{ $type->category }}
            </option>
          @endforeach
        </select>
        <label for="project_type">Project Type</label>
      </div>

      <div class="form-floating form-floating-outline mb-4">
        <select name="activity_type" id="activity_type" class="form-control">
            <option value="1" {{ old('activity_type', isset($activity) && $activity->activity_type == 1 ? 'selected' : '') }}>
                Pending
            </option>
            <option value="0" {{ old('activity_type', isset($activity) && $activity->activity_type == 0 ? 'selected' : '') }}>
                Completed
            </option>
        </select>
        <label for="activity_type">Activity Type</label>
    </div>
    

      <!-- Submit Button -->
      <button type="submit" class="btn btn-primary mt-3">Update Activity</button>
    </form>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function () {
    function calculateHours(activityId) {
        const startDateInput = document.getElementById(`start_date_${activityId}`);
        const endDateInput = document.getElementById(`deadline_${activityId}`);
        const hoursInput = document.getElementById(`hours_${activityId}`);

        if (startDateInput && endDateInput && hoursInput) {
            const startDate = startDateInput.value;
            const endDate = endDateInput.value;

            if (startDate && endDate) {
                const start = new Date(startDate);
                const end = new Date(endDate);

                if (start <= end) {
                    const timeDiff = end.getTime() - start.getTime();
                    const totalDays = timeDiff / (1000 * 3600 * 24) + 1; // Include both start and end days
                    const totalHours = Math.round(totalDays * 8); // Assuming 8 hours per day

                    hoursInput.value = totalHours;
                } else {
                    hoursInput.value = 0; // Reset if invalid range
                }
            }
        }
    }

    // Attach event listener when offcanvas is opened
    $(document).on("shown.bs.offcanvas", ".offcanvas", function () {
        let activityId = $(this).attr("id").replace("editActivityOffcanvas_", "");

        let startDateInput = document.getElementById(`start_date_${activityId}`);
        let endDateInput = document.getElementById(`deadline_${activityId}`);

        if (startDateInput && endDateInput) {
            startDateInput.addEventListener("change", function () {
                calculateHours(activityId);
            });

            endDateInput.addEventListener("change", function () {
                calculateHours(activityId);
            });

            // Trigger calculation on opening in case dates are already set
            calculateHours(activityId);
        }
    });
});

</script>
{{-- /end --}}


  <!-- Modal -->
<!-- Trigger Button -->
<div class="modal fade" id="detailsModal{{ $activity->id }}" tabindex="-1"
  aria-labelledby="detailsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
      <div class="modal-content shadow-lg rounded-4 border-0" style="backdrop-filter: blur(10px);">
          
          <!-- Gradient Header -->
          <div class="modal-header">
              <h5 class="modal-title fw-bold">
                  <i class="bi bi-clipboard-data"></i> Project Information
              </h5>
              <button type="button" class="btn-close " data-bs-dismiss="modal" aria-label="Close"></button>
          </div>

          <div class="modal-body p-4">
              <!-- Glassmorphism Card -->
             {{-- NEW DESIGN --}}
<div class="row">
  <div class="col-md-4">
      <div class="card mb-6">
          <div class="card-body pt-12">
            <div class="user-avatar-section">
              <div class=" d-flex align-items-center flex-column">
                <img class="img-fluid rounded mb-4" src="{{ asset('assets/img/avatars/1.png') }}" height="120" width="120" alt="User avatar">
                <div class="user-info text-center">
                  <h5>{{ $activity->clientModel->name }}</h5>
                  <span class="badge bg-label-danger rounded-pill">{{ $activity->clientModel->organization }}</span>
                </div>
              </div>
            </div>
   
            <h5 class="pb-4 border-bottom mb-4">Details</h5>
            <div class="info-container">
              <ul class="list-unstyled mb-6">
                <li class="mb-2">
                  <span class="h6">Username:</span>
                  <span>{{ $activity->clientModel->name }}</span>
                </li>
                <li class="mb-2">
                  <span class="h6">Email:</span>
                  <span>{{ $activity->clientModel->email }}</span>
                </li>
               
              
                <li class="mb-2">
                  <span class="h6">Contact:</span>
                  <span>{{ $activity->clientModel->phone_number }}</span>
                </li>
                <li class="mb-2">
                  <span class="h6">Address:</span>
                  <span>{{ $activity->clientModel->address }}</span>
                </li>
                <li class="mb-2">
                  <span class="h6">Created At:</span>
                  <span>{{ $activity->clientModel->created_at }}</span>
                </li>
              </ul>
           
            </div>
          </div>
        </div>
  </div>
  <div class="col-md-8">
      <div class="card mb-6">
          <h5 class="card-header">Project Info</h5>
          <div class="card-body">
            <div class="row">
              <div class="col-md-12">
                <div class="mb-4">
                  <h6 class="mb-1">{{ $activity->title }}</h6>
                  <p>{{ $activity->description }}</p>
                  @php
    $cleanText = strip_tags($activity->proposalModel->essential_modules, '<p>');
    preg_match_all('/<p[^>]*>(.*?)<\/p>/i', $cleanText, $matches);
    $paragraphs = array_filter(array_map('trim', $matches[1]));
    $commaSeparated = implode(', ', $paragraphs);
@endphp

<p>{{ $commaSeparated }}</p>
                </div>
              </div>
              <div class="col-xl-6 order-1 order-xl-0">
               
                <div class="mb-4">
                  <h6 class="mb-1">Start Date <span class="badge bg-label-success rounded-pill">{{ date('d M Y', strtotime($activity->start_date)) }}</span></h6>
       
                </div>
                <div class="mb-4">
                  <h6 class="mb-1"><span class="me-1">Deadline</span> <span class="badge bg-label-danger rounded-pill">{{ date('d M Y', strtotime($activity->deadline)) }}</span></h6>
                 
                </div>
            
               {{--  <div class="mb-6">
                  <h6 class="mb-1">Total Hours</h6>
                  <p>{{ $activity->hours }} Hrs</p>
                </div> --}}
              </div>
          
              
          
            </div>
          </div>
        </div>
        {{-- percentage --}}
  
       
        {{-- end --}}
  </div>
</div>
{{-- /END NEW DESIGN --}}




                      
               
          </div>

          <!-- Footer with Close Button -->
          <div class="modal-footer d-flex justify-content-between">
              <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">
                  <i class="bi bi-x-circle"></i> Close
              </button>
          </div>
      </div>
  </div>
</div>
<!-- Modal -->

<div class="modal fade" id="addModules_{{ $activity->id }}" tabindex="-1" aria-labelledby="addModulesLabel_{{ $activity->id }}" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addModulesLabel_{{ $activity->id }}">Add Modules - {{ $activity->title }}</h5>
        
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <h6>Project Total Hours : <span id="projectTotalHours_{{ $activity->id }}">{{ $activity->hours }}</span></h6>
        <!-- Form for AJAX Submission -->
        <form id="addModuleForm_{{ $activity->id }}">
          @csrf
          <input type="hidden" id="activity_id_{{ $activity->id }}" name="activity_id" value="{{ $activity->id }}">

          <!-- Module Name Field -->
          <div class="row">
            <div class="mb-3 position-relative activitylog col-md-8">
              <label for="moduleName_{{ $activity->id }}" class="form-label">Module Name</label>
              <input type="text" class="form-control" id="moduleName_{{ $activity->id }}" name="module_name" required>
            </div>
  
            <!-- Hours Field -->
            <div class="mb-3 col-md-2">
              <label for="moduleHours_{{ $activity->id }}" class="form-label">Hours</label>
              <input type="number" class="form-control" id="moduleHours_{{ $activity->id }}" name="module_hours" min="0" step="0.5" required>
            </div>
            <!-- Save Button (Now placed after both fields) -->
          <div class="text-end col-md-2 mt-4">
            <button type="button" class="btn btn-success" id="saveModule_{{ $activity->id }}">
              <i class="mdi mdi-content-save-check-outline"></i> Save
            </button>
          </div>
  
          </div>
         
        </form>

        <!-- Area to show the added modules -->
        <div id="addedModules_{{ $activity->id }}" class="mt-3"></div>

        <!-- Remaining hours area -->
        <div id="remainingHours_{{ $activity->id }}" class="mt-3 alert alert-warning">
          <span>Remaining Hours: <span id="remainingHoursValue_{{ $activity->id }}">{{ $activity->hours }}</span></span>
        </div>

    {{--     <div class="alert alert-secondary" role="alert">
          This is a secondary alert — check it out!
        </div> --}}



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

<style>
  .activitylog .mdi:before{font-size: 22px!important;}
  .activitylog .mdi{padding-bottom: 35px;}
  .confirmation-text .mdi:before{font-size: 22px!important;}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
  $(document).ready(function() {
    var totalHours = parseFloat($('#projectTotalHours_{{ $activity->id }}').text());

    // Function to update remaining hours
    function updateRemainingHours() {
      var totalAddedHours = 0;

      // Sum up all the module hours
      $('#addedModules_{{ $activity->id }} table tbody .module-hours').each(function() {
        totalAddedHours += parseFloat($(this).text());
      });

      var remainingHours = totalHours - totalAddedHours;
      $('#remainingHoursValue_{{ $activity->id }}').text(remainingHours.toFixed(2));
    }

    // Open modal and fetch existing modules for the given activity_id
    $('#addModules_{{ $activity->id }}').on('shown.bs.modal', function() {
      var activityId = $('#activity_id_{{ $activity->id }}').val();

      // Fetch existing modules for the activity_id
      $.ajax({
        url: '{{ route("modules.fetch", ":activity_id") }}'.replace(':activity_id', activityId),
        method: 'GET',
        success: function(response) {
          if (response.modules.length > 0) {
            // Clear existing modules list before prepending new ones
            $('#addedModules_{{ $activity->id }}').empty();

            // Create the table structure
            var moduleTable = `
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>Module Name</th>
                    <th>Hours</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
            `;

            // Append existing modules as table rows
            response.modules.forEach(function(module) {
              moduleTable += `
                <tr id="module_${module.id}">
                  <td><span class="module-name">${module.name}</span></td>
                  <td><span class="module-hours">${module.hours}</span></td>
                  <td>
                    <i class="mdi mdi-pencil text-primary module-actions editModule" data-module-id="${module.id}"></i>
                    <i class="mdi mdi-delete text-danger module-actions deleteModule" data-module-id="${module.id}"></i>
                  </td>
                </tr>
              `;
            });

            // Close the table and tbody tags
            moduleTable += '</tbody></table>';

            // Append the module table to the container
            $('#addedModules_{{ $activity->id }}').html(moduleTable);
          } else {
            $('#addedModules_{{ $activity->id }}').html('<div class="alert alert-info" role="alert">No modules added yet.</div>');
          }

          // Update remaining hours
          updateRemainingHours();
        },
        error: function(xhr, status, error) {
          alert('Error fetching modules!');
        }
      });
    });

    // Handle the click event on the save button to add the module
    $('#saveModule_{{ $activity->id }}').on('click', function() {
      var moduleName = $('#moduleName_{{ $activity->id }}').val(); // Get module name
      var moduleHours = $('#moduleHours_{{ $activity->id }}').val(); // Get hours
      var activityId = $('#activity_id_{{ $activity->id }}').val(); // Get activity ID

      // Validate input fields
      if (moduleName.trim() !== '' && moduleHours.trim() !== '') {
        $.ajax({
          url: '{{ route("modules.modulestore") }}', // Correct route
          method: 'POST',
          data: {
            _token: $('input[name="_token"]').val(),
            module_name: moduleName,
            module_hours: moduleHours,
            activity_id: activityId
          },
          success: function(response) {
            if (response.success) {
              // Check if a table exists, otherwise create one
              if ($('#addedModules_{{ $activity->id }} table tbody').length === 0) {
                $('#addedModules_{{ $activity->id }}').html(`
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th>Module Name</th>
                        <th>Hours</th>
                        <th>Actions</th>
                      </tr>
                    </thead>
                    <tbody></tbody>
                  </table>
                `);
              }

              // Append the newly added module
              $('#addedModules_{{ $activity->id }} table tbody').prepend(`
                <tr id="module_${response.module.id}">
                  <td><span class="module-name">${response.module.name}</span></td>
                  <td><span class="module-hours">${response.module.hours}</span></td>
                  <td>
                    <i class="mdi mdi-pencil text-primary module-actions editModule" data-module-id="${response.module.id}" style="cursor: pointer;"></i>
                    <i class="mdi mdi-delete text-danger module-actions deleteModule" data-module-id="${response.module.id}" style="cursor: pointer;"></i>
                  </td>
                </tr>
              `);

              // Update the remaining hours after adding the new module
              updateRemainingHours();

              // Clear input fields after adding
              $('#moduleName_{{ $activity->id }}').val('');
              $('#moduleHours_{{ $activity->id }}').val('');
            } else {
              alert('Error adding module.');
            }
          },
          error: function(xhr, status, error) {
            alert('Something went wrong!');
          }
        });
      } else {
        alert('Please enter both module name and hours.');
      }
    });

    // Edit Module
    $(document).on('click', '.editModule', function() {
      var moduleId = $(this).data('module-id');
      var moduleRow = $(this).closest('tr');
      var moduleNameElement = moduleRow.find('.module-name');
      var moduleHoursElement = moduleRow.find('.module-hours');

      var currentName = moduleNameElement.text().trim();
      var currentHours = moduleHoursElement.text().trim();

      // Replace with input fields
      moduleNameElement.replaceWith(`<input type="text" class="form-control form-control-sm editModuleInput" value="${currentName}" data-module-id="${moduleId}" style="width: 100%;">`);
      moduleHoursElement.replaceWith(`<input type="number" class="form-control form-control-sm editModuleHoursInput" value="${currentHours}" data-module-id="${moduleId}" style="width: 70px;">`);

      // Change the pencil icon to a check icon for saving
      $(this).replaceWith(`<i class="mdi mdi-check-circle text-success saveModule" data-module-id="${moduleId}" style="cursor: pointer;"></i>`);
    });

    // Handle save event
    $(document).on('click', '.saveModule', function() {
      var moduleId = $(this).data('module-id');
      var moduleRow = $(this).closest('tr');
      
      var updatedName = moduleRow.find('.editModuleInput').val().trim();
      var updatedHours = moduleRow.find('.editModuleHoursInput').val().trim();
      
      if (updatedName === '' || updatedHours === '') {
          alert('Module name and hours cannot be empty.');
          return;
      }

      $.ajax({
          url: '{{ route("modules.update", ":module_id") }}'.replace(':module_id', moduleId),
          method: 'PUT',
          data: {
              _token: $('input[name="_token"]').val(),
              module_name: updatedName,
              module_hours: updatedHours
          },
          success: function(response) {
              if (response.success) {
                  moduleRow.find('.editModuleInput').replaceWith(`<span class="module-name">${updatedName}</span>`);
                  moduleRow.find('.editModuleHoursInput').replaceWith(`<span class="module-hours">${updatedHours}</span>`);
                  
                  // Change back to pencil icon
                  moduleRow.find('.saveModule').replaceWith(`<i class="mdi mdi-pencil text-primary module-actions editModule" data-module-id="${moduleId}" style="cursor: pointer;"></i>`);
                  updateRemainingHours(); // Update remaining hours after editing
              } else {
                  alert('Error updating module.');
              }
          },
          error: function() {
              alert('Something went wrong!');
          }
      });
    });

    // Delete Module - Show confirmation text instead of modal
    $(document).on('click', '.deleteModule', function() {
      var moduleId = $(this).data('module-id');
      var moduleElement = $(this).closest('tr');
      
      // Check if confirmation text already exists
      if (moduleElement.find('.confirmation-text').length === 0) {
        // Add confirmation text below the record
        var confirmationText = `
          <div class="confirmation-text alert alert-warning">
           Confirm? 
            <span class="confirmDelete mdi mdi-check alert-success" data-module-id="${moduleId}"></span>
            <span class="cancelDelete mdi mdi-close-circle-outline alert-danger"></span>
          </div>
        `;
        
        // Insert the confirmation text below the module item
        moduleElement.append(confirmationText);
      }
    });

    // Handle confirmation of delete action
    $(document).on('click', '.confirmDelete', function() {
      var moduleId = $(this).data('module-id');
      var moduleElement = $('#module_' + moduleId);

      $.ajax({
        url: '{{ route("modules.destroy", ":module_id") }}'.replace(':module_id', moduleId),
        method: 'DELETE',
        data: {
          _token: $('input[name="_token"]').val()
        },
        success: function(response) {
          if (response.success) {
            // Remove the module from the DOM
            moduleElement.remove();
            updateRemainingHours(); // Update remaining hours after delete
          } else {
            alert('Error deleting module.');
          }
        },
        error: function() {
          alert('Something went wrong!');
        }
      });

      // Remove the confirmation text after delete action
      moduleElement.find('.confirmation-text').remove();
    });

    // Handle canceling delete action
    $(document).on('click', '.cancelDelete', function() {
      var moduleElement = $(this).closest('tr');
      // Remove the confirmation text when canceling
      moduleElement.find('.confirmation-text').remove();
    });
  });
</script>

<!-- Delete Confirmation Modal -->
@endforeach

  
<script>
  document.getElementById('CourseSwitch').addEventListener('change', function () {
      let hideCompleted = this.checked;
      document.querySelectorAll('.activity-item').forEach(item => {
          let status = item.getAttribute('data-status');
          if (hideCompleted && status === '1') {
              item.style.display = 'none';
          } else {
              item.style.display = 'block';
          }
      });
  });
</script>
          </div>

        </div>
      </div>
      <!-- Add Task Modal -->

    

{{-- add Modules --}}




      
  
@endsection