@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('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('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">Pending Task Lists</h2>
               <hr>
               <div class="bd-example table-responsive">
                @include('user.modals.taskSubmit')

                  <form method="POST" action="{{ route('user-task-submit') }}">
                     @csrf
                      <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">Task Deadline</th>
                                  <th scope="col">Actions</th>

                                          {{-- <th scope="col">ACTION</th> --}}
                              </tr>
                          </thead>
                          <tbody>
                            @foreach($tasksNotCompleted as $row)
                              <tr>
                                 <td >{{$loop->index+1}}</td>
                                 <td>{{$row->title}}</td>
                                 <td>{{$row->description}}</td>
                                <td>{{$row->image_link}}</td>
                                <td>{{$row->target_url}}</td>

                                 <td>{{$row->task_bonus}}</td>
                                 <td>{{$row->deadline}}</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 -->

        <a class="btn btn-primary float-right" href="#"
               data-bs-toggle="modal"
               data-bs-target="#submitTask"
               data-bs-task-id="{{ $row->id }}"
               data-bs-task-name="{{ $row->title }}"
               data-bs-task-description="{{ $row->description }}">Submit Task</a>
        </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> --}}
                                   </form>                                 
                                 </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