@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">Contract Signed - Staff Assignment & Work List</h5>
      <p class="mb-0">Total 6 works you have pending</p>

      <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#addTaskModal">
        Add Task
      </button>

    </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">
      @foreach($activities as $activity)
      <div class="col-sm-6 col-lg-3 mb-4">
        <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="#activityModal_{{ $activity->id }}">
              {{ $activity->title }}
            </a>

            <p class="mt-1 text-truncate">{{ $activity->description }}</p>
            <p class="mb-3"><span class="text-heading fw-medium">Task Progress: </span><span>%</span></p>
            <div class="progress rounded-pill mb-4" style="height: 8px">
              <div class="progress-bar" style="width: {{ $activity->progress }}%" role="progressbar"
                aria-valuenow="{{ $activity->progress }}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            {{-- assigned staff --}}
            <div class="d-flex align-items-center mb-4">

              <ul class="list-unstyled d-flex align-items-center avatar-group mb-0 z-2">
                @php
                // Get all assigned users for the activity in one query
                $assignedUsers = \App\Models\User::whereIn('id',
                \App\Models\ActivityLog::where('activity_id', $activity->id)->pluck('user_id')
                )->get();
                @endphp

                @foreach($assignedUsers as $user)
                <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="bottom"
                  class="avatar avatar-sm pull-up d-flex align-items-center justify-content-center"
                  aria-label="{{ $user->name }}" data-bs-original-title="{{ $user->name }}">

                  @if($user->profile_image)
                  <!-- Show User Profile Image -->
                  <img class="rounded-circle" src="{{ asset('storage/' . $user->profile_image) }}"
                    alt="{{ $user->name }}">
                  @else
                  <!-- Generate Labeled Avatar using Initials -->
                  <img class="rounded-circle" src="{{ asset('assets/img/avatars/2.png') }}" alt="Avatar">
                  @endif
                </li>
                @endforeach
              </ul>



            </div>

            {{-- /end --}}
            <div
              class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap  flex-lg-wrap flex-xxl-nowrap">
              <a class="w-100  btn-outline-secondary d-flex align-items-center waves-effect assign-staff-btn" href="#"
                data-bs-toggle="modal" data-bs-target="#assignStaffModal_{{ $activity->id }}"
                data-activity-id="{{ $activity->id }}">

                <i class="mdi mdi-account-multiple-plus-outline ri-16px align-middle me-2"></i><span class="me-2">Assign
                  Staff</span>
              </a>

              <a class="w-100 btn-outline-primary d-flex align-items-center waves-effect" href="#"
                data-bs-toggle="offcanvas" data-bs-target="#workflowOffcanvas_{{ $activity->id }}"
                aria-controls="workflowOffcanvas">
                <i class="mdi mdi-format-list-checkbox ri-16px lh-1 scaleX-n1-rtl me-2"></i> <span class="me-2">Activity
                  Log</span>
              </a>
            </div>

            {{-- 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">
              <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>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>Add Modules</span>
                </div>
              </a>

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

      <!-- Assign Staff Modal -->
      <div class="modal fade" id="assignStaffModal_{{ $activity->id }}" tabindex="-1"
        aria-labelledby="assignStaffModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="assignStaffModalLabel">Assign Staff to Activity - {{ $activity->title }}</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form action="{{ route('admin.assign-activity') }}" method="POST">
                @csrf
                <input type="hidden" id="activity_id" name="activity_id"> <!-- Hidden input to store activity ID -->

                <div class="form-floating form-floating-outline mb-4">
                  <!-- Check All checkbox -->
                  <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" id="checkAll" />
                    <label class="form-check-label" for="checkAll">Check All</label>
                  </div>

                  <div class="p-3">
                    @foreach($users as $user)
                    @php
                    $activityId = $activity->id;
                    $assignedUsers = \App\Models\ActivityLog::where('activity_id', $activityId)
                    ->pluck('user_id')
                    ->toArray();
                    @endphp
                    <div class="d-flex justify-content-start align-items-center user-name mb-4">
                      <input class="form-check-input me-2 user-checkbox" type="checkbox" name="user_id[]"
                        value="{{ $user->id }}" id="user_{{ $user->id }}" @if(in_array($user->id, $assignedUsers))
                      checked @endif> <!-- Check if the user is assigned -->

                      <label class="form-check-label" for="user_{{ $user->id }}">
                        <div class="d-flex justify-content-start align-items-center user-name">
                          <div class="avatar-wrapper">
                            <div class="avatar avatar-sm me-4">
                              @if($user->profile_image)
                              <!-- Show User Profile Image -->
                              <img class="rounded-circle" src="{{ asset('storage/' . $user->profile_image) }}"
                                alt="{{ $user->name }}">
                              @else
                              <!-- Generate Labeled Avatar using Initials -->
                              <img class="rounded-circle" src="{{ asset('assets/img/avatars/2.png') }}" alt="Avatar">
                              @endif
                            </div>
                          </div>
                          <div class="d-flex flex-column">
                            <a href="#" class="text-heading text-truncate">
                              <span class="fw-medium">{{ $user->name }}</span>
                            </a>
                            <small>{{ $user->email }}</small>
                          </div>
                        </div>
                      </label>
                    </div>
                    @endforeach

                  </div>
                </div>

                <div class="modal-footer mt-3">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary">Assign Staff</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

      <!-- Modal for Activity Details -->
      <div class="modal fade" id="activityModal_{{ $activity->id }}" tabindex="-1"
        aria-labelledby="activityModalLabel_{{ $activity->id }}" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="activityModalLabel_{{ $activity->id }}">{{ $activity->title }}</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <p><strong>Client:</strong> {{ $activity->clientModel->name }}</p>
              <p><strong>Description:</strong> {{ $activity->description }}</p>
              <p><strong>Start Date:</strong> {{ $activity->start_date }}</p>
              <p><strong>Deadline:</strong> {{ $activity->deadline }}</p>
              <p><strong>Duration:</strong> {{ $activity->duration }} minutes</p>
              <p><strong>Progress:</strong> {{ $activity->progress }}%</p>
              <p><strong>Created At:</strong> {{ $activity->created_at->format('d-M-Y H:i') }}</p>
              <p><strong>Assigned Employees:</strong></p>

              <ul class="list-unstyled d-flex align-items-center avatar-group mb-0 z-2">
                @php
                // Get all assigned users for the activity in one query
                $assignedUsers = \App\Models\User::whereIn('id',
                \App\Models\ActivityLog::where('activity_id', $activity->id)->pluck('user_id')
                )->get();
                @endphp

                @foreach($assignedUsers as $user)
                <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="bottom"
                  class="avatar avatar-sm pull-up d-flex align-items-center justify-content-center"
                  aria-label="{{ $user->name }}" data-bs-original-title="{{ $user->name }}">

                  @if($user->profile_image)
                  <!-- Show User Profile Image -->
                  <img class="rounded-circle" src="{{ asset('storage/' . $user->profile_image) }}"
                    alt="{{ $user->name }}">
                  @else
                  <!-- Generate Labeled Avatar using Initials -->
                  <img class="rounded-circle" src="{{ asset('assets/img/avatars/2.png') }}" alt="Avatar">
                  @endif
                </li>
                @endforeach
              </ul>
              <!-- Add more details here as needed -->
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

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

      {{-- 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="form-floating form-floating-outline mb-4">
          <input type="text" id="alt132" class="form-control" name="alt" placeholder="Enter your alt" value="">
          <label for="alt132">Alt</label>
        </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" 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">Start Date</label>
            </div>

            <!-- Deadline -->
            <div class="form-floating form-floating-outline mb-4">

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

            <!-- Hours -->
            <div class="form-floating form-floating-outline mb-4">

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

            <!-- Project Type -->
            <div class="form-floating form-floating-outline mb-4">

              <input type="text" class="form-control" name="project_type"
                value="{{ old('project_type', $activity->project_type) }}" required>
              <label for="project_type">Project Type</label>
            </div>

            <!-- Submit Button -->
            <button type="submit" class="btn btn-primary mt-3">Update Activity</button>
          </form>



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

      <!-- Offcanvas -->
      <div class="offcanvas offcanvas-end" tabindex="-1" id="workflowOffcanvas_{{ $activity->id }}"
        aria-labelledby="workflowOffcanvasLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="workflowOffcanvasLabel">Project Workflow {{ $activity->title }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <!-- Display the workflow here -->
          <div id="workflowContent">
            <ul class="timeline mb-0">
              <li class="timeline-item timeline-item-transparent">
                <span class="timeline-point timeline-point-primary"></span>
                <div class="timeline-event">
                  <div class="timeline-header mb-3">
                    <h6 class="mb-0">12 Invoices have been paid</h6>
                    <small class="text-muted">12 min ago</small>
                  </div>
                  <p class="mb-2">
                    Invoices have been paid to the company
                  </p>
                  <div class="d-flex align-items-center mb-1">
                    <div class="badge bg-lightest">
                      <img src="../../assets//img/icons/misc/pdf.png" alt="img" width="15" class="me-2">
                      <span class="h6 mb-0">invoices.pdf</span>
                    </div>
                  </div>
                </div>
              </li>
              <li class="timeline-item timeline-item-transparent">
                <span class="timeline-point timeline-point-success"></span>
                <div class="timeline-event">
                  <div class="timeline-header mb-3">
                    <h6 class="mb-0">Client Meeting</h6>
                    <small class="text-muted">45 min ago</small>
                  </div>
                  <p class="mb-2">
                    Project meeting with john @10:15am
                  </p>
                  <div class="d-flex justify-content-between flex-wrap gap-2">
                    <div class="d-flex flex-wrap align-items-center">
                      <div class="avatar avatar-sm me-2">
                        <img src="../../assets/img/avatars/1.png" alt="Avatar" class="rounded-circle">
                      </div>
                      <div>
                        <p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
                        <small>CEO of ThemeSelection</small>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="timeline-item timeline-item-transparent">
                <span class="timeline-point timeline-point-info"></span>
                <div class="timeline-event">
                  <div class="timeline-header mb-3">
                    <h6 class="mb-0">Create a new project for client</h6>
                    <small class="text-muted">2 Day Ago</small>
                  </div>
                  <p class="mb-2">
                    6 team members in a project
                  </p>
                  <ul class="list-group list-group-flush">
                    <li
                      class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
                      <div class="d-flex flex-wrap align-items-center">
                        <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
                          <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
                            class="avatar pull-up" aria-label="Vinnie Mostowy" data-bs-original-title="Vinnie Mostowy">
                            <img class="rounded-circle" src="../../assets/img/avatars/5.png" alt="Avatar">
                          </li>
                          <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
                            class="avatar pull-up" aria-label="Allen Rieske" data-bs-original-title="Allen Rieske">
                            <img class="rounded-circle" src="../../assets/img/avatars/12.png" alt="Avatar">
                          </li>
                          <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top"
                            class="avatar pull-up" aria-label="Julee Rossignol"
                            data-bs-original-title="Julee Rossignol">
                            <img class="rounded-circle" src="../../assets/img/avatars/6.png" alt="Avatar">
                          </li>
                          <li class="avatar">
                            <span class="avatar-initial rounded-circle pull-up text-heading" data-bs-toggle="tooltip"
                              data-bs-placement="bottom" data-bs-original-title="3 more">+3</span>
                          </li>
                        </ul>
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Activity Log Button -->
      <!-- Modal -->
      <!-- Trigger Button -->

      <!-- 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">
              <!-- Form for AJAX Submission -->
              <form id="addModuleForm_{{ $activity->id }}">
                @csrf
                <div class="mb-3 position-relative activitylog">
                  <input type="hidden" id="activity_id_{{ $activity->id }}" name="activity_id"
                    value="{{ $activity->id }}">
                  <label for="moduleName_{{ $activity->id }}" class="form-label">Module Name</label>
                  <input type="text" class="form-control pe-5" id="moduleName_{{ $activity->id }}" name="module_name"
                    required>
                  <!-- Icon inside input field to save the module -->
                  <i class="mdi mdi-content-save-check-outline text-success position-absolute top-25 end-0 translate-middle-y pe-3"
                    id="checkIcon_{{ $activity->id }}" style="cursor: pointer;"></i>
                </div>
              </form>

              <!-- Area to show the added modules -->
              <div id="addedModules_{{ $activity->id }}"></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>
      {{-- end modules --}}
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

      <script>
        $(document).ready(function () {
          // 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 an unordered list
                  var moduleList = '<ul class="list-unstyled">';  // list-unstyled to remove the default list styling

                  // Append existing modules as list items with the icon
                  response.modules.forEach(function (module) {
                    moduleList += `
                <li class="d-flex align-items-center mb-3" id="module_${module.id}">
                  <span class="mdi mdi-chevron-right pe-2"></span> <span class="module-name">${module.name}</span>
                  <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>
                </li>
              `;
                  });

                  // Close the unordered list tag
                  moduleList += '</ul>';

                  // Append the module list to the container
                  $('#addedModules_{{ $activity->id }}').html(moduleList);
                } else {
                  $('#addedModules_{{ $activity->id }}').html('<div class="alert alert-info" role="alert">No modules added yet.</div>');
                }
              },
              error: function (xhr, status, error) {
                alert('Error fetching modules!');
              }
            });
          });

          // Handle the click event on the icon to save the module
          $('#checkIcon_{{ $activity->id }}').on('click', function () {
            var moduleName = $('#moduleName_{{ $activity->id }}').val(); // Get the input field value
            var activityId = $('#activity_id_{{ $activity->id }}').val(); // Get the activity ID

            // Check if the input field is not empty
            if (moduleName.trim() !== '') {
              $.ajax({
                url: '{{ route("modules.modulestore") }}', // Correct route
                method: 'POST',
                data: {
                  _token: $('input[name="_token"]').val(),
                  module_name: moduleName,
                  activity_id: activityId // Include activity_id in the AJAX request
                },
                success: function (response) {
                  if (response.success) {
                    // Prepend the newly added module as a list item in the unordered list with the icon
                    $('#addedModules_{{ $activity->id }}').prepend(`
                <ul class="list-unstyled">
                  <li class="d-flex align-items-center mb-3" id="module_${response.module.id}">
                    <span class="mdi mdi-chevron-right pe-2"></span> <span class="module-name">${response.module.name}</span>
                    <i class="mdi mdi-pencil text-primary module-actions editModule" data-module-id="${response.module.id}"></i>
                    <i class="mdi mdi-delete text-danger module-actions deleteModule" data-module-id="${response.module.id}"></i>
                  </li>
                </ul>
              `);

                    // Optionally, clear the input field after adding
                    $('#moduleName_{{ $activity->id }}').val('');
                  } else {
                    alert('Error adding module.');
                  }
                },
                error: function (xhr, status, error) {
                  alert('Something went wrong!');
                }
              });
            } else {
              alert('Please enter a module name.');
            }
          });

          // Edit Module
          $(document).on('click', '.editModule', function () {
            var moduleId = $(this).data('module-id');
            var moduleNameElement = $(this).closest('li').find('.module-name');
            var currentName = moduleNameElement.text().trim();

            var inputField = `<input type="text" class="form-control form-control-sm editModuleInput" value="${currentName}" data-module-id="${moduleId}" style="width: 150px;">`;
            moduleNameElement.replaceWith(inputField);
          });

          // Save Edited Module
          $(document).on('blur', '.editModuleInput', function () {
            var moduleId = $(this).data('module-id');
            var updatedName = $(this).val().trim();
            var element = $(this);

            if (updatedName !== '') {
              $.ajax({
                url: '{{ route("modules.update", ":module_id") }}'.replace(':module_id', moduleId),
                method: 'POST',
                data: {
                  _token: $('input[name="_token"]').val(),
                  module_name: updatedName
                },
                success: function (response) {
                  if (response.success) {
                    element.replaceWith(`<span class="module-name">${updatedName}</span>`);
                  } else {
                    alert('Error updating module.');
                  }
                },
                error: function () {
                  alert('Something went wrong!');
                }
              });
            } else {
              alert('Module name cannot be empty.');
            }
          });

          // Delete Module
          // Delete Module - Show confirmation text instead of modal
          $(document).on('click', '.deleteModule', function () {
            var moduleId = $(this).data('module-id');
            var moduleElement = $(this).closest('li');

            // 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();
                } 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('li');
            // Remove the confirmation text when canceling
            moduleElement.find('.confirmation-text').remove();
          });
        });
      </script>

      <!-- Delete Confirmation Modal -->








      @endforeach
      <script>
        document.addEventListener("DOMContentLoaded", function () {
          // Select the "Check All" checkbox
          const checkAll = document.getElementById("checkAll");

          // Select all user checkboxes
          const userCheckboxes = document.querySelectorAll(".user-checkbox");

          // Add event listener for "Check All" checkbox
          checkAll.addEventListener("change", function () {
            // If "Check All" is checked, check all user checkboxes
            userCheckboxes.forEach(checkbox => {
              checkbox.checked = checkAll.checked;
            });
          });

          // Optionally, you can add functionality to uncheck "Check All" if any user checkbox is unchecked
          userCheckboxes.forEach(checkbox => {
            checkbox.addEventListener("change", function () {
              // If any checkbox is unchecked, uncheck "Check All"
              checkAll.checked = userCheckboxes.length === document.querySelectorAll(".user-checkbox:checked").length;
            });
          });

          // Set the activity ID for the modal
          document.querySelectorAll(".assign-staff-btn").forEach(button => {
            button.addEventListener("click", function () {
              let activityId = this.getAttribute("data-activity-id");
              document.getElementById("activity_id").value = activityId;
            });
          });
        });
      </script>


    </div>
    <nav aria-label="Page navigation" class="d-flex align-items-center justify-content-center">
      <ul class="pagination mb-0">
        <li class="page-item first">
          <a class="page-link waves-effect" href="javascript:void(0);"><i
              class="tf-icon ri-skip-back-mini-line ri-22px"></i></a>
        </li>
        <li class="page-item prev">
          <a class="page-link waves-effect" href="javascript:void(0);"><i
              class="tf-icon ri-arrow-left-s-line ri-22px"></i></a>
        </li>
        <li class="page-item active">
          <a class="page-link waves-effect" href="javascript:void(0);">1</a>
        </li>
        <li class="page-item">
          <a class="page-link waves-effect" href="javascript:void(0);">2</a>
        </li>
        <li class="page-item">
          <a class="page-link waves-effect" href="javascript:void(0);">3</a>
        </li>
        <li class="page-item">
          <a class="page-link waves-effect" href="javascript:void(0);">4</a>
        </li>
        <li class="page-item">
          <a class="page-link waves-effect" href="javascript:void(0);">5</a>
        </li>
        <li class="page-item next">
          <a class="page-link waves-effect" href="javascript:void(0);"><i
              class="tf-icon ri-arrow-right-s-line ri-22px"></i></a>
        </li>
        <li class="page-item last">
          <a class="page-link waves-effect" href="javascript:void(0);"><i
              class="tf-icon ri-skip-forward-mini-line ri-22px"></i></a>
        </li>
      </ul>
    </nav>
  </div>
