@extends('user.layouts.master')


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

<div class="bd-example">
   <div class="row">
        <h2 class="card-title">Pending Task Lists</h2>
               <hr>
                @include('user.modals.taskSubmit')

    @foreach($tasksNotCompleted as $row)
        <div class="col-sm-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">{{$row->title}}</h5>
                    <p class="card-text">{{$row->description}}</p>
                                    <!--<img src="{{asset('storage/tasks/'.$row->image_link)}}" class="card-img-top" alt="Task Image">-->

                    <p class="card-text"><strong>Image Link:</strong> {{asset('storage/tasks/'.$row->image_link)}}</p>
<p class="card-text"><strong>Target Url:</strong> <a href="{{$row->target_url}}" target="_blank">{{$row->target_url}}</a></p>

                    <!--<p class="card-text"><strong>Target Url:</strong> {{$row->target_url}}</p>-->
                    <p class="card-text"><strong>Task Bonus:</strong> {{$row->task_bonus}}</p>
                    <p class="card-text"><strong>Task Deadline:</strong> {{$row->deadline}}</p>
                    <form method="POST" action="{{ route('user-task-submit') }}">
                        @csrf
                        <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                        <input type="hidden" name="task_id" value="{{$row->id}}">
                        <!--<a href="#" class="btn btn-primary" 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>-->
                        
                              <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>
                           
                    </form>
                </div>
            </div>
        </div>
    @endforeach
</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