@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">Available Task Lists</h2>
               <hr>
                @include('user.modals.taskSubmit')

        @if(Session::has('purchase_successful'))
            <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('purchase_successful')}}
            </div>
            </div>
             @elseif(Session::has('error'))
            <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('error')}}
            </div>
            </div>
            @endif

    @foreach($tasks as $row)
    @if(!in_array($row->id, $tasksSubmittedToday))
        <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>-->
                        <div class="mb-3">
                            <label for="taskDescription" class="form-label">Task Description:</label>
                            <div class="input-group">
                                <div id="taskDescription">{!! $row->description !!}</div>
                                <button class="btn btn-secondary" onclick="copyToClipboard('taskDescription')">Copy</button>
                            </div>
                        </div>
                                    <!--<img src="{{asset('storage/tasks/'.$row->image_link)}}" class="card-img-top" alt="Task Image">-->

                    <p class="card-text"><strong>Image Link:</strong> {{$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>-->
                        <!-- Check if task ID is in the user_task table -->
                   
                        <!--<button type="button" class="btn btn-primary float-right" disabled>Task Already Submitted</button>-->
         
                        <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>
         @endif
    @endforeach
</div>

</div>




@push('scripts')

<script src="//cdn.ckeditor.com/4.23.0-lts/standard/ckeditor.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.ckeditor').ckeditor();
    });
</script>

<script type="text/javascript">
    CKEDITOR.replace('wysiwyg-editor', {
        filebrowserUploadUrl: "{{route('ckeditor.image-upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'
    });
    
    CKEDITOR.replace('taskDescription', {
    entities: false,
    basicEntities: false
});
</script>


<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>
<script>
    document.querySelectorAll('.copy-btn').forEach((btn, index) => {
      btn.addEventListener('click', () => {
        const paragraphs = document.querySelectorAll('p');
        const text = paragraphs[index].innerText;

        navigator.clipboard.writeText(text)
          .then(() => {
            btn.innerText = 'Copied!';
            setTimeout(() => {
              btn.innerText = 'Copy';
            }, 1500);
          })
          .catch(err => {
            console.error('Unable to copy: ', err);
          });
      });
    });
  </script>




<script>
    function copyToClipboard(elementId) {
        /* Get the text content from the specified element */
        var textToCopy = document.getElementById(elementId).innerHTML;

        /* Create a temporary textarea to hold the text and select it */
        var tempTextArea = document.createElement("textarea");
        tempTextArea.value = textToCopy;
        document.body.appendChild(tempTextArea);
        tempTextArea.select();
        document.execCommand("copy");
        document.body.removeChild(tempTextArea);

        /* Provide some visual feedback to the user (optional) */
        alert("Text copied to clipboard!");
    }
</script>
@endpush


@endsection