{% load static %}
<!--  -->
{% load humanize %}
<!--  -->
<!DOCTYPE html>
<html lang="en" class="js has-scroll-init has-scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="More than a Doc..." />
    <meta
      name="keywords"
      content="Task, ToDo list, list, todo, django todo, To-Do List"
    />
    <meta name="author" content="the_desiinger" />
    <link rel="icon" href="{% static 'images/aklik-icon.png' %}"/>
    <title>Update-and-Delete Task Page</title>

    <!-- Preload CSS -->
    <link
      rel="preload"
      as="style"
      href="{% static '/css/update_and_delete.css' %}"
    />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{% static '/css/reset.css' %}" />
    <link rel="stylesheet" href="{% static '/css/bootstrap.min.css' %}" />
    <link rel="stylesheet" href="{% static '/css/update_and_delete.css' %}" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"
    />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>

    <style>
      .ck.ck-content {
        height: 300px !important;
        width: 100% !important;
      }
      .ck.ck-content p {
        margin-top: 5px !important;
        margin-bottom: 0px !important;
      }
      .note_img img {
        width: 200px !important;
      }
      #lightbox {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.7);
          z-index: 9999;
      }
      #lightbox img {
          max-width: 80%;
          max-height: 80%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
      }
    </style>

    <script>
      document.documentElement.className = "js";
      var supportsCssVars = function () {
        var e,
          t = document.createElement("style");
        return (
          (t.innerHTML = "root: { --tmp-var: bold; }"),
          document.head.appendChild(t),
          (e = !!(
            window.CSS &&
            window.CSS.supports &&
            window.CSS.supports("font-weight", "var(--tmp-var)")
          )),
          t.parentNode.removeChild(t),
          e
        );
      };
      supportsCssVars() ||
        alert(
          "Please view this work in a modern browser that supports CSS Variables."
        );
    </script>
  </head>
  <body
    id="pageTop"
    class="page-content"
    data-spy="scroll"
    data-target="#mainNav"
  >
    <!--======================== Main-Section ================================-->
    <main>
      <!--=========================================== smooth-scroll-effect ===============================-->
      <div data-scroll class="page page--layout-2">
        <div class="content content--full content--alternate"></div>
        <!-- End content -->

        <!--=========================================== update-section ===============================-->
        <div id="update">
          <div class="container-fluid">
            <div class="update-intro">
              <h1><mark>EDIT TASK</mark></h1>

              <div id="update-card" class="d-flex justify-content-center">
                <div class="card">
                  <form action="" method="POST">
                    {% csrf_token %}
                    <div class="card-header">
                      <div class="row">
                        <div class="col-md-4 align-self-center">
                          <a href="{% url 'tasks' %}">
                            <img
                              id="return_img"
                              src="{% static 'images/return_link-img.png' %}"
                              class="img-fluid"
                              alt="return_img"
                            />
                          </a>
                        </div>
                        <!-- End col -->

                        <div class="col-md-8">
                          <input
                            type="submit"
                            id="save_btn"
                            name="UpdateForm"
                            class="button"
                            value="Update"
                          />
                        </div>
                        <!-- End col -->
                      </div>
                      <!-- End row -->
                    </div>
                    <!-- End card-header -->
                    <div class="card-body">
                      <h5 class="card-title">
                        {{task.title}} <span>for</span>
                        <mark>[{{task.account_owner}}]</mark>
                      </h5>
                      <!-- End card-title -->

                      <hr id="form_divider" />

                      <div class="row">
                        <div class="col-md-12">
                          <div class="row g-3">
                            <div class="col-md-12">
                              <label for="inputTitle" class="form-label"
                                >Title
                                <img
                                  id="label_icons"
                                  src="{% static 'images/label-icons/text-size.png'%}"
                                  alt="label_icons"
                              /></label>
                              {{form.title}}
                            </div>
                            <!-- End inputTitle-->

                            <div class="col-md-4">
                              <label for="inputTag" class="form-label"
                                >Tag
                                <img
                                  id="label_icons"
                                  src="{% static 'images/label-icons/price-tags.png'%}"
                                  alt="label_icons"
                              /></label>
                              {{form.tag}}
                            </div>
                            <!-- End inputTag-->

                            <div class="col-md-4">
                              <label for="inputStatus" class="form-label"
                                >Status
                                <img
                                  id="label_icons"
                                  src="{% static 'images/label-icons/status.png'%}"
                                  alt="label_icons"
                              /></label>
                              {{form.status}}
                            </div>
                            <!-- End inputStatus-->

                            <div class="col-md-4">
                              <label for="inputDueDate" class="form-label"
                                >Due Date
                                <img
                                  id="label_icons"
                                  src="{% static 'images/label-icons/date.png'%}"
                                  alt="label_icons"
                              /></label>
                              {{form.due_date}}
                            </div>
                            <!-- End inputDueDate-->

                            <center>
                              <hr id="form_divider" />
                            </center>

                            <div id="tabs">
                              <div class="tabset">
                                <!-- Tab 1 -->
                                <input
                                  type="radio"
                                  name="tabset"
                                  id="tab1"
                                  aria-controls="add_comment"
                                  checked
                                /><!-- End task_description input -->
                                <label for="tab1">Add a Comment</label>

                                <!-- Tab 2 -->
                                <input
                                  type="radio"
                                  name="tabset"
                                  id="tab2"
                                  aria-controls="task_description"
                                /><!-- End add_comment input -->
                                <label for="tab2">Task Description</label>
                                <!-- Tab 3 -->

                                <div class="tab-panels">
                                  <section id="add_comment" class="tab-panel">
                                    <hr id="comment_line" />

                                    <form action="" method="POST">
                                      {% csrf_token %}
                                      <div class="row">
                                        <div
                                          class="col-md-12 align-self-center"
                                          id="comment_input"
                                        >
                                          <input
                                            type="hidden"
                                            name="note"
                                            class="form-control form-control-sm"
                                            id="updateNote"
                                            placeholder="start writing about this task..."
                                          />
                                          <div id="lightbox">
                                            <img id="lightbox-image" src="" alt="Image">
                                          </div>
                                          <input type="file" id="imageInput" accept="image/*">
                                          <div id="editor"></div>
                                          <!-- <div id="image-post" contenteditable="true"></div> -->
                                        </div>
                                        <!-- End comment_input-->
                                        <div
                                          style="width: 100%; display: flex;justify-content: flex-end;margin-top: 10px"
                                        >
                                          <button 
                                            type="submit"
                                            name="submitNote"
                                            class="btn btn-sm btn-success"
                                            id="colFormLabelSm"
                                          >Comment</button>
                                        </div>
                                        <!-- End submit_btn-->
                                      </div>
                                      <!-- End comment_row-->
                                    </form>
                                    <!-- End form -->

                                    <!-------------------------------- display-note_msg -------------------------------->
                                    <div id="display-note_msg">
                                      <div class="card">
                                        <div class="card-body">
                                          {% for note in display_note %}

                                          <h5 class="sender_name">
                                          <label
                                            for="colFormLabelSm"
                                            class="col-sm-4 col-form-label col-form-label-sm"
                                            style="border-bottom: 1px solid;"
                                            ><img
                                              id="user_img"
                                              class="rounded-circle img-fluid"
                                              src="{{note.user.imageURL}}"
                                              alt="user_img"
                                              style="width: 25px;"
                                            />
                                            #{{note.user.username}} {{note.user.name}}
                                            </label>
                                            <span style="float: right"
                                              >{{note.updated_time_stamp|naturaltime}}</span
                                            >
                                          </h5>
                                          <p class="note_msg">
                                            <div class="note_img">{{note|safe}}</div>
                                            
                                              <img
                                                onclick="deleteNote('{{note.id}}', '{{task.id}}')"
                                                class="delete-usernote"
                                                data-note="{{note.id}}"
                                                data-task="{{task.id}}"
                                                id="delete_icon"
                                                src="{% static 'images/delete_icon.svg' %}"
                                                alt="delete_icon"
                                              />
                                          </p>
                                          <!-- End note_msg -->

                                          {% endfor %}
                                        </div>
                                        <!-- End card-body -->
                                      </div>
                                      <!-- End card -->
                                    </div>
                                    <!-------------------------------- End display-note_msg -------------------------------->

                                    <hr id="comment_line-two" />
                                  </section>
                                  <!-- End task_description -->

                                  <section
                                    id="task_description"
                                    class="tab-panel"
                                  >
                                    {{form.task_description}}
                                    <!-- End textarea-->
                                  </section>
                                  <!-- End add_comment -->
                                </div>
                                <!-- End tab-panel -->
                              </div>
                              <!-- End tabsets -->
                            </div>
                            <!-- End tabs -->

                            <center>
                              <input
                                type="submit"
                                id="mob_btn"
                                name="UpdateForm"
                                class="button"
                                value="Update Task"
                              />
                            </center>
                            <!--  -->
                          </div>
                          <!-- End div-->
                        </div>
                        <!-- End col -->
                      </div>
                      <!-- End row -->
                    </div>
                    <!-- End card-body -->

                    <div class="card-footer">
                      <p>
                        <span>[ {{task.status}} ]</span> - task

                        <a
                          href="#deleteModal"
                          data-bs-toggle="modal"
                          data-bs-target="#staticBackdrop"
                        >
                          <span>Delete Task</span>
                        </a>
                      </p>
                    </div>
                    <!-- End card-footer -->
                  </form>
                  <!-- End form-->
                </div>
                <!-- End card -->
              </div>
              <!-- End update-card -->
            </div>
            <!-- End update-intro-->
          </div>
          <!-- End container-fluid -->
        </div>
        <!-- End update -->

        <!--=========================================== delete-modal ===============================-->
        <div id="delete_modal">
          <div
            class="modal fade"
            id="staticBackdrop"
            data-bs-backdrop="static"
            data-bs-keyboard="false"
            tabindex="-1"
            aria-labelledby="staticBackdropLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="staticBackdropLabel">
                    Delete Task
                  </h5>
                  <div id="close_modal">
                    <img
                      id="close_svg"
                      src="{% static 'images/red_close.svg' %}"
                      class="img-fluid"
                      alt="close_svg"
                      data-bs-dismiss="modal"
                      aria-label="Close"
                    />
                  </div>
                  <!-- End close_modal -->
                </div>
                <!-- End modal-header -->
                <div class="modal-body">
                  <h6>
                    Are you sure you want to delete
                    <span>[ {{task.title}} ]</span> Task?
                  </h6>
                  <p>Note: This action can't be undone.</p>
                  <img
                    id="delete-modal_img"
                    src="{% static 'images/sad_boy.png' %}"
                    class="img-fluid d-flex mx-auto"
                    alt="delete-modal_img"
                  />
                  <!--  -->
                  <form action="" method="POST">
                    {% csrf_token %}
                    <center>
                      <button
                        type="button"
                        class="btn"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                      >
                        <span>Cancel, keep this task</span>
                      </button>

                      <input
                        type="submit"
                        class="button"
                        id="delete_btn"
                        value="Delete Task"
                      />
                    </center>
                    <!--  -->
                  </form>
                </div>
                <!-- End modal-body -->
              </div>
              <!-- End modal-content -->
            </div>
            <!-- End modal-dialog -->
          </div>
          <!-- End modal -->
        </div>
        <!-- End delete-modal -->
        <!--  -->
        <!--=========================================== page--layout ===============================-->
      </div>
      <!-- End page--layout -->
    </main>
    <!-- End Main-Section -->

    <!--=============================================== JavaScript ===================================-->
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js"></script>

    <!-- unpkg -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

    <!-- Custom Links -->
    <script src="{% static '/js/jquery-min.js' %}"></script>
    <script src="{% static '/js/bootstrap.min.js' %}"></script>
    <script
      scr="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
    ></script>
    <script
      scr="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
    ></script>
    <script src="{% static '/js/update_and_delete.js' %}"></script>
    <script>
      var editor;

      ClassicEditor
          .create(document.querySelector('#editor'), {
              toolbar: {
                  items: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote',]
              },
              language: 'en'
          })
          .then(newEditor => {
              // Store the editor instance
              editor = newEditor;
              
              editor.model.document.on('change', () => {
                  const updateNoteInput = document.getElementById('updateNote');
                  if (updateNoteInput) {
                      updateNoteInput.value = editor.getData();
                  }
              });
          })
          .catch(error => {
              console.error('Error initializing CKEditor:', error);
          });

      function addBase64Image(base64Image) {
          if (editor) {
              // If editor is initialized, add new base64 image to the existing content
              var currentContent = editor.getData();
              var newContent = currentContent + `<img src="${base64Image}" alt="Base64 Image">`;
              editor.setData(newContent);
          }
      }
    </script>
    <script>
      // Get references to elements
      const lightbox = document.getElementById('lightbox');
      const lightboxImage = document.getElementById('lightbox-image');
      const imageLinks = document.querySelectorAll('img[alt="Base64 Image"], img[src^="data:image/"]');

      // Attach click event listener to each image link
      imageLinks.forEach(function(link) {
          link.addEventListener('click', function(event) {
              event.preventDefault(); // Prevent default link behavior

              const imageUrl = this.src; // Get image URL
              lightboxImage.src = imageUrl; // Set lightbox image src
              lightbox.style.display = 'block'; // Display lightbox
          });
      });

      // Close lightbox when clicked outside the image
      lightbox.addEventListener('click', function() {
          lightbox.style.display = 'none';
      });
        
      document.getElementById('imageInput').addEventListener('change', function(event) {
      var files = event.target.files;
      if (files.length > 0 && files[0].type.startsWith('image/')) {
          var reader = new FileReader();
          reader.onload = function(e) {
              var base64Image = e.target.result;
              // Create a new image element
              addBase64Image(base64Image)
              var img = document.createElement('img');
              img.src = base64Image;
              // Append the image to the editor content
              document.getElementById('image-post').appendChild(img);
          };
          reader.readAsDataURL(files[0]);
      }
    });
    </script>
    <script>
      function deleteNote(note, task){
        var csrftoken = $("[name=csrfmiddlewaretoken]").val();
        $.ajax({
            type: 'POST',
            url: '/delete-usernote', 
            data: {
              'note': note,
              'task': task
            },
            headers: {
                'X-CSRFToken': csrftoken
            },
            success: function(response) {
                location.reload()
            },
            error: function(xhr, errmsg, err) {
                alert('Error: ' + xhr.status + ': ' + xhr.responseText);
            }
        });
      }
    </script>
  </body>
</html>
