{% 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" %}
  {% 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 %}
    {# 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 %}
          <button type="button"
                  id="followup-sort-toggle"
                  class="btn bg-light-subtle text-light-emphasis btn-sm ms-auto"
                  data-order="{% if helpdesk_settings.HELPDESK_FOLLOWUP_NEWEST_FIRST %}newest_first{% else %}oldest_first{% endif %}">
            <i class="fa-solid fa-arrow-down-short-wide me-1"></i>
            <span id="followup-sort-toggle-label">
              {% if helpdesk_settings.HELPDESK_FOLLOWUP_NEWEST_FIRST %}
                {% translate "Newest first" %}
              {% else %}
                {% translate "Oldest first" %}
              {% endif %}
            </span>
          </button>
        {% endif %}
      </div>
      <div class="card-body px-0">
        <div class="tab-content" id="myTabContent">
          {% if followups %}
            {% load ticket_to_link followup_permissions %}

            {# Followup Pane #}
            <div class="tab-pane fade show active"
                 id="followup-tab-pane"
                 role="tabpanel"
                 aria-labelledby="followup-tab"
                 tabindex="0">
              <ul id="followup-list" class="list-group list-group-flush mb-3">
                {% for followup in followups %}
                  <li class="list-group-item list-group-item-action">
                    <div class="d-flex align-items-center">
                      {% if followup.direction == "outbound" %}
                        <span class="p-1 me-2 bg-success border border-2 border-success-subtle rounded-circle"></span>
                      {% elif followup.direction == "inbound" %}
                        <span class="p-1 me-2 bg-warning border border-2 border-warning-subtle rounded-circle"></span>
                      {% endif %}
                      <h6 class="mb-0">{{ followup.title|escape|num_to_link }}</h6>
                      <span class="text-body-secondary ms-auto">
                        {% if helpdesk_settings.HELPDESK_ENABLE_TIME_SPENT_ON_TICKET and followup.time_spent_formated %}
                          <i class="fa-regular fa-clock fa-sm"></i>
                          <small>{{ followup.time_spent_formated }} ·</small>
                        {% endif %}
                        {% if followup.direction == "internal" %}
                          <span class="badge bg-light-subtle text-light-emphasis">
                            <i class="fa-solid fa-lock fa-sm me-1"></i>{% translate "Private" %}
                          </span>
                        {% elif followup.direction == "outbound" %}
                          <span class="badge bg-success-subtle text-success-emphasis">
                            <i class="fa-solid fa-arrow-right fa-sm me-1"></i>{% translate "To submitter" %}
                          </span>
                        {% else %}
                          <span class="badge bg-warning-subtle text-warning-emphasis">
                            <i class="fa-solid fa-arrow-left fa-sm me-1"></i>{% translate "From submitter" %}
                          </span>
                        {% endif %}
                      </span>
                      {# Quick actions dropdown #}
                      {% if followup|can_edit_followup:request.user or followup|can_delete_followup:request.user %}
                        <div class="dropdown ms-2">
                          <a class="btn bg-body-tertiary btn-sm"
                             href="#"
                             role="button"
                             data-bs-toggle="dropdown"
                             aria-expanded="false">
                            <i class="fa-solid fa-ellipsis-vertical"></i>
                          </a>
                          <ul class="dropdown-menu">
                            {% if followup|can_edit_followup:request.user %}
                              <li>
                                <a href="{% url 'helpdesk:followup_edit' ticket.id followup.id %}"
                                   class="dropdown-item small">
                                  <i class="fa-regular fa-edit me-1"></i>
                                  {% translate "Edit" %}
                                </a>
                              </li>
                            {% endif %}
                            {% if followup|can_delete_followup:request.user %}
                              <li>
                                <a href="{% url 'helpdesk:followup_delete' ticket.id followup.id %}"
                                   class="dropdown-item link-danger text-sm">
                                  <i class="fa-regular fa-trash-can me-1"></i>
                                  {% translate "Delete" %}
                                </a>
                              </li>
                            {% endif %}
                          </ul>
                        </div>
                      {% endif %}
                    </div>
                    <small class="text-body-secondary">
                      {{ followup.date|naturaltime }} {% if followup.user %}· {{ followup.user }}{% endif %}
                    </small>
                    {% if followup.email_recipients is not None %}
                      <small class="text-body-secondary d-block">
                        <i class="fa-regular fa-envelope fa-sm me-1"></i>
                        {% if followup.email_recipients %}
                          {% blocktranslate with recipients=followup.email_recipients|join:", " %}Emailed: {{ recipients }}{% endblocktranslate %}
                        {% else %}
                          {% translate "Emailed: no one" %}
                        {% endif %}
                      </small>
                    {% endif %}
                    {# Ticket comments #}
                    {% if followup.comment %}
                      <div class="mt-3">{{ followup.get_markdown|urlizetrunc:50|num_to_link }}</div>
                    {% endif %}
                    {# Changes to ticket #}
                    {% if followup.ticketchange_set.all %}
                      <ul class="mt-3">
                        {% for change in followup.ticketchange_set.all %}
                          <li class="small">
                            {% blocktranslate with change.field as field and change.old_value as old_value and change.new_value as new_value %}
                                Changed {{ field }} from {{ old_value }} to {{ new_value }}.
                        {% endblocktranslate %}
                          </li>
                        {% endfor %}
                      </ul>
                    {% endif %}
                    {# Attachments #}
                    {% if helpdesk_settings.HELPDESK_ENABLE_ATTACHMENTS and followup.followupattachment_set.all %}
                      <h6 class="mt-3">{% translate "Attachments" %}</h6>
                      <ul>
                        {% for attachment in followup.followupattachment_set.all %}
                          <li>
                            <a href="{{ attachment.file.url }}" target="_blank">{{ attachment.filename }}</a>
                            <small class="text-body-secondary">({{ attachment.mime_type }}, {{ attachment.size|filesizeformat }})</small>
                            {% if followup.user and request.user == followup.user %}
                              <a href="{% url 'helpdesk:attachment_del' ticket.id attachment.id %}"
                                 class="text-body-secondary">
                                <i class="fa-regular fa-trash-can fa-sm ms-2"></i>
                              </a>
                            {% endif %}
                          </li>
                        {% endfor %}
                      </ul>
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            </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">
                <form method="post" action="{% url 'helpdesk:update' ticket.id %}" enctype="multipart/form-data">
                  {% csrf_token %}
                  <div class="row">
                    <div class="col-12 col-md-8 col-lg-5">

                      {% if preset_replies %}
                        <div class="mb-3">
                          <label class="form-label"
                                 for="id_preset">{% translate "Use a Pre-set Reply (Optional)" %}</label>
                          <select class="form-select" name="preset" id="id_preset">
                            <option value=''>------</option>
                            {% for preset in preset_replies %}<option value="{{ preset.id }}">{{ preset.name }}</option>{% endfor %}
                          </select>
                          <span class="form-text">
                            {% translate "Selecting a pre-set reply will over-write your comment below. You can then modify the pre-set reply to your liking before saving this update." %}
                          </span>
                        </div>
                      {% endif %}
                      {# Comment text box #}
                      <div class="mb-3">
                        <label class="form-label" for="commentBox">{% translate "Comment / Resolution" %}</label>
                        <textarea class="form-control"
                                  rows="3"
                                  name="comment"
                                  id="commentBox">{{ xform.comment }}</textarea>
                        {% url "helpdesk:help_context" as context_help_url %}
                        {% blocktranslate %}
                      <p class="form-text">
                        You can insert ticket and queue details in your message. 
                        For more information, see the <a href="{{ context_help_url }}" target="_blank">context help page.</a>
                      </p>
                    {% endblocktranslate %}
                      </div>
                      {# Status radio buttons #}
                      <fieldset class="mb-3">
                        <span class="form-label">{% translate "New Status" %}</span>
                        {% for status_choice in ticket.get_allowed_status_flow %}
                          <div class="form-check">
                            <input class="form-check-input"
                                   type="radio"
                                   name="new_status"
                                   value="{{ status_choice.0 }}"
                                   id="st_{{ status_choice.1|lower }}"
                                   {% if not ticket.can_be_resolved %}disabled{% endif %}
                                   {% if ticket.status == status_choice.0 %}checked{% endif %} />
                            {# djlint:off #}
                        <label for="st_{{ status_choice.1|lower }}"
                               class="form-check-label radio-inline {% if ticket.status == status_choice.0 %}active {% endif %}">
                                {{ status_choice.1 }}
                        </label>
                        {# djlint: on #}
                          </div>
                        {% endfor %}
                        {% if not ticket.can_be_resolved %}
                          <div class="form-text">{% translate "This ticket cannot be resolved or closed until the tickets it depends on are resolved." %}</div>
                        {% endif %}
                      </fieldset>
                      {# Public update checkbox #}
                      {% if helpdesk_settings.HELPDESK_UPDATE_PUBLIC_DEFAULT %}
                        <input type="hidden" name="public" value="1" />
                      {% else %}
                        <div class="form-check form-switch mb-3">
                          <input class="form-check-input"
                                 type="checkbox"
                                 name="public"
                                 value="1"
                                 id="id_public"
                                 switch
                                 checked />
                          <label class="form-label"
                                 for="id_public">{% translate "Is this update public? (Optional)" %}</label>
                          <div class="form-text">{% translate "If this is public, the submitter will be e-mailed your comment or resolution." %}</div>
                        </div>
                      {% endif %}
                      {# Time spent widget #}
                      {% if helpdesk_settings.HELPDESK_ENABLE_TIME_SPENT_ON_TICKET and user.is_staff %}
                        <div class="mb-3">
                          <label class="form-label" for="id_time_spent">{% translate "Time spent (Optional)" %}</label>
                          <input class="form-control"
                                 name="time_spent"
                                 type="time"
                                 value="{% if form.errors %}{{ xform.time_spent }}{% endif %}" />
                        </div>
                      {% endif %}
                    </div>
                  </div>
                  {# Optional form content #}
                  {# Three toggle buttons #}
                  <div class="d-grid gap-2 d-md-block mb-3">
                    <a class="btn bg-body-tertiary border"
                       data-bs-toggle="collapse"
                       href="#collapseDetails"
                       role="button"
                       aria-expanded="false"
                       aria-controls="collapseDetails">{% translate "Update ticket details" %}</a>
                    {% if ticket.checklists.exists %}
                      <a class="btn bg-body-tertiary border"
                         data-bs-toggle="collapse"
                         href="#collapseChecklists"
                         role="button"
                         aria-expanded="false"
                         aria-controls="collapseChecklists">{% translate "Update checklists" %}</a>
                    {% endif %}
                    {% if helpdesk_settings.HELPDESK_ENABLE_ATTACHMENTS %}
                      <a class="btn bg-body-tertiary border"
                         data-bs-toggle="collapse"
                         href="#collapseAttachments"
                         role="button"
                         aria-expanded="false"
                         aria-controls="collapseAttachments">{% translate "Attach File(s)" %}</a>
                    {% endif %}
                  </div>
                  {# Extra Ticket Details form #}
                  <div class="collapse my-3" id="collapseDetails">
                    <div class="row">
                      <div class="col-12 col-lg-8">
                        <div class="card card-body border-0 bg-body-tertiary">
                          <div class="row g-3 mb-3">
                            <div class="col-12">
                              <label class="form-label" for="id_title">{% translate "Title" %}</label>
                              <input class="form-control" name="title" value="{{ ticket.title|escape }}" />
                            </div>
                            <div class="col-md-3">
                              <label class="form-label" for="id_owner">{% translate "Owner" %}</label>
                              <select class="form-select" id="id_owner" name="owner">
                                <option value="0">{% trans "Unassigned" %}</option>
                                {% for u in assignable_users %}
                                  <option value="{{ u.id }}"
                                          {% if u.id == ticket.assigned_to.id %}
                                            selected{% endif %}>{{ u }}</option>
                                {% endfor %}
                              </select>
                            </div>
                            <div class="col-md-3">
                              <label class="form-label" for="id_priority">{% translate "Priority" %}</label>
                              <select class="form-select" id="id_priority" name="priority">
                                {% for p in priorities %}
                                  {% if p.0 == ticket.priority %}
                                    <option value="{{ p.0 }}" selected="selected">{{ p.1 }}</option>
                                  {% else %}
                                    <option value="{{ p.0 }}">{{ p.1 }}</option>
                                  {% endif %}
                                {% endfor %}
                              </select>
                            </div>
                            {% if queues|length > 1 %}
                              <div class="col-md-3">
                                <label class="form-label" for="id_queue">{% translate "Queue" %}</label>
                                <select class="form-select" id="id_queue" name="queue">
                                  {% for queue_id, queue_name in queues %}
                                    <option value="{{ queue_id }}"
                                            {% if queue_id == ticket.queue.id %}
                                              selected{% endif %}>{{ queue_name }}</option>
                                  {% endfor %}
                                </select>
                              </div>
                            {% else %}
                              <input type="hidden" id="id_queue" name="queue" value="{{ ticket.queue.id }}" />
                            {% endif %}
                            <div class="col-md-3">
                              <label class="form-label" for="id_due_date">{% translate "Due on" %}</label>
                              {{ form.due_date }}
                            </div>
                            <div class="col-6">
                              {# ticket merge form #}
                              {{ customfields_form }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  {# Checklists #}
                  {% if ticket.checklists.exists %}
                    <div class="collapse" id="collapseChecklists">
                      <div class="row">
                        {% for checklist in ticket.checklists.all %}
                          <div class="col-12 col-md-4">
                            <div class="card border-0 mb-3">
                              <ul class="list-group">
                                <li class="list-group-item">
                                  <h6 class="mb-0">{{ checklist }}</h6>
                                </li>
                                {% for task in checklist.tasks.all %}
                                  <li class="list-group-item"
                                      {% if task.completion_date %}
                                        title="{% translate "Completed on" %} {{ task.completion_date }}"
                                      {% endif %}>
                                    <div class="form-check">
                                      <input class="form-check-input"
                                             type="checkbox"
                                             id="task-{{ task.id }}"
                                             name="checklist-{{ checklist.id }}"
                                             value="{{ task.id }}"
                                             {% if task.completion_date %}
                                               checked{% endif %} />
                                      <label class="form-check-label" for="task-{{ task.id }}">{{ task }}</label>
                                    </div>
                                  </li>
                                {% endfor %}
                              </ul>
                            </div>
                          </div>
                        {% endfor %}
                      </div>
                    </div>
                  {% endif %}
                  {# Attachments #}
                  {% if helpdesk_settings.HELPDESK_ENABLE_ATTACHMENTS %}
                    {% if form.errors.attachment %}<small class="error">{{ form.errors.attachment }}</small>{% endif %}
                    <div class="collapse mb-3" id="collapseAttachments">
                      <div class="row">
                        <div class="col-12 col-md-8 col-lg-5">
                          <div class="add_file_fields_wrap">
                            <div class="mb-3">
                              <label class="form-label" for="file0">{% translate "Browse..." %}</label>
                              <input class="form-control" type="file" name="attachment" id="file0" multiple />
                            </div>
                          </div>
                          <button class="add_file_field_button btn btn-link btn-sm"
                                  type="button">{% translate "Add Another File" %}</button>
                        </div>
                      </div>
                    </div>
                  {% endif %}
                  <button class="btn btn-success" type="submit">{% translate "Save" %}</button>
                </form>

              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <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 %}
  <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"' %}')
      })

      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
        new bootstrap.Tooltip(el);
      });

      $('#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
      });
      {% 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 %}