 <div class="table-responsive">
     <table id="example" class="table table-bordered align-middle" style="width:100%">
         <thead class="table-light">
             <tr>
                 <th class="thbutton">Sl No</th>
                 <th>Task Title</th>
                 <th>Assign To</th>
                 {{-- <th>Accounts</th>
                <th>Projects</th>
                <th>Task Type</th> --}}
                 <th style="width: 12%">Work status</th>
                 <th style="width: 12%">Task priority</th>
                 {{-- <th class="thbutton">Add <i style="font-size: 15px; color: #007bff;" class="bi bi-chat-quote-fill"></i></i></th> --}}
                 {{-- <th width="10%">Is Default</th> --}}
                 <th class="thbutton">Status</th>
                 @if(in_array('task-edit', $authRolePermissions))
                 <th class="thbutton">Edit</th>
                 @endif
                 @if(in_array('task-delete', $authRolePermissions))
                 <th class="thbutton">Delete</th>
                 @endif
             </tr>
         </thead>
         <tbody>
             @php $i=1;@endphp
             @if (count($data) > 0)
                 @foreach ($data as $key => $list)
                     <tr>
                         <td class="text-center">{{ $data->firstItem() + $key }}</td>
                         <td style="white-space: initial;">
                             <strong>
                                 <a href="{{ route('task.show', $list->id) }}"> {{ ucfirst($list->title) }} </a>
                             </strong>{{ formatedDate($list->date) }}<br>{{ $list->details }}
                         </td>
                         <td><strong> {{$list->getUser->name ?? ''}} </strong>({{$list->getUser->email ?? ''}}) </td>
                         {{-- <td>
                            <select class="form-control taskStatusDropdown">
                                <option value="">-- Select --</option>
                                @foreach ($taskStatus as $option)
                                    <option value="{{ $option->id }}">{{ ucfirst($option->name) }}</option>
                                @endforeach
                            </select>
                        </td> --}}
                        <td>
                            <select class="form-control taskStatusDropdown" data-task-id="{{ $list->id }}">
                                <option value="">-- Select --</option>
                                @foreach ($taskStatus as $option)
                                    <option value="{{ $option->id }}" {{ $list->task_status_id == $option->id ? 'selected' : '' }}>
                                        {{ ucfirst($option->name) }}
                                    </option>
                                @endforeach
                            </select>
                        </td>
                         <td>
                             <select class="form-control taskPriorityDropdown" data-task-id="{{ $list->id }}">
                                <option value="">-- Select --</option>
                                @foreach ($taskPriority as $option)
                                    <option value="{{ $option->id }}" {{ $list->task_priority_id == $option->id ? 'selected' : '' }}>
                                        {{ ucfirst($option->name) }}
                                    </option>
                                @endforeach
                             </select>
                         </td>
                         {{-- <td style="text-align:center;"><i style="font-size: 20px; color: #007bff;  " class="bi bi-chat-square-dots-fill"></i></td> --}}
                         {{-- <td>
                            <div class="form-check form-check-inline{{$i}}">
                                <input class="form-check-input{{$i}} btn-lg changeStatusCustom" type="checkbox" id="inlineCheckbox{{$i}}" data-url="{{route('tasks.isdefault')}}" data-id="{{$list->id}}" data-status="{{$list->is_default=='0' ? '1' : '0'}}" {{ $list->is_default=='1' ? 'checked' : ''}}>
                            </div>
                        </td> --}}
                         <td>
                             <div class="form-check form-check-inline{{ $i }}">
                                 <input class="form-check-input{{ $i }} btn-lg changeStatusCustom" type="checkbox" id="inlineCheckbox{{ $i }}" data-url="{{ route('tasks.changestatus') }}" data-id="{{ $list->id }}" data-status="{{ $list->status == '0' ? '1' : '0' }}" {{ $list->status == '1' ? 'checked' : '' }}>
                             </div>
                         </td>
                         @if(in_array('task-edit', $authRolePermissions))
                         <td>
                             <button type="button" class="btn btn-warning edit" data-id="{!! $list->id !!}"
                                 id="edit" data-bs-toggle="modal" data-bs-target="#commonModal"><i
                                     class="bi bi-pencil-square text-white"></i></button>
                         </td>
                         @endif
                         @if(in_array('task-delete', $authRolePermissions))
                         <td>
                             <a data-url="{{ route('tasks.destroy', $list->id) }}" data-id="{{ $list->id }}"
                                 class="btn btn-danger deleteDataCustom" href="#" class="text-danger"
                                 data-bs-toggle="tooltip" data-bs-placement="bottom" title="Delete">
                                 <i class="bi bi-trash text-white"></i>
                             </a>
                         </td>
                         @endif
                     </tr>
                     @php $i++; @endphp
                 @endforeach
             @else
                 <tr>
                     <td colspan="13">No Data Found</td>
                 </tr>
             @endif
         </tbody>
     </table>
 </div>
 <nav class="float-start mt-2">
     <ul class="pagination">
         {!! $data->onEachSide(0)->render('tasks.pagination') !!}
     </ul>
 </nav>
 </div>
 <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

 <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
 <script>
     $(document).ready(function() {
        $('.taskStatusDropdown').on('change', function () {
            var selectedStatusId = $(this).val();
            var taskId = $(this).data('task-id');

            // Check if the selected value is empty
            if (selectedStatusId === "") {
                toastr.warning('Please select a status.', 'Warning!');
                return;
            }

            $.ajax({
                url: "{{ url('store-task-status') }}/" + taskId,
                method: 'POST',
                data: {
                    task_status_id: selectedStatusId,
                    _token: '{{ csrf_token() }}',
                },
                success: function(response) {
                    if (response.success === true) {
                        toastr.success(response.message, 'Success.');

                        // hide modal
                        $('#commonModal').modal('hide');
                        fetch_project_attachments();
                    } else {
                        toastr.error(response.message, 'Error!');
                    }
                }
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log('AJAX request failed:', textStatus, errorThrown);
                toastr.error('An error occurred during the request.', 'Error!');

                // hide modal
                $('#commonModal').modal('hide');
                $('#commonModal').find('.modal-body').html('');
            });
        });


        $('.taskPriorityDropdown').on('change', function () {
            var selectedPriorityId = $(this).val();
            var taskId = $(this).data('task-id');

            $.ajax({
                url: "{{ url('store-task-priority') }}/" + taskId, // Fix this line
                method: 'POST',
                data: {
                    status_id: selectedPriorityId,
                    _token: '{{ csrf_token() }}',
                },
                success: function(response) {
                         if (response.success === true) {
                             toastr.success(response.message, 'Success.');

                             // hide modal
                             $('#commonModal').modal('hide');
                             fetch_project_attachments();
                         } else {
                             toastr.error(response.message, 'Error!');
                         }
                     }
                 })
                 .fail(function(jqXHR, textStatus, errorThrown) {
                     console.log('AJAX request failed:', textStatus, errorThrown);
                     toastr.error('An error occurred during the request.', 'Error!');

                     // hide modal
                     $('#commonModal').modal('hide');
                     $('#commonModal').find('.modal-body').html('');
                 });

         });
     });
 </script>
