{% extends "helpdesk/base.html" %}

{% load static i18n humanize %}

{% block helpdesk_title %}
  {{ ticket.queue.slug }}-{{ ticket.id }}: {% translate "View Ticket Details" %}
{% endblock helpdesk_title %}

{% block h1_title %}{{ ticket.ticket_for_url }}{% endblock h1_title %}

{% block helpdesk_breadcrumb %}
  <li class="breadcrumb-item"><a href="{% url 'helpdesk:list' %}">{% translate "Tickets" %}</a></li>
  <li class="breadcrumb-item active" aria-current="page">{{ ticket.queue.slug }}-{{ ticket.id }}</li>
{% endblock helpdesk_breadcrumb %}

{% block helpdesk_body %}
  {% if form.errors %}
    {{ form.errors }}
    {% include "helpdesk/include/alert_form_errors.html" %}
  {% endif %}
  {% if helpdesk_settings.HELPDESK_TRANSLATE_TICKET_COMMENTS %}
    <div id="google_translate_element"></div>
    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  {% endif %}
  {% include "helpdesk/ticket_desc_table.html" %}
  {% block helpdesk_ticket_panels %}{% endblock %}
  {% if ticket.merged_to %}
    <div class="card card-body bg-light">
      <h3 class="text-center">
        {% translate "This ticket has been merged into ticket" %}
        <a href="{{ ticket.merged_to.get_absolute_url }}">{{ ticket.merged_to }}</a>
      </h3>
    </div>
  {% else %}
    {% with respond_layout=request.user.usersettings_helpdesk.ticket_respond_layout|default:"tabs" %}
      {% if respond_layout != "top" and respond_layout != "bottom" %}
        {# Nav Tabs #}
        <div class="card">
          <div class="card-header bg-body-tertiary pb-0 d-flex align-items-center">
            <ul class="nav nav-underline" id="ticketTab" role="tablist">
              <li class="nav-item" role="presentation">
                <button class="nav-link active"
                        id="followup-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#followup-tab-pane"
                        type="button"
                        role="tab"
                        aria-controls="followup-tab-pane"
                        aria-selected="true">{% translate "Follow ups" %}</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link"
                        id="respond-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#respond-tab-pane"
                        type="button"
                        role="tab"
                        aria-controls="respond-tab-pane"
                        aria-selected="false">{% translate "Respond" %}</button>
              </li>
            </ul>
            {% if followups %}
              {% include "helpdesk/include/ticket_followup_sort_toggle.html" %}
            {% endif %}
          </div>
          <div class="card-body px-0">
            <div class="tab-content" id="myTabContent">
              {% if followups %}
                {# Followup Pane #}
                <div class="tab-pane fade show active"
                     id="followup-tab-pane"
                     role="tabpanel"
                     aria-labelledby="followup-tab"
                     tabindex="0">{% include "helpdesk/include/ticket_followup_list.html" %}</div>
              {% endif %}
              {# Respond Pane #}
              <div class="tab-pane fade"
                   id="respond-tab-pane"
                   role="tabpanel"
                   aria-labelledby="respond-tab"
                   tabindex="0">
                <div class="card border-0 mb-3">
                  <div class="card-body">{% include "helpdesk/include/ticket_respond_form.html" %}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      {% else %}
        {% if respond_layout == "top" %}
          {% include "helpdesk/include/ticket_respond_card.html" %}
        {% endif %}
        {% if followups %}
          <div class="card mb-3" id="followup-card">
            <div class="card-header bg-body-tertiary d-flex align-items-center">
              <h6 class="mb-0">{% translate "Follow ups" %}</h6>
              {% include "helpdesk/include/ticket_followup_sort_toggle.html" %}
            </div>
            <div class="card-body px-0 pb-0">{% include "helpdesk/include/ticket_followup_list.html" %}</div>
          </div>
        {% endif %}
        {% if respond_layout == "bottom" %}
          {% include "helpdesk/include/ticket_respond_card.html" %}
        {% endif %}
      {% endif %}
    {% endwith %}
    <div class="modal fade"
         id="createChecklistModal"
         tabindex="-1"
         role="dialog"
         aria-labelledby="exampleModalCenterTitle"
         aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <form method="post">
            {% csrf_token %}
            <div class="modal-header">
              <h5 class="modal-title">{% translate "Add a new checklist" %}</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button>
            </div>
            <div class="modal-body">
              <p>{% translate "You can select a template to generate a checklist with a predefined set of tasks." %}</p>
              <p>{% translate "Ignore it and only give a name to create an empty checklist." %}</p>
              {{ checklist_form }}
            </div>
            <div class="modal-footer">
              <a class="btn btn-secondary"
                 href="{% url 'helpdesk:checklist_templates' %}">{% translate "Manage templates" %}</a>
              <button type="submit" class="btn btn-primary">{% translate "Add" %}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  {% endif %}
{% endblock %}

{% block helpdesk_js %}
  {% if helpdesk_settings.HELPDESK_ENABLE_ATTACHMENTS %}
  {{ helpdesk_settings.HELPDESK_VALID_EXTENSIONS|json_script:"helpdesk-valid-extensions" }}
  {{ helpdesk_settings.HELPDESK_VALIDATE_ATTACHMENT_TYPES|json_script:"helpdesk-validate-attachment-types" }}
  {% endif %}
  <script language='javascript'>
    $(function() {
      $("#id_due_date").datepicker({
        dateFormat: 'yy-mm-dd'
      });
    });
  </script>

  <script language='javascript'>
    $(document).ready(function() {
      $('#id_preset').change(function() {
        preset = $('#id_preset').val();
        if (preset != '') {
          $.get("{% url 'helpdesk:raw' 'preset' %}?id=" + preset, function(data) {
            $("#commentBox").val(data)
          });
        }
      });

      // Preset name of checklist when a template is selected
      $('#id_checklist_template').on('change', function() {
        const nameField = $('#id_name')
        const selectedTemplate = $(this).children(':selected')
        if (nameField.val() === '' && selectedTemplate.val()) {
          nameField.val(selectedTemplate.text())
        }
      })

      $('.disabledTask').on('click', () => {
        alert('{% translate 'If you want to update state of checklist tasks, please do a Follow-Up response and click on "Update checklists"' %}')
      })


      $('#ticketTab button[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
        var $sortBtn = $('#followup-sort-toggle');
        if (e.target.id === 'followup-tab') {
          $sortBtn.removeClass('d-none');
        } else {
          $sortBtn.addClass('d-none');
        }
      });

      $('#followup-sort-toggle').on('click', function() {
        var $button = $(this);
        var $list = $('#followup-list');
        $list.children().get().reverse().forEach(function(item) {
          $list.append(item);
        });

        var newOrder = $button.data('order') === 'newest_first' ? 'oldest_first' : 'newest_first';
        var label = newOrder === 'newest_first' ? '{% translate "Newest first" %}' : '{% translate "Oldest first" %}';
        $button.data('order', newOrder);
        $('#followup-sort-toggle-label').text(label);
      });
      {% if helpdesk_settings.HELPDESK_ENABLE_ATTACHMENTS %}
      // lists for file input change events, then updates the associated text label
      // with the file name selected
      $('.add_file_fields_wrap').on('fileselect', ':file', function(event, numFiles, label, browseButtonNum) {});

      var x = 0;
      var wrapper = $(".add_file_fields_wrap"); //Fields wrapper
      var add_button = $(".add_file_field_button"); //Add button ID

      $(add_button).click(function(e) { //on add input button click
        x++;
        e.preventDefault();
        $(wrapper).append("<div class='mb-3'><input class='form-control' type='file' name='attachment' id='file" + x + "' multiple /></div>"); //add input box
      });

      var respondForm = document.getElementById('ticket-respond-form');
      var dropZone = document.getElementById('attachment-drop-zone');
      if (respondForm && dropZone) {
        var dragCounter = 0;

        function showDropHighlight() {
          respondForm.style.outline = '2px dashed #0d6efd';
          respondForm.style.outlineOffset = '4px';
          respondForm.style.backgroundColor = 'rgba(13, 110, 253, 0.05)';
          dropZone.style.borderColor = '#0d6efd';
        }

        function hideDropHighlight() {
          respondForm.style.outline = '';
          respondForm.style.outlineOffset = '';
          respondForm.style.backgroundColor = '';
          dropZone.style.borderColor = '';
        }

        var dropStatus = document.getElementById('attachment-drop-status');
        var validExtensions = JSON.parse(document.getElementById('helpdesk-valid-extensions').textContent)
          .map(function(ext) { return ext.toLowerCase(); });
        var validateAttachmentTypes = JSON.parse(document.getElementById('helpdesk-validate-attachment-types').textContent);
        var maxFetchedImageSize = 10 * 1024 * 1024;
        var imageExtensions = {
          'image/png': ['.png'],
          'image/jpeg': ['.jpg', '.jpeg'],
          'image/gif': ['.gif'],
          'image/webp': ['.webp'],
          'image/bmp': ['.bmp']
        };
        var dropMessages = {
          fetching: '{% filter escapejs %}{% translate "Fetching image…" %}{% endfilter %}',
          attached: '{% filter escapejs %}{% translate "Attached:" %}{% endfilter %}',
          unsupported: '{% filter escapejs %}{% translate "Unsupported file type:" %}{% endfilter %}',
          allowed: '{% filter escapejs %}{% translate "Allowed types:" %}{% endfilter %}',
          notImage: '{% filter escapejs %}{% translate "The dropped item is not a supported image." %}{% endfilter %}',
          tooLarge: '{% filter escapejs %}{% translate "The image is too large to attach." %}{% endfilter %}',
          noAddress: '{% filter escapejs %}{% translate "Couldn't determine the image's address. Save the image and drop the file here instead." %}{% endfilter %}',
          fetchFailed: '{% filter escapejs %}{% translate "Couldn't fetch this image, the site may not allow it. Right-click the image, choose Copy image and paste it here, or save it and drop the file here instead." %}{% endfilter %}'
        };

        function hasType(dataTransfer, type) {
          return Array.prototype.indexOf.call(dataTransfer.types, type) !== -1;
        }

        function setStatus(message, isError) {
          dropStatus.textContent = message;
          dropStatus.className = 'small mt-2 mb-0 ' + (isError ? 'text-danger' : 'text-muted');
          ensureAttachmentsVisible();
        }

        function ensureAttachmentsVisible() {
          var el = document.getElementById('collapseAttachments');
          if (el && !el.classList.contains('show')) {
            new bootstrap.Collapse(el, {show: true});
          }
        }

        function splitExtension(name) {
          var i = name.lastIndexOf('.');
          return i > 0 ? [name.slice(0, i), name.slice(i).toLowerCase()] : [name, ''];
        }

        function extensionAllowed(ext) {
          return !validateAttachmentTypes || ext === '' || validExtensions.indexOf(ext) !== -1;
        }

        function normalizeFile(file) {
          var parts = splitExtension(file.name);
          var candidates = imageExtensions[file.type] || [];
          if (extensionAllowed(parts[1]) && (parts[1] !== '' || !candidates.length)) return file;
          for (var i = 0; i < candidates.length; i++) {
            if (extensionAllowed(candidates[i])) {
              return new File([file], (parts[0] || 'image') + candidates[i], {type: file.type});
            }
          }
          return extensionAllowed(parts[1]) ? file : null;
        }

        function appendFileInput(files) {
          var dt = new DataTransfer();
          var attached = [];
          var rejected = [];
          for (var i = 0; i < files.length; i++) {
            var file = normalizeFile(files[i]);
            if (file) {
              dt.items.add(file);
              attached.push(file.name);
            } else {
              rejected.push(files[i].name);
            }
          }
          if (rejected.length) {
            setStatus(dropMessages.unsupported + ' ' + rejected.join(', ') + '. ' +
              dropMessages.allowed + ' ' + validExtensions.join(', '), true);
          } else if (attached.length) {
            setStatus(dropMessages.attached + ' ' + attached.join(', '), false);
          }
          if (!attached.length) return;
          x++;
          var input = document.createElement('input');
          input.className = 'form-control';
          input.type = 'file';
          input.name = 'attachment';
          input.id = 'file' + x;
          input.multiple = true;
          input.files = dt.files;
          var div = document.createElement('div');
          div.className = 'mb-3';
          div.appendChild(input);
          wrapper.append(div);
        }

        function looksLikeImageUrl(value) {
          try {
            return /\.(png|jpe?g|gif|webp|bmp)$/i.test(new URL(value).pathname);
          } catch (err) {
            return false;
          }
        }

        function extractImageUrl(dataTransfer) {
          var uris = dataTransfer.getData('text/uri-list').split(/\r?\n/).filter(function(line) {
            line = line.trim();
            return line && line.charAt(0) !== '#';
          }).map(function(line) { return line.trim(); });
          for (var i = 0; i < uris.length; i++) {
            if (looksLikeImageUrl(uris[i])) return uris[i];
          }
          var html = dataTransfer.getData('text/html');
          if (html) {
            var img = new DOMParser().parseFromString(html, 'text/html').querySelector('img[src]');
            if (img) return img.getAttribute('src');
          }
          var text = dataTransfer.getData('text/plain').trim();
          if (looksLikeImageUrl(text)) return text;
          return null;
        }

        function fetchAndAttachImage(src) {
          var url;
          try {
            url = new URL(src);
          } catch (err) {
            setStatus(dropMessages.noAddress, true);
            return;
          }
          if (['https:', 'http:', 'data:'].indexOf(url.protocol) === -1) {
            setStatus(dropMessages.notImage, true);
            return;
          }
          setStatus(dropMessages.fetching, false);
          fetch(url.href, {mode: 'cors', credentials: 'omit'})
            .then(function(resp) {
              if (!resp.ok) throw new Error(resp.status);
              return resp.blob();
            })
            .then(function(blob) {
              var type = blob.type.split(';')[0].trim().toLowerCase();
              if (!imageExtensions[type]) {
                setStatus(dropMessages.notImage, true);
                return;
              }
              if (blob.size > maxFetchedImageSize) {
                setStatus(dropMessages.tooLarge, true);
                return;
              }
              var name = 'image';
              if (url.protocol !== 'data:') {
                try {
                  name = decodeURIComponent(url.pathname.split('/').pop()) || name;
                } catch (err) {}
              }
              appendFileInput([new File([blob], name, {type: type})]);
            })
            .catch(function() {
              setStatus(dropMessages.fetchFailed, true);
            });
        }

        function isFileDrag(e) {
          return hasType(e.dataTransfer, 'Files');
        }

        function shouldHandleDrop(e) {
          return isFileDrag(e) || hasType(e.dataTransfer, 'text/uri-list');
        }

        respondForm.addEventListener('dragenter', function(e) {
          dragCounter++;
          if (!shouldHandleDrop(e)) return;
          e.preventDefault();
          ensureAttachmentsVisible();
          showDropHighlight();
        });

        respondForm.addEventListener('dragover', function(e) {
          if (shouldHandleDrop(e)) {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'copy';
          }
        });

        respondForm.addEventListener('dragleave', function() {
          if (--dragCounter <= 0) {
            dragCounter = 0;
            hideDropHighlight();
          }
        });

        respondForm.addEventListener('drop', function(e) {
          dragCounter = 0;
          hideDropHighlight();
          if (e.dataTransfer.files.length > 0) {
            e.preventDefault();
            appendFileInput(e.dataTransfer.files);
          } else if (shouldHandleDrop(e)) {
            var imageUrl = extractImageUrl(e.dataTransfer);
            if (imageUrl) {
              e.preventDefault();
              fetchAndAttachImage(imageUrl);
            }
          }
        });

        document.addEventListener('paste', function(e) {
          var clipboard = e.clipboardData;
          if (!clipboard || hasType(clipboard, 'text/plain')) return;
          var files = [];
          for (var i = 0; i < clipboard.items.length; i++) {
            if (clipboard.items[i].kind === 'file') files.push(clipboard.items[i].getAsFile());
          }
          if (!files.length) return;
          e.preventDefault();
          appendFileInput(files);
        });
      }
      {% endif %}
    });
    {% if helpdesk_settings.HELPDESK_ENABLE_ATTACHMENTS %}
    // this function listens for changes on any file input, and
    // emits the appropriate event to update the input's text.
    // Needed to have properly styled file input buttons! (this really shouldn't be this hard...)
    $(document).on('change', ':file', function() {
      var input = $(this),
        inputWidgetNum = $(this).attr('id').split("file")[1],
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
      input.trigger('fileselect', [numFiles, label, inputWidgetNum]);
    });
    {% endif %}
  </script>
{% endblock %}