</div>
<!-- Add Task Modal -->

<div class="modal fade" id="addTaskModal" tabindex="-1" aria-labelledby="addTaskModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addTaskModalLabel">Add New Activity</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="{{ route('admin.store-activity') }}" method="POST">
          @csrf
          <div class="form-floating form-floating-outline mb-4">
            <select name="client" id="client" class="form-control">
              @foreach($clients as $client)
              <option value="{{ $client->id }}">{{ $client->name }}</option>
              @endforeach
            </select>
            <label for="client">Client</label>
          </div>
          <div class="form-floating form-floating-outline mb-4 mt-2">
            <input type="text" id="title" name="title" class="form-control" required>
            @error('title')
            <div class="alert alert-danger">{{ $message }}</div>
            @enderror
            <label for="title">Activity Title</label>
          </div>
          <div class="form-floating form-floating-outline mb-4 mt-2">
            <textarea id="description" name="description" class="form-control" required></textarea>
            @error('description')
            <div class="alert alert-danger">{{ $message }}</div>
            @enderror
            <label for="description">Activity Description</label>
          </div>
          <div class="form-floating form-floating-outline mb-4 mt-2">
            <input type="date" id="start_date" name="start_date" class="form-control" required>
            @error('start_date')
            <div class="alert alert-danger">{{ $message }}</div>
            @enderror
            <label for="start_date">Start Date</label>
          </div>
          <div class="form-floating form-floating-outline mb-4 mt-2">
            <input type="date" id="deadline" name="deadline" class="form-control" required>
            @error('deadline')
            <div class="alert alert-danger">{{ $message }}</div>
            @enderror
            <label for="deadline">Deadline</label>
          </div>
          <div class="form-floating form-floating-outline mb-4 mt-2">
            <input type="text" id="hours" name="hours" class="form-control" required readonly>
            @error('hours')
            <div class="alert alert-danger">{{ $message }}</div>
            @enderror
            <label for="hours">All Hours</label>
          </div>
          <div class="form-floating form-floating-outline mb-4 mt-2">
            <input type="text" id="project_type" name="project_type" class="form-control" required>
            @error('project_type')
            <div class="alert alert-danger">{{ $message }}</div>
            @enderror
            <label for="project_type">Project Type</label>
          </div>
          <div class="modal-footer mt-3">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Create Activity</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  // Function to calculate the total hours (8 hours per day)
  function calculateHours() {
    const startDate = document.getElementById('start_date').value;
    const endDate = document.getElementById('deadline').value;

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

      // Calculate the difference in time
      const timeDiff = end.getTime() - start.getTime();
      // Convert time difference from milliseconds to days
      const totalDays = timeDiff / (1000 * 3600 * 24);

      // Calculate total hours (8 hours per day)
      const totalHours = totalDays * 8;

      // Set the total hours in the input field
      document.getElementById('hours').value = totalHours.toFixed(2); // Show 2 decimal points
    }
  }

  // Add event listeners to the date fields
  document.getElementById('start_date').addEventListener('change', calculateHours);
  document.getElementById('deadline').addEventListener('change', calculateHours);
</script>


{{-- add Modules --}}



@endsection