{% extends "minecraft_manager/dashboard.html" %}
{% load csrf_html %}
{% block title %}Ticket Info{% endblock %}
{% block section %}
<div id="content">
  <h2 class="sub-header">Ticket Info ({{ ticket.issuer }}) <span {% if ticket.resolved is True %}class="label label-success"{% else %}class="label label-danger"{% endif %}>{{ ticket.resolved_label }}</span></h2>
  <div class="row">
      <div class="col-xs-6 col-md-4">
          <p>Message: </p>
          <p class="well">{{ ticket.message }}</p>
          <p>Location: {{ ticket.location }}</p>
          <p>Sent In Date: {{ ticket.date }}</p>
      </div>
      <div class="col-xs-12 col-md-8">
          {% if ticket.resolved is False %}
              <form action="" method="post">{% autoescape off %}{% get_csrf_html request %}{% endautoescape %}
                <p>Claimed:
                    {% if user.is_staff %}
                        <select id="ticketStaff" name="staff">
                        <option value=""></option>
                            {% if form.active_staff %}
                                <optgroup label="Active">
                                {% for staff in form.active_staff %}
                                <option value="{{ staff.id }}" {% if staff == ticket.staff %}selected="selected"{% endif %}>{{ staff.username }}</option>
                                {% endfor %}
                                </optgroup>
                            {% endif %}
                            {% if form.inactive_staff %}
                                <optgroup label="Inactive">
                                {% for staff in form.inactive_staff %}
                                <option value="{{ staff.id }}" {% if staff == ticket.staff %}selected="selected"{% endif %}>{{ staff.username }}</option>
                                {% endfor %}
                                </optgroup>
                            {% endif %}
                        </select>
                    {% elif ticket.staff %}
                        {{ ticket.staff.username }}
                    {% else %}
                        <button type="submit" name="staff" value="{{ user.id}}">Claim</button>
                    {% endif %}
                </p>
                <p>Priority:
                    {% if user.is_staff or user == ticket.staff %}
                        <select id="ticketPriority" name="priority">
                            {% for p in form.priority %}
                                <option value="{{ p.0 }}" {% if ticket.priority == p.0 %}selected="selected"{% endif %}>{{ p.1 }}</option>
                            {% endfor %}
                        </select>
                    {% else %}
                        {{ ticket.priority_display }}
                    {% endif %}
                </p>
              {% if user.is_staff or ticket.staff and user == ticket.staff %}
              <button id="resolveButton" class="btn btn-primary" type="submit" name="resolved" value="1">Set as Resolved</button>
              <button id="saveButton" class="btn btn-primary" type="submit">Save</button>
              {% endif %}
              </form>
          {% else %}
              <p>Claimed: {{ ticket.staff.username }}</p>
              <p>Priority: {{ ticket.priority_display }}</p>
          {% endif %}
      </div>
  </div>
<hr/>
<div class="row">
    {% for note in form.notes %}
        <div class="col-xs-9 col-md-6">
            <h3>Note by {{ note.author.username }}</h3>
            <p>Message:</p>
            <p class="well">{{ note.message }}</p>
            {% if note.author == user %}
                <button id="editBtn" class="btn btn-primary" onClick="showNote();">Edit</button>
            {% endif %}
            <p>Created: {{ note.date }}</p>
            <p>Last Update: {{ note.last_update }}</p>
        </div>
    {% endfor %}
</div>
{% if not form.has_note and not form.show_note %}
    <div id="createDiv" class="row">
        <button class="btn btn-primary" onClick="showNote()">Create Note</button>
    </div>
{% endif %}
<div id="noteDiv" class="row" {% if not form.show_note %}style="display: none;"{% endif %}>
    <br/>
    <h3>Note</h3>
    <form action="" method="POST">{% autoescape off %}{% get_csrf_html request %}{% endautoescape %}
        {{ form.note_form }}
        <br/>
        <button type="submit" class="btn btn-primary" name="note" value="{% if form.has_note %}edit{% else %}create{% endif %}">Save</button>
    </form>
</div>

</div>
<script>
    $("#saveButton").hide();
    $("#ticketStaff").change(function() {
        var $priority = $("#ticketPriority");
        if ($(this).val() != "{{ ticket.staff.id }}" || $priority.val() != "{{ ticket.priority }}") {
            toggleSave(true);
        } else {
            toggleSave(false);
        }
    });
    $("#ticketPriority").change(function() {
        var $staff = $("#ticketStaff");
        if ($(this).val() != "{{ ticket.priority }}" || $staff.val() != "{{ ticket.staff.id }}") {
            toggleSave(true);
        } else {
            toggleSave(false);
        }
    });

    function toggleSave(toggle) {
        if (toggle == true) {
            $("#resolveButton").hide();
            $("#saveButton").show();
        } else if (toggle == false) {
            $("#resolveButton").show();
            $("#saveButton").hide();
        }
    }

    function showNote() {
        $("#noteDiv").show();
        $("#createDiv").hide();
        $("#editBtn").hide();
    }
</script>
{% endblock section %}