@extends('user.layouts.master')


@section('user_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('package_added'))
                         <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_added')}}
          </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('package_deleted'))
   <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('package_deleted')}}
</div>
</div>
@endif
           <div class="card-body">
               <h2 class="card-title">Completed Task Lists</h2>
               <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">Task NAME</th>
                                  <th scope="col">Description</th>
                                <th scope="col">Image Link</th>
                                <th scope="col">Target Url</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->task->title}}</td>
                                 <td>{{$row->task->description}}</td>
                                <td>{{$row->task->image_link}}</td>
                                <td>{{$row->target_url}}</td>

                                 <td>{{$row->task->task_bonus}}</td>
                                 <td>{{$row->task->deadline}}</td>
                                 <td>{{$row->created_at}}</td>


                                 <td>
                                             
                                       <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                                       <input type="hidden" name="task_id" value="{{$row->id}}">
                                       <!-- Your form fields go here -->

            <span class="label label-success">{{ $row->status }}</span>

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

                                       {{-- <button type="submit" class="btn btn-primary">Submit</button> --}}
                         
                                 </td>

                              </tr>
                           
                              @endforeach
                          </tbody>
                      </table>
                  </div>
           </div>

           </div>
       </div>


   </div>
</div>




@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