@extends('admin.layouts.master')


@section('admin_content')
<style>
       .text-right{
           text-align: right;
       }
</style>

<div class="bd-example">
   <div class="row  row-cols-1 row-cols-md-1 g-4">
       <div class="col">
           <div class="card">
             @if(Session::has('success'))
                         <div class="alert alert-success d-flex align-items-center" role="alert">
              <svg class="bi flex-shrink-0 me-2" width="24" height="24">
                  <use xlink:href="#check-circle-fill" />
              </svg>
              <div>
              {{Session::get('success')}}
          </div>
      </div>
      @elseif(Session::has('package_updated'))
      <div class="alert alert-success d-flex align-items-center" role="alert">
   <svg class="bi flex-shrink-0 me-2" width="24" height="24">
   <use xlink:href="#check-circle-fill" />
   </svg>
   <div>
   {{Session::get('package_updated')}}
   </div>
   </div>
   @elseif(Session::has('reject'))
   <div class="alert alert-danger d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24">
<use xlink:href="#check-circle-fill" />
</svg>
<div>
{{Session::get('reject')}}
</div>
</div>
@endif
           <div class="card-body">
               <h2 class="card-title">Senior Submitted Task Lists</h2>
               <hr>

                        <h6>Pending Task: {{ $data['totalSubmittedTask'] }}</h6>

                <hr>
               <div class="bd-example table-responsive">
                @include('user.modals.taskSubmit')

                      <table class="table table-bordered table-border">
                          <thead>
                              <tr>
                                  <th scope="col">#</th>
                                  <th scope="col">User</th>

                                <th scope="col" width="80px">Task Link</th>
                                  <th scope="col">Task NAME</th>

                                  <!--<th scope="col">Description</th>-->
                                  <!--<th scope="col">Task Bonus</th>-->
                                  <th scope="col">Deadline</th>
                                  <th scope="col">Completed</th>

                                  <th scope="col">Status</th>

                                          {{-- <th scope="col">ACTION</th> --}}
                              </tr>
                          </thead>
                          <tbody>
                            @foreach($data['tasks'] as $row)
                              <tr>
                                 <!--<td >{{$loop->index+1}}</td>-->
                                 <td>{{$row->id}}</td>

                                 <td>{{$row->user->user_name}}</td>
                                 <!--<td>{{$row->sharing_link}}</td>-->
                                <td title="{{ $row->sharing_link }}"><a href="{{ $row->sharing_link }}" target="_blank">Task Link</a> </td>

<td class="hoverable-cell" title="{{$row->task->title}}" style="max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
    {{$row->task->title}}
</td>
                                 <!--<td>{{$row->task->description}}</td>-->
                                 <!--<td>{{$row->task->task_bonus}}</td>-->
                                 <td>{{$row->task->deadline}}</td>
                                 <td>{{$row->created_at}}</td>


                    <td>
                                             
                                       
                                       <!-- Your form fields go here -->
            {{-- <span class="label label-success">{{ $row->status }}</span> --}}

            @if ($row->status === 'Submitted')
            <form method="POST" action="{{ route('approve-task', ['task_id' => $row->id]) }}">
                @csrf
                <input type="hidden" name="task_id" value="{{ $row->id }}">
                <button type="submit" class="btn btn-success btn-sm"> <i class="bi bi-check-circle"></i> Approve</button>

                <!--<button type="submit" class="btn btn-primary float-right">Approve Task</button>-->
            </form>
        
            {{-- Include a form for rejecting the task --}}
            <form method="POST" action="{{ route('reject-task', ['task_id' => $row->id]) }}">
                @csrf
                <input type="hidden" name="task_id" value="{{ $row->id }}">
            <button type="submit"class="reject btn btn-danger btn-sm"> <i class="bi bi-x-circle"></i> Reject</button>
                <!--<button type="submit" class="btn btn-danger float-right ml-2">Reject Task</button>-->
            </form>
        @elseif ($row->status === 'Approved')
            <span class="badge badge-success ">Approved</span>
        @elseif ($row->status === 'Rejected')
            <span class="badge badge-danger ">Rejected</span>
        @endif
              

                    </td>
            {{-- <a class="btn btn-primary float-right" href="#" data-bs-toggle="modal" data-bs-target="#submitTask">Submit Task</a> --}}

                         
                                 </td>

                              </tr>
                           
                              @endforeach
                          </tbody>
                      </table>
                  </div>
           </div>
                        <div class="d-flex justify-content-center mt-3">
                        {{ $data['tasks']->links() }}
                     </div>
           </div>
       </div>
        
        

   </div>
</div>


<style>
    .hoverable-cell {
    position: relative;
    cursor: pointer;
}

.hoverable-cell:hover::before {
    content: attr(title);
    position: absolute;
    background: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    white-space: nowrap;
}

</style>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('submitButton').addEventListener('click', function() {
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, submit!',
                cancelButtonText: 'No, cancel!',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('submitForm').submit();
                }
            });
        });
    });
</script>

<script>
    // JavaScript to update the modal content
    $(document).ready(function() {
        $('#submitTask').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var taskid = button.data('bs-task-id'); // Extract task name
            var taskName = button.data('bs-task-name'); // Extract task name
            var taskDescription = button.data('bs-task-description'); // Extract task description

            // Update the modal's content
            var modal = $(this);
            modal.find('.modal-title').text(taskName);
            modal.find('#taskID').val(taskid);
            modal.find('#taskTitle').text(taskName);
            modal.find('#taskDescription').text(taskDescription);
        });
    });
</script>


@endpush


@endsection